---
version: alpha
name: Cubitts
description: A British spectacle-maker's site that treats eyewear as cultural artifact — Fold Grotesque set in restrained regular weight, a near-black ink canvas lit by crisp white fields, sparse editorial typography, and photography composed like museum prints.

colors:
  # Surface / canvas
  background: "#ffffff"         # dominant white page — all product and editorial content
  surface: "#f5f5f5"            # secondary bands, footer sections, input fills  /* estimated */
  surface-dark: "#0b0b0b"       # near-black — used for dark hero sections and footer ground

  # Ink / text
  ink: "#0b0b0b"                # primary text, headlines, nav links
  ink-secondary: "#7a7575"      # secondary copy, metadata, subdued labels (--color-grey-4 neighbor)
  ink-muted: "#a29e9e"          # captions, placeholder text — CSS var --color-grey-4

  # Brand accent — Cubitts uses restraint; black is the accent
  primary: "#0b0b0b"            # primary CTA fill, logo, interactive emphasis
  on-primary: "#ffffff"         # text on dark fills
  primary-container: "#302d2d"  # hover fills for dark buttons, secondary fills

  # Semantic
  success: "#05ac34"            # --color-success
  error: "#f40816"              # --color-error

  # Borders
  border: "#cecece"             # --color-black-20 — hairline dividers, input strokes
  border-muted: "#a29e9e"       # faint separators, secondary input borders  /* estimated */

  # Shadow tints (opaque approximations)
  shadow-soft: "#0b0b0b"        # was rgba(11,11,11,0.08) — ambient lift  /* estimated */

  # Focus
  focus-ring: "#0b0b0b"         # compound focus treatment on interactive elements  /* estimated */

typography:
  display-hero:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.3px
  heading-section:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-small:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0px
  nav-link:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.3px
  label-overline:
    fontFamily: "Fold Grotesque, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 475
    lineHeight: 1.0
    letterSpacing: 0.25px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: 1px solid {colors.ink}
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.background}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: 1px solid {colors.ink}

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 32px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-secondary}"
---

# Cubitts Design System

## Overview

Cubitts presents spectacle-making as a quiet cultural practice, and the site's design carries that premise faithfully. The page opens on an unadorned white canvas (`{colors.background}`) with a logo that whispers rather than shouts — an 86-wide wordmark in Fold Grotesque regular weight, no flourish, just the name. The editorial photographs — products arranged on fabric, a black-and-white portrait print, hands holding cloth — are composed with the stillness of a gallery display. Chrome recedes completely. There is no color accent fighting for attention; the ink itself, a near-black `{colors.ink}` (#0b0b0b), IS the brand color.

The typographic system is a single-typeface exercise in graduated weight restraint. **Fold Grotesque** — a refined geometric grotesque with subtle optical corrections — runs the entire hierarchy from display headline to 10px overline, always at weight 400. There are no bolds. There are no italics in the chrome. The hierarchy is communicated entirely through size and spacing, the way a considered broadsheet caption differs from its headline not by family or weight but simply by measure. The letterSpacing gently tightens at large sizes (−0.5px at 64px) and opens fractionally at small display sizes, maintaining Fold Grotesque's characteristic optical comfort across the scale.

Shapes are binary to the point of severity: zero radius on every interactive element and container (`{rounded.none}`), and nothing else. Not pill buttons, not 4px cards — just straight corners everywhere. This choice is less about minimalism as a style statement than about material honesty: spectacle frames are precision-machined objects with sharp corners. The site's geometry mirrors its product. The result is calm, considered, and slightly austere — the visual equivalent of a well-lit optician's consultation room on a quiet London street.

**Key Characteristics:**
- Single typeface across the entire system: **Fold Grotesque** at weight 400 — hierarchy through size alone, never through weight variation
- Near-black (`{colors.ink}`, #0b0b0b) as the de facto brand accent — ink IS the emphasis
- White (`{colors.background}`) as the only canvas; no tinted section alternation that isn't functionally required
- Square corners everywhere (`{rounded.none}`) — no rounded buttons, no radius on cards, no softened inputs
- Photography styled as archival prints — black-and-white portraiture and still-life product shots, composition-led
- Editorial four-column grid on desktop; sparse, with generous column whitespace between items
- Negative letter-spacing at display sizes (−0.5px at 64px), zero or fractional positive at text sizes
- Overline labels in 10px weight-475 (`{typography.label-overline}`) above product and section identifiers
- `{colors.ink-secondary}` (#7a7575) as the only gray step in the color vocabulary — used for captions and metadata
- Flat elevation model — no card shadows, no button shadows; separation through whitespace and hairline rules
- Motion at `0.3s ease` for transitions; cards and buttons use opacity transitions rather than fill changes
- Tailwind CSS arbitrary values (`top-[117px]`) with Headless UI components — tightly controlled

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The singular page ground. Products, editorials, and navigation all live here.
- **Light Gray** (`{colors.surface}`): Subtle secondary surface for footer tiers and input fills. Barely distinct from white.
- **Near-Black Surface** (`{colors.surface-dark}`): Footer and dark-mode hero variants. The site occasionally inverts to this ground with `{colors.on-primary}` white text.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Primary text and the de facto brand accent. At #0b0b0b, it reads cooler than charcoal and warmer than `#000000`.
- **Warm Gray** (`{colors.ink-secondary}`): Secondary copy, metadata, subdued navigation labels (#7a7575). A desaturated rose-gray, not a cool neutral.
- **Muted Gray** (`{colors.ink-muted}`): Captions and placeholder text. CSS variable `--color-grey-4` (#a29e9e).

### Brand / Interactive
- **Ink Black** (`{colors.primary}`): The primary CTA fill. Cubitts uses no saturated accent — the brand color is its own ink.
- **On-Primary** (`{colors.on-primary}`): White, used on dark button fills and footer text.
- **Hover Fill** (`{colors.primary-container}`): Slightly lighter dark fill (#302d2d) for button hover states — depth through subtle darkening.

### Semantic
- **Success** (`{colors.success}`): Form confirmations. CSS: `--color-success` (#05ac34).
- **Error** (`{colors.error}`): Validation errors. CSS: `--color-error` (#f40816).

### Borders & Shadows
- **Default Border** (`{colors.border}`): Hairline dividers. CSS: `--color-black-20` (#cecece).
- **Border Muted** (`{colors.border-muted}`): Secondary separators and lighter input strokes.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the ambient shadow tint (originally rgba — flattened for the spec).

## Typography

### Font Family
- **Primary (and only)**: `Fold Grotesque` — a geometric grotesque with subtle optical corrections. Self-hosted. Closest Google Font substitute: **DM Sans** (same low-contrast humanist grotesque register; not identical but closest available match). Fallback stack: `Helvetica Neue, Helvetica, Arial, sans-serif`.
- **OpenType**: weight 475 on the smallest overline labels (`{typography.label-overline}`) suggests a variable axis or fractional weight intermediate between regular (400) and medium (500). Treat as `font-weight: 475` with the custom font loaded; fall back to 500.
- **No second typeface**: the entire system runs in Fold Grotesque. There is no editorial serif, no monospace.

### Hierarchy

The full type scale is in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 64px / −0.5px — principal campaign headlines and hero statements |
| `display` | 40px / −0.3px — section openers, feature callouts |
| `heading-section` | 28px / −0.2px — in-page section headings |
| `heading-sub` | 20px / 0px — product headings, article subheads |
| `body` | 16px / 0px — standard reading copy, product descriptions |
| `body-small` | 14px / 0px — button labels, supporting copy, UI text |
| `nav-link` | 16px / 0px — navigation and inline links |
| `button-ui` | 14px / 0px — CTA and interactive control labels |
| `caption` | 12px / +0.3px — captions, metadata, footer fine print |
| `label-overline` | 10px / weight 475 / +0.25px — product-type or section overlines above headings |

### Principles
- **One face, one weight**: Fold Grotesque at 400 carries the entire hierarchy. The discipline is the message.
- **Size, not weight, for differentiation**: there are no bold headlines. The jump from `{typography.body}` to `{typography.display}` is purely a scale move.
- **Negative tracking at display**: −0.5px at 64px, −0.3px at 40px, −0.2px at 28px — type tightens as it grows, keeping optical color even.
- **Positive micro-tracking for small labels**: captions and overlines carry a fractional positive value (+0.25–0.3px) for readability at minimum sizes.
- **No decorative caps or transforms**: sentence case throughout; no uppercase styling used as a design gesture.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The site leans on generous section breaks (`{spacing.4xl}` at 96px) to give the editorial photography room to breathe. Component-level padding uses `{spacing.md}` to `{spacing.xl}`.

### Grid & Container
- Max content width: ~1440px, with a generous left/right margin at ~32px (`{spacing.xl}`)
- Product gallery: 3–4 columns on desktop, each column's gutter intentionally generous — the grid breathes
- Editorial feature: asymmetric two-column layouts (image full-left, copy right), common for product stories
- No heavy containers or card boxes — product items are image-plus-label, flush to grid, no border chrome

### Whitespace Philosophy
- **Whitespace as editorial voice**: generous column gutters and section gaps signal unhurried, considered pacing
- **Photography bleeds to grid edge**: images run to the column edge without card-border padding — frames are the content, not containers of content
- **Text set loose**: body paragraphs carry `{spacing.2xl}` (48px) vertical rhythm between sections, reinforcing the print-editorial feeling

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nearly everything — product cards, hero sections, body content |
| Rule (Level 1) | `1px {colors.border}` hairline | Horizontal dividers under nav, above footer, between sections |
| Strong Rule (Level 2) | `1px {colors.ink}` | Heavy separators, active nav indicators |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard-focused interactive elements |

**Shadow Philosophy**: Cubitts uses no drop shadows on visible content. Separation is achieved through whitespace and hairline rules, the way a print catalog works. Any element that appears elevated — a modal, a cookie dialog — uses minimal shadow at extremely low opacity. If you find yourself adding a box-shadow to a product card, you've left the language of the system.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything: buttons, cards, inputs, images, banners, navigation — the entire system |
| `pill` | 9999px | Reserved for specific badge indicators only — not used on buttons |

The radius system is effectively a single value: zero. This binary choice — square or nothing — is the most distinctive geometric decision in the Cubitts language. It aligns the interface with the precision of the physical frames being sold. Rounding any interactive element immediately breaks the product's character.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants

- **`button-primary`** — Near-black (`{colors.primary}`) fill, white text, square corners, Fold Grotesque 14px regular. The "Add to cart" and primary commerce CTA. Hover shifts to `{colors.primary-container}` — a subtle darkening of the already-dark fill.
- **`button-secondary`** — White fill with a 1px `{colors.ink}` border, near-black text, square corners. Secondary actions, tertiary navigation. Hover inverts: fill goes dark, text goes white.
- **`button-ghost`** — No fill, no border, `{colors.ink-secondary}` gray text. Inline text links that behave as buttons. Hover: text sharpens to `{colors.ink}`.

### Cards

- **`card`** — White surface, zero padding, no shadow, no radius. Cubitts product "cards" are effectively image-plus-label pairs sitting in a CSS grid. No container box — the image IS the card.

### Inputs

- **`input`** — White fill, 1px `{colors.border}` stroke, square corners, Fold Grotesque 16px body text. Focus: border sharpens to 1px `{colors.ink}` — from soft gray to full ink, no glow.

### Badges

- **`badge`** — Light gray (`{colors.surface}`) fill, near-black text, square corners, 12px caption type. Used for category labels on product pages.

### Navigation

- **`nav-bar`** — White background, near-black Fold Grotesque 16px links. Sticky behavior on scroll. The wordmark at left, "Glasses Sunglasses About" at right, with a persistent "Basket (0)" at far right. No hover color change — hover is expressed by underline only.

## Do's and Don'ts

### Do
- Use Fold Grotesque at weight 400 for all text — if a line needs emphasis, increase the size, not the weight
- Keep every interactive element and container at `{rounded.none}` — square geometry is the visual identity
- Apply negative letter-spacing at display sizes: −0.5px at 64px, −0.3px at 40px, −0.2px at 28px
- Stack a 10px `{typography.label-overline}` above product or section headings to create a kicker hierarchy without a second typeface
- Use `{colors.ink-secondary}` (#7a7575) for captions, metadata, and subdued UI text — there is only one gray step
- Separate content sections with hairline rules (`{colors.border}`) or whitespace alone — never with card shadows or tinted bands
- Let photography carry the editorial weight — frame composition and print-editorial style do what branding might otherwise do
- Use `{colors.primary-container}` (#302d2d) for hover states on dark button fills — subtle depth through darkening

### Don't
- Don't round buttons, cards, inputs, or images — `{rounded.none}` is the only shape in the system
- Don't introduce a weight-700 bold — Fold Grotesque bold is not part of the system; type hierarchy is pure scale
- Don't add a saturated brand accent color — `{colors.ink}` near-black IS the brand color; inventing a teal or cognac CTA breaks the identity
- Don't use box shadows on product cards or page content — the system is flat; elevation is not used for content
- Don't track display headlines positively — positive letter-spacing on large Fold Grotesque reads airy and loses the precision quality
- Don't put `{colors.ink-muted}` (#a29e9e) on interactive text — it fails contrast thresholds on white for clickable elements
- Don't add a second typeface, even an editorial serif — the single-face discipline IS the concept
- Don't use the `{rounded.pill}` on buttons — pill shape is reserved for rare badge indicators, never navigation or CTAs

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <601px | Single-column product grid; nav collapses to hamburger; hero headline drops to ~32px; body type holds at 16px |
| Mobile | 601–750px | One or two columns; hero condensed; navigation persistent at top |
| Tablet | 750–991px | Two-column product grid; typographic scale steps down one level; sections stack vertically |
| Desktop | 992–1280px | Three-column product grid; full horizontal navigation; display-hero at full scale |
| Large Desktop | >1280px | Four-column product grid; generous gutters; full editorial asymmetric layouts |

### Touch Targets
- Button padding (`12px 24px`) gives ~40px tap height at 14px type — minimum comfortable
- Nav links in the sticky bar carry implicit row height; adequate for mobile tap
- Product cards are fully tappable as block links — no small target zones

### Collapsing Strategy
- **Navigation**: full horizontal nav → hamburger drawer; wordmark and basket persist at all sizes
- **Typography**: `{typography.display-hero}` steps from 64px → ~32px on mobile; negative tracking holds proportionally
- **Grid**: 4-col → 3-col → 2-col → 1-col at the breakpoint steps above
- **Spacing**: section breaks compress from `{spacing.4xl}` (96px) toward `{spacing.2xl}` (48px) at mobile
- **Photography**: images fill the full column width at every breakpoint; no square-corner change

### Image Behavior
- Product and editorial photography fills its grid column edge-to-edge with no card padding
- Art direction with portrait/landscape ratio preservation at all sizes
- Black-and-white photography assets maintain their editorial quality at reduced sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white)
- Primary text: `{colors.ink}` (#0b0b0b)
- Secondary text: `{colors.ink-secondary}` (#7a7575)
- Caption / muted: `{colors.ink-muted}` (#a29e9e)
- CTA fill: `{colors.primary}` (#0b0b0b)
- Border: `{colors.border}` (#cecece)
- Success: `{colors.success}`
- Error: `{colors.error}`

### Example Component Prompts

- "Build a Cubitts product card: no container box, no shadow, no border-radius. Image fills the full column width edge-to-edge. Below: a 10px Fold Grotesque overline (`{typography.label-overline}`, `{colors.ink-secondary}`) like 'Prescription', then a 20px heading (`{typography.heading-sub}`, `{colors.ink}`) for the frame name, then price in 16px body (`{typography.body}`). Grid gap `{spacing.xl}` (32px) between items."
- "Create a Cubitts primary button: `{colors.primary}` fill (#0b0b0b), `{colors.on-primary}` white text, `{typography.button-ui}` (Fold Grotesque 14px weight 400), `{rounded.none}` square corners, `12px 24px` padding. Hover: background shifts to `{colors.primary-container}` (#302d2d) with `0.3s ease` transition."
- "Design a Cubitts hero section: full-bleed editorial photography at left (black-and-white or styled still-life), sticky white nav above with the wordmark in `{colors.ink}` and links in `{typography.nav-link}`. Below the image: a 64px headline in Fold Grotesque (`{typography.display-hero}`) with `−0.5px` letter-spacing and line-height `1.05`, then a 14px ghost link (`{typography.button-ui}`, `{colors.ink-secondary}`) labeled 'Read more ↗' with no underline at rest."
- "Style a Cubitts text input: `{colors.background}` white fill, `1px solid {colors.border}` stroke, `{rounded.none}` square corners, `12px 16px` padding, Fold Grotesque 16px (`{typography.body}`) in `{colors.ink}`. Placeholder in `{colors.ink-muted}`. Focus state: border changes to `1px solid {colors.ink}`, no glow, `0.3s ease` transition."
- "Build a Cubitts section separator: a full-width `1px` horizontal rule in `{colors.border}` (#cecece), followed by `{spacing.3xl}` (64px) vertical space. The rule itself carries no shadow, no gradient — a flat hairline dividing editorial sections."
- "Compose a Cubitts nav bar: white (`{colors.background}`) background, `16px 32px` padding. Left: SVG wordmark in `{colors.ink}`. Center: navigation links in Fold Grotesque 16px (`{typography.nav-link}`, `{colors.ink}`) — 'Glasses · Sunglasses · About'. Right: 'Basket (0)' in `{typography.body-small}`, `{colors.ink}`. No border, no shadow at rest; a `1px {colors.border}` bottom rule appears on scroll."

### Iteration Guide

1. Begin with `{colors.background}` white as the page. Do not add a tinted background color — if you added one, remove it.
2. Set all text in Fold Grotesque weight 400. There is no bold in the system; if something needs emphasis, increase the font size one step.
3. Apply negative letter-spacing at display sizes: −0.5px at 64px, −0.3px at 40px. If the headline looks too loose, tighten the tracking before resizing.
4. Square every corner (`{rounded.none}`). If a button or card is rounded, it is not Cubitts. Revert the radius.
5. Use ink (`{colors.ink}` #0b0b0b) as the primary CTA fill. There is no other brand accent. For secondary actions, reverse the button: white fill, black border.
6. Separate sections with hairline rules (`1px {colors.border}`) or pure whitespace. Never with shadows or colored bands.
7. Let photography carry editorial weight. Cubitts images are composition-led and often black-and-white — the product IS the art direction.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cubitts. Brand names and trademarks belong to their respective owners.