---
name: Cubitts
description: "This site is an excellent example of modern editorial e-commerce, proving that a highly restrained palette can still feel premium and engaging."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#0B0B0B"
  neutral: "#7A7575"
  bg-soft: "#F5F5F5"
  line: "rgba(11,11,11,0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 24px
  lg: 32px
  pill: 999px

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

---

## Overview

A refined British eyewear brand that elevates frames to the status of crafted artifacts.

*A bespoke tailor for eyewear, blending modern minimalism with traditional craftsmanship.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#0B0B0B`)** — uses `ink` token
- **Muted (`#7A7575`)** — uses `muted` token
- **Borders (`rgba(11,11,11,0.15)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A flexible 4px baseline grid adapted to 64px and 12px gutters for different layout densities.

## Elevation & Depth

- 0px 0px 30px 0px rgba(0, 0, 0, 0.15)
- Borders: Thin 1px solid borders in #0B0B0B or #D8D8D8 define inputs and interactive areas.

## Shapes

- `sm`: 4px
- `md`: 24px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Pill-shaped or rounded-rectangle buttons with black backgrounds and white text.
- **card:** Clean, borderless containers with subtle background shifts (#F5F5F5) for grouping content.
- **chip:** Small, rounded pill components used for tagging or interactive toggles.
- **input:** Minimal rectangular fields with thin borders and internal padding for a clean look.
- **hero:** Large split-layout or full-width image sections paired with prominent typography.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```