---
version: alpha
name: Counter Forms
description: A type foundry's editorial canvas — pure-white pages, true-black ink, and a single hot orange-red accent (#ff6500). Custom display serifs and grotesques set the masthead while Cassette mono carries technical labels; 2px radii, soft butter-yellow selection, and masonry grids of typeface specimens keep the page reading like a printed catalogue.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  card: "#f2f2f2"
  ink: "#000000"
  ink-secondary: "#787878"
  ink-muted: "#9ca3af"

  # Brand accent — hot orange-red
  primary: "#ff6500"
  red-dark: "#e65b00"
  red-light: "#ff9249"
  red-lightest: "#ffd3b6"
  coral: "#ff9696"
  peach-bg: "#ffe0cc"

  # Highlight / selection — butter yellow
  selection: "#fff5a6"
  hover: "#fffce4"
  brand-yellow: "#ffdc00"
  cream: "#fffce4"

  # Neutral scale
  border: "#cccccc"
  border-strong: "#787878"
  gray-100: "#f5f5f5"
  gray-150: "#efefef"
  gray-200: "#e9e9e9"
  gray-300: "#d2d2d2"
  gray-400: "#aaaaaa"
  surface-soft: "#fafafa"

  # Specimen metal tones
  gold: "#c5b579"
  bronze: "#c9b698"
  silver: "#d1ccc8"

  # Cool accent
  blue-light: "#cceeff"

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

typography:
  display-hero:
    fontFamily: "Fugit SemiBold, Playfair Display, Georgia, serif"
    fontSize: 59px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-1:
    fontFamily: "Fugit SemiBold, Playfair Display, Georgia, serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.4px
  heading-2:
    fontFamily: "Pantasia Regular, Fraunces, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-3:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  heading-4:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body-large:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-italic:
    fontFamily: "Telas Medium Italic, Fraunces, Georgia, serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.55
    letterSpacing: 0px
  small:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  x-small:
    fontFamily: "Herbik Regular, Inter, Helvetica, sans-serif"
    fontSize: 9px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  mono-label:
    fontFamily: "Cassette, ui-monospace, Menlo, Monaco, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  mono-caption:
    fontFamily: "Cassette, ui-monospace, Menlo, Monaco, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.2px

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

rounded:
  none: 0px
  sm: 2px
  md: 10px
  pill: 9999px

components:
  # Primary accent CTA — hot orange-red
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
  button-primary-hover:
    backgroundColor: "{colors.red-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  # Secondary — outlined, ink text
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.hover}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    borderColor: "{colors.ink}"

  # Pill tag — mono label
  badge:
    backgroundColor: "{colors.card}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-caption}"
    rounded: "{rounded.pill}"
    padding: 2px 10px

  # Specimen / catalogue card
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
  card-hover:
    backgroundColor: "{colors.gray-200}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"

  # Text input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.primary}"

  # Top nav / menu bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
    padding: 13px 16px
    borderColor: "{colors.border}"

  # Menu link
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.mono-label}"
  nav-link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.mono-label}"
---

# Counter Forms Design System

## Overview

Counter Forms is a type foundry presented as an editorial publication, and its website reads like a printed catalogue more than a software product. The canvas is pure white (`{colors.background}`) with true-black ink (`{colors.ink}`), an unhedged high-contrast pairing that lets the typefaces themselves do all the talking. Where Vercel softens its black to a warm near-black, Counter Forms commits to absolute `#000000` — the printer's-ink default that frames every specimen as if pulled off a press sheet.

The system's one chromatic gesture is a hot orange-red (`{colors.primary}` — `#ff6500`) that functions as the brand's signature. It appears on links, hover states, prices, and small calls to action, with a darker `{colors.red-dark}` for pressed/hover depth and a ladder of tints (`{colors.red-light}`, `{colors.red-lightest}`, `{colors.peach-bg}`) for backgrounds and washes. A second, quieter highlight system runs on butter yellow: text selection paints `{colors.selection}` and row hovers use the faint cream `{colors.hover}`, so interaction feels like a highlighter passed over a page rather than a UI state machine.

Typography is the product, so the font stack is deep and custom. The masthead and large headings are set in the foundry's own display serif **Fugit SemiBold** and the softer **Pantasia**; running text uses the grotesque **Herbik**; italic asides borrow **Telas Medium Italic**; and every technical label, menu item, price, and caption is set in the monospace **Cassette**. That mono voice is the connective tissue — it gives navigation and metadata a typesetter's-spec-sheet character. In this corpus the custom faces are mapped to their closest Google equivalents (Playfair Display / Fraunces for the serifs, Inter for the grotesque) so specimens still render true.

Structurally the page is a masonry grid (it ships `masonry.pkgd.min.js`) of cards and specimens at a tiny 2px corner radius — barely rounded, almost a printed crop mark. Cards sit on a light `{colors.card}` field, borders are hairline `{colors.border}` gray, and depth is essentially absent: separation comes from the grid, the hairlines, and generous white space, not shadow.

**Key Characteristics:**
- Pure white canvas with absolute black (`#000000`) ink — printer's-ink contrast, no warmth
- A single hot orange-red accent (`{colors.primary}`) for links, prices, and small CTAs, with a darker hover (`{colors.red-dark}`)
- Butter-yellow highlight system: `{colors.selection}` for text selection, `{colors.hover}` cream for row hovers
- Deep custom type stack — display serif (Fugit/Pantasia), grotesque body (Herbik), italic serif (Telas), and Cassette mono for all labels
- Cassette monospace as the connective "spec-sheet" voice across nav, metadata, prices, and captions
- Tiny 2px radius (`{rounded.sm}`) everywhere — a crop-mark corner, not a soft pill
- Masonry catalogue grids of typeface specimens; depth from hairlines and white space, not shadow
- Metal-tone neutrals (`{colors.gold}`, `{colors.bronze}`, `{colors.silver}`) reserved for specimen detailing

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page background and card surfaces.
- **Black** (`{colors.ink}`): Primary text, headings, masthead — true `#000000`.
- **Gray 787878** (`{colors.ink-secondary}`): Secondary text, captions, muted labels.
- **Gray 9ca3af** (`{colors.ink-muted}`): Placeholder and disabled text.
- **Card** (`{colors.card}`): Light gray field behind specimen/catalogue cards.

### Brand Accent
- **Orange-Red** (`{colors.primary}`): The signature accent — links, prices, small CTAs.
- **Dark Red** (`{colors.red-dark}`): Hover/pressed depth on the accent.
- **Light Red** (`{colors.red-light}`): Lighter accent fills.
- **Lightest Red** (`{colors.red-lightest}`): Soft accent backgrounds.
- **Coral** (`{colors.coral}`): Warm tag/highlight fills.
- **Peach Bg** (`{colors.peach-bg}`): Soft warm section wash.

### Highlight / Selection
- **Selection Yellow** (`{colors.selection}`): Text selection highlight.
- **Hover Cream** (`{colors.hover}`): Row and link hover wash.
- **Brand Yellow** (`{colors.brand-yellow}`): Punch yellow for accents.
- **Cream** (`{colors.cream}`): Faintest yellow tint surface.

### Neutral Scale
- **Border** (`{colors.border}`): Hairline card and divider borders.
- **Border Strong** (`{colors.border-strong}`): Input and emphasized borders.
- **Gray 100–400** (`{colors.gray-100}`–`{colors.gray-400}`): Dividers, fills, muted chrome.
- **Surface Soft** (`{colors.surface-soft}`): Subtle off-white surface tint.

### Specimen Metal Tones
- **Gold** (`{colors.gold}`), **Bronze** (`{colors.bronze}`), **Silver** (`{colors.silver}`): Reserved for specimen detailing and decorative type washes.

### Cool Accent
- **Light Blue** (`{colors.blue-light}`): Occasional cool wash, used sparingly against the warm palette.

## Typography

### Font Family
- **Display serif**: `Fugit SemiBold` (mapped to `Playfair Display`) for the masthead and largest headings.
- **Secondary serif**: `Pantasia` (mapped to `Fraunces`) for sub-headings; `Telas Medium Italic` for italic asides.
- **Grotesque body**: `Herbik` (mapped to `Inter`) for running text and UI.
- **Monospace**: `Cassette` (fallback `ui-monospace, Menlo, Monaco, monospace`) for all labels, nav, prices, and captions.

### 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` | Masthead / billboard headline in Fugit serif |
| `heading-1` | Primary page headings |
| `heading-2` | Section headings in Pantasia serif |
| `heading-3` | Grotesque sub-headings |
| `heading-4` | Card titles, small headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text in Herbik |
| `body-italic` | Italic asides in Telas serif |
| `small` | Metadata, fine print |
| `x-small` | Micro labels |
| `mono-label` | Nav items, prices, buttons in Cassette |
| `mono-caption` | Specimen captions, tags |

### Principles
- **Type is the content**: The serif/grotesque/mono trio is curatorial, not incidental — each face marks a distinct editorial register.
- **Mono as spec-sheet voice**: Cassette monospace carries every label, price, and menu item, giving the site its typesetter's-catalogue character.
- **High-contrast restraint**: Absolute black on white; color is reserved for the orange-red accent and yellow highlight, never for body text.
- **Editorial italics**: Telas italic serif is used for asides and emphasis, distinct from the upright grotesque body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, opening to 24px (`{spacing.xl}`) and 40px (`{spacing.2xl}`) between catalogue blocks.

### Grid & Container
- Masonry grid (`masonry.pkgd.min.js`) of specimen and article cards
- Multi-column catalogue layout that reflows by column count, not fixed rows
- Generous white margins frame the grid like a printed page

### Whitespace Philosophy
- **Catalogue rhythm**: Cards breathe within a masonry field; separation comes from white space and hairline borders, not shadow.
- **Print sensibility**: Tight 2px radii and hairline `{colors.border}` rules echo crop marks and rule lines from print typesetting.
- **Color as highlight**: White dominates; the orange-red accent and yellow selection appear as deliberate marks on the page.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page background, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Card and divider borders |
| Field (Level 1b) | `{colors.card}` fill | Specimen card surface |
| Hover (Level 2) | `{colors.gray-200}` card fill / `{colors.hover}` row wash | Interactive feedback |
| Focus (Accessibility) | `2px {colors.primary}` border | Keyboard focus and active inputs |

**Depth Philosophy**: Counter Forms is essentially shadowless. Depth is communicated through hairline borders, light gray card fields, and the masonry grid's negative space — the visual logic of a printed specimen book rather than a layered UI.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, rule lines |
| `sm` | 2px | The default — cards, buttons, inputs (crop-mark corner) |
| `md` | 10px | Larger media containers |
| `pill` | 9999px | Tags, badges, avatars, dots |

## Components

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

### Buttons
- **`button-primary`** — Hot orange-red fill, white Cassette mono label, 2px radius. The accent CTA.
- **`button-secondary`** — White surface, `{colors.border-strong}` border, ink text; hover washes to `{colors.hover}`.

### Pills & Badges
- **`badge`** — Light `{colors.card}` field, muted text, Cassette mono caption, full pill.

### Cards
- **`card`** — Light gray `{colors.card}` field, hairline `{colors.border}`, 10px radius; hover deepens to `{colors.gray-200}`.

### Inputs
- **`input`** — White surface, `{colors.border-strong}` hairline, 2px radius. Focus switches the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White bar, hairline bottom border, Cassette mono links. Links hover to the orange-red accent (`{components.nav-link-hover}`).

### Distinctive Components
- **Masonry specimen grid**: Reflowing column grid of typeface cards — the signature catalogue layout.
- **Mono spec labels**: Cassette monospace prices, sizes, and metadata throughout, reading like a foundry spec sheet.
- **Yellow highlight system**: Text selection paints `{colors.selection}`; row hover washes `{colors.hover}`.

## Do's and Don'ts

### Do
- Use absolute black (`{colors.ink}`) on white — commit to printer's-ink contrast
- Reserve the orange-red accent (`{colors.primary}`) for links, prices, and small CTAs
- Set all labels, nav, prices, and captions in Cassette mono (`{typography.mono-label}`)
- Use the butter-yellow highlight system for selection and hover
- Keep radii tiny (2px) — a crop-mark corner, not a soft pill
- Lay specimens out in a masonry catalogue grid
- Let hairline borders and white space create separation instead of shadow

### Don't
- Don't soften the black — `#000000` is intentional
- Don't color body text — color is for accent and highlight only
- Don't add drop shadows; the system is shadowless
- Don't use large rounded corners on cards or buttons
- Don't replace the mono labels with sans — Cassette is the spec-sheet voice
- Don't let the metal tones (`{colors.gold}`/`{colors.bronze}`/`{colors.silver}`) leak outside specimen detailing

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <768px | `--font-size` drops to 0.95rem; h1 scales to ~2rem; cards single-column |
| Tablet | 768–1024px | Masonry narrows to 2 columns |
| Desktop | >1024px | Full multi-column masonry, maximum heading sizes |

### Touch Targets
- Mono nav links carry ~13px padding for tappable rows
- Buttons use 8px/16px padding
- Pill tags carry 10px horizontal padding

### Collapsing Strategy
- Masonry grid: multi-column → 2-column → single column
- Headings scale down (h1 3.7rem → ~2rem) while keeping the serif character
- Navigation collapses to a compact menu
- Specimen cards maintain their hairline border and 2px radius at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA / link: Orange-Red `{colors.primary}`
- Background: White `{colors.background}`
- Heading + body text: Black `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Border (hairline): `{colors.border}`
- Selection highlight: `{colors.selection}`
- Focus: `{colors.primary}`

### Example Component Prompts
- "Create a foundry masthead on white. Headline in a display serif (Playfair Display) at 59px weight 600, color `{colors.ink}`. Subtitle in Cassette-style mono at 12px, color `{colors.ink-secondary}`. A single orange-red link `{colors.primary}`."
- "Design a specimen card: `{colors.card}` background, 1px `{colors.border}` hairline, 10px radius, no shadow. Title in grotesque (Inter) 18px black, price in mono `{colors.primary}`. Hover deepens fill to `{colors.gray-200}`."
- "Build a mono nav bar: white, hairline bottom border `{colors.border}`, Cassette-style mono links 12px black, hover color `{colors.primary}`."
- "Style text selection to paint `{colors.selection}` butter-yellow and row hover to wash `{colors.hover}` cream."

### Iteration Guide
1. White canvas, black ink — never compromise the contrast
2. Color is a mark, not a field: orange-red for action, yellow for highlight
3. Cassette mono for every label, price, and menu item
4. 2px radius everywhere — crop-mark corners
5. No shadows; separation comes from hairlines and masonry white space
6. Serif for display, grotesque for body, mono for spec — keep the three voices distinct

---

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