---
version: alpha
name: Unveil
description: Paris studio brutalism — near-black canvas with off-white ink, a registered-mark wordmark (UNVEIL®), oversized grotesque display type with tight tracking, a single electric accent, hairline borders and generous gallery whitespace. Editorial, dark, and experimental.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#0a0a0a"
  surface-raised: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f2f0ec"
  ink-secondary: "#a3a09a"
  ink-muted: "#6b6862"

  # Accent — single electric signal
  primary: "#e8ff45"
  accent-soft: "#3a4012"
  on-primary: "#0a0a0a"

  # Lines + chrome
  border: "#262626"
  border-strong: "#3a3a3a"
  overlay-backdrop: "#000000"

  # On-color
  on-ink: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Anton, Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 1px
  caption:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 48px
  3xl: 80px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 14px 24px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Unveil Design System

## Overview

Unveil is a Paris-based creative studio, and its website behaves like the studio's calling card — a near-black gallery where work is hung on the walls and the chrome gets out of the way. The canvas is a deep, slightly warm off-black (`{colors.background}`) rather than pure `#000`, and the text is an off-white paper tone (`{colors.ink}`) instead of stark white. That micro-warmth on both ends is the whole mood: it reads as printed matter under low light, not a glowing screen.

The identity is anchored by the wordmark — UNVEIL® — set in a heavy condensed grotesque, all caps, with the registered mark riding small and high. Display type is oversized and unapologetic: headlines run 64–88px in a condensed face (`{typography.display-hero}`) with negative tracking, so they read as architectural blocks rather than sentences. Body and UI text drop to a clean geometric grotesque (Space Grotesk), and every functional label — index numbers, coordinates, section tags, captions — switches to a monospace (`{typography.label-mono}`) in uppercase with open tracking, the "studio metadata" voice.

Structure is brutalist-editorial: hairline borders (`{colors.border}`) divide the page into a visible grid, corners stay sharp (`{rounded.none}` is the default radius everywhere), and whitespace does the heavy lifting between sections. Color is rationed to a single electric signal — an acid chartreuse (`{colors.primary}`) — used for the primary CTA, active states, and the occasional highlight. Everything else is achromatic. The restraint is the point: one loud color against grayscale makes the work, not the interface, the loudest thing on screen.

**Key Characteristics:**
- Near-black warm canvas (`{colors.background}`) with off-white paper ink (`{colors.ink}`) — printed-matter, not glowing-screen
- UNVEIL® condensed grotesque wordmark, all caps, registered mark high
- Oversized condensed display type (64–88px) with negative tracking as architectural blocks
- Monospace uppercase labels for all metadata (index numbers, tags, coordinates, captions)
- Single electric chartreuse accent (`{colors.primary}`) rationed against full grayscale
- Sharp corners everywhere — `{rounded.none}` is the system default
- Hairline `{colors.border}` grid lines dividing the page
- Gallery whitespace; the work is the loudest element, never the chrome

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Deep warm off-black. Page canvas and base surface.
- **Surface Raised** (`{colors.surface-raised}`): One step up from canvas for cards and panels.
- **Surface Soft** (`{colors.surface-soft}`): Hover fill / nested panels.
- **Ink** (`{colors.ink}`): Off-white paper tone. Primary text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted body copy, supporting text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, faint metadata.

### Accent
- **Chartreuse** (`{colors.primary}`): The single electric signal — primary CTA, active states, highlights.
- **Accent Soft** (`{colors.accent-soft}`): Dim chartreuse-tinted background for badges/tags.
- **On Primary** (`{colors.on-primary}`): Near-black text on the chartreuse fill.

### Lines & Chrome
- **Border** (`{colors.border}`): Hairline grid dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary button outlines.
- **Overlay Backdrop** (`{colors.overlay-backdrop}`): Pure-black modal backdrop.

## Typography

### Font Family
- **Display**: `Anton` (condensed grotesque) — fallbacks `Arial Narrow, sans-serif`
- **Text / UI**: `Space Grotesk` — fallbacks `Arial, sans-serif`
- **Mono / labels**: `Space Mono` — fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 88px condensed hero — the loud architectural headline |
| `display` | 64px condensed section display |
| `section-heading` | 40px Space Grotesk section titles |
| `card-title` | Project / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `label-mono` | Uppercase mono metadata, buttons, tags |
| `caption` | Index numbers, fine captions |

### Principles
- **Two voices, strict split**: condensed grotesque shouts (display), geometric grotesque speaks (body), monospace labels (everything functional). Never mix the roles.
- **Negative tracking at scale**: display type compresses with -1.5 to -2px tracking; body stays at 0.
- **Metadata is mono and uppercase**: section tags, coordinates, indices, captions all use `{typography.label-mono}` with open tracking — the studio-spec voice.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Generous jumps — `{spacing.3xl}` (80px) and `{spacing.4xl}` (140px) drive the gallery rhythm between sections.

### Grid & Container
- Visible hairline grid: sections separated by 1px `{colors.border}` rules
- Full-bleed project imagery against the dark canvas
- Asymmetric, editorial column layouts rather than centered marketing blocks
- Max content width generous; imagery often runs edge to edge

### Whitespace Philosophy
- **Gallery emptiness**: large vertical padding isolates each project so it reads as a hung piece.
- **Lines, not boxes**: separation comes from hairline borders and space, not filled cards.
- **One loud color**: grayscale everywhere except the chartreuse signal.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, badges (the system is sharp-cornered) |
| `xs` | 2px | Rare micro-softening |
| `sm` | 4px | Small functional elements |
| `md` | 8px | Reserved |
| `pill` | 9999px | Status dots, rare round tokens |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Chartreuse fill, near-black mono label, square corners. Hovers to off-white fill.
- **`button-secondary`** — Transparent on canvas with `{colors.border-strong}` outline, mono label.

### Badges
- **`badge`** — Dim chartreuse-tinted background, chartreuse text, mono caption, square.

### Cards
- **`card`** — Raised surface with hairline `{colors.border}`, sharp corners, 24px padding.
- **`card-project`** — Borderless image-led project tile; the image is the card.

### Inputs
- **`input`** — Canvas fill, `{colors.border-strong}` outline, square. Focus switches outline to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Dark sticky header, mono uppercase links, hairline bottom border. UNVEIL® wordmark left.

## Do's and Don'ts

### Do
- Keep the canvas warm off-black (`{colors.background}`) and ink warm off-white (`{colors.ink}`)
- Use condensed grotesque, all caps, for display headlines with negative tracking
- Set all metadata (tags, indices, coordinates, captions) in uppercase monospace
- Ration the chartreuse to CTAs, active states, and single highlights
- Default every corner to `{rounded.none}`
- Divide the page with hairline `{colors.border}` rules, not filled panels

### Don't
- Don't use pure `#000` or pure `#fff` — the warmth is the brand
- Don't introduce a second accent color — one electric signal only
- Don't round corners on buttons or cards
- Don't use the chartreuse for large fills or decoration
- Don't mix the type roles (display ≠ body ≠ mono-label)

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, display scales 88px → ~44px |
| Tablet | 600–1024px | 2-column project grid, padding tightens |
| Desktop | 1024–1440px | Full asymmetric editorial layout |
| Large | >1440px | Generous margins, edge-to-edge imagery |

### Collapsing Strategy
- Display headlines scale down but keep negative tracking proportionally
- Nav collapses to a mono-labeled menu toggle
- Project grid: multi-column → single full-bleed stack
- Hairline grid rules persist at all sizes

## Agent Prompt Guide

### Quick Color Reference
- Canvas: warm off-black `{colors.background}`
- Heading / body text: off-white `{colors.ink}`
- Muted copy: `{colors.ink-secondary}`
- Accent / CTA: chartreuse `{colors.primary}`
- Borders: hairline `{colors.border}`

### Example Component Prompts
- "Hero on warm off-black `{colors.background}`. Headline in Anton, all caps, 88px, line-height 0.95, letter-spacing -2px, color `{colors.ink}`. Mono section tag above it in `{typography.label-mono}` uppercase, color `{colors.ink-secondary}`. Square chartreuse CTA (`{colors.primary}` fill, `{colors.on-primary}` mono label, 0px radius, 14px 24px padding)."
- "Project tile: borderless, image full-bleed, below it a mono index number in `{colors.ink-muted}` and a `{typography.card-title}` name in `{colors.ink}`. Sharp corners."
- "Badge: `{colors.accent-soft}` background, `{colors.primary}` text, `{typography.caption}`, square, 4px 8px padding."

### Iteration Guide
1. Square corners by default — `{rounded.none}` everywhere
2. Two type voices plus mono labels — never blur the roles
3. One accent only: chartreuse against full grayscale
4. Separate with hairline borders and whitespace, not filled boxes
5. Warm off-black and warm off-white — never pure black/white

---

## 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 Unveil. Brand names and trademarks belong to their respective owners.