Design BetterDesign System
agent-reference

For AI agents

This page is structured for LLM consumption. It contains the complete Design Better design system in a compact, parseable format.

How to use this reference

Instructions for AI agents

You are accessing the Design Better design system reference. Use this page to answer questions about colors, typography, spacing, motion, voice, or components used in Design Better products.

The authoritative token file is available at /tokens.json in DTCG format. It is the source of truth. The sections below summarize the most critical system rules.

Token file
GET /tokens.json
Full DTCG token JSON
System version
0.1.0-draft
Current draft version
Last updated
2026-05-18
Date of last edit

System overview

What is Design Better?

Design Better is a media brand — podcast, newsletter, and education platform — focused on design leadership, creative practice, and the craft of making. It has published 250+ conversations over nine years. The audience is 230,000+ designers, product leaders, and creative directors.

System description

Design Better design tokens, extracted from the db-corpus welcome app and the 2023 brand guidelines PDF. Use as the source of truth for color, type, and spacing across Design Better products, decks, and documents.

Core aesthetic

Dark-mode native. Near-black surface (#0A0A0A), warm cream text (#F2F0EC), single accent color (signal: #FF4725). Restrained palette — fewer than 10 primary colors. Typography-forward. Motion is fast and purposeful, never decorative.

Color tokens — summary

color.brand.ink#0A0A0APrimary dark background
color.brand.paper#F5F2ECWarm cream — light surfaces, print
color.brand.signal#FF4725The accent — use sparingly
color.brand.signal-bright#FF5B3DHover state for signal
color.brand.signal-deep#C4321AGradient end for signal
color.text.on-dark.primary#F2F0ECHeadlines, body — max legibility
color.text.on-dark.dimrgba(242,240,236,0.62)Secondary text, captions
color.text.on-dark.faintrgba(242,240,236,0.38)Token labels, placeholders
color.surface.raised-on-darkrgba(255,255,255,0.04)Cards, sidebar, elevated panels
color.border.subtle-on-darkrgba(255,255,255,0.08)Default card borders
color.border.strong-on-darkrgba(255,255,255,0.18)Hover/focus borders
color.content-type.podcast.fg#9D90F8Podcast badge text
color.content-type.podcast.bgrgba(124,106,247,0.18)Podcast badge background
color.content-type.video.fg#E06060Video badge text
color.content-type.newsletter.fg#4DB87ANewsletter badge text
color.content-type.book.fg#C8973ABook badge text

Typography rules

Space Grotesk
typography.fontFamily.display
Headlines, wordmarks, navigation, all-caps labels
Weights: 400–700
Use for all h1–h3. Letter-spacing: -0.02em at display sizes.
Inter Tight
typography.fontFamily.body
Body copy, UI text, captions, all default text
Weights: 300–700
Default font for all content not explicitly overridden.
Source Serif 4
typography.fontFamily.editorial
Pull-quotes, long-form editorial passages
Weights: 400 italic only
Italic only. Never use in roman weight.
JetBrains Mono
typography.fontFamily.mono
Code blocks, token names, timestamps, technical labels
Weights: 400, 500
Opacity 60% for token chips. Full opacity for code blocks.

Voice rules

Mission

Design Better helps designers and creative leaders think more clearly, lead more confidently, and build better practices — through honest conversation and rigorous craft.

Core attributes

  • ▪Warm but direct
  • ▪Substantive over stylish
  • ▪Earned authority
  • ▪Generous with insight
  • ▪Never prescriptive

Writing format patterns

headlinesSentence-case. Active verbs. No period.
subheadsSentence-case. Short noun phrase preferred.
bodyParagraphsMax 4 sentences. One idea per paragraph.
pullQuotesSource Serif 4 italic. Guest name + title below.
listsLead with the noun. No trailing periods on fragments.
captionsInter Tight 12px. Opacity 62%. No period.
ctaVerb + object. E.g. 'Read the guide' not 'Click here'.

Forbidden words

These words must never appear in Design Better copy. If found, replace with plain language.

disruptiondisruptecosystemleveragesynergyunlockunleashgame-changerinnovativeseamlessdelightful10xlearningsideatejourneyholisticrobustscalableempowerreimagine

Common agent mistakes — read before building

✗White text on signal orange buttons
✓Primary CTA: signal bg (#FF4725) + dark text (#0A0A0A). Never white. The design system spec says 'dark text' explicitly.
✗Wrong type scale — using 16px as body base
✓Base body size is 18px. Full scale: 14 / 16 / 18 / 22 / 28 / 36 / 48 / 62 / 80px. A standard web scale (12/14/16/20/24) is incorrect.
✗Inventing signal color variants (--signal-bright, --signal-deep)
✓One signal color only: #FF4725. For hover states, darken inline to ~#e03d1e. Never create variant tokens.
✗Inventing CSS variable aliases (--text-primary, --text-dim, --surface-base)
✓Use the exact names: --text-1, --text-2, --text-3, --bg, --surface-1, --surface-2, --divider, --divider-strong, --signal-text.
✗Orange-tinted --hairline
✓--hairline is a neutral gray edge separator: rgba(255,255,255,0.08). Only --signal and --signal-text are orange.
✗Decorative large quotation mark on pull quotes
✓Pull quotes use a 3px left border in #FF4725, no border-radius, no background. Never a 96px " character.
✗Font-weight 800 or 900 on display text
✓Max weight is 700 across all type sizes. F37 Lineca has heavier weights but the scale caps at bold (700).
✗Loading Inter Tight as the primary body font
✓Body font is Aktiv Grotesk via Adobe Fonts: <link rel='stylesheet' href='https://use.typekit.net/pvj2wrc.css'>. Inter Tight is the fallback only.
✗Borders on cards for depth
✓Surface color contrast creates depth — not borders. Cards use surface-1 background with no border. Borders add visual noise.

Standalone dark page setup

For self-contained HTML pages outside the app (media kits, press pages, editorial documents), declare dark tokens directly in :root and load fonts manually.

--text-1#F2F0EC
--text-2rgba(242,240,236,0.62)
--text-3rgba(242,240,236,0.38)
--bg#0A0A0A
--surface-1#161616
--surface-2#1E1E1E
--dividerrgba(255,255,255,0.08)
--divider-strongrgba(255,255,255,0.18)
--signal#FF4725
--signal-text#FF4725
--hairlinergba(255,255,255,0.08)
Required font loading (head)
<!-- Aktiv Grotesk — required body font. Kit ID is licensed to Design Better only. -->
<link rel="stylesheet" href="https://use.typekit.net/pvj2wrc.css">

<!-- Display fallback, editorial, mono from Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital@1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

<!-- F37 Lineca: load from local .otf files only — not on any public CDN -->
@font-face { font-family: "F37 Lineca"; src: url("./fonts/F37LinecaTest-Bold.otf"); font-weight: 700; }

Full tokens.json

Raw DTCG-format token file. Also accessible at /tokens.json.

tokens.jsonDTCG format
{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "Design Better design tokens, extracted from the db-corpus welcome app and the 2023 brand guidelines PDF. Use as the source of truth for color, type, and spacing across Design Better products, decks, and documents.",
  "$version": "0.1.0-draft",
  "$lastUpdated": "2026-05-18",
  "color": {
    "brand": {
      "ink": {
        "$value": "#0A0A0A",
        "$type": "color"
      },
      "paper": {
        "$value": "#F5F2EC",
        "$type": "color"
      },
      "signal": {
        "$value": "#FF4725",
        "$type": "color"
      },
      "signal-bright": {
        "$value": "#FF5B3D",
        "$type": "color"
      },
      "signal-deep": {
        "$value": "#C4321A",
        "$type": "color"
      }
    },
    "text": {
      "on-dark": {
        "primary": {
          "$value": "#F2F0EC",
          "$type": "color"
        },
        "dim": {
          "$value": "rgba(242, 240, 236, 0.62)",
          "$type": "color"
        },
        "faint": {
          "$value": "rgba(242, 240, 236, 0.38)",
          "$type": "color"
        },
        "signal": {
          "$value": "#FF4725",
          "$type": "color"
        }
      },
      "on-light": {
        "primary": {
          "$value": "#0A0A0A",
          "$type": "color"
        },
        "dim": {
          "$value": "rgba(0, 0, 0, 0.65)",
          "$type": "color"
        },
        "faint": {
          "$value": "#777777",
          "$type": "color"
        },
        "signal": {
          "$value": "#FF4725",
          "$type": "color"
        }
      }
    },
    "surface": {
      "dark": {
        "$value": "#0A0A0A",
        "$type": "color"
      },
      "light": {
        "$value": "#F5F2EC",
        "$type": "color"
      },
      "raised-on-dark": {
        "$value": "rgba(255, 255, 255, 0.04)",
        "$type": "color"
      },
      "raised-on-light": {
        "$value": "rgba(0, 0, 0, 0.04)",
        "$type": "color"
      },
      "surface-1": {
        "$value": "#161616",
        "$type": "color",
        "$description": "Elevated card and panel background. Use instead of transparent overlays for clear surface depth."
      },
      "surface-2": {
        "$value": "#1E1E1E",
        "$type": "color",
        "$description": "Hover and active card state, dialogs, nested surfaces."
      },
      "hairline": {
        "$value": "rgba(255, 71, 37, 0.55)",
        "$type": "color",
        "$description": "Signal-tinted structural border. Used on key dividers like the nav topbar."
      }
    },
    "border": {
      "subtle-on-dark": {
        "$value": "rgba(255, 255, 255, 0.08)",
        "$type": "color"
      },
      "strong-on-dark": {
        "$value": "rgba(255, 255, 255, 0.18)",
        "$type": "color"
      },
      "subtle-on-light": {
        "$value": "rgba(0, 0, 0, 0.08)",
        "$type": "color"
      },
      "strong-on-light": {
        "$value": "rgba(0, 0, 0, 0.18)",
        "$type": "color"
      },
      "signal": {
        "$value": "rgba(255, 71, 37, 0.55)",
        "$type": "color"
      }
    },
    "content-type": {
      "podcast": {
        "fg": {
          "$value": "#9D90F8",
          "$type": "color"
        },
        "bg": {
          "$value": "rgba(124, 106, 247, 0.18)",
          "$type": "color"
        }
      },
      "video": {
        "fg": {
          "$value": "#E06060",
          "$type": "color"
        },
        "bg": {
          "$value": "rgba(224, 75, 75, 0.18)",
          "$type": "color"
        }
      },
      "newsletter": {
        "fg": {
          "$value": "#4DB87A",
          "$type": "color"
        },
        "bg": {
          "$value": "rgba(59, 158, 106, 0.18)",
          "$type": "color"
        }
      },
      "book": {
        "fg": {
          "$value": "#C8973A",
          "$type": "color"
        },
        "bg": {
          "$value": "rgba(200, 151, 58, 0.18)",
          "$type": "color"
        }
      }
    }
  },
  "color-palette": {
    "$description": "Extended brand palette from the Design Better brand guidelines (colorswatches.png). Use for editorial art direction, episode artwork, campaign graphics. Not for product UI surfaces or text.",
    "golden": {
      "$value": "#FBCA3C",
      "$type": "color"
    },
    "teal": {
      "$value": "#0D8880",
      "$type": "color"
    },
    "amber": {
      "$value": "#D4A800",
      "$type": "color"
    },
    "black": {
      "$value": "#000000",
      "$type": "color"
    },
    "pink": {
      "$value": "#F9B0CC",
      "$type": "color"
    },
    "chartreuse": {
      "$value": "#CCFF00",
      "$type": "color"
    },
    "silver": {
      "$value": "#C4C6BE",
      "$type": "color"
    },
    "sky": {
      "$value": "#9ED8F2",
      "$type": "color"
    },
    "deep-teal": {
      "$value": "#0A4040",
      "$type": "color"
    },
    "coral": {
      "$value": "#F03E1C",
      "$type": "color"
    },
    "cream": {
      "$value": "#EDE0D4",
      "$type": "color"
    },
    "crimson": {
      "$value": "#C4003C",
      "$type": "color"
    },
    "lavender": {
      "$value": "#CAC0F4",
      "$type": "color"
    },
    "peach": {
      "$value": "#F5C0AA",
      "$type": "color"
    },
    "orange": {
      "$value": "#FF7818",
      "$type": "color"
    },
    "dark-amber": {
      "$value": "#B07800",
      "$type": "color"
    },
    "plum": {
      "$value": "#4E0040",
      "$type": "color"
    },
    "forest": {
      "$value": "#086838",
      "$type": "color"
    },
    "mint": {
      "$value": "#6AE8D4",
      "$type": "color"
    }
  },
  "typography": {
    "fontFamily": {
      "display": {
        "$value": "'F37 Lineca', 'Space Grotesk', sans-serif",
        "$type": "fontFamily",
        "$description": "All headings, wordmarks, cover art, decks, documents. F37 Lineca is canonical; Space Grotesk is the digital fallback."
      },
      "body": {
        "$value": "\"aktiv-grotesk\", 'Inter Tight', sans-serif",
        "$type": "fontFamily",
        "$description": "Body copy, UI text, captions. Loaded via Adobe Fonts (Typekit). Inter Tight is the fallback."
      },
      "body-thin": {
        "$value": "\"aktiv-grotesk-thin\", 'Inter Tight', sans-serif",
        "$type": "fontFamily",
        "$description": "Aktiv Grotesk Thin (weight 200). Separate family name required by Adobe Fonts."
      },
      "editorial": {
        "$value": "'Source Serif 4', serif",
        "$type": "fontFamily",
        "$description": "Pull-quotes, long-form editorial passages (italic only)"
      },
      "mono": {
        "$value": "'JetBrains Mono', monospace",
        "$type": "fontFamily",
        "$description": "Code blocks, token labels, timestamps"
      }
    },
    "scale": {
      "xs": {
        "$value": "12px",
        "$type": "dimension"
      },
      "sm": {
        "$value": "14px",
        "$type": "dimension"
      },
      "base": {
        "$value": "16px",
        "$type": "dimension"
      },
      "md": {
        "$value": "20px",
        "$type": "dimension"
      },
      "lg": {
        "$value": "24px",
        "$type": "dimension"
      },
      "xl": {
        "$value": "30px",
        "$type": "dimension"
      },
      "2xl": {
        "$value": "38px",
        "$type": "dimension"
      },
      "3xl": {
        "$value": "48px",
        "$type": "dimension"
      },
      "4xl": {
        "$value": "60px",
        "$type": "dimension"
      }
    },
    "lineHeight": {
      "tight": {
        "$value": "1.1",
        "$type": "number"
      },
      "snug": {
        "$value": "1.3",
        "$type": "number"
      },
      "normal": {
        "$value": "1.5",
        "$type": "number"
      },
      "relaxed": {
        "$value": "1.7",
        "$type": "number"
      }
    },
    "letterSpacing": {
      "tight": {
        "$value": "-0.02em",
        "$type": "dimension"
      },
      "normal": {
        "$value": "0em",
        "$type": "dimension"
      },
      "wide": {
        "$value": "0.04em",
        "$type": "dimension"
      },
      "widest": {
        "$value": "0.12em",
        "$type": "dimension"
      }
    }
  },
  "spacing": {
    "0": {
      "$value": "0px",
      "$type": "dimension"
    },
    "1": {
      "$value": "4px",
      "$type": "dimension"
    },
    "2": {
      "$value": "8px",
      "$type": "dimension"
    },
    "3": {
      "$value": "12px",
      "$type": "dimension"
    },
    "4": {
      "$value": "16px",
      "$type": "dimension"
    },
    "6": {
      "$value": "24px",
      "$type": "dimension"
    },
    "8": {
      "$value": "32px",
      "$type": "dimension"
    },
    "12": {
      "$value": "48px",
      "$type": "dimension"
    },
    "16": {
      "$value": "64px",
      "$type": "dimension"
    },
    "24": {
      "$value": "96px",
      "$type": "dimension"
    },
    "32": {
      "$value": "128px",
      "$type": "dimension"
    }
  },
  "borderRadius": {
    "none": {
      "$value": "0px",
      "$type": "dimension"
    },
    "sm": {
      "$value": "4px",
      "$type": "dimension"
    },
    "md": {
      "$value": "8px",
      "$type": "dimension"
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension"
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension"
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension"
    }
  },
  "motion": {
    "duration": {
      "fast": {
        "$value": "120ms",
        "$type": "duration"
      },
      "normal": {
        "$value": "240ms",
        "$type": "duration"
      },
      "slow": {
        "$value": "400ms",
        "$type": "duration"
      }
    },
    "easing": {
      "standard": {
        "$value": "cubic-bezier(0.4, 0, 0.2, 1)",
        "$type": "cubicBezier"
      },
      "decelerate": {
        "$value": "cubic-bezier(0, 0, 0.2, 1)",
        "$type": "cubicBezier"
      },
      "accelerate": {
        "$value": "cubic-bezier(0.4, 0, 1, 1)",
        "$type": "cubicBezier"
      },
      "sharp": {
        "$value": "cubic-bezier(0.4, 0, 0.6, 1)",
        "$type": "cubicBezier"
      }
    }
  },
  "voice": {
    "mission": "Design Better helps designers and creative leaders think more clearly, lead more confidently, and build better practices — through honest conversation and rigorous craft.",
    "coreAttributes": [
      "Warm but direct",
      "Substantive over stylish",
      "Earned authority",
      "Generous with insight",
      "Never prescriptive"
    ],
    "forbiddenWords": [
      "disruption",
      "disrupt",
      "ecosystem",
      "leverage",
      "synergy",
      "unlock",
      "unleash",
      "game-changer",
      "innovative",
      "seamless",
      "delightful",
      "10x",
      "learnings",
      "ideate",
      "journey",
      "holistic",
      "robust",
      "scalable",
      "empower",
      "reimagine"
    ],
    "writingFormats": {
      "headlines": "Sentence-case. Active verbs. No period.",
      "subheads": "Sentence-case. Short noun phrase preferred.",
      "bodyParagraphs": "Max 4 sentences. One idea per paragraph.",
      "pullQuotes": "Source Serif 4 italic. Guest name + title below.",
      "lists": "Lead with the noun. No trailing periods on fragments.",
      "captions": "Inter Tight 12px. Opacity 62%. No period.",
      "cta": "Verb + object. E.g. 'Read the guide' not 'Click here'."
    }
  }
}