---
version: alpha
name: "Sharp Type"
description: "New York type foundry — pure white canvas, proprietary faces at heroic scale, and a rigorous black-and-white minimalism broken only by a signature light-blue accent for editorial moments"

colors:
  # Pure white — the entire site canvas; type is the only decoration
  background: "#ffffff"
  # Off-white — secondary surfaces, specimen cards, light wash panels
  surface: "#f5f5f5"
  # Pure black — dominant text, navigation, all UI chrome
  ink: "#000000"
  # Pure black repeated — on-white text at high contrast
  on-background: "#000000"
  # Pure black — text on surface panels
  on-surface: "#000000"
  # Light periwinkle-blue — signature accent; editorial callouts, featured specimen panels, CTA moments
  primary: "#cce0ff"
  # Black — text on the light-blue accent
  on-primary: "#000000"
  # Light-blue tint — container wash behind featured typeface showcases
  primary-container: "#e8f0ff"
  # Trial button background — soft blue, matches primary
  accent: "#cce0ff"
  # Medium grey — muted labels, metadata, secondary navigation text
  ink-muted: "#767676"
  # Light grey — hairline borders, dividers between typeface listings
  border: "#bdbdbd"
  # Hover state — underline-based, stays black; no hue shift
  text-hover: "#000000"
  # Focus ring — high-contrast black outline on white
  focus-ring: "#000000"
  # New/featured badge — sharp green for "new release" callouts
  # CSS --notification-text-color in source
  badge-new: "#006d72"
  # Notification background — pale coral for system messages
  # CSS --notification-background-color in source; was rgba flattened
  notification-bg: "#ffd5ce"
  # Notification text — teal, matches badge-new
  notification-ink: "#006d72"
  # Destructive / error state — coral red
  # CSS --destructive-color in source
  error: "#ff6c6c"
  # Shadow tint — used sparingly on floating trial-font panels
  shadow-soft: "#808080"

typography:
  # The homepage hero: Sharp's own typefaces rendered at specimen scale (~356px)
  # Proprietary face; closest Google Font substitute: Space Grotesk or Barlow Condensed
  display-hero:
    fontFamily: "Sharp Grotesk, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 356px
    fontWeight: 400
    lineHeight: 0.79
    letterSpacing: 0px
  # Secondary hero: second specimen face on homepage (~328px)
  display:
    fontFamily: "Sharp Grotesk, Space Grotesk, ui-sans-serif, system-ui, sans-serif"
    fontSize: 328px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: 0px
  # Section headers / typeface names in catalog — "Earth" face (Sharp's proprietary sans-serif UI face)
  heading-section:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.4px
  # Sub-section callouts; bold variant of Earth
  heading-sub:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 37px
    fontWeight: 700
    lineHeight: 1.19
    letterSpacing: 0.02px
  # Lead body / feature descriptions
  body-large:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0.02px
  # Standard body copy across all pages
  body:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0.02px
  # Navigation, top bar links, category filters
  nav-link:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0.02px
  # Button labels, pill CTAs, "Trial Fonts" / "Buy" labels
  button-ui:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0.02px
  # Captions, credits, metadata beneath specimen images
  caption:
    fontFamily: "Earth, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.58
    letterSpacing: 0.02px

spacing:
  xs: 4px
  sm: 7px
  md: 14px
  lg: 28px
  xl: 56px
  2xl: 70px
  3xl: 112px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 14px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 14px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 14px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 7px 14px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    textDecoration: "underline"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 28px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 28px
  typeface-tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 14px 0px
  typeface-tile-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 14px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 7px 0px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 7px 0px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
  badge-new:
    backgroundColor: "{colors.badge-new}"
    textColor: "{colors.background}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 6px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 14px 28px
---

# Sharp Type Design System

## Overview

Sharp Type opens on pure white — not as a design choice in tension with anything, but as a conviction. The foundry's website is itself a type specimen, and so the canvas must stay silent. Whitespace is structural: the background `{colors.background}` does not recede, it amplifies. Every square centimetre of negative space is load-bearing. Against this field, Sharp's own proprietary typefaces appear at sizes that most web designers would reserve for billboards — 300 to 350px, line-heights below 1.0, letterforms that fill the viewport horizontally. A single glyph set is the entire hero argument.

The system's typographic hierarchy is deliberately inverted. What would be body copy in another foundry's site — the names, prices, specimen notes — is handled by "Earth," Sharp's own compact geometric sans, at 12–14px. The brand voice is its type, not its copy. Promotional partnerships (YouTube, client callouts) land in a band of `{colors.primary}` — a light periwinkle-blue lifted from the palette Sharp uses for editorial accents. It is the only colour in a pure monochrome system, and its restraint gives it tremendous weight. When the blue appears, something has been curated to be seen.

Structurally, the site is a catalog. Typeface listings are separated by `{colors.border}` hairline rules — 1px horizontal dividers with no shadow, no card chrome, no hover elevation. Pill buttons (`{rounded.pill}`) are the only rounded element with significance; every other shape is either fully sharp or at a minor card radius. The interaction model is underline-on-hover for links and invert-to-black for pill CTAs: simple, typographic, confident. A type foundry that designs its own UI faces has no need for decorative flourishes.

**Key Characteristics:**
- `{colors.background}` pure white canvas — no tinting, no warmth adjustment; type must carry all atmosphere on its own
- Proprietary faces (Sharp Grotesk family) at 300–356px for hero specimens — the homepage is a font preview, not a marketing page
- "Earth" (Sharp's in-house UI sans) at `{typography.body}` 14px handles all navigation, catalog listings, and UI chrome
- `{colors.primary}` light periwinkle-blue as the sole chromatic accent — reserved for featured editorial callouts and partnership panels
- Hairline `{colors.border}` horizontal rules as the only structural dividers; no shadows, no cards for the typeface listing grid
- Pill buttons exclusively for CTAs ("Trial Fonts," "Buy," "Sign In") — the only rounded form in the primary UI
- `{rounded.none}` on all structural elements; `{rounded.md}` appears only on floating cookie or notification panels
- Font-feature-settings `"calt" "liga"` on display faces — OpenType contextual alternates and ligatures active at specimen size
- Motion: single easing `ease` at 0.3s — quick, understated transitions; no scroll animations, no GSAP theatrics
- Typography IS the design system — every spacing decision, surface choice, and color restraint exists to make the type the only thing you see

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): The total canvas. Sharp Type's site has no sections with coloured backgrounds in the default state — every hero, listing row, and article page opens on white. The whiteness is not neutral; it is a statement that the typefaces need no stage dressing.
- **Light Grey Surface** (`{colors.surface}`): A barely-visible off-white wash used on hover states for typeface listing rows and on secondary panels. The delta from white to `#f5f5f5` is intentionally minimal — just enough to signal interactivity.

### Text Hierarchy
- **Pure Black** (`{colors.ink}`): All text at every scale — display headlines, navigation labels, body copy, captions. No softening to dark grey; the contrast is maximised and unapologetic.
- **Medium Grey** (`{colors.ink-muted}`): Metadata, secondary labels, inactive filter tabs. Provides the only typographic de-emphasis in an otherwise binary text system.

### Brand Accent
- **Periwinkle Blue** (`{colors.primary}`): The single accent hue. Appears as the background tint on featured partnership panels (the YouTube Display showcase on the homepage), as the "Trial Fonts" CTA button background, and in editorial callout zones. On a pure white page, a soft blue panel reads like a footnote that has been elevated to a story — not loud, but unmissable.

### Semantic & State
- **Hairline Grey** (`{colors.border}`): All structural horizontal dividers between typeface listings. The 1px rule is the primary navigation device for the catalog grid.
- **Teal Green** (`{colors.badge-new}`): CSS `--notification-text-color`. Used for "New" or "Updated" badges on newly released typefaces — a sharp, saturated green that announces freshness without shouting.
- **Error Red** (`{colors.error}`): CSS `--destructive-color`. Destructive actions in account or cart flows.
- **Notification** (`{colors.notification-bg}` / `{colors.notification-ink}`): Pale coral background with teal text for system notifications — never in primary navigation.

## Typography

### Font Family
- **Display / Specimen**: Sharp Grotesk (proprietary, hashed filenames in source). A broad family of grotesque typefaces — the site showcases multiple variants at heroic scale. Closest Google Font substitute: Space Grotesk (proportionally different but similar structural energy). Fallback: `ui-sans-serif, system-ui, sans-serif`.
- **UI / Body**: Earth (Sharp Type's own compact geometric sans-serif for interface use). Handles all navigation, listing text, button labels, captions, and metadata. Closest Google Font substitute: Inter. Fallback: `ui-sans-serif, system-ui, sans-serif`.
- **OpenType Features**: `"calt"` (contextual alternates) and `"liga"` (standard ligatures) active on all display instances. Earth at UI sizes runs default features only.

*Note: Both faces are proprietary; neither is available on Google Fonts or Adobe Fonts. For licensed implementations using the actual typefaces, load via Sharp Type's web font delivery. For unlicensed approximations, Space Grotesk (display) + Inter (UI) reproduce the structural intent.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Homepage type specimen — Sharp Grotesk at ~356px, line-height 0.79; the letterforms clip into each other |
| `display` | Secondary specimen row — ~328px; multiple typeface variants shown in sequence |
| `heading-section` | Typeface family names in catalog — Earth 40px, weight 400, tight tracking |
| `heading-sub` | Bold callouts, section anchors — Earth 37px, weight 700 |
| `body-large` | Feature introductions, typeface descriptions — Earth 21px, weight 400 |
| `body` | Standard listing text, metadata, navigation — Earth 14px |
| `nav-link` | Top navigation, category filters, account links |
| `button-ui` | Pill CTA labels ("Trial Fonts," "Buy," "Sign In") |
| `caption` | Image credits, release dates, style counts — Earth 12px |

### Principles
- **One typeface family for UI, multiple for specimen**: Earth handles every interface decision; Sharp's retail faces appear only in specimen zones. The discipline is absolute.
- **Sub-1.0 line-heights at display scale**: 0.79 at 356px creates collisions — descenders and ascenders overlap in adjacent lines. This is intentional: the type reads as texture before it reads as letters at that scale.
- **No bold in navigation**: All nav links, filters, and metadata run weight 400. Bold (700) appears only in sub-heading callouts where emphasis is the point.
- **Slightly open tracking at UI sizes**: Earth at 12–14px uses +0.02px tracking — a barely perceptible opening that improves small-size legibility without distorting the face's proportions.
- **Font features active on display**: `"calt"` and `"liga"` on specimen faces ensure Sharp's type renders with its full OpenType intelligence at the sizes where details matter.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 7px — a non-standard base reflecting the `7px` and `14px` padding values dominant in the source (a half-step smaller than the conventional 8px grid). The scale doubles cleanly: 7 → 14 → 28 → 56 → 70 → 112px. Navigation padding sits at `{spacing.lg}` (28px); major section separations use `{spacing.2xl}` (70px).

### Grid & Container
- Max content width: approximately 1600px at wide desktop
- Standard content container: centred within ~1300px, generous horizontal padding
- Typeface catalog: single-column listing grid at all breakpoints, full-width rows separated by hairline rules
- Featured panels: full-bleed `{colors.primary}` tint, content centred within the standard container
- Specimen display: full-viewport-width typographic waterfall, no container constraint

### Whitespace Philosophy
- **Silence as signal**: The homepage uses the white canvas as a compositional element. Long stretches of white between specimen zones are not empty — they are pauses between statements.
- **Hairlines, not gutters**: The catalog does not use card gutters or grid gaps; adjacent typefaces are separated only by the `{colors.border}` 1px rule. The compression makes the catalog feel like a physical specimen book.
- **Wide side margins**: Content never runs to the viewport edge. The approximately 28px minimum margin is maintained throughout, ensuring the type always floats within the white field.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All catalog rows, navigation, specimen zones, default page sections |
| Surface Hover (Level 1) | Background shifts from `{colors.background}` to `{colors.surface}` | Typeface listing rows on hover — the lightest possible depth signal |
| Panel (Level 2) | `{colors.primary}` fill | Featured editorial panels — depth through hue, not shadow |
| Floating (Level 3) | `rgb(128,128,128) 0px 0px 5px 0px` | Cookie consent and notification overlays only |
| Focus Ring | `outline: {colors.focus-ring} solid 2px` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Sharp Type is essentially shadowless. The extracted shadow is a single 5px grey blur on a floating overlay element — functional rather than designed. All page-level depth is communicated through surface contrast (white → light grey → blue panel), never through drop shadows. For a type foundry, shadows would compete with the type's own optical weight at specimen sizes.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural surfaces, catalog rows, navigation, input fields |
| `sm` | 2px | Badges ("New" label, trial status chips) |
| `md` | 10px | Notification/cookie consent panels; specimen image containers |
| `pill` | 9999px | All CTA buttons — "Trial Fonts," "Buy," "Sign In," "Sign Up" |

The shape vocabulary is binary in intent: everything is either absolutely sharp (`{rounded.none}`) or a fully-capped pill (`{rounded.pill}`). The 2px badge radius and 10px panel radius are implementation details, not design choices. No mid-range radius (4–16px) appears in the primary UI chrome.

## Components

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

### Button variants

- **`button-primary`** — `{colors.primary}` light-blue background, black text, pill geometry, 14px Earth weight 400. Used for "Trial Fonts" — the highest-priority CTA. Inverts to black on hover.
- **`button-secondary`** — transparent with `{colors.ink}` hairline border, black text, pill. Used for "Buy" and secondary purchase actions. Inverts to black on hover.
- **`button-ghost`** — no background, no border, underline on hover. Used for inline text links and navigation items that behave like links.

### Typeface Tiles

The catalog's primary pattern is the **typeface-tile**: a full-width row, no card chrome, `{colors.border}` top border, `{typography.heading-section}` typeface name left-aligned, style count and price metadata right-aligned. On hover the row background shifts to `{colors.surface}`. The pattern reads as a table, not a grid, and it carries the density of a specimen sheet.

### Cards

Floating cards (`{rounded.md}` 10px) appear only for system notifications, cookie consent, and trial font access confirmations — never for typeface listings or editorial content. The card chrome is subordinate to the catalog's flat-row structure.

### Inputs

Email and text inputs are borderless by default (bottom border only, `{colors.border}` 1px), square-cornered, `{typography.body}` Earth 14px. On focus: bottom border shifts to `{colors.ink}` black. The stripped-down input style matches the site's no-decoration philosophy.

### Navigation

Fixed-top bar on `{colors.background}` white. "Sharp" wordmark SVG left-aligned, category links center or right ("Typefaces," "About Us," "Case Studies," "Licensing," "News," "Fit"), account and trial CTAs at right edge. All links in 14px Earth weight 400 — no uppercase, no bold. No border or shadow on the nav strip.

## Do's and Don'ts

### Do
- Use `{colors.background}` pure white as the universal canvas — every background, every section, every default state
- Set display typeface specimens at sub-1.0 line-heights (0.79–0.85) to create the dense typographic texture that is Sharp's signature
- Apply `{colors.primary}` blue only to editorially significant panels and the "Trial Fonts" CTA — preserve its rarity so it retains its weight
- Use Earth (`{typography.body}`) for all UI text including navigation, labels, buttons, and captions — never mix in another sans
- Separate catalog items with `{colors.border}` hairline horizontal rules only; no cards, no gutters, no shadow between listings
- Restrict pill geometry (`{rounded.pill}`) to CTA buttons exclusively; all structural elements use `{rounded.none}`
- Apply font-feature-settings `"calt" "liga"` on all Sharp Grotesk display instances — the OpenType details matter at specimen sizes
- Use `{colors.badge-new}` teal for new-release callouts only; keep badge usage sparse so the signal remains readable

### Don't
- Don't add shadows to catalog tiles or typeface cards — the system is elevation-free by design; shadows compete with type's optical weight
- Don't introduce additional accent colours beyond `{colors.primary}` — a type foundry's palette is its type, not its UI pigment
- Don't soften ink to dark grey for body copy — `{colors.ink}` pure black is non-negotiable; contrast is the brand's stance
- Don't apply mid-range border-radius (4–16px) to UI elements — the binary `{rounded.none}` / `{rounded.pill}` vocabulary is the shape system
- Don't use bold weight (700) in navigation or catalog metadata — weight 400 handles all routine UI text; bold is reserved for emphasis callouts
- Don't add decorative dividers, background patterns, or illustration — the white canvas is the design decision, not a lack of one
- Don't show typeface specimens at body scale — if a face is being introduced, it earns at least `{typography.heading-section}` size (40px) or preferably `{typography.display}` scale
- Don't let hover states introduce new colours — all hover transitions are white-to-light-grey surface shifts or button background inversions to black

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, navigation collapses, specimen scale reduced ~60% |
| Mobile | 375–549px | Single column, full hamburger nav, specimen at readable hero scale |
| Tablet | 550–849px | Two-column catalog possible, specimen ~50% viewport width |
| Desktop Small | 850–1099px | Full catalog table, standard specimen waterfall |
| Desktop | 1100–1299px | Standard layout, side margins expand |
| Wide Desktop | 1300–1599px | Maximum container width, specimen at full typographic scale |
| Large Desktop | ≥1600px | Layout locked at max-width container |

### Touch Targets
- Pill buttons: 7px vertical padding plus Earth 14px text — approximately 36px tap height; adequate for secondary actions
- Navigation links: 14px × line-height 1.36 = approximately 19px — tighter than ideal; rely on surrounding padding
- Catalog rows: full-width tappable target with 14px vertical padding each side

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger; wordmark persists left-aligned
- **Specimen waterfall**: Font sizes scale proportionally with viewport — the sub-1.0 line-height pattern is maintained even at mobile scale, preserving the typographic density
- **Catalog rows**: Single-column at all breakpoints; metadata (style count, price) may stack below the typeface name on narrow viewports
- **Featured panels**: Full-bleed `{colors.primary}` tint maintained; internal content stacks to single column

### Image Behavior
- Specimen letters are SVG or variable font instances — resolution-independent at all scales
- Photography and client work images use `object-fit: cover` within their panel boundaries
- No `{rounded.md}` on specimen display zones — type always bleeds to its container edge

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Muted text: `{colors.ink-muted}`
- Accent / CTA: `{colors.primary}`
- Text on accent: `{colors.on-primary}`
- Border / divider: `{colors.border}`
- New badge: `{colors.badge-new}`
- Hover surface: `{colors.surface}`

### Example Component Prompts

- "Build a typeface specimen hero for Sharp Type on white `{colors.background}`. Full-viewport canvas with no padding. Display Sharp Grotesk (fallback: Space Grotesk) at 350px, font-weight 400, line-height 0.79, font-feature-settings: 'calt' 'liga', color `{colors.ink}`. Below: a secondary specimen line at 320px, line-height 0.85. No decorative elements, no caption, no button — the type is the entire hero. Side margins: 28px minimum."

- "Create a typeface catalog row for Sharp Type: full-width, no border-radius, background `{colors.background}`, border-top 1px solid `{colors.border}`. Left: typeface family name in Earth (fallback: Inter) 40px weight 400 color `{colors.ink}`, letter-spacing -0.4px. Right: style count label in Earth 14px `{colors.ink-muted}` + a 'Trial Fonts' pill button (background `{colors.primary}`, text `{colors.on-primary}`, border-radius 9999px, padding 7px 14px, font-size 14px). On row hover: background transitions to `{colors.surface}` over 0.3s ease."

- "Design a featured partnership panel: background `{colors.primary}`, full-bleed width, padding 70px 28px. Left: partner logo + tagline in Earth 14px `{colors.ink}`. Right: specimen of the commissioned typeface at 120px in `{colors.ink}`, weight 400, line-height 0.9. No shadow, no border-radius on the panel itself."

- "Build a navigation bar for Sharp Type: background `{colors.background}`, no shadow, no border. Left: 'Sharp' wordmark SVG in black. Center-right: navigation links ('Typefaces', 'About Us', 'Licensing', 'News') in Earth 14px weight 400 `{colors.ink}`, no underline, underline on hover at 0.3s ease. Far right: 'Sign In' ghost link + 'Trial Fonts' pill button in `{colors.primary}` background. Position sticky. Horizontal padding 28px."

- "Create a 'New Release' badge for Sharp Type: background `{colors.badge-new}`, text `{colors.background}`, Earth 12px weight 400, border-radius 2px, padding 2px 6px. Place as an inline label beside a typeface family name in the catalog row. Use sparingly — this badge signals genuine editorial selection, not promotional emphasis."

### Iteration Guide

1. Start from `{colors.background}` white — the entire visual strategy depends on this canvas staying unbroken. Introduce colour only when you have a reason proportional to `{colors.primary}` appearing once per page.
2. All interface text (nav, labels, captions, buttons) uses Earth (`{typography.body}`, `{typography.nav-link}`, `{typography.button-ui}`) at weight 400. Restraint in weight is the system's tone of voice.
3. Specimen display starts at `{typography.heading-section}` (40px) minimum. If a typeface is being introduced, it earns `{typography.display}` scale (300px+). Never show a face only at body size.
4. The only shape distinction that matters: `{rounded.none}` for structure, `{rounded.pill}` for CTAs. Any 4–16px radius is out of vocabulary.
5. Elevation: none. Use `{colors.surface}` on hover to signal interactivity; use `{colors.primary}` fill to signal editorial curation. Neither requires shadow.
6. Catalogue items are hairline-separated rows, not cards. The density of a specimen book, not the spaciousness of a portfolio grid.
7. Motion is 0.3s ease only — hover state transitions. No entrance animations, no parallax, no scroll-driven effects. The type moves nowhere.

---

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