---
version: alpha
name: Contra Labs
description: Applied-AI lab minimalism — near-black ink on warm off-white paper, a tight grotesque sans paired with a monospace for technical labels, hairline borders, square-to-soft radii, and a single restrained ink-CTA. Bold through scale and emptiness, not color.
colors:
  # Canvas + ink
  background: "#f6f5f1"
  surface: "#ffffff"
  surface-soft: "#efeee9"
  ink: "#141414"
  ink-pure: "#000000"
  ink-secondary: "#5c5b56"
  ink-muted: "#8a8983"

  # Inverse (dark sections / CTA)
  ink-inverse: "#0e0e0c"
  paper-inverse: "#faf9f5"

  # Single accent — used sparingly for live/active states
  primary: "#1a1a1a"
  accent: "#c4452d"        # signal red for emphasis tokens
  accent-soft: "#f1ddd7"

  # Lines + chrome
  border: "#dedcd4"
  border-strong: "#c9c7bd"
  divider: "#e6e4dc"

  # States
  link: "#141414"
  focus: "#3b6fe0"
  ring: "#c3d4f6"

  # On-color
  on-ink: "#f6f5f1"
  on-accent: "#ffffff"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1.08px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.48px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: -0.19px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.6px
  mono-caption:
    fontFamily: "Space Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0.4px
  caption:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.ink-pure}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 12px 22px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  badge-live:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  card-quiet:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.divider}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.focus}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 28px
    borderColor: "{colors.divider}"

  eyebrow:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"
    padding: 0px 0px
---

# Contra Labs Design System

## Overview

Contra Labs presents itself as an applied-AI lab, and its visual identity reads like a research notebook rather than a marketing site. The canvas is a warm off-white paper (`{colors.background}`) — not pure white — that softens the whole page and signals craft over clinical sterility. Against it sits near-black ink (`{colors.ink}`), a hair off true black so the contrast feels printed rather than glaring. The result is bold by restraint: the page makes its impact through scale, emptiness, and confident typography instead of color.

The typographic engine pairs a tight geometric grotesque sans (Space Grotesk) for headlines and reading text with a monospace (Space Mono) reserved for technical labels, eyebrows, and metadata. This sans/mono duality is the system's signature — the mono voice tags sections like a terminal prompt ("01 / APPROACH"), grounding the human-creativity message in an engineered substrate. Headlines run at display scale with negative tracking, compressing the words into dense, deliberate blocks.

Chrome is hairline-thin. Cards and inputs are defined by 1px borders in a low-contrast paper-tone (`{colors.border}`) rather than by shadows or fills, so depth comes from line and spacing alone. Radii stay tight — 4px to 10px — keeping the aesthetic architectural and exact. There is exactly one loud move available: a signal red (`{colors.accent}`) reserved for live or active states, never used decoratively.

The single primary action is a solid ink button (`{colors.ink}` on paper), echoing the "Request partnership" CTA. Everything else is quiet: ghost buttons with strong-border outlines, mono labels, and generous vertical air between sections.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`), never pure white
- Near-black ink (`{colors.ink}`) — printed, not glaring contrast
- Space Grotesk display + reading, Space Mono for labels/eyebrows/metadata
- Negative letter-spacing at display sizes (-1.68px at 56px)
- Hairline 1px borders as the primary structural device — minimal shadow
- Tight radii (4–10px) for an architectural, exact feel
- One restrained accent: signal red (`{colors.accent}`) for live/active only
- Solid ink CTA as the sole loud element; ghost buttons everywhere else

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): Warm off-white page canvas. The brand's resting surface.
- **Card White** (`{colors.surface}`): Slightly brighter surface for cards/inputs that lift off paper.
- **Soft Paper** (`{colors.surface-soft}`): Hover/recessed tint.
- **Ink** (`{colors.ink}`): Primary text, headings, the CTA fill. Off-black warmth.
- **True Black** (`{colors.ink-pure}`): CTA hover; rare maximum contrast.
- **Ink Secondary** (`{colors.ink-secondary}`): Body description, supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrows, captions, metadata.

### Inverse
- **Ink Inverse** (`{colors.ink-inverse}`): Dark section backgrounds.
- **Paper Inverse** (`{colors.paper-inverse}`): Text on dark sections.

### Accent
- **Signal Red** (`{colors.accent}`): Live/active states, emphasis. Used sparingly.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for live badges.

### Lines & Chrome
- **Border** (`{colors.border}`): Default hairline on cards, dividers.
- **Border Strong** (`{colors.border-strong}`): Inputs, ghost buttons, emphasized outlines.
- **Divider** (`{colors.divider}`): Section separators, nav underline.

### States
- **Link** (`{colors.link}`): Inline links — ink with underline, no color shift.
- **Focus** (`{colors.focus}`): Keyboard focus ring.
- **Ring** (`{colors.ring}`): Soft focus halo.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks: `Arial, sans-serif`
- **Monospace**: `Space Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Roles**: Sans carries all display and reading text; mono is strictly for labels, eyebrows, and technical metadata.

### 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` | 56px hero — billboard headline, maximum compression |
| `section-heading` | Feature/section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature cards |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | UI text, dense copy |
| `button-ui` | Buttons, links |
| `label-mono` | Mono eyebrows / section tags |
| `mono-caption` | Badges, metadata, terminal-style labels |
| `caption` | Small supporting text |

### Principles
- **Sans/mono duality**: Space Grotesk for human voice, Space Mono for the engineered voice. Mono labels read like terminal prompts.
- **Compression at scale**: Display headlines use -1.68px tracking; the negative tracking relaxes toward zero as size drops.
- **Two weights, strict roles**: 400 (reading) and 500 (headings/UI). No bold display.
- **Mono is uppercase-leaning for labels**: eyebrows and section tags use positive tracking (~0.6px) for legibility at small sizes.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px with large jumps (`{spacing.4xl}`–`{spacing.5xl}`) between major sections — emptiness is structural.

### Grid & Container
- Max content width: approximately 1160px
- Hero: left-aligned or centered single column with mono eyebrow above the headline
- Feature sections: 2–3 column grids of bordered cards
- Section separation via hairline dividers (`{colors.divider}`) and whitespace, not background shifts

### Whitespace Philosophy
- **Notebook air**: Large vertical padding between sections (`{spacing.4xl}`+). The page breathes.
- **Line over fill**: Structure is communicated through 1px borders, not surfaces or shadows.
- **Mono anchors**: Each section opens with a small mono label that anchors the reader like a chapter marker.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No border, no shadow | Paper background, text blocks |
| Hairline | `1px solid {colors.border}` | Default cards, quiet panels |
| Strong line | `1px solid {colors.border-strong}` | Inputs, ghost buttons |
| Focus | `2px solid {colors.focus}` outline + `{colors.ring}` halo | Keyboard focus |

**Depth Philosophy**: Contra Labs avoids shadows almost entirely. Depth is line-based — the difference between `{colors.border}` and `{colors.border-strong}` carries the hierarchy that shadow would carry elsewhere. Cards feel drawn on paper, not floated above it.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed dividers, edges |
| `xs` | 2px | Inline code, tiny chips |
| `sm` | 4px | Buttons, inputs, functional elements |
| `md` | 6px | Small containers |
| `lg` | 10px | Cards, panels |
| `pill` | 9999px | Badges, status tags |

## Components

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

### Buttons
- **`button-primary`** — Solid ink fill, paper text, `{rounded.sm}`. The sole loud element; the "Request partnership" CTA.
- **`button-secondary`** — Card-white surface with `{colors.border-strong}` outline. Ghost action.

### Pills & Badges
- **`badge`** — Bordered pill, mono caption, muted ink. Status/metadata tags.
- **`badge-live`** — Soft-red background, signal-red text. Reserved for live/active states.

### Cards
- **`card`** — Card-white surface, hairline `{colors.border}`, `{rounded.lg}`. The workhorse.
- **`card-quiet`** — Paper-on-paper variant with divider-tone border for low-emphasis panels.

### Inputs
- **`input`** — Card-white, `{colors.border-strong}` outline. Focus swaps the border to `{colors.focus}`.

### Navigation
- **`nav-bar`** — Paper header with a single hairline divider beneath. Mono/sans link mix, solid ink CTA right.

### Distinctive Components
- **Mono Eyebrow**: Small Space Mono label (`{components.eyebrow}`) above each section heading — the terminal-prompt chapter marker that ties the whole system together.

## Do's and Don'ts

### Do
- Use warm paper (`{colors.background}`), never pure white, as the canvas
- Pair Space Grotesk (voice) with Space Mono (labels) — keep the roles strict
- Define structure with 1px borders, not shadows
- Apply negative tracking on display headlines (-1.68px at 56px)
- Reserve signal red (`{colors.accent}`) for live/active states only
- Keep exactly one solid ink CTA per view; everything else stays ghost/quiet

### Don't
- Don't introduce shadows for depth — use border weight instead
- Don't use signal red decoratively or on chrome
- Don't put body text in Space Mono — mono is for labels only
- Don't use large radii — the system stays tight (≤10px)
- Don't use pure white surfaces across the whole page; paper is the resting tone
- Don't add a second loud accent — the palette is achromatic by design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, mono eyebrows persist |
| Tablet | 600–1024px | 2-column card grids begin |
| Desktop | 1024–1160px | Full multi-column layout, max content width |
| Large | >1160px | Centered, generous side margins |

### Touch Targets
- Buttons use comfortable padding (12px vertical)
- Inputs at 10–14px padding
- Badges keep 12px horizontal padding for tap comfort

### Collapsing Strategy
- Hero: 56px → scales down, maintains negative tracking proportionally
- Navigation: horizontal links + CTA → hamburger
- Feature cards: 3-column → 2-column → single column
- Section spacing: 96px+ → ~48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Ink `{colors.ink}` on paper
- Background: Warm paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Live state: Signal Red `{colors.accent}`
- Focus ring: `{colors.focus}`

### Example Component Prompts
- "Hero on warm paper `{colors.background}`. Mono eyebrow 13px Space Mono `{colors.ink-muted}` with 0.6px tracking above a 56px Space Grotesk headline weight 500, line-height 1.04, letter-spacing -1.68px, color `{colors.ink}`. Solid ink CTA (`{colors.ink}` fill, paper text, 4px radius, 12px 22px padding)."
- "Card: card-white `{colors.surface}`, 1px solid `{colors.border}`, 10px radius, 28px padding. Title 20px Space Grotesk weight 500, body 17px weight 400 in `{colors.ink-secondary}`."
- "Live badge: `{colors.accent-soft}` background, `{colors.accent}` text, 12px Space Mono, pill radius, 4px 12px padding."

### Iteration Guide
1. Paper canvas, off-black ink — printed contrast, not glaring
2. Borders carry hierarchy; avoid shadows
3. Mono for labels, sans for everything else — never mix the roles
4. Negative tracking scales with size: -1.68px at 56px down to 0 at body
5. One solid ink CTA per view; signal red only for live/active

---

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