# Knickey · Design system migration spec

> Source: https://knickey.com  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful use of typography and photography to create a premium, yet approachable, sustainable brand identity.

## 1. Identity DNA

Knickey's design system is built as a quiet, curated catalog, one that deliberately yields the foreground to its product photography. This is a refined, photo-led interface where the architecture of the page serves the subject, not the other way around.

**One-liner:** A refined, photo-led e-commerce interface for inclusive underwear.
**Keywords:** underwear · inclusive · sustainable · simple · comfortable
**Analogy:** A quiet, curated catalog that lets the product photography breathe.

## 2. Color

The palette is drawn from earthy neutrals and soft greens, creating a calm, organic foundation. It avoids high-saturation accents in favor of muted tones that recede, allowing the photography to carry the emotional weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f4ee` | main background |
| `--ink` | `#241f20` | body text |
| `--muted` | `#8bba78` | placeholder |
| `--accent` | `#233735` | single accent |
| `--line` | `rgba(36,31,32,1.0)` | divider |

**Color principle:** Earthy neutrals and soft greens create a calm, organic palette.

The governing principle is restraint: color supports the narrative but never dominates the visual field.

## 3. Typography

Typographic voice is split between two distinct roles. A sharp **didone-serif** provides authoritative emphasis for hero numbers and headlines, while a **humanist-sans** with consistent wide letter-spacing handles all interactive and body copy.

- **Display:** didone-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.05 | 400 | -0.4px | Hero headlines like '15% Off' |
| headline | 32px | 1.2 | 400 | 0.4px | Brand wordmark 'SUBSET' |
| body | 17px | 1.5 | 400 | 0.4px | Form labels and instructional text |
| caption | 14px | 1.6 | 400 | 0.4px | Smaller supporting text |

**Type rules:**
- Use didone-serif for hero numbers and large emphasis.
- Use humanist-sans for all interactive elements and body text.
- Maintain consistent wide letter-spacing on sans-serif elements.

## 4. Spacing

Spacing follows a consistent rhythm of multiples of four and eight, creating a breathable and predictable layout grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent padding multiples of 4 and 8 create a breathable layout.

## 5. Surfaces

Depth is communicated through negative space, not ornament. The system avoids visible borders and heavy drop shadows, relying instead on spacing and background contrast to define modal boundaries and content hierarchy.

- **Radius:** sm 0px · md 4px · lg 0px · pill 999px
- **Borders:** No visible borders except for checkbox inputs; the modal relies on spacing and background contrast.

## 6. Layout

The core layout skeleton is a split composition, pairing full-bleed photography with a centered text column. This framework creates a balanced dialogue between visual storytelling and concise, direct copy.

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

**Skeleton:** Split layout with full-bleed photography flanking a centered text column.

## 7. Motion & Interaction

Motion philosophy favors elegant, ease-out transitions that impart a sense of refined quality. The system employs subtle fade-and-scale entrances for modal overlays and smooth transform transitions for interactive elements.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Fade and scale entrance for the modal overlay.
  - Subtle transform transitions for interactive elements.

- **Hover:** Subtle background color transition on buttons.
- **Click:** Modal dismissal via a small 'X' icon in the top right.
- **Transition:** 0.2s ease-in-out for color and background-color changes.
- **Keyboard:** Standard focus management for modal dismissal.

## 8. Voice & Don'ts

The editorial voice is confident, calm, and welcoming. It uses short, direct headlines and clear, uppercase calls to action, deliberately avoiding aggressive urgency or overly casual phrasing.

- **Tone:** Confident, calm, and welcoming.
- **Headline style:** Short, direct, and value-focused (e.g., 'You've Got 15% Off').
- **CTA style:** Clear, uppercase, action-oriented (e.g., 'CLAIM 15% OFF').
- **Avoid:** Aggressive or urgent language / Overly casual or slangy phrasing / Visual clutter or noisy backgrounds

### Don'ts
- ❌ Don't use heavy drop shadows — screenshot shows flat, borderless surfaces instead.
- ❌ Don't use bright, high-saturation accents — screenshot shows muted greens and dark teals instead.
- ❌ Don't use playful or rounded sans-serif fonts for display — screenshot shows a sharp didone-serif instead.
- ❌ Don't center-align long paragraphs — screenshot keeps the text column narrow and centered for short copy only.
- ❌ Don't add unnecessary borders to content cards — screenshot shows borderless imagery instead.
- ❌ Don't use dark mode or high-contrast themes — screenshot shows a light, creamy, off-white background instead.

What they don't do is as defining as what they do: there is no visual clutter, no high-contrast drama, and no typographic playfulness, all in service of a serene, focused experience.

## System Prompt (paste into AI tool)

```
This is a refined e-commerce interface for a sustainable underwear brand, characterized by a calm, earthy palette. Key colors include a creamy off-white background (#f5f4ee), dark ink text (#241f20), muted green accents (#8bba78), and a deep teal for primary buttons (#233735). Typography pairs a sharp didone-serif for large display text with a humanist-sans for all body and UI elements. The layout is spacious, often using a split composition with full-bleed photography flanking centered text. Key donts: Do not use bright, neon colors; avoid heavy borders or drop shadows; do not use playful, rounded fonts; avoid busy backgrounds; do not center-align long blocks of text; and avoid aggressive, urgent marketing language.
```