Design & Branding
Tokens, fonts, colors, dark mode, per-section accents, logo, and support badges.
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.
UI component library
The small, reusable building blocks — page headers, buttons, dividers, empty states, breadcrumbs — that sit between design tokens and full page layouts.
Fonts and typography
Swap the four default fonts for any pairing from Bunny Fonts. Every font change propagates through the entire site after a single save.
Dark mode
How Project Broadsheet implements automatic dark mode via prefers-color-scheme, the manual theme toggle in the header, and the no-flash initialization script.
Color system
Every color in Project Broadsheet is a CSS custom property. Change one token and the entire site updates. This page explains the palette, the token names, and the contrast guarantees.
Print stylesheets
How Project Broadsheet's print styles work, what gets hidden when a reader prints an article or edition, and how to customize the printed output.
Accessibility
The concrete a11y patterns Project Broadsheet implements — contrast tokens that clear WCAG 2.2 AA, prefers-reduced-motion, focus traps, focus-visible rings, skip links, and the aria-hidden traps to avoid.
Support and transparency badges
Flat-style badges that surface tipping links and editorial transparency signals throughout your publication.
Layout reference
Every page layout option in Project Broadsheet, when to use each one, and how to activate them in front matter.
SPA-style navigation
Page transitions swap the main content without a full reload, so background music, scroll position, global panels, and reader state survive navigation.
If this category should cover a topic that isn't here yet, send us feedback.