--- version: alpha name: Library description: Editorial-technical design infrastructure — Inter sans paired with a Reckless Neue serif display face, a single violet brand accent over a near-white canvas, generous Tailwind v4 radii, and dashed/mono detailing that signals tokens, components, and machine-readable context. colors: # Canvas + ink background: "#ffffff" surface: "#fbfbfc" surface-soft: "#fafbfc" surface-tint: "#eef0f3" ink: "#0a0a0a" ink-strong: "#000000" ink-secondary: "#4b5563" ink-muted: "#6b7280" ink-faint: "#9ca3af" # Brand violet primary: "#6e5dc6" primary-hover: "#7740d6" primary-strong: "#8751e6" primary-soft: "#a78bfa" primary-lighter: "#c4b5fd" primary-tint: "#eee9fb" primary-pale: "#e9d5ff" # Deep ink-violet (dark blocks / code) ink-violet: "#0f0f1e" slate-ink: "#0f172a" # Secondary accent — alert red danger: "#ef4444" danger-strong: "#dc2626" danger-deep: "#b91c1c" danger-soft: "#fca5a5" danger-lighter: "#fecaca" danger-tint: "#fee2e2" # Success — token state green success: "#22c55e" success-tint: "#ecfdf5" success-soft: "#a7f3d0" # Neutral scale gray-900: "#111827" gray-800: "#1f2937" gray-700: "#374151" gray-600: "#4b5563" gray-500: "#6b7280" gray-400: "#9ca3af" gray-300: "#d1d5db" gray-200: "#e5e7eb" gray-100: "#f3f4f6" gray-50: "#fafafa" # Borders border: "#e5e7eb" border-strong: "#d8d8d8" # On-color on-primary: "#ffffff" on-ink: "#ffffff" on-danger: "#ffffff" typography: display-hero: fontFamily: "Reckless Neue, Georgia, serif" fontSize: 96px fontWeight: 400 lineHeight: 1.05 letterSpacing: -2.4px display-serif: fontFamily: "Reckless Neue, Georgia, serif" fontSize: 64px fontWeight: 400 lineHeight: 1.10 letterSpacing: -1.6px section-heading: fontFamily: "Reckless Neue, Georgia, serif" fontSize: 44px fontWeight: 400 lineHeight: 1.15 letterSpacing: -1.1px sub-heading: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.20 letterSpacing: -0.8px card-title: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.30 letterSpacing: -0.6px lead: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.55 letterSpacing: -0.2px body-large: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.60 letterSpacing: 0px body: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0px body-medium: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0px body-small: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.43 letterSpacing: -0.1px caption: fontFamily: "Inter, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0px mono-label: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.40 letterSpacing: 0px mono-code: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" fontSize: 13px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 80px 5xl: 128px rounded: none: 0px micro: 3px sm: 6px md: 9px lg: 12px xl: 18px 2xl: 26px 3xl: 38px pill: 9999px components: # Primary violet CTA button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 18px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 18px # Dark ink CTA button-dark: backgroundColor: "{colors.ink}" textColor: "{colors.on-ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 18px # Secondary outline button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 18px borderColor: "{colors.border}" button-secondary-hover: backgroundColor: "{colors.surface-tint}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 10px 18px borderColor: "{colors.border-strong}" # Token / status pill badge: backgroundColor: "{colors.primary-tint}" textColor: "{colors.primary-hover}" typography: "{typography.mono-label}" rounded: "{rounded.pill}" padding: 3px 10px badge-success: backgroundColor: "{colors.success-tint}" textColor: "{colors.success}" typography: "{typography.mono-label}" rounded: "{rounded.pill}" padding: 3px 10px # Standard card card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.border}" # Soft-surface card card-soft: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px borderColor: "{colors.gray-100}" # Dark code / context panel card-code: backgroundColor: "{colors.ink-violet}" textColor: "{colors.primary-soft}" typography: "{typography.mono-code}" rounded: "{rounded.lg}" padding: 20px # Input input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-small}" rounded: "{rounded.md}" padding: 8px 12px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.background}" borderColor: "{colors.primary}" # Top nav bar — blurred white nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" padding: 14px 24px borderColor: "{colors.border}" # Sidebar nav item (docs) nav-item: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.body-small}" rounded: "{rounded.sm}" padding: 6px 10px nav-item-active: backgroundColor: "{colors.primary-tint}" textColor: "{colors.primary-hover}" typography: "{typography.body-medium}" rounded: "{rounded.sm}" padding: 6px 10px # Inline code chip code-chip: backgroundColor: "{colors.surface-tint}" textColor: "{colors.gray-800}" typography: "{typography.mono-label}" rounded: "{rounded.micro}" padding: 2px 6px --- # Library Design System ## Overview Library positions itself as "the infrastructure your design system runs on" — components, tokens, and patterns made live and machine-readable for both humans and AI agents. Its own marketing site practices what it preaches: a restrained, editorial-technical surface where a literary serif display face does the emotional work and a clinical sans-plus-mono system does the structural work. The canvas is near-pure white (`{colors.background}`) with an almost-black ink (`{colors.ink}`, `#0a0a0a`), and a single saturated violet (`{colors.primary}`) carries every accent moment. The signature move is the pairing of **Reckless Neue** — a high-contrast serif with a warm, editorial cadence — against **Inter**, the workhorse neutral sans. Big statements (the hero, section openers) render in the serif at large sizes with tight negative tracking, lending the page a magazine-cover gravity. Everything functional — navigation, buttons, body copy, labels — falls to Inter. A monospace stack appears wherever the product's "context for agents" thesis surfaces: token names, code chips, and technical labels, reinforcing that this is design-system plumbing, not decoration. Color is deliberately monochromatic-plus-one. Grays run a full neutral scale from `{colors.gray-50}` to `{colors.gray-900}`, borders sit at a quiet `{colors.border}`, and the violet appears as a family — from the pale `{colors.primary-tint}` backing pills to the strong `{colors.primary-strong}` on emphasis. A secondary alert red (`{colors.danger}`) and a token-state green (`{colors.success}`) exist only for status semantics, never as decoration. Deep ink-violet panels (`{colors.ink-violet}`) host code and context blocks, the one place the page goes dark. Built on Tailwind v4, the radius scale is generous and rounded — `{rounded.lg}` to `{rounded.3xl}` on cards and feature blocks — which softens the otherwise technical palette into something approachable. Dashed borders and mono labels recur as a motif, visually quoting the "tokens" the product manages. **Key Characteristics:** - Reckless Neue serif display paired with Inter sans — editorial gravity over technical body - Monospace stack for token names, code chips, and agent-facing labels - Single violet brand accent (`{colors.primary}`) as a full family, over near-white canvas - Almost-black ink (`#0a0a0a`), never pure black for primary text - Monochromatic-plus-one palette; red and green reserved for status semantics only - Deep ink-violet (`{colors.ink-violet}`) dark panels for code/context blocks - Generous Tailwind v4 radii (rounded, approachable) over a clinical color system - Dashed borders + mono captions as a recurring "this is tokens" motif ## Colors ### Primary - **Ink** (`{colors.ink}`): Primary text, headings — `#0a0a0a`, never pure black. - **Pure White** (`{colors.background}`): Page background, card surfaces, on-violet text. - **Brand Violet** (`{colors.primary}`): The single brand accent — links, primary CTA, active states. ### Violet Family - **Primary Hover** (`{colors.primary-hover}`): Darker violet for hover/active text. - **Primary Strong** (`{colors.primary-strong}`): Emphasis violet for highlights. - **Primary Soft** (`{colors.primary-soft}`): Light violet for code-panel text, illustration accents. - **Primary Tint** (`{colors.primary-tint}`): Pale violet backing pills, active nav items. ### Secondary Status - **Danger Red** (`{colors.danger}`): Alert/error status only. - **Success Green** (`{colors.success}`): Token-valid / success status only. ### Neutral Scale - **Gray 900–700** (`{colors.gray-900}`–`{colors.gray-700}`): Strong secondary text, dark UI. - **Gray 600** (`{colors.ink-secondary}`): Body secondary, description copy. - **Gray 500/400** (`{colors.ink-muted}`/`{colors.ink-faint}`): Muted captions, placeholders. - **Gray 200/100** (`{colors.border}`/`{colors.gray-100}`): Borders, dividers, soft fills. ### Surfaces - **Surface** (`{colors.surface}`): Subtle off-white card tint. - **Surface Tint** (`{colors.surface-tint}`): Inline code chips, hover fills. - **Ink-Violet** (`{colors.ink-violet}`): Dark code/context panels. ## Typography ### Font Family - **Display / Serif**: `Reckless Neue` (high-contrast editorial serif), fallback `Georgia, serif` - **Primary / Sans**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` - **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` - Inter is loaded as a variable font (optical sizing + full weight axis); display uses tight negative tracking. ### 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` | Serif hero — up to clamp 96px, magazine-cover scale | | `display-serif` | Large serif statements | | `section-heading` | Serif section openers | | `sub-heading` | Inter 32px semibold sub-sections | | `card-title` | Feature/card headings | | `lead` | Intro paragraphs under headings | | `body-large` | Feature descriptions | | `body` | Standard reading text | | `body-medium` | Emphasized UI / active labels | | `body-small` | Standard UI text, nav | | `button-ui` | Buttons, links | | `caption` | Metadata, small labels | | `mono-label` | Token names, technical labels, pills | | `mono-code` | Code blocks in dark panels | ### Principles - **Serif for emotion, sans for function**: Reckless Neue carries every headline moment; Inter handles all UI and reading text. The two never blur roles. - **Mono signals tokens**: Wherever the product's machine-readable thesis appears (token names, code, agent context), the monospace stack takes over. - **Negative tracking on display only**: Big serif sizes use -1.1px to -2.4px tracking; body Inter stays at or near 0. - **Three sans weights**: 400 (read), 500 (UI/interactive), 600 (headings/emphasis). ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Built on Tailwind v4's `--spacing` base. Containers cap at `max-width` breakpoints from 40rem to 96rem; primary content wraps around 1320px. ### Grid & Container - Max content width: ~1320px; reading columns clamp 560–940px - Docs layout: `260px` sidebar + fluid content (`260px 1fr` grid at lg) - Hero: centered single column, serif headline, generous vertical padding - Feature sections: 2–3 column card grids ### Whitespace Philosophy - **Editorial breathing room**: large vertical rhythm between sections (`{spacing.4xl}`+), letting the serif headlines anchor each block. - **Soft over hard**: generous radii and quiet borders keep a technical palette feeling calm. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat | No shadow | Page background, text blocks | | Border | `1px solid {colors.border}` | Cards, inputs, nav | | Dashed | `1px dashed {colors.gray-300}` | Token/placeholder motif blocks | | Soft card | `1px solid {colors.gray-100}` + light shadow | Feature cards | | Dark panel | `{colors.ink-violet}` fill | Code/context blocks | | Focus | `2px solid {colors.primary}` outline | Keyboard focus | **Shadow Philosophy**: Depth is quiet — thin borders and large radii do most of the structural work, with only soft, low-opacity shadows on lifted cards. The one dramatic surface is the dark ink-violet code panel, which provides contrast against the bright canvas rather than relying on elevation. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved | | `micro` | 3px | Inline code chips | | `sm` | 6px | Small controls, nav items | | `md` | 9px | Buttons, inputs | | `lg` | 12px | Code panels, list items | | `xl` | 18px | Standard cards | | `2xl` | 26px | Large feature blocks | | `3xl` | 38px | Hero/feature containers | | `pill` | 9999px | Badges, status pills | ## Components The full component spec lives in the `components:` token block above. ### Buttons - **`button-primary`** — Violet fill, white text, `{rounded.md}`. The default CTA. - **`button-dark`** — Ink fill for high-emphasis alternative CTA. - **`button-secondary`** — White with `{colors.border}` outline. ### Pills & Badges - **`badge`** — Pale violet tint, mono label, full pill. The token/status indicator. - **`badge-success`** — Green-tinted variant for valid-token state. ### Cards - **`card`** — White, `{colors.border}`, `{rounded.xl}`. - **`card-soft`** — Off-white surface tint variant. - **`card-code`** — Dark ink-violet panel, violet-soft mono text for code/context. ### Inputs - **`input`** — White, bordered, focus shifts border to `{colors.primary}`. ### Navigation - **`nav-bar`** — Sticky white header with backdrop blur, Inter 14px medium links. - **`nav-item`** / **`nav-item-active`** — Docs sidebar items; active state uses violet tint. ### Distinctive Components - **Code/Context Panels**: Dark ink-violet blocks rendering token names and code in monospace — the literal "context for agents" artifact. - **Token Pills**: Mono-label violet pills standing in for design tokens throughout. - **Serif Hero**: Reckless Neue at clamp(36px,7vw,96px) — the editorial signature against an otherwise technical UI. ## Do's and Don'ts ### Do - Use Reckless Neue (serif) for headlines, Inter for everything functional - Reserve the violet as the single brand accent — use the full violet family for tints/hovers - Use monospace for token names, code, and agent-facing labels - Keep the canvas near-white with `{colors.ink}` (`#0a0a0a`) text - Use generous radii (`{rounded.xl}`–`{rounded.3xl}`) on cards and feature blocks - Use dark ink-violet panels for code/context blocks ### Don't - Don't use the serif for body or UI text — it's display-only - Don't introduce a second brand hue; red and green are status-only - Don't use pure black (`#000000`) for primary text — use `{colors.ink}` - Don't apply tight negative tracking to Inter body text - Don't use heavy drop shadows — borders and radii carry the structure - Don't render token/code content in the sans — mono is the signal --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <40rem | Single column, stacked, root font scales by vw | | Tablet Small | 40–48rem | Container 40–48rem, 2-col grids begin | | Tablet | 48–64rem | md: row layouts, centered text, expanded padding | | Desktop | 64–80rem | lg: 260px sidebar + content, sticky nav | | Large | 80–96rem | Full layout, max content ~1320px | ### Touch Targets - Buttons use 10px vertical padding with comfortable hit areas - Nav links at 14px Inter with adequate spacing - Pills have ~10px horizontal padding ### Collapsing Strategy - Hero serif scales fluidly via clamp(36px,7vw,96px), maintaining negative tracking - Docs sidebar (260px) collapses; nav goes to a mobile menu - Feature cards: 3-column → 2-column → single column - Code panels maintain aspect, may scroll horizontally - Section spacing compresses on mobile ### Image Behavior - Illustration/feature blocks use large radii at all sizes - Dark code panels keep contrast against the white canvas across breakpoints --- ## Agent Prompt Guide ### Quick Color Reference - Primary CTA: Brand Violet `{colors.primary}` - Background: White `{colors.background}` - Heading text: Ink `{colors.ink}` - Body text: Gray 600 `{colors.ink-secondary}` - Border: `{colors.border}` - Link / accent: Violet `{colors.primary}` - Focus ring: Violet `{colors.primary}` ### Example Component Prompts - "Create a hero on white. Headline in Reckless Neue serif at clamp(36px,7vw,96px), weight 400, line-height 1.05, letter-spacing -2.4px, color `{colors.ink}`. Sub-copy in Inter 20px weight 400, color `{colors.ink-secondary}`. Violet CTA (`{colors.primary}`, 9px radius, 10px 18px padding) plus an outline secondary." - "Design a card: white, 1px `{colors.border}`, 18px radius, 24px padding. Title in Inter 24px weight 600. Body 16px weight 400 in `{colors.ink-secondary}`." - "Build a token pill: `{colors.primary-tint}` background, `{colors.primary-hover}` monospace text, 9999px radius, 3px 10px padding." - "Create a dark code panel: `{colors.ink-violet}` fill, monospace 13px text in `{colors.primary-soft}`, 12px radius, 20px padding." ### Iteration Guide 1. Serif (Reckless Neue) is display-only; Inter handles all function; mono marks tokens/code 2. One brand hue — violet `{colors.primary}` — used as a full family for tints and hovers 3. Status colors (red/green) are semantic only, never decorative 4. Generous radii soften the technical palette — lean to `{rounded.xl}`+ on cards 5. Borders and radii carry structure; shadows stay whisper-light 6. Ink is `#0a0a0a`, never pure black --- ## 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 Library. Brand names and trademarks belong to their respective owners.