---
name: Variable Fonts
description: "This site is a great example of a clean, typography-focused design system that prioritizes readability and professional authority."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1E242C"
  secondary: "#576579"
  tertiary: "#1A73E8"
  neutral: "#576579"
  bg-soft: "#FCFCFD"
  bg-quiet: "#E7EAEA"
  line: "rgba(231, 234, 238, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A clean, typography-focused resource hub for variable fonts and brand case studies.

*A refined design library and resource hub*

## Colors

Clean, high-contrast neutral canvas with a single functional blue accent

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1E242C`)** — uses `ink` token
- **Secondary text (`#576579`)** — uses `ink-soft` token
- **Accent (`#1A73E8`)** — uses `accent` token
- **Muted (`#576579`)** — uses `muted` token
- **Borders (`rgba(231, 234, 238, 1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Use standard system fallback stacks (Helvetica, Arial) for consistent UI rendering
- Maintain a modular scale for clear typographic hierarchy
- Keep body text weight at 400 for optimal readability

## Layout

Responsive 3-column card grid that stacks on mobile

*Rhythm:* Standard 4px grid system with consistent 24px gutters

## Elevation & Depth

- 0px 1px 6px rgba(0, 0, 0, 0.06)
- 0px 11px 15px rgba(0, 0, 0, 0.05)
- Borders: 1px solid #E7EAEA

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Functional blue accent button with white text and slight border-radius
- **card:** Image-heavy cards with 16px rounded corners and subtle hover shadows
- **chip:** Simple text-based category chips separated by dots
- **input:** Minimal search input field
- **hero:** Large, left-aligned typographic hero section

## Do's and Don'ts

**Don't:**
- Don't use overly decorative serif fonts — screenshot shows a clean grotesque-sans system
- Don't add heavy drop shadows — screenshot shows only very subtle box shadows
- Don't center all text — screenshot shows left-aligned headings and body copy
- Don't use multiple accent colors — screenshot shows a single functional blue
- Don't use tight line-heights for long text — screenshot shows comfortable 1.5 line-heights
- Don't use rounded corners on all elements — screenshot shows a mix of sharp and rounded cards

---

## System Prompt (paste into AI agent)

```
This is a professional typography resource hub and foundry website. It uses a clean, high-contrast palette centered on white (#FFFFFF) and deep navy ink (#1E242C), with a single functional blue accent (#1A73E8) for primary actions. The typography relies on standard grotesque-sans categories for both display and body text, utilizing Helvetica and Arial fallback stacks. The layout is a spacious, left-aligned structure with generous whitespace. Critical design rules: maintain the strict single-accent color system, preserve the clean typographic hierarchy, and use subtle, functional shadows instead of heavy decorative ones. Avoid cluttered UI or overly playful elements that would detract from the authoritative, educational tone.
```