---
version: alpha
name: Flint System
description: A dark-first, token-architected design system — near-black #111 canvas, Geist Sans + Geist Mono, a calm periwinkle-blue accent (#5472e4), and a full Radix-style semantic color layer (background/foreground/text/border) layered over primitive scales. Restrained, scalable, built to be customized and kept.

colors:
  # Canvas + surfaces (dark-first)
  background: "#111111"
  surface: "#191919"
  surface-secondary: "#222222"
  surface-soft: "#2a2a2a"
  surface-hover: "#313131"

  # Ink / text on dark
  ink: "#eeeeee"
  ink-pure: "#ffffff"
  ink-secondary: "#b4b4b4"
  ink-tertiary: "#7b7b7b"
  ink-quaternary: "#606060"
  ink-disabled: "#484848"

  # Accent (periwinkle blue) — the one brand hue
  primary: "#5472e4"
  primary-hover: "#3e63dd"
  accent-soft: "#9eb1ff"
  accent-subtle: "#182449"
  accent-subtle-hover: "#1d2e62"
  accent-border: "#3e63dd"

  # Borders
  border: "#3a3a3a"
  border-subtle: "#2a2a2a"
  border-strong: "#606060"

  # Status — positive
  positive: "#33b074"
  positive-text: "#3dd68c"
  positive-subtle: "#132d21"

  # Status — negative
  negative: "#ec5d5e"
  negative-text: "#ff9592"
  negative-subtle: "#3b1219"

  # Status — warning
  warning: "#f76b15"
  warning-text: "#ff801f"
  warning-soft: "#ffa057"
  warning-subtle: "#331e0b"

  # On-color + inverse
  on-primary: "#ffffff"
  on-color: "#ffffff"
  inverse-surface: "#ffffff"
  inverse-ink: "#111111"
  placeholder: "#606060"

  ink-pure-black: "#000000"

typography:
  display-lg:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  display-md:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1.5px
  display-sm:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  heading-2xl:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -1px
  heading-xl:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  heading-lg:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  heading-md:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: -0.2px
  heading-sm:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.45
    letterSpacing: 0px
  body-xl:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-lg:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-md:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-sm:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label-lg:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  label-md:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  label-sm:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  mono-body:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Geist Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  micro: 1px
  3xs: 2px
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 48px
  5xl: 64px
  6xl: 80px
  7xl: 96px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 24px
  3xl: 32px
  4xl: 40px
  full: 9999px

components:
  # Primary CTA — light pill on dark canvas
  button-primary:
    backgroundColor: "{colors.inverse-surface}"
    textColor: "{colors.inverse-ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.inverse-ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  # Accent button — periwinkle blue
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  # Secondary — dark surface with subtle border
  button-secondary:
    backgroundColor: "{colors.surface-secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-pure}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  # Card — dark surface, subtle border, generous radius
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border-subtle}"

  # Elevated / feature card — larger radius
  card-feature:
    backgroundColor: "{colors.surface-secondary}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.accent-border}"

  # Badge — neutral pill
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 2px 10px
    borderColor: "{colors.border-subtle}"

  # Accent badge — subtle blue
  badge-accent:
    backgroundColor: "{colors.accent-subtle}"
    textColor: "{colors.accent-soft}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 2px 10px

  # Positive status pill
  badge-positive:
    backgroundColor: "{colors.positive-subtle}"
    textColor: "{colors.positive-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 2px 10px

  # Warning status pill
  badge-warning:
    backgroundColor: "{colors.warning-subtle}"
    textColor: "{colors.warning-soft}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 2px 10px

  # Negative status pill
  badge-negative:
    backgroundColor: "{colors.negative-subtle}"
    textColor: "{colors.negative-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 2px 10px

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-md}"
    padding: 16px 24px
    borderColor: "{colors.border-subtle}"

  # Code block — Geist Mono on near-black
  code-block:
    backgroundColor: "{colors.ink-pure-black}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border-subtle}"
---

# Flint System Design System

## Overview

Flint is a design system sold as a product — "the design system you'll actually want to keep" — and its marketing site practices exactly what it sells. The page is dark-first by default, anchored on a near-black `{colors.background}` canvas with a tight progression of elevated grays (`{colors.surface}` → `{colors.surface-secondary}` → `{colors.surface-soft}`) standing in for traditional surfaces and borders. Nothing glows or shouts; depth is built from subtle gray steps and hairline borders rather than heavy shadow.

Typographically it runs on Geist Sans and Geist Mono — the same Vercel-pedigree pair — but Flint uses them more conservatively than Vercel does. Display sizes carry moderate negative tracking (around -1.5px to -2px at 48–64px) for a confident, modern headline rather than Vercel's aggressively compressed minification. Body copy is Geist Sans at 14–18px with comfortable line-height, and Geist Mono shows up for code specimens and technical labels. The type system is fully tokenized into display / heading / body / label families, each with its own size and weight role.

The single brand hue is a calm periwinkle blue (`{colors.primary}`, #5472e4) that hovers to a deeper indigo (`{colors.primary-hover}`). Everything else is achromatic grayscale plus a Radix-derived semantic status layer — green (positive), red (negative), amber (warning) — each provided as a foreground, a saturated fill, and a dark "subtle" background tint. The accent is used sparingly: focus rings, links, one or two CTAs, info pills. Most of the interface is gray-on-gray with white text doing the heavy lifting.

What makes Flint distinctive as a *system* (versus a marketing page) is the disciplined token architecture beneath it: primitive scales (`--font-size-*`, `--radius-*`, `--space-*`) feed semantic aliases (`--background-bg-*`, `--text-text-*`, `--border-border-*`, `--radius-radius-*`), so every surface, text role, and border references a named token rather than a raw value. That layering is the product's whole pitch — architected to scale and to be re-themed.

**Key Characteristics:**
- Dark-first canvas: near-black `{colors.background}` with a tight elevated-gray surface ladder
- Geist Sans + Geist Mono, used with restraint (moderate negative tracking, not extreme compression)
- One brand hue — periwinkle blue `{colors.primary}` — applied sparingly for accent, links, and focus
- Full Radix-style semantic status layer (positive/negative/warning) with fill + subtle-tint + foreground per status
- Two-tier token architecture: primitive scales feeding semantic aliases (background/foreground/text/border)
- White-on-dark text hierarchy: `{colors.ink}` → `{colors.ink-secondary}` → `{colors.ink-tertiary}` → `{colors.ink-quaternary}`
- Generous, consistent radii (8–24px) and hairline `{colors.border-subtle}` borders instead of heavy shadow
- Light pill CTA on dark canvas as the primary action treatment

## Colors

### Canvas & Surfaces
- **Body** (`{colors.background}`): The near-black page canvas. The dark default the whole system is tuned for.
- **Surface** (`{colors.surface}`): Primary raised surface — cards, panels.
- **Surface Secondary** (`{colors.surface-secondary}`): Second elevation step, also the disabled/secondary fill.
- **Surface Soft** (`{colors.surface-soft}`): Neutral chips, hovered surfaces.
- **Surface Hover** (`{colors.surface-hover}`): Hover state for neutral surfaces.

### Ink / Text
- **Ink** (`{colors.ink}`): Primary text — off-white, not pure white, to soften contrast.
- **Ink Pure** (`{colors.ink-pure}`): Hovered/emphasized text and pure-white highlights.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, descriptions.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Muted labels, metadata.
- **Ink Quaternary** (`{colors.ink-quaternary}`): Faint text, placeholders.
- **Ink Disabled** (`{colors.ink-disabled}`): Disabled text.

### Accent (Periwinkle Blue)
- **Primary** (`{colors.primary}`): The single brand hue — links, accent CTAs, focus, info.
- **Primary Hover** (`{colors.primary-hover}`): Deeper indigo hover.
- **Accent Soft** (`{colors.accent-soft}`): Light accent text on dark, hovered link.
- **Accent Subtle** (`{colors.accent-subtle}`): Dark blue tint for info/accent pill backgrounds.
- **Accent Border** (`{colors.accent-border}`): Focus-ring and accent borders.

### Borders
- **Border** (`{colors.border}`): Default border on interactive surfaces.
- **Border Subtle** (`{colors.border-subtle}`): Hairline dividers, card outlines.
- **Border Strong** (`{colors.border-strong}`): Emphasized / hovered borders.

### Status
- **Positive** (`{colors.positive}`) / **Positive Text** (`{colors.positive-text}`) / **Positive Subtle** (`{colors.positive-subtle}`): Success.
- **Negative** (`{colors.negative}`) / **Negative Text** (`{colors.negative-text}`) / **Negative Subtle** (`{colors.negative-subtle}`): Errors, destructive.
- **Warning** (`{colors.warning}`) / **Warning Text** (`{colors.warning-text}`) / **Warning Soft** (`{colors.warning-soft}`) / **Warning Subtle** (`{colors.warning-subtle}`): Caution.

### Inverse & On-Color
- **Inverse Surface** (`{colors.inverse-surface}`): White — the primary CTA fill on dark.
- **Inverse Ink** (`{colors.inverse-ink}`): Near-black text on inverse/light fills.
- **On Primary** (`{colors.on-primary}`): White text on the accent fill.
- **Placeholder** (`{colors.placeholder}`): Input placeholder text.

## Typography

### Font Family
- **Primary**: `Geist`, with fallbacks `Arial, sans-serif`
- **Monospace**: `Geist Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-lg` | 64px hero headline |
| `display-md` | 48px section hero |
| `display-sm` | 40px large section heading |
| `heading-2xl` | 32px section titles |
| `heading-xl` | 28px sub-section headings |
| `heading-lg` | 24px card headings |
| `heading-md` | 20px small headings |
| `heading-sm` | 18px compact headings |
| `body-xl` | 18px lead paragraphs |
| `body-lg` | 16px standard reading text |
| `body-md` | 14px standard UI text |
| `body-sm` | 13px dense / secondary text |
| `label-lg` | 16px emphasized labels |
| `label-md` | 14px buttons, nav, form labels |
| `label-sm` | 13px compact labels |
| `caption` | 12px badges, metadata |
| `mono-body` | Code blocks (Geist Mono) |
| `mono-caption` | Technical labels (Geist Mono) |

### Principles
- **Restrained compression**: display sizes use moderate negative tracking (-1.5px to -2px) — confident, not minified. Tracking relaxes to 0 at body sizes.
- **Two-axis families**: a 400-weight `body-*` family for reading and a 500-weight `label-*` family for UI, plus 600-weight `display/heading` for announcement. Three weights, strict roles.
- **Off-white over pure white**: primary text is `{colors.ink}` (#eee), reserving `{colors.ink-pure}` for emphasis — the micro-contrast softness matters on a dark canvas.
- **Mono for technical voice**: Geist Mono carries code and technical labels only.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px sub-step (`{spacing.2xs}`) and 1–2px micro tokens for hairlines. Section rhythm leans on the large end (`{spacing.5xl}`–`{spacing.7xl}`).

### Grid & Container
- Centered content column with generous gutters
- Feature sections use 2–3 column card grids
- Hero is centered single-column with large top padding

### Whitespace Philosophy
- **Dark calm**: the near-black canvas plus wide vertical spacing gives a quiet, gallery-like feel where the periwinkle accent reads instantly.
- **Surfaces, not shadows**: separation comes from the gray surface ladder and hairline `{colors.border-subtle}` borders, not drop shadows.
- **Consistent radius rhythm**: cards cluster on 16–24px radii, controls on 8px — a coherent rounded language across the system.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / flush edges |
| `xs` | 4px | Small chips, inline elements |
| `sm` | 6px | Compact controls |
| `md` | 8px | Buttons, inputs — the default control radius |
| `lg` | 12px | Code blocks, list items |
| `xl` | 16px | Standard cards |
| `2xl` | 24px | Feature cards, large panels |
| `3xl` | 32px | Hero panels |
| `4xl` | 40px | Largest containers |
| `full` | 9999px | Pills, badges, avatars |

## Components

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

### Buttons
- **`button-primary`** — Light/white pill-radius-md fill with near-black text. The default CTA on the dark canvas.
- **`button-accent`** — Periwinkle blue `{colors.primary}` fill, white text — used when the accent should lead.
- **`button-secondary`** — Dark `{colors.surface-secondary}` fill with a `{colors.border}` outline.

### Cards
- **`card`** — `{colors.surface}` fill, `{rounded.xl}` radius, hairline `{colors.border-subtle}` border. Depth from the surface step, not shadow.
- **`card-feature`** — `{colors.surface-secondary}`, larger `{rounded.2xl}` radius and padding for headline feature blocks.

### Inputs
- **`input`** — `{colors.surface}` fill, `{colors.border}` outline. Focus swaps the border to `{colors.accent-border}` blue.

### Badges & Status
- **`badge`** — Neutral gray pill. **`badge-accent`** — blue subtle tint. **`badge-positive`** / **`badge-warning`** / **`badge-negative`** — each pairs a dark "subtle" background with its lighter status foreground.

### Navigation
- **`nav-bar`** — Dark canvas header, `{colors.ink-secondary}` links in `label-md`, hairline bottom border.

### Code
- **`code-block`** — Pure-black surface, Geist Mono, `{colors.ink-secondary}` text — the system's technical specimen.

## Do's and Don'ts

### Do
- Build depth from the gray surface ladder (`{colors.background}` → `{colors.surface}` → `{colors.surface-secondary}` → `{colors.surface-soft}`) and hairline borders, not heavy shadow
- Keep periwinkle `{colors.primary}` for accent, links, and focus only — let gray-on-gray carry the rest
- Use off-white `{colors.ink}` for primary text, reserving pure white for emphasis
- Pair every status with its three roles: fill, subtle-tint background, and lighter foreground
- Use moderate negative tracking on display sizes; relax to 0 at body sizes
- Reference semantic tokens (background/text/border/radius) rather than raw values

### Don't
- Don't flood the UI with the blue accent — it loses its signal
- Don't use pure white (#fff) for large bodies of reading text — `{colors.ink}` is softer on dark
- Don't add heavy drop shadows — the system separates with surface steps and borders
- Don't mix in unrelated brand hues; the palette is achromatic plus one blue plus Radix status colors
- Don't over-compress headlines — this isn't Vercel-grade minification
- Don't put light backgrounds behind body content — Flint is dark-first by design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, tightened section padding |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1400px | Full multi-column layout, centered content column |
| Large Desktop | >1400px | Centered with generous side margins |

### Collapsing Strategy
- Hero: `display-lg` 64px scales down, maintaining proportional negative tracking
- Navigation: horizontal links collapse to a menu toggle
- Feature cards: 3-column → 2-column → single column
- Section spacing compresses from the `{spacing.6xl}`–`{spacing.7xl}` range toward `{spacing.4xl}` on mobile

## Agent Prompt Guide

### Quick Color Reference
- Canvas: near-black `{colors.background}`
- Card surface: `{colors.surface}`, border `{colors.border-subtle}`
- Primary text: off-white `{colors.ink}`; secondary `{colors.ink-secondary}`
- Accent / links / focus: periwinkle `{colors.primary}`
- Primary CTA: white fill `{colors.inverse-surface}`, near-black text `{colors.inverse-ink}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 64px Geist weight 600, line-height 1.05, letter-spacing -2px, color `{colors.ink}`. Subtitle 18px Geist weight 400 in `{colors.ink-secondary}`. White pill CTA (`{colors.inverse-surface}` fill, `{colors.inverse-ink}` text, 8px radius) plus a secondary dark button (`{colors.surface-secondary}` fill, `{colors.border}` outline)."
- "Design a card: `{colors.surface}` background, 16px radius, hairline 1px `{colors.border-subtle}` border, 24px padding. Heading 24px Geist weight 600 in `{colors.ink}`, body 14px weight 400 in `{colors.ink-secondary}`."
- "Build a status pill set: positive (`{colors.positive-subtle}` bg, `{colors.positive-text}` text), warning (`{colors.warning-subtle}` bg, `{colors.warning-soft}` text), negative (`{colors.negative-subtle}` bg, `{colors.negative-text}` text), each full pill radius, 2px 10px padding, 12px Geist weight 500."
- "Create an input: `{colors.surface}` fill, `{colors.border}` outline, 8px radius. On focus, swap border to `{colors.accent-border}` periwinkle."

### Iteration Guide
1. Start dark — `{colors.background}` canvas, off-white `{colors.ink}` text
2. Build elevation with the gray surface ladder, not shadow
3. Spend the periwinkle accent sparingly — links, focus, one lead CTA
4. Give every status its fill + subtle-tint + foreground trio
5. Keep radii coherent: 8px controls, 16–24px cards
6. Geist Sans for everything, Geist Mono for code and technical labels

---

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