---
version: alpha
name: "Grilli Type"
description: "Swiss type foundry as living type specimen — white canvas, pure black ink, and every GT typeface rendered at display scale as the only decoration"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"

  # Text / ink
  ink: "#000000"
  on-background: "#000000"
  on-surface: "#000000"

  # Secondary / muted text
  ink-muted: "#8c8c8c"
  ink-secondary: "#8c8c8c"

  # Brand accent — the site has no color accent; black is the brand
  primary: "#000000"
  on-primary: "#ffffff"

  # State / interaction
  text-hover: "#0b0b0b"  # was rgb(11,11,11) — near-black link hover
  focus-ring: "#000000"

  # Borders
  border: "#a0a0a0"
  border-strong: "#000000"
  border-footer: "#323232"  # was rgb(50,50,50) — footer top rule

  # Button / UI neutral
  button-border: "#a0a0a0"  # was rgb(160,160,160) — trial font button outline

  # Shadow tints
  shadow-soft: "#d9d9d9"  # estimated — no shadows detected

typography:
  display-hero:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.96px
  display:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.2px
  heading-sub:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-ui:
    fontFamily: "GT Walsheim, GT America, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.35
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 9px
  md: 18px
  lg: 20px
  xl: 30px
  2xl: 50px
  3xl: 80px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    borderColor: "{colors.button-border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 1px 20px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 1px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  nav-item:
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 9px 0px
  nav-item-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 9px 0px
  typeface-tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    rounded: "{rounded.none}"
    padding: 20px
  typeface-tile-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 9px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 9px 12px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
---

# Grilli Type Design System

## Overview

Grilli Type's website operates on one organizing principle: the fonts are the design. Everything else — the layout, the color palette, the interface chrome — retreats to near-nothingness so that GT Mechanik, GT Canon, GT Era, and two dozen other typefaces can step forward at large scale and speak for themselves. The canvas is pure white (`{colors.background}`), the text is absolute black (`{colors.ink}`), and the only concession to hierarchy is a mid-gray `{colors.ink-muted}` applied to navigation labels and secondary information. There is no brand color, no logo animation, no decorative surface. The foundry's product is typography, so typography becomes the decoration.

The homepage grid functions as a living type specimen: each typeface name is set in that typeface, at a large display scale (around 64px), with tight negative letter-spacing that makes even dense names feel sculptural. The grid runs in two columns with hairline borders dividing cells — structural, spare, recalling the ordered pages of a printed type catalog. When the cursor enters a cell, the background inverts to black and the type switches to white, making the typeface pop against a reversed canvas. This single hover mechanic does more work than any animation or illustration library could. Navigation links begin in `{colors.ink-muted}` and darken to near-black on hover with a 0.1s ease-out — barely perceptible, but enough to signal without theatrics.

The spacing system uses an 18px base (drawing on the 18px and 20px values that dominate the measured layout), which produces a breathing room that feels more editorial than utilitarian. Breakpoints at 400px, 600px, 1100px, and 1800px accommodate a genuinely wide range of reading contexts. Motion is restrained to color transitions (0.1s ease-out on links) and a single 0.3s ease on button transforms — the site reads still even when it's responsive.

**Key Characteristics:**
- Pure white (`{colors.background}`) canvas — the site is a printed specimen sheet, not a product UI
- Absolute black (`{colors.ink}`) as the sole dominant color; no brand accent, no tints
- Mid-gray `{colors.ink-muted}` reserved for navigation labels and secondary copy — subordinate, never decorative
- Every typeface name rendered in that typeface at large display scale (~64px, tight -0.96px tracking)
- Two-column grid with hairline `{colors.border-strong}` borders — structure borrowed from print catalogs
- Black/white invert on hover: background flips to `{colors.primary}`, text to `{colors.on-primary}`
- Near-zero border radius — `{rounded.sm}` (5px) on the trial font button only; everything else sharp
- `"kern"` and `"pnum"` OpenType features active globally — the foundry practices what it sells
- 0.1s ease-out color transitions on links — change that communicates, not entertains
- Footer rule: single `1px solid {colors.border-footer}` top border, no padding theatrics
- Spacing anchored at 18–20px multiples — generous but not airy, editorial in feel
- No shadows, no gradients, no decorative imagery — typographic precision as aesthetic philosophy

## Colors

### Primary
- **Pure White** (`{colors.background}`): The universal canvas — every surface, every page, every card. Uncompromising white, not cream or warm off-white.
- **Absolute Black** (`{colors.ink}`): Primary text, active states, typeface tile backgrounds on hover, all structural borders. Black does every job that accent colors do elsewhere.

### Brand Accent
- **Black** (`{colors.primary}`): The brand's only "accent" is black itself, used for hover inversions on typeface tiles and primary CTAs. There is no secondary color.

### Text States
- **Mid-gray** (`{colors.ink-muted}`): Navigation items, secondary labels, button text in rest state — the quiet supporting voice
- **Near-black hover** (`{colors.text-hover}`): Link and nav hover target — `rgb(11, 11, 11)`, functionally black but technically a hair lighter to signal the transition without a jarring snap

### Borders
- **Button outline** (`{colors.button-border}`): The single `1px solid` border on the "Download trial fonts" button — a lighter gray, suggesting softness without disappearing entirely
- **Hairline structural** (`{colors.border-strong}`): Header rule and list/grid cell dividers — pure black at 1px, the grid's skeleton
- **Footer rule** (`{colors.border-footer}`): Top border on the footer block — slightly lighter than black, a subtle separation

The system carries no semantic colors (success/warning/error) at the surface level. There are no gradients, no tints, no transparency effects. When a value was approximated from `rgba()` or near-black, an `/* estimated */` comment marks it in the YAML.

## Typography

### Font Family
- **Primary / Display**: `GT Walsheim` — the foundry's own geometric humanist grotesque, used for UI chrome, navigation, and display moments. Fallbacks: `GT America, Helvetica Neue, Arial, sans-serif`
- **Secondary / Showcase**: Each typeface tile renders in its own proprietary font (GT Mechanik, GT Canon, GT Era, GT Flaire, GT Pantheon, GT Pressura, GT Walsheim, and others). These are served as web fonts but are not available externally — the rendering is the product.
- **OpenType Features**: `"kern"` (optical kerning) and `"pnum"` (proportional numerals) active globally — a signal that the foundry treats even UI copy as typographic practice, not afterthought

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Typeface names in the specimen grid — each rendered in its own face at ~64px, tight -0.96px tracking |
| `display` | Section-level editorial headlines, large category labels |
| `heading-section` | Subsection titles, feature area labels |
| `heading-sub` | Tertiary titles, card metadata headers |
| `body-large` | Lead descriptive copy, typeface short descriptions |
| `body` | General prose, footer copy, info sections |
| `nav-link` | Navigation items (Typefaces, Free Trials, Commissions, Blog, Information, About, Login) — rendered in mid-gray rest state |
| `button-ui` | CTA button labels — same 16px as nav, no weight shift |
| `label-ui` | Secondary UI labels, filter names, small interactive elements |
| `caption` | Metadata, category labels, copyright lines |

### Principles
- **Weight 400 throughout**: The entire site runs at regular weight — no bold, no light, no medium. The typefaces themselves carry hierarchy through form, not weight.
- **Tight tracking at display scale**: `-0.95616px` letter-spacing on all display text gives the large grid names a compressed, catalog-like feel
- **No type mixing in chrome**: Navigation, buttons, labels — all GT Walsheim. The proprietary faces appear only in specimen contexts, never as UI chrome
- **`kern` + `pnum` as baseline discipline**: OpenType features that most sites leave inactive; here they signal that even incidental text is treated with typographic rigor
- **Size as the only variable**: With fixed weight and family, hierarchy is communicated through size alone — a classical, minimal approach that mirrors print typography

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: **18px** (the dominant measured value, appears 21 times in the layout).

The rhythm is editorial rather than utilitarian — 18px and 20px values dominate the mid-range, producing gutters that feel measured against a column grid rather than optimized for click density. The 50px jump handles section separation; 80px creates breathing room between major content areas.

### Grid & Container
- Max content width: ~1800px breakpoint is the widest layout boundary (above 1800px the grid stabilizes)
- Specimen grid: 2-column layout — typeface names left and right, each cell set in its respective font
- No card chrome: the grid is defined purely by `1px solid {colors.border-strong}` hairline dividers between cells
- Responsive collapse: 2 columns → 1 column on mobile, maintaining the catalog logic

### Whitespace Philosophy
- **Specimen logic, not app logic**: Generous margins that treat the viewport as a page, not a dashboard
- **Horizontal hairlines carry structure**: Section separations use `border-bottom: 1px solid black` rather than spacing gaps
- **Dense but never cramped**: 18–20px gutters mean each typeface tile has room to breathe without losing the catalog-grid effect

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, specimen grid cells at rest |
| Hairline (Level 1) | `1px solid {colors.border-strong}` (bottom) | Header separator, list cell dividers, footer top rule |
| Button Outline (Level 2) | `1px solid {colors.button-border}` (all sides) | Trial font download button — the only multi-sided border |
| Invert (Interaction) | Background `{colors.primary}`, text `{colors.on-primary}` | Typeface tile hover state — black fill replaces depth |

**Shadow Philosophy**: There are no shadows. None. The site is categorically flat — the typefaces provide all the visual weight, and elevation metaphors would compete with the typographic showcase. Depth is achieved through the black/white inversion on interaction, not through layering or blur. This is deliberate: a foundry that makes precision letterforms doesn't muddy them with dropped shadows.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — specimen tiles, nav, cards, inputs, header, footer, all structural surfaces |
| `sm` | 5px | The single "Download trial fonts" CTA button only — a lone concession to softness |
| `pill` | 9999px | Reserved for future badge/chip use (unused in current production UI) |

The system is effectively binary: sharp everywhere, with one 5px exception. The absence of rounded corners connects the site to the hard geometry of printed catalogs and Swiss grid systems. It would be a violation to introduce mid-range radii (8–16px) — they would read as "app" rather than "specimen."

## Components

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

### Button variants

- **`button-primary`** — Black fill, white text, no radius, 9×20px padding. Used for primary purchase and account actions. Unambiguously Swiss: no border, no shadow, full saturation.
- **`button-secondary`** — White fill, gray text, light `{colors.button-border}` outline, 5px radius (the only rounded element in the system). The "Download trial fonts" button. The slight radius softens the CTA to feel inviting rather than commanding.
- **`button-secondary-hover`** — Inverts to black fill, white text, matching the tile hover logic of the overall system.

### Typeface Tiles
The core UI unit. Sharp rectangles, no padding on the grid boundary, text rendered in the typeface being shown. On hover: background transitions to `{colors.primary}`, text to `{colors.on-primary}`. The component is the specimen.

### Navigation
- Horizontal top bar with hairline `{colors.border-strong}` bottom separator
- Items: Typefaces / Free Trials / Commissions / Blog / Information / About / Login — all in `{colors.ink-muted}` at rest, shift to `{colors.text-hover}` on hover in 0.1s
- No sticky behavior implied in the extracted data; header is fixed at viewport top
- Login sits at the far right as a utility item, same visual weight as nav links

### Inputs
Sharp, no radius, `{colors.border}` outline in rest state, `{colors.focus-ring}` (black) on focus. No background shift.

## Do's and Don'ts

### Do
- Use `{colors.background}` (white) as the universal canvas — never tint it warm or cool
- Render specimen/showcase text in the actual typeface being presented — the face IS the decoration
- Use the black/white invert pattern (`{colors.primary}` fill on hover) for interactive specimen moments
- Keep all navigation and UI labels in `{colors.ink-muted}` at rest — let them recede
- Apply `"kern"` and `"pnum"` OpenType features globally — it signals typographic seriousness
- Use `{rounded.none}` for all structural surfaces — the system is defined by hard corners
- Reach for `{typography.display-hero}` at tight `−0.96px` tracking for large type catalog moments
- Use `1px solid {colors.border-strong}` as the sole separator between sections and grid cells
- Trust whitespace: the 18–20px base produces columns that read as editorial, not utilitarian

### Don't
- Don't introduce any accent color — the system has none and needs none; black earns every use
- Don't add shadows of any kind — they compete with the typography and betray the Swiss-flat logic
- Don't use border radii above `{rounded.sm}` (5px) anywhere except the trial font button
- Don't set type in weights above 400 in UI contexts — the face communicates hierarchy through form
- Don't mix proprietary GT faces into navigation or button labels — they are specimen elements only
- Don't use positive letter-spacing in display text — the tight `−0.96px` tracking is the display signature
- Don't tint or gray the canvas — `{colors.surface}` (`#f5f5f5`) is only for subordinate background contexts
- Don't use gradients — the site is gradient-free entirely
- Don't introduce mid-range border-radius (8–16px) — it immediately reads as "app UI" and breaks the catalog logic
- Don't add hover effects beyond color transitions — the system communicates with a 0.1s ease-out and nothing else

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column layout; navigation collapses; type scale reduced |
| Mobile | 400–599px | Single-column specimen list; tighter 9px gutters |
| Tablet | 600–1099px | Grid shifts to modified column arrangement; body text remains at 16px |
| Desktop | 1100–1799px | Full two-column specimen grid; complete navigation visible |
| Large Desktop | >1800px | Grid stabilizes at max width; generous outer margins balance the layout |

### Touch Targets
- Navigation links: minimum 44px touch height maintained through 9px vertical padding plus line-height
- CTA buttons: `1px 20px` / `9px 20px` padding produces a compact but tappable target
- Typeface tiles: full-bleed cells with no minimum height enforced — designed for cursor, not thumb

### Collapsing Strategy
- Two-column specimen grid collapses to single column at 600px
- Navigation items may collapse to a menu toggle at mobile breakpoints (not confirmed by extraction — standard pattern for the layout density)
- Display type scale reduces proportionally; the tight tracking and large size compress gracefully

### Image Behavior
- No decorative images — the site carries no photography or illustration
- Typeface rendering is the visual content; glyphs scale with font-size, not as `<img>` tags
- Any embedded specimen images (e.g., in blog posts) are likely full-width at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent: `{colors.primary}` (black — the accent IS black)
- Secondary text: `{colors.ink-muted}`
- Border: `{colors.border-strong}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a typeface specimen grid using `{colors.background}` canvas with `1px solid {colors.border-strong}` borders between cells. Each cell shows a typeface name set at `{typography.display-hero}` (64px, weight 400, -0.96px tracking, font-feature-settings: 'kern' 'pnum') rendered in its own font. On hover, transition background to `{colors.primary}` and text to `{colors.on-primary}` in 0.1s ease-out."
- "Build a navigation bar with `1px solid {colors.border-strong}` bottom separator. Items: Typefaces, Free Trials, Commissions, Blog, Information, About, Login. Style each at `{typography.nav-link}` (16px, weight 400) in `{colors.ink-muted}` at rest, transitioning to `{colors.text-hover}` on hover in 0.1s ease-out. No background, no radius, no underline."
- "Build a CTA button using `{components.button-secondary}` spec: white background `{colors.background}`, text `{colors.ink-muted}`, `1px solid {colors.button-border}` border, `{rounded.sm}` (5px) radius, padding 1px 20px, font-size 16px weight 400. On hover: invert to `{colors.primary}` background, `{colors.on-primary}` text, remove border. Transition 0.3s ease on transform."
- "Build a page section divider: single `1px solid {colors.border-strong}` bottom border on the header region. No shadow, no background change, no radius. Below it: content flows with 18–20px gutters (`{spacing.md}` to `{spacing.lg}`)."
- "Build a footer with `1px solid {colors.border-footer}` top border. Content in `{typography.caption}` (13px weight 400, `{colors.ink-muted}`). No shadow beneath; the top rule is the only separation from the content above."

### Iteration Guide

1. Start with `{colors.background}` (white) — every surface begins here; nothing is tinted
2. All text defaults to `{colors.ink}` (black); demote secondary and navigation text to `{colors.ink-muted}` only
3. Large display text uses `{typography.display-hero}` with `-0.96px` letter-spacing and font-feature-settings `"kern" "pnum"` — never loosen the tracking at display scale
4. Structure is entirely carried by `1px solid {colors.border-strong}` rules — add no shadows, no background fills, no cards
5. Interactive moments use black/white inversion: hover background `{colors.primary}`, hover text `{colors.on-primary}` — no intermediate states, no color accents
6. Border radius: `{rounded.none}` everywhere except the single 5px trial button (`{rounded.sm}`) — no mid-range values
7. Keep motion to 0.1s ease-out color shifts on links; 0.3s ease transform on buttons — nothing more

---

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