---
version: alpha
name: Deon Libra
description: Editorial activist beauty — stark black-on-cream canvas punctuated by a single arterial DL Red, uppercase grotesque headlines with wide tracking, banner-style repeated manifesto copy, and bare text-link CTAs that refuse cosmetic decoration.
colors:
  # Canvas + ink
  background: "#f6f4ef"
  surface: "#ffffff"
  surface-soft: "#efece4"
  ink: "#0a0a0a"
  ink-pure: "#000000"
  ink-secondary: "#4a4843"
  ink-muted: "#8a877f"

  # Signature accent
  primary: "#e2231a"        # DL Red — manifesto, sale, activist marks
  primary-hover: "#b71b13"

  # Neutral scale
  gray-900: "#171615"
  gray-600: "#4a4843"
  gray-400: "#8a877f"
  gray-200: "#d9d5cc"
  gray-100: "#e7e3da"

  # Lines + on-color
  border: "#1a1a1a"
  border-soft: "#d9d5cc"
  on-primary: "#ffffff"
  on-ink: "#f6f4ef"

typography:
  display-hero:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 1px
  section-heading:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: 0.5px
  manifesto:
    fontFamily: "Anton, Oswald, Arial Narrow, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 2px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 1px
  eyebrow:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 2.5px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1px
  price:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.5px

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

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

components:
  # Solid black CTA — the loud action
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  # Red activist CTA
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  # Bare outlined / ghost shop link
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  # Underlined text-link CTA (add to cart / shop)
  link-cta:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"

  # Product card — image-forward, square chrome
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
    borderColor: "{colors.border-soft}"

  # Manifesto banner — red bar across full width
  banner:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.manifesto}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  # Sale / activist badge
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border-soft}"
---

# Deon Libra Design System

## Overview

Deon Libra is what happens when an activist art zine moonlights as a beauty brand. The interface opens with a manifesto, not a moisturizer — "THIS IS NOT A BEAUTY BRAND" repeated like a chant — and the visual system is engineered to carry that defiance. A warm off-white cream (`{colors.background}`) replaces the sterile pure-white default of e-commerce, grounding the page in paper and print rather than glass and chrome. Against it, near-black ink (`{colors.ink}`) and a single arterial DL Red (`{colors.primary}`) do all the shouting.

The typography is the loudest instrument. Headlines use a heavy condensed grotesque (Anton, in the closest Google-font sense) set in all-caps with wide positive tracking — the opposite of the compressed precision of a developer tool. These are protest-poster letters: tall, narrow, dense, built to be read across a room. Body and UI copy switch to Archivo, a cleaner workhorse grotesque, keeping product detail legible while the display type carries the attitude. Eyebrows and buttons push tracking out to 2–2.5px, reinforcing the editorial broadside feel.

Structurally the system is uncompromisingly square. Radius is effectively banned — `{rounded.none}` is the default for buttons, cards, inputs, badges, and banners alike. Nothing softens. CTAs reject the rounded-pill convention of modern commerce in favor of hard rectangular blocks, or strip back entirely to bare underlined text links. The DL Red appears only with intent: manifesto banners, sale marks, hover states, activist callouts — never as decorative chrome.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) instead of pure white — print, not screen
- Single arterial accent, DL Red (`{colors.primary}`), used only for manifesto, sale, and hover
- Condensed all-caps grotesque headlines (Anton) with wide positive tracking — protest-poster type
- Archivo for body/UI — legible workhorse under the loud display layer
- Zero radius everywhere (`{rounded.none}`) — hard rectangular chrome, no softening
- Bare text-link and solid-black CTAs; the rounded pill is deliberately absent
- Banner-style repeated manifesto copy as a structural motif
- High contrast black-on-cream with red as the only color event

## Colors

### Primary
- **DL Red** (`{colors.primary}`): The brand's single accent — manifesto banners, sale marks, activist callouts, button hover. Used sparingly for maximum charge.
- **Ink** (`{colors.ink}`): Headlines, body, default CTA fill. Near-black with a touch of warmth.
- **Cream** (`{colors.background}`): Page canvas — paper-warm, not sterile white.

### Surfaces
- **Surface** (`{colors.surface}`): Product imagery backdrops, cards — clean white against the cream page.
- **Surface Soft** (`{colors.surface-soft}`): Alternating section tint.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest text.
- **Gray 600** (`{colors.gray-600}`): Secondary text.
- **Gray 400** (`{colors.gray-400}`): Muted/placeholder.
- **Gray 200** (`{colors.gray-200}`): Soft dividers.
- **Gray 100** (`{colors.gray-100}`): Subtle fills.

### Lines & On-Color
- **Border** (`{colors.border}`): Hard near-black hairlines on inputs and ghost buttons.
- **Border Soft** (`{colors.border-soft}`): Product-card and nav dividers.
- **On Primary** (`{colors.on-primary}`): White text on red.
- **On Ink** (`{colors.on-ink}`): Cream text on black fills.

## Typography

### Font Family
- **Display**: `Anton`, with fallbacks `Oswald, Arial Narrow, sans-serif` — condensed all-caps grotesque for headlines and manifesto.
- **Text/UI**: `Archivo`, with fallbacks `Helvetica Neue, Arial, sans-serif` — body, product, navigation, buttons.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 72px condensed caps — hero / manifesto billboard |
| `section-heading` | Section titles |
| `manifesto` | Repeated banner statement copy, wide tracking |
| `card-title` | Product names |
| `eyebrow` | Tracked-out kickers above sections |
| `body-large` | Intro / editorial paragraphs |
| `body` | Standard reading text |
| `body-small` | Fine print, secondary detail |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, tags |
| `price` | Product pricing |

### Principles
- **Caps as voice**: Display type is always uppercase with wide positive tracking — the inverse of compressed tech type. The letters are meant to declare.
- **Two-font split**: Anton announces, Archivo informs. Never let the condensed display face carry long reading copy.
- **Tracking grows on small caps labels**: Eyebrows and buttons widen to 2–2.5px; body stays at zero.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with generous editorial jumps to `{spacing.3xl}`–`{spacing.4xl}` between full-bleed sections.

### Grid & Container
- Full-bleed imagery and banners run edge-to-edge.
- Product grids: 2–4 columns of square, borderless image cards.
- Manifesto banners span the full viewport width.

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical gaps between sections let the cream canvas act as margin.
- **Loud, then quiet**: A red manifesto banner is followed by sparse product rows — rhythm comes from alternating intensity, not from chrome.
- **No rounded softening**: Every edge is square; spacing and contrast do the structuring.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, inputs, badges, banners |
| `xs` | 2px | Rare micro-softening |
| `sm` | 4px | Small functional containers |
| `pill` | 9999px | Reserved, intentionally avoided in CTAs |

## Components

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

### Buttons
- **`button-primary`** — Solid black block, cream text, zero radius. Hovers to DL Red.
- **`button-accent`** — DL Red fill for activist / sale actions.
- **`button-ghost`** — Cream surface with a hard black hairline border.
- **`link-cta`** — Bare underlined text link for "add to cart" / "shop", no chrome.

### Banners & Badges
- **`banner`** — Full-width DL Red bar carrying repeated manifesto copy in condensed caps.
- **`badge`** — Small red sale / activist mark, square, white text.

### Cards
- **`card-product`** — Image-forward, square, soft hairline border. Name in Archivo caps, price below.

### Inputs
- **`input`** — White surface, hard black border, zero radius.

### Navigation
- **`nav-bar`** — Cream sticky header, tracked-out caps links, soft bottom divider.

## Do's and Don'ts

### Do
- Use the warm cream canvas (`{colors.background}`), not pure white
- Reserve DL Red (`{colors.primary}`) for manifesto, sale, hover, and activist marks only
- Set all display headlines in uppercase Anton with wide tracking
- Keep every corner square — `{rounded.none}` is the system default
- Pair solid-black blocks or bare text links as CTAs
- Let manifesto banners run full-bleed and repeat

### Don't
- Don't round button corners — the pill is intentionally banned from CTAs
- Don't use DL Red as decorative chrome or large fills outside its charged contexts
- Don't set long body copy in the condensed Anton display face
- Don't switch the canvas to sterile pure white
- Don't add soft shadows or glossy elevation — the brand is flat, print-like, defiant

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, full-bleed banners, hamburger nav |
| Tablet | 600–1024px | 2-column product grid |
| Desktop | 1024–1440px | 3–4 column grid, full editorial spacing |
| Large | >1440px | Centered with generous cream margins |

### Collapsing Strategy
- Hero display type scales down but keeps uppercase + tracking
- Product grid: 4 → 2 → 1 column
- Manifesto banners stay full-width, copy wraps
- Nav: tracked caps links → hamburger

### Touch Targets
- Buttons use 14–16px vertical padding for comfortable taps
- Bare text-link CTAs get extra surrounding spacing on mobile

---

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