Customize design tokens
Every color, typeface, and spacing value on the site is defined once in a single CSS file. Edit a handful of variables to rebrand the entire publication.
Project Broadsheet's visual language is controlled by a set of design tokens declared in src/assets/css/tokens.css. Tokens are named CSS custom properties, a value like #C0392B is given a descriptive name like --vermillion, and every component that uses vermillion references the name rather than the raw hex value. Change the variable once, and every button, link, badge, and accent updates in lockstep.
Colors
:root {
--paper: #F4F1EB; /* primary background */
--ink: #1A1A1A; /* body text */
--vermillion: #C0392B; /* primary accent */
--slate: #2C5F8A; /* links */
}
Dark mode values are defined inside :root[data-theme="dark"]. The theme toggle script flips the data-theme attribute on the <html> element and persists the choice in localStorage, no flash, no round trip to a server.
Typography
Four font families handle every piece of text on the site:
--font-masthead: "Playfair Display", serif; /* hero and page titles */
--font-headline: "Lora", serif; /* article headlines and card titles */
--font-body: "Source Serif 4", serif; /* paragraph text */
--font-ui: "DM Sans", sans-serif; /* navigation, buttons, labels */
All four are served from Bunny Fonts, which is privacy-respecting and GDPR-compliant. Swap any of them for another Bunny font and the full site re-typesets without any other changes.
Spacing
Spacing tokens use fluid clamp() values where appropriate, so the rhythm compresses on small screens and expands on large ones:
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-2xl: 3rem;
Every layout, card, form, and section uses these tokens rather than raw values, which means a single edit to the spacing scale propagates through every component.
What to do next
- Pick fonts from Bunny Fonts and swap the font-family variables.
- Add per-section accent colors so each editorial vertical has its own look.
Browse Support for community channels and paid support options, or book a call if you'd like us to set it up for you.