Feature heading
Top border in the accent color signals visual priority. Good for homepage feature grids and tiered comparison.
- Supporting detail
- Another detail
- One more detail
Reference
Style Guide
Every design token, typographic specimen, component, and interaction pattern on the site — in one place.
Colors
Project Broadsheet's palette is newsprint — warm ink-on-paper by default, deep navy-black in dark mode. Every value is a CSS custom property in tokens.css.
Surfaces
Paper--paper · #F4F1EBPrimary background
Paper raised--paper-raised · #FBF8F2Cards, panels
Paper sunken--paper-sunken · #EBE6DBFooter, alt sections
Text
Ink--ink · #1A1A1ABody text — 15.6:1 on paper
Ink soft--ink-soft · #2C2C2CLead copy
Muted--muted · #5C544AMeta, captions — 7.1:1 on paper
Accents
Vermillion--vermillion · #C0392BPrimary accent — 5.2:1 on paper
Slate--slate · #2C5F8ALinks — 6.8:1 on paper
Rule--rule · #8B6F47Decorative dividers
Gold--gold · #B8862CBorders, badges
State semantics
All borders and divider lines use semi-transparent text colors so they adapt automatically across themes.
--border (12% text) --border-strong (24% text)
Typography
Four typefaces do all the work. All are served from Bunny Fonts with system-font fallbacks.
Families
Project Broadsheet
Hero titles, masthead, page titles, decorative numerals.
Publishing, owned by the publisher
Subheads, card titles, article headlines.
Project Broadsheet is the free, open-source publication system for independent journalists and publishers. Own your content, your readers, and your platform. Forever. Every pixel of this paragraph is set in Source Serif 4, a humanist serif designed for long-form reading on screens.
Article and page body copy — 17px base, 1.7 line-height.
Navigation, buttons, labels, meta
All UI chrome — nav, buttons, form labels, metadata.
Type scale
Fluid type scale via clamp(). Each step is defined in tokens.css and adjusts between a mobile minimum and a desktop maximum.
--step--1~13–14px
--step-0~16–18px
--step-1~19–22px
--step-2~23–28px
--step-3~28–36px
--step-4~33–48px
--step-5~40–64px
--step-6~48–84px
Spacing
A consistent rhythm from 4px to 120px. Use spacing tokens — never hardcoded values.
--space-2xs0.25rem / 4px
--space-xs0.5rem / 8px
--space-sm0.75rem / 12px
--space-md1rem / 16px
--space-lg1.5rem / 24px
--space-xl2rem / 32px
--space-2xl3rem / 48px
--space-3xl5rem / 80px
--space-4xl7.5rem / 120px
Buttons
All buttons meet the 44×44px minimum touch target. Hover states have explicit color to beat parent link overrides.
Variants
<button class="btn btn--primary">Primary</button>
Sizes
Outline-light (dark backgrounds)
Group + block
Forms
All inputs are minimum 44px tall, use the UI typeface, and have a visible focus ring distinct from the hover state.
Cards
Basic card
Eyebrow
Card title goes here
A short summary describing what's on the other side of this link. Usually 1–2 sentences.
Static
Not linked
Same visual style, without hover behavior.
- First supporting point
- Second supporting point
Feature card
Stat card
27+
Reader tools
9
Sections
~12s
Build time
$0
Recurring
Pricing cards
Launch
$999one-time
The fastest way to a live publication.
- Repo setup
- Brand tokens
- Deploy
Signature
$2,499one-time
Launch plus a custom look and migrated archive.
- Everything in Launch
- Custom type
- 25 articles migrated
Publisher
$4,999one-time
White-glove for serious publications.
- Everything in Signature
- Custom sections
- 100 articles migrated
Alerts & callouts
InfoUse for neutral, informational messages.
SuccessUse for confirmations and positive feedback.
WarningUse for things the reader should know but not panic about.
DangerUse for breaking errors or destructive actions.
Callout title
A softer box with more room for prose. Good for sidebars, notes, and supplementary context within a longer article.
Tables
Data-dense comparison tables use .compare-table wrapped in .table-wrap for horizontal overflow on small screens.
| Criterion | Option Afree | Option B$9/mo |
|---|---|---|
| Starting cost | $0 | $9/mo |
| Ownership | Full | Partial |
| Lock-in risk | None | Low |
Badges
Default Accent MIT v1.0.0
Breadcrumbs
Doc patterns
Doc meta row
Was-this-helpful
Was this helpful?
Prev/next navigation
Icons
Icons are inline SVG, 24×24 viewBox, stroke-width: 2, fill: none, and currentColor so they inherit text color in light and dark modes.
Accessibility patterns
Every site-wide pattern we use to meet WCAG 2.2 AA — in one place, with live demos.
Skip link
Press Tab on any page. The first focusable element is a "Skip to content" link that jumps past navigation.
Focus ring
Every interactive element shows a 2px vermillion outline with 3px offset on keyboard focus. Click the button below, then press Tab to see it.
Screen-reader-only content
Use .sr-only to hide content visually while keeping it accessible to assistive tech.
<label class="sr-only" for="email">Email</label> <input id="email" type="email" placeholder="you@example.com">
Reduced motion
All animations and scroll-behavior honor prefers-reduced-motion. Enable the OS-level setting, and motion drops to 0.01ms.
ARIA labels & landmarks
role="banner"on site header,role="contentinfo"on footeraria-labelon every icon-only button and every navaria-current="page"on active nav and sidebar linksaria-hidden="true"on decorative SVGs<main id="main">as the skip-link target
Touch targets
Every interactive element is a minimum of 44×44 CSS pixels — buttons, nav links, form inputs, theme toggle, hamburger, back-to-top, sidebar links.
Contrast reference
All text/background pairings target WCAG AA minimums: 4.5:1 for normal text, 3:1 for large text and UI components. Most exceed AAA.
| Pairing | Ratio | AA normal | AA large | AAA |
|---|---|---|---|---|
| Ink on Paper | 15.6 : 1 | Pass | Pass | Pass |
| Ink soft on Paper | 12.4 : 1 | Pass | Pass | Pass |
| Muted on Paper | 7.1 : 1 | Pass | Pass | Pass |
| Vermillion on Paper | 5.2 : 1 | Pass | Pass | — |
| Slate on Paper | 6.8 : 1 | Pass | Pass | Pass |
| White on Vermillion | 5.4 : 1 | Pass | Pass | — |
| Paper on Ink (inverted) | 15.6 : 1 | Pass | Pass | Pass |
Ratios above are for light mode; dark mode values are derived and independently verified at identical or better contrast.