---
version: alpha
name: Soft Glossary
description: A monochrome editorial reference object — variable ABC Favorit set at hairline weights (wght 250), Saol Display italic serifs for emphasis, and New Edge rounded display for glossary letters, on a paper-white canvas with one electric chartreuse accent.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f7f7f7"
  surface-soft: "#f5f5f5"
  ink: "#000000"
  ink-secondary: "#505050"

  # The single accent — electric chartreuse
  primary: "#ccff00"
  accent-tint: "#f5ffcc"      # was rgba(204,255,0,.2) over white — gradient wash

  # Neutral scale
  gray-700: "#505050"
  gray-600: "#666666"
  gray-500: "#999999"
  gray-400: "#a2a2a2"
  gray-300: "#b1b1b1"
  gray-200: "#bbbbbb"
  gray-100: "#dfdfdf"

  # Code / syntax
  code-bg: "#1e1e1e"
  code-text: "#9e9e9e"
  link-blue: "#2497e3"

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

typography:
  display-hero:
    fontFamily: "New Edge, Favorit Variable, Helvetica, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -3px
  glossary-letter:
    fontFamily: "New Edge, Favorit Variable, Helvetica, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -1px
  section-heading:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 250
    lineHeight: 1.10
    letterSpacing: -1px
  serif-emphasis:
    fontFamily: "Saol, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.4px
  title:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 28.8px
    fontWeight: 250
    lineHeight: 1.20
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 250
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 250
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 280
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Favorit Variable, Favorit, Helvetica, sans-serif"
    fontSize: 14.4px
    fontWeight: 280
    lineHeight: 1.40
    letterSpacing: 0px
  mono-body:
    fontFamily: "Favorit Mono Variable, Favorit Mono, ui-monospace, Menlo, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  mono-label:
    fontFamily: "Favorit Mono Variable, Favorit Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px

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

rounded:
  none: 0px
  micro: 3px
  xs: 5px
  sm: 8px
  md: 10px
  lg: 18px
  xl: 20px
  2xl: 50px
  pill: 100px
  circle: 9999px

components:
  # Primary — chartreuse fill, black text
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px

  # Secondary — outlined, paper surface
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.pill}"
    padding: 10px 24px
    borderColor: "{colors.ink}"

  # Glossary entry card
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-100}"

  # Soft tinted card — the chartreuse wash
  card-tinted:
    backgroundColor: "{colors.accent-tint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px

  # Subtle surface block
  surface-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  # Tag / chip
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.gray-700}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.gray-100}"

  # Inline code entry
  code-block:
    backgroundColor: "{colors.code-bg}"
    textColor: "{colors.code-text}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.sm}"
    padding: 16px

  # Dotted-underline link
  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    padding: 16px 24px
---

# Soft Glossary Design System

## Overview

Soft Glossary presents itself as a reference object rather than a website — a living glossary rendered as if it were a quietly beautiful printed page that learned to breathe. The canvas is paper-white (`{colors.background}`), the ink is pure black (`{colors.ink}`), and the whole interface is built from a single typographic family stretched across its full range of weights. There is almost no chrome: dividers, dotted underlines, and generous whitespace do the structural work that borders and panels do elsewhere.

The typographic system is the entire identity. The body is set in ABC Favorit Variable pulled down to a near-hairline `wght 250`, giving the page a light, almost penciled texture — letters that feel drawn rather than printed. Emphasis arrives through two contrasting voices: Saol Display in italic serif for editorial flourishes and pull-quotes, and New Edge — a soft, rounded display face — for the oversized glossary letters that anchor each section. The pairing of a hairline grotesque, a high-contrast italic serif, and a pillowy rounded display is the signature move; it makes a monochrome page feel curated and warm.

Color is used with extreme discipline. The palette is fundamentally black on white with a measured neutral gray scale (`{colors.gray-100}` through `{colors.gray-700}`) for secondary text and hairline rules. Against this restraint sits exactly one accent: an electric chartreuse (`{colors.primary}`, #ccff00) that appears as soft gradient washes (`{colors.accent-tint}`, the flattened 20%-over-white tint) and the occasional highlight. The accent is loud by nature, so it is rationed — a single jolt of energy in an otherwise whisper-quiet document.

Interaction is tactile and subtle. Links carry a dotted black underline and animate their variable font-weight and letter-spacing on hover, so text physically thickens and breathes when touched. Radii are soft and varied — from 5px functional corners up to 18px cards and 100px pills — reinforcing the "soft" in Soft Glossary. The result reads as an editorial design artifact: precise, monochrome, and humane.

**Key Characteristics:**
- ABC Favorit Variable at hairline weights (`wght 250`) — text that feels drawn, not printed
- Three-voice type system: hairline Favorit (body), Saol italic serif (emphasis), New Edge rounded (glossary letters)
- Pure black-on-white monochrome with a disciplined neutral gray scale
- Exactly one accent — electric chartreuse `{colors.primary}` — rationed as washes and highlights
- Dotted-underline links that animate variable font-weight and letter-spacing on hover
- Soft, varied radii (5px → 18px → 100px pills) reinforcing tactility
- Favorit Mono Variable for code and technical labels
- Whitespace and hairline rules as the primary structural system

## Colors

### Primary
- **Ink Black** (`{colors.ink}`): Body text, headings, dotted underlines, selection background. Pure #000000.
- **Paper White** (`{colors.background}`): Page canvas, card surfaces, text on dark.
- **Soft Gray Surface** (`{colors.surface}`): Subtle blocks, badge backgrounds, quiet panels.

### Accent
- **Chartreuse** (`{colors.primary}`): The single accent. Highlights and full-strength jolts. Black text on top.
- **Chartreuse Tint** (`{colors.accent-tint}`): The 20%-over-white flatten — soft gradient washes behind entries.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Secondary copy, captions.
- **Gray 500** (`{colors.gray-500}`): Muted labels.
- **Gray 400** (`{colors.gray-400}`): Tertiary text.
- **Gray 300** (`{colors.gray-300}`): Placeholder, disabled.
- **Gray 200** (`{colors.gray-200}`): Faint metadata.
- **Gray 100** (`{colors.gray-100}`): Hairline rules, card outlines, dividers.

### Code & Links
- **Code Background** (`{colors.code-bg}`): Inline/code entry blocks (near-black).
- **Code Text** (`{colors.code-text}`): Default code foreground.
- **Link Blue** (`{colors.link-blue}`): Occasional external/system links.

## Typography

### Font Family
- **Primary**: `Favorit Variable` (ABC Favorit), fallbacks `Favorit, Helvetica, sans-serif`. Default variation `wght 250` — a hairline weight.
- **Serif emphasis**: `Saol` (Saol Display, light italic) for editorial flourishes and pull-quotes.
- **Display**: `New Edge` (soft rounded) for oversized glossary letters and hero.
- **Monospace**: `Favorit Mono Variable`, fallback `Favorit Mono, ui-monospace, monospace`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | New Edge oversized hero (~6rem) |
| `glossary-letter` | Rounded New Edge section letters |
| `section-heading` | Hairline Favorit section titles |
| `serif-emphasis` | Saol italic pull-quotes and flourishes |
| `title` | Entry titles |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text (18px, wght 250) |
| `body-small` | Compact UI text |
| `caption` | Metadata, small labels |
| `mono-body` | Code blocks |
| `mono-label` | Technical labels, tags |

### Principles
- **Hairline by default**: body sits at `wght 250` — the page reads light and penciled. Heavier weights are reserved for emphasis and interaction states.
- **Three contrasting voices**: hairline grotesque (Favorit), high-contrast italic serif (Saol), and soft rounded display (New Edge) — never blended within one role.
- **Type as the system**: hierarchy comes from size, weight, and voice, not from color or boxes.
- **Living links**: variable-font weight and letter-spacing animate on hover, so interactive text physically responds to touch.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Loosely 8px-based, with large editorial jumps to `{spacing.3xl}` (64px) and `{spacing.4xl}` (96px) for page-level breathing room.

### Grid & Container
- Single editorial column for reading, widening to a glossary index grid
- Generous top padding; glossary letters act as oversized section anchors
- Full-width hairline rules (`{colors.gray-100}`) separating entries

### Whitespace Philosophy
- **Document, not dashboard**: whitespace and dotted rules carry structure; panels are rare.
- **One accent, much air**: the chartreuse jolt works precisely because it sits in an otherwise empty, quiet field.
- **Soft edges**: radii from 5px to 18px to 100px pills keep every surface gentle.

## Components

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

### Buttons
- **`button-primary`** — chartreuse `{colors.primary}` fill, black text, full pill.
- **`button-secondary`** — paper surface, black outline, full pill.

### Cards
- **`card`** — white, hairline `{colors.gray-100}` outline, 18px radius.
- **`card-tinted`** — chartreuse-tint wash for highlighted entries.

### Tags & Inputs
- **`badge`** — soft gray surface, mono label, pill.
- **`input`** — white, hairline outline, 8px radius.

### Code & Links
- **`code-block`** — near-black surface, muted code text, mono.
- **`link`** — black dotted underline; weight/tracking animate on hover.

## Do's and Don'ts

### Do
- Keep body text at hairline `wght 250` — the lightness is the identity
- Pair Favorit (body), Saol italic (emphasis), New Edge (display) in their strict roles
- Ration the chartreuse `{colors.primary}` — one jolt per view, mostly as washes
- Use dotted underlines and hairline rules instead of heavy borders
- Animate variable font-weight on link hover
- Use soft, varied radii up to 100px pills

### Don't
- Don't set body text bold — Favorit lives in the 100–280 range here
- Don't introduce a second accent color — chartreuse is the only one
- Don't blend the three type voices within a single element
- Don't use the chartreuse as large flat fills outside CTAs/highlights — it overwhelms
- Don't add heavy panel chrome — whitespace is the structure
- Don't put black text on full-strength chartreuse at small sizes without checking weight

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <500px | Body drops to 16px, hero/letters scale down |
| Tablet | 500–800px | Register link and headings shrink, single column holds |
| Desktop | >800px | Full editorial layout, oversized glossary letters |

### Collapsing Strategy
- Hero New Edge display scales from ~6rem down proportionally
- Glossary index: multi-column → single column
- Body font-size 18px → 16px under 500px
- Hairline rules and dotted underlines persist at all sizes

---

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