# Layers · Design system migration spec

> Source: https://layers.to  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of minimalist, gallery-focused design systems that prioritize content curation and clean visual hierarchy over decorative elements.

## 1. Identity DNA

Layers operates with the spatial logic of a gallery: architecture exists to frame the work, not to be the work itself. The system's identity is built on **design curation**—a platform where the interface recedes to let portfolios and layered assets occupy the foreground. Like well-considered gallery walls, every decision in this system serves the content it holds.

**One-liner:** A curated platform for designers to share and explore layered UI components and portfolios.
**Keywords:** design curation · layers · portfolio · community
**Analogy:** A digital gallery for UI/UX designers to showcase and discover layered design assets.

## 2. Color

The palette is a study in restraint—**strictly monochromatic**, with ink-black text anchored to a white ground. Grays (#64748B, #94A3B8) and a single border tone (#E5E7EB) create hierarchy without introducing color as a variable.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#64748B` | secondary text |
| `--muted` | `#94A3B8` | placeholder |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Minimalist, high-contrast black and white with subtle gray hierarchy for a clean, gallery-like experience.

The principle is gallery-white: the surface should be felt, not seen.

## 3. Typography

Typography follows a single family—**Inter**, a workhorse grotesque-sans—at a 16px base. The choice is utilitarian; one typeface with multiple weights handles everything from featured titles to metadata, keeping the typographic voice unified and unadorned.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.1 | 500 | -0.5px | Featured titles and large headings |
| body | 16px | 1.5 | 400 | 0px | Main content and descriptions |
| caption | 14px | 1.4 | 400 | 0px | Metadata and secondary information |

## 4. Spacing

Spacing follows a **4px base rhythm**, with increments at 8, 12, and 16px providing a consistent measure for gaps, padding, and component sizing across the grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px base with 8px, 12px, and 16px increments for spacing and gaps.

## 5. Surfaces

Depth is communicated through subtle inset borders and hairline shadows rather than elevation. A 1px solid border (#E5E7EB) delineates cards and containers, maintaining a flat, frontal plane that keeps visual weight on content.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset
  - rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset
- **Borders:** 1px solid rgb(229, 231, 235) for subtle separation and card borders.

## 6. Layout

The skeleton is a responsive three-column layout: a left sidebar for navigation, a central content area for the main gallery, and a right sidebar reserved for supplementary information like job listings. This structure is governed by a 12-column grid with 24px gutters and a 1280px max container width.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Responsive grid layout with a left sidebar, main content area, and right sidebar for jobs and ads.

## 7. Motion & Interaction

Motion is functional and brief—hover states transition at 0.15s, while modal overlays fade at 0.5s. All animations share a single easing curve: **cubic-bezier(0.4, 0, 0.2, 1)**, applied consistently to produce natural, professional movement without flourish.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on hover for interactive elements (0.15s)
  - Fade transitions for modal overlays (0.5s)

- **Hover:** Subtle background color change or border emphasis on interactive elements.
- **Click:** Standard pointer cursor on interactive elements.
- **Transition:** All transitions use cubic-bezier(0.4, 0, 0.2, 1) easing for smooth, natural movement.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is clean and professional, matching the visual tone. Headlines are concise and capitalized for tags, while CTAs use simple, action-oriented labels—language that directs without embellishment.

- **Tone:** Professional, clean, and focused on design community and curation.
- **Headline style:** Concise, capitalized for tags, bold for titles.
- **CTA style:** Simple, action-oriented buttons with clear labels.
- **Avoid:** Playful or informal language / Overly decorative elements / Cluttered layouts

### Don'ts
- ❌ Don't use complex gradients — screenshot shows clean, solid backgrounds with minimal color.
- ❌ Don't implement dark mode — screenshot shows exclusively light theme with white backgrounds.
- ❌ Don't use decorative serif fonts — screenshot shows consistent use of sans-serif typography.
- ❌ Don't add heavy drop shadows — screenshot shows subtle inset borders instead of prominent shadows.
- ❌ Don't use vibrant accent colors — screenshot maintains a strictly monochromatic palette with occasional brand colors in content.
- ❌ Don't create cluttered layouts — screenshot demonstrates generous white space and clear visual hierarchy.

The system deliberately omits dark mode, decorative serifs, complex gradients, and heavy drop shadows—each exclusion a conscious choice to preserve the gallery's focused clarity.

## System Prompt (paste into AI tool)

```
Layers.to is a curated design gallery platform for UI/UX designers. The visual system uses a minimalist black and white palette with #000000 ink on #FFFFFF background, supplemented by subtle gray hierarchy (#64748B, #94A3B8). Typography is exclusively grotesque-sans (Inter family) at 16px base with 400 weight. Layout follows a 12-column grid with 24px gutters and 1280px max container width. Critical donts: Never use dark mode (screenshot shows only light theme), avoid decorative serifs (only sans-serif used), and prevent heavy shadows (uses subtle inset borders instead). The interface prioritizes clean card-based layouts with 12px border-radius and minimal interactive states.
```
