# Cubitts · Design system migration spec

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

> This site is an excellent example of modern editorial e-commerce, proving that a highly restrained palette can still feel premium and engaging.

## 1. Identity DNA

The Cubitts design system operates on the principle of the bespoke tailor: every element is cut to measure, prioritizing fit and material over ornament. This results in a visual language of precise, high-contrast minimalism where each component feels intentionally crafted. The system anchors itself in the heritage of British opticians, translating that precision into a digital context of clean geometry and restrained detail.

**One-liner:** A refined British eyewear brand that elevates frames to the status of crafted artifacts.
**Keywords:** craft · heritage · precision · British
**Analogy:** A bespoke tailor for eyewear, blending modern minimalism with traditional craftsmanship.

## 2. Color

Color is employed with the discipline of ink on paper, using a stark black (#0B0B0B) as the primary anchor against pure white (#FFFFFF) backgrounds. Warm grays like #F5F5F5 and #7A7575 provide subtle depth and hierarchy without breaking the near-monochrome discipline.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#0B0B0B` | body text |
| `--muted` | `#7A7575` | placeholder |
| `--line` | `rgba(11,11,11,0.15)` | divider |

**Color principle:** High-contrast minimalism where black ink anchors the space and warm grays provide subtle depth.

The principle is one of subtraction, where color is a tool for contrast and utility, never for decoration.

## 3. Typography

The typographic voice is set by **Fold Grotesque**, a geometric sans-serif used consistently for both display and body text. Headlines are set in sentence case, rejecting decorative serifs and excessive tracking in favor of a clean, modernist clarity that supports the brand's narrative of precision.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.1 | 400 | -0.5px | Headlines and main titles |
| body | 16px | 1.5 | 400 | 0px | Primary body text |
| caption | 12px | 1.3 | 400 | 0px | Fine print and legal details |

**Type rules:**
- Headlines use standard sentence case without excessive letter-spacing.
- Body text maintains a consistent 400 weight for readability.
- Small text is restricted to legal disclaimers and utility labels.

## 4. Spacing

Layout rhythm is established on a flexible 4px baseline grid, scaled through consistent 64px and 12px gutters to accommodate varying content densities.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A flexible 4px baseline grid adapted to 64px and 12px gutters for different layout densities.

## 5. Surfaces

Surfaces and depth are communicated with extreme subtlety, using a single, large-radius shadow for floating elements. Borders are hairline-thin, rendered in black or light gray to define interactive zones without adding visual weight.

- **Radius:** sm 4px · md 24px · lg 32px · pill 999px
- **Shadows:**
  - 0px 0px 30px 0px rgba(0, 0, 0, 0.15)
- **Borders:** Thin 1px solid borders in #0B0B0B or #D8D8D8 define inputs and interactive areas.

## 6. Layout

The layout skeleton is a clean 12-column grid that prioritizes generous whitespace and centered content blocks. This structure forces a deliberate, unhurried reading experience, allowing typography and product imagery to occupy clear, breathable space.

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

**Skeleton:** A clean 12-column grid that prioritizes generous whitespace and centered content blocks.

## 7. Motion & Interaction

Motion is functional and predictable, restricted to smooth opacity and background-color transitions for most interactive feedback. Larger structural shifts use transform-based animations, all within a standard 0.3s to 0.4s duration to maintain a sense of controlled, purposeful change.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth opacity and background-color transitions for interactive feedback.
  - Transform-based animations for larger structural shifts.

- **Hover:** Subtle background-color changes or color inversions on buttons.
- **Click:** Immediate visual feedback via background darkening or structural shifts.
- **Transition:** Standard 0.3s to 0.4s duration for most interactive state changes.
- **Keyboard:** Standard focus outlines using primary ink colors for accessibility.

## 8. Voice & Don'ts

The editorial voice is refined and confident, leaning into narrative storytelling about craft and heritage. It avoids casual slang and aggressive marketing jargon, instead using concise, direct headlines and clear action-oriented calls to action.

- **Tone:** Refined, confident, and informative, occasionally leaning into narrative storytelling.
- **Headline style:** Concise and direct, focusing on craftsmanship or specific brand stories.
- **CTA style:** Action-oriented and clear, often using standard verbs like 'Enter Now' or 'Allow all'.
- **Avoid:** Avoid overly casual slang or aggressive marketing jargon. / Avoid complex technical terminology unrelated to craft or optics.

### Don'ts
- ❌ Don't use overly decorative serifs — screenshot shows a dominant geometric sans-serif palette.
- ❌ Don't rely on heavy drop shadows — screenshot shows only very subtle, large-radius shadows for depth.
- ❌ Don't use a wide spectrum of vibrant colors — screenshot shows a near-monochrome palette with occasional product-derived accents.
- ❌ Don't clutter the layout with dense information blocks — screenshot shows significant whitespace around elements.
- ❌ Don't use sharp, square corners on primary interactive elements — screenshot shows consistent use of rounded or pill-shaped radii.
- ❌ Don't use all-caps for large display headlines — screenshot shows sentence case for main titles.

What the system deliberately avoids is as defining as what it contains: decorative serifs, heavy drop shadows, vibrant multi-color palettes, and sharp square corners on interactive elements are all excluded to preserve the curated, minimalist integrity.

## System Prompt (paste into AI tool)

```
This design system represents a refined British eyewear brand (Cubitts) that blends minimalism with heritage. The visual language is anchored by a high-contrast monochrome palette of #0B0B0B ink on #FFFFFF backgrounds, with #F5F5F5 for soft surfaces and #7A7575 for muted utility text. The primary typography is a geometric sans-serif (Fold Grotesque) used across both display and body text with a 400 weight. Layout relies on generous whitespace and a 12-column grid. Critical donts include: avoid decorative serifs, avoid vibrant multi-color palettes, and avoid sharp square corners on interactive components. The system emphasizes a premium, curated feel through restraint and precise spacing.
```