---
version: alpha
name: "Pangram Pangram"
description: "Ink-black type foundry showcase — proprietary display faces fill the viewport, one blaze-orange accent cuts through darkness, and the type IS the interface"

colors:
  background: "#000000"
  surface: "#111111"
  surface-elevated: "#1a1a1a"
  ink: "#ffffff"
  ink-muted: "#999999"
  ink-subtle: "#666666"
  primary: "#ff2f00"
  on-primary: "#ffffff"
  primary-container: "#2a0800" # was rgba(255,47,0,0.12) — Google format requires hex
  secondary: "#ffffff"
  on-secondary: "#000000"
  border: "#222222"
  border-subtle: "#1a1a1a"
  focus-ring: "#ff2f00"
  shadow-soft: "#000000"
  link-hover: "#ff2f00" # was hsl(var(--color-link-hover)) resolved to brand red

typography:
  display-hero:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -3px
  display:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -2px
  display-specimen:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  heading-section:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.25px
  caption:
    fontFamily: "Neue Montreal, neue-montreal, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 23px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 11px 23px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  font-specimen-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  font-specimen-card-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
---

# Pangram Pangram Design System

## Overview

Pangram Pangram's website is built on a single radical premise: the typefaces themselves are the most important visual element on every page, and everything else exists to frame them without competition. The canvas is pure ink-black (`{colors.background}`), stretched edge-to-edge with no warmth or texture, and the first thing a visitor encounters is a hero specimen that consumes the entire viewport — a full-bleed typographic demonstration where the font name is set in the font itself, often at display sizes pushing 150–200px. The type isn't presented in a showcase box; it IS the backdrop.

The sole chromatic intervention in this darkness is `{colors.primary}` — an abrupt, saturated blaze-orange-red that sits on black with a visual temperature so high it functions less like a brand color and more like an emergency signal. It appears on primary CTA buttons, on hover states for navigation links, and as the activation indicator for interactive elements. Everything else runs in white, grey, and black. This binary palette — ink canvas, white type, single-red accent — is how a foundry communicates authority without ornament: we make the fonts that other designers use, and we don't need decoration to prove it.

The typography uses Neue Montreal as the editorial workhorse, a typeface from Pangram Pangram's own catalog — which means every page is simultaneously a product demonstration and a website. Display text is set heavy (weight 700) at extreme negative tracking (`-3px` at 96px), creating dense typographic blocks that read more like editorial posters than web pages. The `{typography.display-specimen}` scale shifts to weight 400 when showing off specific typefaces in comparison mode, letting the font's natural proportions speak. Supporting text at body and caption scales relaxes to zero tracking, creating a deliberate tonal contrast between the loud display layer and the quiet descriptive layer below it.

**Key Characteristics:**
- Ink-black `{colors.background}` as the total canvas — no warm tint, no texture, no surface variation until deep in the hierarchy
- `{colors.primary}` as the single chromatic accent, applied only to primary CTAs, hover states, and the scroll-indicator line that bleeds into hero sections
- Neue Montreal at weight 700, `letter-spacing: -3px` at 96px — type set so tight the counter-spaces between characters nearly seal
- Font specimens set in the featured face itself — every hero section is live product demonstration before it is marketing
- Full-bleed specimen heroes: the font name fills the viewport with no container border-radius, no padding, no framing chrome
- `{rounded.none}` on all content surfaces — specimen cards, hero panels, and font comparison tiles are all sharp-edged rectangles
- `{rounded.pill}` reserved exclusively for CTA buttons and metadata badges — the only curve in the system
- Navigation bar uses near-invisible `{colors.surface}` strip, links in weight 400, with `{colors.primary}` hover — no bold, no underline, just the accent color switching on
- Motion on hero slides runs at `0.75s` — deliberate, theatrical pacing matching the poster-scale typography
- 18 breakpoints reflecting the density of responsive typography work needed to preserve the display type at every size

## Colors

### Primary Canvas
- **Foundry Black** (`{colors.background}`): The total canvas — pure `#000000` used for the page background, hero sections, and the default surface for all font specimen panels. Not near-black; absolute black. The decision to use `#000000` rather than an off-black positions Pangram Pangram at maximum contrast intensity, ensuring white type at any weight reads with the sharpness of print.

### Surfaces
- **Elevated Dark** (`{colors.surface}`): The subtle step up from absolute black used for card backgrounds in the font catalog grid. At `#111111` the difference is barely perceptible on monitors — the hover state to `{colors.surface-elevated}` makes the interactive feedback visible without breaking the dark-room atmosphere.
- **Card Hover** (`{colors.surface-elevated}`): A fractional lift to `#1a1a1a` on card hover states. Provides interaction feedback without introducing visible color.

### Brand Accent
- **Pangram Red** (`{colors.primary}`): The single color statement — `#ff2f00`, a saturated orange-red that lands between fire and blood on the visible spectrum. Dembrandt confirmed this as the semantic primary extracted from button and link-hover contexts. Applied to primary CTA buttons, navigation hover states, the hero scroll indicator, and focus rings. Its appearance is always intentional and always singular — never used decoratively.

### Text
- **Primary White** (`{colors.ink}`): All headings, body copy, navigation text, and specimen labels on the black canvas. Pure white for maximum contrast.
- **Muted Grey** (`{colors.ink-muted}`): Secondary metadata — font style tags, pricing footnotes, descriptive captions under specimen heroes. At `#999999` it provides 3.88:1 contrast on black — just above WCAG AA for large text.
- **Subtle Grey** (`{colors.ink-subtle}`): The softest text tier for legal copy, tertiary navigation, and disabled states. Use with care on the black canvas as contrast approaches the AA threshold for small text.

### Borders & Structure
- **Primary Border** (`{colors.border}`): `#222222` — the hairline grid lines separating catalog tiles and the bottom rule on the navigation bar. Nearly invisible; registers as structure only in aggregate.
- **Subtle Border** (`{colors.border-subtle}`): `#1a1a1a` — used for inner card divisions and hover-surface transitions where the border should disappear on dark hover.

### Interaction
- **Focus Ring** (`{colors.focus-ring}`): `{colors.primary}` — the brand red doubles as the keyboard accessibility indicator, creating a vivid contrast-safe halo on the black canvas.

## Typography

### Font Family
- **Primary**: Neue Montreal (`neue-montreal`), a humanist sans-serif from Pangram Pangram's own catalog. Loaded as a self-hosted webfont. Fallback stack: Inter, `ui-sans-serif`, `system-ui`, `sans-serif`.
- The website is itself the most thorough Neue Montreal specimen available — every UI element from the navigation links to the footer legal copy runs in the same face. Secondary specimen heroes may temporarily override the global font with the featured typeface (Palma, Migra, etc.), but chrome always reverts.
- **OpenType**: No extracted feature flags in the dembrandt output, but Neue Montreal supports `"ss01"` through `"ss04"` stylistic sets and full `"kern"` pairs. The production site likely enables standard `"kern"`.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero specimen name — font fills the viewport at maximum weight and negative tracking |
| `display` | Section headline blocks, catalog-page hero banners, featured font announcements |
| `display-specimen` | Font comparison tiles when showing the specimen in the featured face itself — weight 400 to let the design speak |
| `heading-section` | Section anchors ("All Fonts", "New Releases", "Collections") |
| `heading-sub` | Font family name in catalog cards, modal header copy |
| `body-large` | Font description paragraphs, featured editorial text in specimen detail pages |
| `body` | Navigation dropdown lists, checkout copy, Academy page body |
| `nav-link` | Top navigation items — deliberately small (14px) to recede and let the specimen dominate |
| `button-ui` | CTA button labels, filter pill labels |
| `caption` | Font metadata: weight count, license type, release date |

### Principles
- **The display type is the product**: At hero scale, Neue Montreal weight 700 with `letter-spacing: -3px` creates typographic blocks so dense they read as shapes before words. This is intentional — the visual impression comes first, the reading second.
- **Weight 700 only at the display tier**: Below 32px, the system drops to weight 500 (headings) and 400 (everything else). The heavy weight is a display signal, not a general emphasis tool.
- **Negative tracking scales with size**: `-3px` at 96px, `-2px` at 64px, `-1px` at 48px, `-0.5px` at 32px, zero at 22px and below. The tracking tightens proportionally so letter-spacing density stays visually consistent across the scale.
- **Self-referential demonstration**: Font specimen heroes set the font name in the font being sold. The UI is the catalog page is the specimen sheet.
- **Single typeface discipline**: Neue Montreal handles every typographic register. Specimen section heroes temporarily adopt the featured face, then snap back to Neue Montreal for all chrome. No secondary editorial or monospace companion exists.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Pangram Pangram's spacing is generous at macro scale and tight at micro scale — reflecting the foundry's dual audience of designers scanning the catalog and non-specialists reading font descriptions. Hero sections use `{spacing.3xl}` to `{spacing.4xl}` vertical padding, giving specimen type room to read as graphic composition. At the catalog grid level, `{spacing.md}` to `{spacing.lg}` gutters keep font cards in close proximity to encourage comparative browsing.

### Grid & Container
- Max content width: approximately 1440px, with hero sections full-bleed edge-to-edge
- Catalog grid: responsive multi-column tile grid (4 columns at 1440px, collapsing through 3 → 2 → 1)
- Specimen hero: 100% viewport width and height, no inset padding — the font fills the frame completely
- Navigation: fixed-height strip at top, font name centered or left, utility links right

### Whitespace Philosophy
- **Contrast through density**: The heavy display type creates visual mass. The whitespace (which here is black-space) is the counter-pressure. Large vertical gaps between sections let the eye reset before the next specimen impact.
- **No decorative margins**: Space exists to serve the type. There are no flourish-zones, no decorative horizontal rules, no section dividers beyond surface color changes.
- **Grid discipline under the specimen chaos**: The catalog grid is rigorous and evenly spaced. The theatrical hero display type exists above the grid; below it, the catalog maintains strict column alignment.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All specimen cards, hero panels, navigation |
| Subtle (Level 1) | Surface color change: `{colors.background}` → `{colors.surface}` | Default card resting state against page background |
| Card hover (Level 2) | Surface color change: `{colors.surface}` → `{colors.surface-elevated}` | Card hover feedback — depth through color, not shadow |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard navigation — brand red on black is WCAG compliant |

**Shadow Philosophy**: Pangram Pangram uses no box shadows. The dembrandt extraction returned zero shadow entries across the entire site. On an ink-black canvas, shadows would be invisible anyway — depth is communicated entirely through surface color steps between `{colors.background}`, `{colors.surface}`, and `{colors.surface-elevated}`. The system achieves three distinct depth tiers (page → card → hover) without a single shadow declaration. This is not minimalism as a gesture; it is minimalism as necessity.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is binary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All specimen cards, hero panels, font catalog tiles, input fields, nav bar |
| `sm` | 4px | Notification badges, small metadata chips when tight context requires slight rounding |
| `pill` | 9999px | All CTA buttons ("Explore font", "Try for free"), filter pills, tag badges |

The shape language is as binary as the palette. Content surfaces are hard-edged rectangles — the specimen card is a window cut into the black canvas, not a soft tile floating above it. CTAs are full-pill, creating a deliberate tension with the sharp cards they sit inside. This contrast between the pill button and the zero-radius everything-else is how interactive affordances register as clickable without needing color alone.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly via `{components.button-primary}`, `{components.font-specimen-card}`, etc.

### Button Variants

- **`button-primary`** — Pill-shaped, `{colors.primary}` fill, white label. The only element on the page with both color and curve. Used exclusively for "Explore font" and "Try for free" CTAs on specimen hero sections. The red-on-black contrast exceeds WCAG AA for the 14px button label.
- **`button-secondary`** — Pill outline button, transparent fill, hairline `{colors.border}` border, white text. Inverts to solid white on hover. Used alongside primary buttons for secondary purchase or comparison actions.
- **`button-ghost`** — No border, no fill, `{colors.ink-muted}` text shifting to `{colors.primary}` on hover. For navigation-adjacent tertiary actions (breadcrumbs, "View all" links in catalog sections).

### Font Specimen Cards

- **`font-specimen-card`** — The primary catalog unit. `{colors.surface}` background, zero radius, hairline `{colors.border}` dividers. The font name is set in the font itself at specimen scale inside the card. Metadata (weight count, style range, release year) in `{typography.caption}` and `{colors.ink-muted}`.
- **`font-specimen-card-hover`** — Surface lifts to `{colors.surface-elevated}`, creating visible separation from the card grid without any shadow or translation animation.

### Inputs

- **`input`** — Bottom-border only, transparent fill, white text. The form field style is flush and minimal — the border line is the only indicator. On focus, the bottom border shifts to `{colors.primary}`.

### Badges / Tags

- **`badge`** — Pill shape, `{colors.primary-container}` fill (deep dark red), `{colors.primary}` text. Used for "New", "Updated" markers on newly released typefaces.
- **`badge-neutral`** — `{colors.surface}` fill, `{colors.ink-muted}` text. Font style tags ("Regular", "Bold", "Italic"), license type indicators.

### Navigation

Narrow fixed bar in `{colors.background}`, no border, no shadow. Wordmark left-aligned, utility links right ("All fonts", "Font starter pack", "Font in use", "Academy", "Support"). Links in `{typography.nav-link}` at weight 400 — deliberately small to yield visual priority to the specimen hero below. Hover shifts text to `{colors.primary}`. Search, bag, and account icons right-aligned.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#000000`) as the canvas — pure black, not `#0a0a0a` or `#111111`; the specimen type demands maximum contrast
- Set `{colors.primary}` as the single accent; every other interactive state resolves to white or grey
- Apply `{rounded.pill}` to buttons and badges only — never to specimen cards or content containers
- Use `{typography.display-hero}` at weight 700 with `letter-spacing: -3px` for hero type; let negative tracking create visual mass
- Set the featured typeface specimen in the featured font itself — the card or hero headline uses the font being sold, not Neue Montreal
- Size navigation text small (`{typography.nav-link}` at 14px) so it recedes behind the specimen
- Use `{colors.border}` at `#222222` for card grid lines — invisible individually, structural in aggregate
- Use motion at `0.5–0.75s` for hero slide transitions — theatrical pacing suits poster-scale typography
- Pair the pill CTA against zero-radius card grids to make interactive affordances self-evident

### Don't
- Don't introduce a second accent color — `{colors.primary}` is the only color in a black-and-white system; a second would collapse the hierarchy
- Don't add border-radius to specimen cards or font comparison tiles — `{rounded.none}` is the only content radius
- Don't use weight 700 below the display tier — `{typography.heading-section}` and below use weight 500 or 400
- Don't apply shadows anywhere — the system has no box-shadow declarations; on a black canvas they would be invisible and semantically incorrect
- Don't use `{colors.ink-subtle}` for body-scale text at small sizes; the contrast against black approaches the WCAG AA floor
- Don't override Neue Montreal in the UI chrome; only the specimen hero section adopts the featured face
- Don't use positive letter-spacing on display text — all tracking at 32px+ is neutral or negative
- Don't pad hero sections with symmetrical insets — the specimen type should reach to the viewport edge without margin
- Don't use the badge components for navigation — they are specimen metadata markers, not interactive controls

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <450px | Single-column catalog, hero type scales to ~48px, nav collapses to hamburger |
| Mobile Wide | 450–600px | Font cards stack 1-column, hero scales to ~64px |
| Tablet Small | 600–768px | 2-column catalog grid, hero type at ~72px |
| Tablet | 768–1000px | 2-column grid, full nav links appear |
| Desktop Small | 1000–1200px | 3-column catalog grid, hero type at ~96px |
| Desktop | 1200–1440px | 4-column grid, full hero viewport treatment |
| Large Desktop | 1440px+ | Maximum layout, specimen heroes at cinematic scale |

Pangram Pangram ships 18 breakpoints in production — reflecting the precise typographic scaling required across specimen heroes where the headline font must read as graphic composition at every viewport width without wrapping awkwardly.

### Touch Targets
- CTA buttons: pill shape with 12px vertical padding — minimum 44px height at button-ui font size
- Navigation links: small (14px) but surrounded by adequate padding to meet 44px touch target on mobile
- Catalog font cards: full card is tappable — large target area makes font browsing comfortable on tablet

### Collapsing Strategy
- **Navigation**: Full horizontal link list collapses to icon-only or hamburger on mobile; wordmark remains
- **Hero specimen**: Full-bleed maintained at all breakpoints; font scales down proportionally rather than reflows
- **Catalog grid**: 4 → 3 → 2 → 1 column as viewport narrows; card internal layout remains constant
- **Specimen hero type size**: Fluid scaling from 96px at desktop to ~40px at mobile — the font name remains legible, the poster quality diminishes gracefully
- **Button pairs**: "Explore font" + "Try for free" stack vertically on mobile viewports below 450px

### Image Behavior
- Hero backgrounds use large editorial photography (cocktail imagery, architectural details, lifestyle) as the backdrop behind the specimen type — `object-fit: cover`, no border-radius
- Font catalog tiles use uniform specimen renderings at consistent scale — no art direction swaps needed
- Photography is always subordinate to the typography it sits behind — high-contrast treatment ensures white specimen text reads over any photographic background

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#000000`)
- Primary text: `{colors.ink}` (`#ffffff`)
- Secondary text: `{colors.ink-muted}` (`#999999`)
- Brand accent / CTA: `{colors.primary}` (`#ff2f00`)
- Card surface: `{colors.surface}` (`#111111`)
- Border: `{colors.border}` (`#222222`)
- Focus ring: `{colors.focus-ring}` (`#ff2f00`)
- All shadows: none

### Example Component Prompts

- "Build a font specimen hero section for a type foundry. Full-bleed viewport background in `#000000`. Center the font name ('Palma') at 96px, weight 700, `letter-spacing: -3px`, `line-height: 0.95`, color `#ffffff`, set in the font itself. Below, one-line descriptor ('A familiar Humanist with Fizz.') at 18px weight 400, `#ffffff`, centered. Two pill CTA buttons side by side: primary in `#ff2f00` fill with white label ('Explore font'), secondary as outline (transparent fill, `#222222` border, white text, 'Try for free'). Both at 14px weight 500, `border-radius: 9999px`, `padding: 12px 24px`. Backdrop: editorial photo, `object-fit: cover`, `z-index: 0`; text layer `z-index: 1`."
- "Create a font catalog grid card. Background `#111111`, `border-radius: 0`, `border: 1px solid #222222`, no shadow. Top area: font name set in the font being showcased, 48px weight 400, `#ffffff`, specimen text overflowing the card bounds. Lower third: font family name in Neue Montreal 16px weight 500 `#ffffff`; below, style count in 12px weight 400 `#999999` ('18 styles'). Card hover: background shifts to `#1a1a1a`, no other change. Entire card is a clickable link."
- "Design a navigation bar for a type foundry. `background: #000000`, no border, no shadow, fixed top. Left: wordmark 'Pangram Pangram Foundry' in Neue Montreal 14px weight 400 `#ffffff`. Center: nav links ('All fonts', 'Font starter pack', 'Font in use', 'Academy', 'Support') in Neue Montreal 14px weight 400 `#ffffff`, spaced `24px` apart, no underline. Hover: text shifts to `#ff2f00`. Right: search, wishlist, and bag icons in `#ffffff`. Total bar height approximately 56px."
- "Build a font badge tag. Background `#2a0800`, text `#ff2f00`, font Neue Montreal 12px weight 400 `letter-spacing: 0.1px`, `border-radius: 9999px`, `padding: 4px 10px`. No border. Use for 'New release' and 'Updated' markers on font catalog cards."
- "Create a type specimen comparison row showing two typeface styles side by side. Container background `#000000`. Each half: the phrase 'Aa Bb Cc' set in the respective font at 64px weight 400 `#ffffff`, `letter-spacing: -2px`. Below: font name in Neue Montreal 14px weight 500 `#ffffff`, style count caption in 12px `#999999`. A vertical hairline divider `1px solid #222222` separates the two halves. Hover on each half lifts background to `#111111`."

### Iteration Guide

1. Start with the black canvas — `{colors.background}` is absolute, not near-black. Every composition begins from ink.
2. Set the specimen type first, before any chrome — the font at display scale determines the spatial composition of the entire section.
3. Apply `{colors.primary}` once and only once per layout zone — a single CTA or a single hover state. The red is a signal, not a theme.
4. Use `{rounded.pill}` for buttons, `{rounded.none}` for everything else. The contrast between pill CTAs and hard-edged cards is how affordances are communicated.
5. Navigation text should recede: 14px, weight 400, white at rest, brand-red on hover — no bold, no underline, no scale.
6. Negative tracking is mandatory at display sizes: `-3px` at 96px, `-2px` at 64px, `-1px` at 48px. Do not leave display type at zero tracking.
7. Set specimen text in the font being shown — the card headline font and the product being sold should be the same object.
8. No shadows, no gradients, no decorative elements. If a visual problem remains after removing decoration, solve it with type scale and spacing.

---

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