---
version: alpha
name: Herding
description: Editorial near-monochrome on warm white — Styrene grotesque set against a near-black ink (#080901) with a single amber accent family (sandy gold → burnt orange). Whisper-level opacity-tinted hairlines instead of hard borders, JetBrains Mono labels, and a calm, gallery-like canvas.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#fbfbfa"
  ink: "#080901"          # near-black, faint green-warmth
  ink-pure: "#000000"

  # Amber accent family — the only chroma in the system
  primary: "#e67433"      # burnt orange — primary accent / CTA
  accent-gold: "#e3ac6a"  # sandy gold
  accent-peach: "#ff9f69" # warm peach highlight

  # Secondary / muted ink (opaque approximations over white)
  ink-secondary: "#5c5d57"   # ~rgba(8,9,1,0.64) over white
  ink-tertiary: "#8f9089"    # ~rgba(8,9,1,0.44) over white
  ink-muted: "#c2c2bf"       # ~rgba(8,9,1,0.24) over white

  # Hairline borders — flattened opacity tints over white
  border: "#ebebea"          # ~rgba(8,9,1,0.08)
  border-soft: "#f3f3f2"     # ~rgba(8,9,1,0.05)
  border-faint: "#f8f8f7"    # ~rgba(8,9,1,0.025)

  # Tints
  accent-wash: "#fdf3eb"     # peach/gold wash behind accent contexts

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Styrene, DM Sans, apple-system, sans-serif"
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.45
    letterSpacing: 0px
  button-ui:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Styrene, DM Sans, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  mono-label:
    fontFamily: "Duo, JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.4px
  mono-body:
    fontFamily: "Duo, JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 18px
    borderColor: "{colors.border}"
  button-pill:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.accent-wash}"
    textColor: "{colors.primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 2px 10px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    borderColor: "{colors.border}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 14px 24px
    borderColor: "{colors.border}"
---

# Herding Design System

## Overview

Herding presents itself with the quiet confidence of a creative tool that wants its output, not its chrome, to be the loudest thing on screen. The canvas is plain white (`{colors.background}`) and the ink is a near-black `{colors.ink}` carrying the faintest green-warmth — not pure black, which keeps the page from feeling clinical. The result reads like an editorial workspace: calm, spacious, and deliberately understated, with type doing nearly all of the work.

The type system pairs a custom grotesque, Styrene, with a JetBrains-derived monospace ("Duo"). Styrene sets every headline and most body copy in its 400/500 weights, with negative letter-spacing tightening as size grows (-1.6px at the hero scale). The monospace is reserved for labels, metadata, and technical voice — small uppercase-feeling tags that anchor the interface in a maker's-tool sensibility. There is no decorative third typeface; the contrast between grotesque and mono is the entire typographic argument.

Color is rationed. The only chroma in the system is a warm amber family — burnt orange `{colors.primary}`, sandy gold `{colors.accent-gold}`, and a peach highlight `{colors.accent-peach}`. These appear as a single accent, a wash behind a badge, or a CTA fill — never as broad surface color. Everything else is achromatic: white surfaces, near-black ink, and a graded set of ink-tinted grays for secondary and tertiary text.

**Key Characteristics:**
- Near-black ink `{colors.ink}` (not pure black) on warm-white canvas — micro-contrast softness
- Single amber accent family (sandy gold → peach → burnt orange) as the only chroma
- Styrene grotesque with size-scaled negative tracking; JetBrains-style mono for labels
- Whisper-level opacity-tinted hairlines (`{colors.border}`) instead of hard borders
- Restrained, gallery-like spacing — the output, not the UI, is the subject
- Small radii (4–10px) for functional elements, full pills for tags and chips

## Colors

### Primary
- **Ink** (`{colors.ink}`): Headings, body text, dark CTA fills. Near-black with faint warmth.
- **White** (`{colors.background}`): Page and card surfaces, text on dark.
- **Burnt Orange** (`{colors.primary}`): The primary accent — CTAs, links, active marks.

### Amber Accent Family
- **Sandy Gold** (`{colors.accent-gold}`): Secondary accent, highlights, illustration tone.
- **Warm Peach** (`{colors.accent-peach}`): Brightest accent highlight, hover glints.
- **Accent Wash** (`{colors.accent-wash}`): Soft peach tint behind badges and accent contexts.

### Ink Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, descriptions.
- **Ink Tertiary** (`{colors.ink-tertiary}`): Muted metadata, captions.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder text, disabled states.

### Borders
- **Border** (`{colors.border}`): Standard hairline — flattened ink-at-8%.
- **Border Soft** (`{colors.border-soft}`): Lighter dividers.
- **Border Faint** (`{colors.border-faint}`): Barely-there separation.

## Typography

### Font Family
- **Primary**: `Styrene`, with fallbacks `DM Sans, apple-system, sans-serif`
- **Monospace**: `Duo` / `JetBrains Mono`, with 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}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline, tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large card heads |
| `card-title` | Card and feature titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, compact controls |
| `caption` | Metadata, fine print |
| `mono-label` | Technical labels, tags, badges |
| `mono-body` | Inline code, technical values |

### Principles
- **Grotesque + mono, nothing else**: Styrene carries reading and display; the mono carries the maker's-tool voice. No third family, no serif.
- **Tracking scales with size**: negative letter-spacing tightens as type grows (-1.6px hero → 0 at body).
- **Two weights**: 400 for reading, 500 for headings and UI. No heavy weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; larger steps (`{spacing.3xl}`, `{spacing.4xl}`) open up generous vertical breathing room between sections.

### Grid & Container
- Centered single-column hero with comfortable top padding
- Content kept narrow and editorial; whitespace is the structure
- Section separation comes from spacing and hairlines, not background color

### Whitespace Philosophy
- **Calm canvas**: the interface recedes so generated/creative output reads first
- **Hairlines over fills**: structure is drawn with `{colors.border}` opacity tints, never heavy rules
- **Single accent discipline**: amber appears in small, intentional moments against the achromatic field

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Near-black ink fill, white text, `{rounded.sm}`. Default CTA.
- **`button-accent`** — Burnt-orange fill for the highest-intent action.
- **`button-secondary`** — White with hairline border.
- **`button-pill`** — Soft-surface chip with pill radius for filters/tags.

### Cards
- **`card`** — White surface, hairline border (`{colors.border}`), `{rounded.lg}`, generous padding. No heavy shadow.

### Badges
- **`badge`** — Peach wash background, burnt-orange mono text, full pill.

### Inputs
- **`input`** — White, hairline border, `{rounded.sm}`. Mono or sans depending on context.

### Navigation
- **`nav-bar`** — White header, hairline bottom border, 14px Styrene weight 500 links.

## Do's and Don'ts

### Do
- Use `{colors.ink}` (near-black) rather than pure black for text
- Keep amber as a single rationed accent — CTA, badge, or highlight
- Draw structure with opacity-tinted hairlines, not heavy borders
- Pair Styrene grotesque with the mono for technical labels
- Tighten letter-spacing as type grows

### Don't
- Don't broadcast the amber across large surfaces — it's a spice, not a base
- Don't introduce a third typeface or a serif
- Don't use heavy drop shadows — the system is flat and hairline-driven
- Don't fill the canvas with color; white is the subject's frame
- Don't use heavy font weights — 400 and 500 only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced hero size, tightened padding |
| Tablet | 600–1024px | Wider content, 2-column where applicable |
| Desktop | >1024px | Full editorial layout, maximum whitespace |

### Collapsing Strategy
- Hero: 56px scales down on mobile, tracking stays proportional
- Navigation: inline links collapse to a compact menu
- Section spacing: `{spacing.4xl}` relaxes toward `{spacing.2xl}` on mobile
- Cards: multi-column grids stack to single column

---

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