# Design System: Suchka

> A plain-text design system for AI coding agents. Drop this into your project and generate UI that matches the Suchka dark luxury brand.

## 1. Visual Theme & Atmosphere

Suchka's design language is built on a single, uncompromising premise: the void as canvas. A near-absolute black (`#000000`, `#0A0A0A`) backdrop from which everything emerges with intention. No decorative gradients, no ambient glow, no playful colour range — just darkness, precision typography, and one commanding accent: The Desire Red (`#DC2626`).

The typography system reflects the brand's cognitive tension: **Cinzel** — a Roman-inspired serif with architectural letter-spacing — carries all headings. It reads like an inscription on stone. It does not shout; it declares. **Inter** handles all body copy and UI text with clinical clarity, creating deliberate contrast between the sculptural headline register and the functional prose layer.

What defines Suchka visually is not complexity but **constraint**. The accent red appears sparingly — CTAs, active states, brand marks — and this scarcity makes every appearance feel like a decision. The spacing system is generous: dark luxury breathes. Surfaces are separated by subtle `#333333` borders rather than shadows, because on black, borders define geometry more honestly than shadows do.

The overall character is **cinematic** — a film still rather than a product page. Static, intentional, and dense with atmosphere. Every element earns its place or is removed.

**Key Characteristics:**
- Void-black canvas (`#000000`, `#0A0A0A`) — maximum contrast as the base condition
- Cinzel at tracked uppercase for all headings — architectural, inscriptional
- Single accent: Desire Red (`#DC2626`) — used sparingly so every instance carries weight
- Border-defined surfaces (not shadow-heavy) — geometry over depth illusion
- Generous vertical whitespace — dark luxury requires room to breathe
- Inter for body/UI — neutral, legible, invisible as a system
- Geist Mono / monospace for technical labels and metadata

---

## 2. Color Palette & Roles

### Background Scale
- **Pure Black** (`#000000`): Absolute base — hero sections, full-bleed backgrounds
- **Dark Background** (`#0A0A0A`): Primary page background
- **Surface Dark** (`#111111`): Sidebar, modal backgrounds, secondary panels
- **Surface Card** (`#151515`): Card and panel surfaces — the primary container color

### Borders & Dividers
- **Border** (`#333333`): All dividers, card outlines, input borders, section separators

### Accent
- **The Desire Red** (`#DC2626`): Primary CTA, brand highlights, active states, section accent titles — use sparingly
- **Desire Red Dark** (`#841616`): Hover and pressed states on red elements — never use for text or UI labels

### Typography
- **Text White** (`#FFFFFF`): Primary text, all headings
- **Text Secondary** (`#CCCCCC`): Body text, descriptions, captions
- **Text Muted** (`#888888`): Placeholder text, disabled states, fine print

### Usage Ratio
- 60% — Dark base (`#000000`, `#0A0A0A`, `#111111`)
- 30% — Surface and structure (`#151515`, `#333333`)
- 10% — Accent only (`#DC2626`)

---

## 3. Typography Rules

### Font Families
- **Display / Headings**: `Cinzel`, fallback: `Palatino Linotype, serif`
- **Body / UI**: `Inter`, fallback: `system-ui, -apple-system, sans-serif`
- **Technical / Metadata**: `Geist Sans`, `Geist Mono`, or `ui-monospace, SFMono-Regular, monospace`

### Hierarchy

| Role | Font | Size | Weight | Letter Spacing | Line Height | Notes |
|------|------|------|--------|----------------|-------------|-------|
| H1 / Hero | Cinzel | 3rem (48px) | 700 | 0.05em | 1.2 | Brand statements, page heroes |
| H2 / Section | Cinzel | 2.25rem (36px) | 600 | 0.04em | 1.25 | Section headers |
| H3 / Sub-heading | Cinzel | 1.75rem (28px) | 500 | 0.03em | 1.3 | Card titles, feature names |
| H4 / Label Heading | Cinzel | 1.25rem (20px) | 500 | 0.04em | 1.4 | In-card headings, small section labels |
| Body Large | Inter | 1.125rem (18px) | 400 | 0 | 1.7 | Lead paragraphs |
| Body | Inter | 1rem (16px) | 400 | 0 | 1.7 | Standard reading text |
| Body Small | Inter | 0.875rem (14px) | 400 | 0 | 1.6 | Descriptions, secondary copy |
| UI Label | Inter | 0.875rem (14px) | 500 | 0.06em | 1.4 | Nav items, button text, tags — UPPERCASE |
| Caption | Inter | 0.75rem (12px) | 400 | 0.06em | 1.5 | Photo captions, metadata |
| Technical | Geist Mono | 0.8125rem (13px) | 400 | 0 | 1.85 | Code, hex values, SKUs |

### Principles
- **Cinzel is the brand voice**: Use for all display, headings, and brand name appearances. Never substitute another serif.
- **Uppercase with tracking for UI labels**: All navigation items, button text, badges, and section labels use `text-transform: uppercase` with `letter-spacing: 0.06em` — this is the brand's secondary visual signature.
- **Inter disappears by design**: Body text should be invisible as a system — clear, neutral, never drawing attention to itself.
- **No italic in UI**: Italic Cinzel is reserved for editorial quotes only; never use italic in UI contexts.
- **Minimum sizes**: Navbar ≥ 1rem · Body ≥ 0.8rem · Footer fine print ≥ 0.68rem

---

## 4. Component Stylings

### Buttons

**Primary (Desire Red)**
- Background: `#DC2626`
- Text: `#FFFFFF`, Inter 14px weight 600, uppercase, letter-spacing 0.06em
- Padding: 12px 28px
- Border-radius: 0px (sharp edges — luxury does not round)
- Hover: background `#841616`
- Use: Primary CTA, shop actions

**Secondary (Outlined)**
- Background: transparent
- Border: `1px solid #333333`
- Text: `#FFFFFF`, Inter 14px weight 500, uppercase, letter-spacing 0.06em
- Padding: 12px 28px
- Border-radius: 0px
- Hover: border-color `#DC2626`, text `#DC2626`
- Use: Secondary actions

**Ghost**
- Background: transparent
- Border: none
- Text: `#CCCCCC`, Inter 14px weight 500, uppercase, letter-spacing 0.06em
- Hover: text `#FFFFFF`
- Use: Tertiary actions, navigation links

### Cards

**Product Card**
- Background: `#151515`
- Border: `1px solid #333333`
- Border-radius: 0px
- Padding: 0px (image to edge) with 16px internal content padding
- Hover: border-color `#DC2626` (1px solid)

**Feature Card**
- Background: `#111111`
- Border: `1px solid #333333`
- Border-radius: 0px
- Padding: 24px
- Title: Cinzel H3, `#FFFFFF`
- Body: Inter body, `#CCCCCC`

### Badges & Tags
- Background: `rgba(220, 38, 38, 0.1)` (red at 10% opacity)
- Border: `1px solid rgba(220, 38, 38, 0.3)`
- Text: `#FF6B6B` (brighter red for readability on dark bg), Inter 11px weight 600, uppercase, letter-spacing 0.08em
- Padding: 3px 8px
- Border-radius: 0px
- Variants: swap border/bg color to `#333333` / `#555555` text for neutral tags

### Form Inputs
- Background: `#111111`
- Border: `1px solid #333333`
- Border-radius: 0px
- Text: `#FFFFFF`, Inter 14px
- Placeholder: `#888888`
- Padding: 12px 16px
- Focus: border-color `#DC2626`, outline none
- Label: Inter 12px weight 500, uppercase, letter-spacing 0.06em, `#CCCCCC`

### Navigation Bar
- Background: `#0A0A0A`
- Border-bottom: `1px solid #333333`
- Logo: `logo-color.svg` (red fleur-de-lis + SUCHKA wordmark), white wordmark
- Nav links: Inter 14px weight 500, `#CCCCCC`, uppercase, letter-spacing 0.06em
- Nav link hover: `#FFFFFF`
- CTA button: Primary (Desire Red) right-aligned
- Mobile: hamburger collapse at 768px

### Section Headings
- Color: `#DC2626` (Desire Red) for all major section titles (BRAND IDENTITY, COLOR SYSTEM, etc.)
- This use of red on section titles is intentional — the only place where the accent color appears as text

---

## 5. Layout Principles

### Spacing Scale (8px base unit)

| Token | Value | Use |
|-------|-------|-----|
| space-1 | 4px | Micro gaps, icon padding |
| space-2 | 8px | Base unit, inline gaps |
| space-3 | 12px | Tag padding, tight elements |
| space-4 | 16px | Element gap, card inner padding |
| space-6 | 24px | Card padding, nav item gaps |
| space-8 | 32px | Section inner padding |
| space-12 | 48px | Section header spacing, mobile section padding |
| space-16 | 64px | Large element separation, desktop margin |
| space-24 | 96px | Generous section breathing room |

### Grid System
- **Desktop (≥1024px)**: 12 columns, 16px gutters, 64px horizontal margins, 80px vertical section padding
- **Tablet (768–1023px)**: 8 columns, 16px gutters, 32px horizontal margins
- **Mobile (<768px)**: 4 columns, 16px gutters, 20px horizontal margins, 48px vertical section padding

### Collapse Rules
- 6-col / 4-col grids → 2 columns on mobile
- 3-col grids → 1 column on mobile
- 2-col (large) → 1 column on mobile
- All section padding: 80px → 48px on mobile

### Border Radius Philosophy
Suchka uses **0px border radius everywhere** by default. Sharp edges communicate precision, discipline, and luxury restraint. No pill buttons, no rounded cards. The only exception is the favicon/app icon assets which follow platform conventions (rounded squares at OS level).

### Whitespace Philosophy
Dark luxury breathes. Sections have generous vertical spacing — the darkness between elements is not empty space but intentional atmosphere. Do not compress sections to fit more content. Scarcity is a luxury signal.

---

## 6. Depth & Elevation

On a near-black canvas, traditional shadow-based depth is nearly invisible. Suchka uses **border-defined surfaces** as the primary depth system, with a minimal shadow vocabulary reserved for specific overlay contexts.

| Level | Treatment | Use |
|-------|-----------|-----|
| Level 0 — Base | No border, no shadow | Page background, text blocks |
| Level 1 — Surface | `border: 1px solid #333333` | Cards, panels, containers on dark bg |
| Level 2 — Elevated | `border: 1px solid #444444` + `box-shadow: 0 4px 24px rgba(0,0,0,0.6)` | Hovered cards, focused inputs |
| Level 3 — Overlay | `border: 1px solid #444444` + `box-shadow: 0 8px 40px rgba(0,0,0,0.9)` | Modals, dropdowns, floating panels |
| Accent Glow | `box-shadow: 0 0 16px rgba(220,38,38,0.15)` | Active CTA buttons, focused red elements |

**Elevation Philosophy**: On void-black surfaces, shadows vanish — depth is communicated through border brightness and subtle box-shadow on elevation. The accent glow should be used sparingly: only on interactive elements that are currently active, never as decoration.

---

## 7. Do's and Don'ts

### Do
- Use Cinzel for all headings and brand name display — non-negotiable
- Maintain dark backgrounds (`#0A0A0A`, `#111111`) as the primary canvas for all communications
- Use Desire Red (`#DC2626`) exclusively as the accent — never modify the hue
- Apply `text-transform: uppercase` + `letter-spacing: 0.06em` to all UI labels, navigation, and badges
- Use section titles in Desire Red — the only approved use of the accent for text
- Keep borders at `#333333` (1px solid) for all surface separations
- Use 0px border-radius on all UI components — sharp edges only
- Photography must be cinematic — Rembrandt/split lighting, high contrast, intentional composition
- Language must be elegant, atmospheric, evocative — short, precise sentences
- Own the name with elegance: never apologize, explain, or sanitize; let the work speak

### Don't
- Never use the logo on busy, colorful, or light backgrounds without proper contrast treatment
- Never use unauthorized colors — no greens, blues, pastels, or warm tones in brand contexts
- Never distort, stretch, rotate, or recolor the wordmark or monogram
- Never use rounded corners on buttons or cards (0px only)
- Never use `#841616` or `#8B0000` for text or badge labels — too dark, unreadable on dark surfaces
- Never use stock photography — all imagery must be original, editorial, cinematic
- Never write crude, clinical, or generic marketing copy
- Never use generic sans-serif fallbacks (Arial, Helvetica) in place of Inter
- Never use flash-sale or discount language — exclusivity is core to positioning
- Never defend the brand name online — no internet-fighting; cheap shock undermines cognitive contrast

---

## 8. Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | < 768px | Single column, hamburger menu, 20px margins, 48px section padding |
| Tablet | 768px – 1023px | 2 columns, 32px margins, compact nav |
| Desktop | ≥ 1024px | 12-col grid, 64px margins, full navigation, 80px section padding |

### Touch Targets
- Buttons: minimum 44px height
- Navigation links: minimum 44px touch area
- Form inputs: minimum 44px height

### Collapsing Strategy
- Navigation: horizontal links → hamburger at 768px
- Product grids: 3–4 col → 2 col at tablet → 1 col at mobile
- Feature grids: 2 col → 1 col at mobile
- Typography scales: H1 3rem → 2rem on mobile, H2 2.25rem → 1.75rem on mobile
- Section padding: 80px vertical → 48px on mobile, margins 64px → 20px

### Image Behavior
- Hero images: full-width, aspect-ratio maintained
- Product photography: always maintain original editorial crop, no automatic zoom/fill
- Watermark opacity maintained across all breakpoints

---

## 9. Agent Prompt Guide

### Quick Color Reference
```
Background:      #000000 (absolute) / #0A0A0A (page) / #111111 (surface) / #151515 (card)
Border:          #333333
Accent:          #DC2626 (active/CTA) / #841616 (hover only)
Text Primary:    #FFFFFF
Text Secondary:  #CCCCCC
Text Muted:      #888888
Badge Text:      #FF6B6B (on red-tinted bg) / #CCCCCC (on neutral bg)
```

### Quick Typography Reference
```
Display/H1:   Cinzel 48px/700 ls:0.05em
H2:           Cinzel 36px/600 ls:0.04em
H3:           Cinzel 28px/500 ls:0.03em
H4:           Cinzel 20px/500 ls:0.04em
Body:         Inter 16px/400 lh:1.7
UI Label:     Inter 14px/500 UPPERCASE ls:0.06em
Caption:      Inter 12px/400 UPPERCASE ls:0.06em
Code:         Geist Mono 13px/400 lh:1.85
```

### Example Component Prompts

**Hero Section:**
"Create a full-bleed hero on `#0A0A0A` background. Headline: Cinzel 48px weight 700, `#FFFFFF`, letter-spacing 0.05em, uppercase. Subline: Cinzel 24px weight 400, `#CCCCCC`, letter-spacing 0.03em. CTA button: `#DC2626` background, `#FFFFFF` text, Inter 14px weight 600 uppercase, 0px border-radius, 12px 28px padding. Red accent glow on button: box-shadow 0 0 16px rgba(220,38,38,0.15)."

**Product Card:**
"Card on `#151515`, border 1px solid `#333333`, 0px border-radius. Image flush to top edge. Content padding 16px. Title: Cinzel 20px weight 500, `#FFFFFF`. Body: Inter 14px weight 400, `#CCCCCC`. Badge: background rgba(220,38,38,0.1), border 1px solid rgba(220,38,38,0.3), text `#FF6B6B`, Inter 11px weight 600 uppercase letter-spacing 0.08em. Hover state: border-color `#DC2626`."

**Navigation Bar:**
"Navbar `#0A0A0A`, border-bottom 1px solid `#333333`. Left: logo-color.svg. Center: nav links Inter 14px weight 500 `#CCCCCC` uppercase letter-spacing 0.06em; hover `#FFFFFF`. Right: CTA button `#DC2626`, 0px radius, 11px 20px padding, Inter 12px weight 600 uppercase."

**Form Input:**
"Input `#111111` background, border 1px solid `#333333`, 0px border-radius, 12px 16px padding. Text `#FFFFFF` Inter 14px. Placeholder `#888888`. Focus: border-color `#DC2626`, outline none. Label above: Inter 12px weight 500 uppercase letter-spacing 0.06em `#CCCCCC`."

**Section Title:**
"Section title in Desire Red `#DC2626`. Cinzel 36px weight 600 letter-spacing 0.04em. Below it, a 1px `#333333` horizontal rule. Subtitle: Inter 16px weight 400 `#CCCCCC`."

**Badge/Tag:**
"Exclusive badge: background rgba(220,38,38,0.1), border 1px solid rgba(220,38,38,0.3), text `#FF6B6B`, Inter 11px weight 600, uppercase, letter-spacing 0.08em, 0px border-radius, padding 3px 8px."

### Iteration Guide
1. Start with void black (`#0A0A0A`) — the entire visual system emerges from this foundation
2. Cinzel with tracking for headings — the inscriptional quality is non-negotiable
3. Reserve `#DC2626` as a scarce resource — overuse dilutes its authority
4. Borders (`#333333`) do the depth work — minimize box-shadow usage
5. 0px border-radius everywhere — sharp geometry signals precision and luxury
6. Inter labels: always uppercase with 0.06em tracking — the secondary signature
7. Photography context: treat every image placeholder as a cinematic film still requirement