Style Guide
Reusable component classes from public/css/inline-style-helpers.css. Reach for these c-* classes before stacking raw u-* utilities.
Color Tokens
CSS custom properties defined in public/css/style.css. Reference them as var(--token-name).
Font Tokens
Typography stacks defined in public/css/style.css. Apply with font-family: var(--token-name).
Radius Tokens
Corner radius values defined in public/css/style.css. Apply with border-radius: var(--token-name).
Layout Tokens
Layout-level values defined in public/css/style.css. Reference them with var(--token-name).
Maximum content width for page containers (header, sections).
Spacing Tokens
Spacing scale defined in public/css/style.css. Reference them as var(--token-name) for padding, margin, and gap values.
Headings
Standard heading styles for pages, sections, and cards. Pair with the heading font automatically.
.c-page-title
Top-of-page H1. Use once per page as the primary title.
Page Title
<h1 class="c-page-title">Page Title</h1>
.c-section-title
H2 inside a page section. Anchors a major content block.
Section Title
<h2 class="c-section-title">Section Title</h2>
.c-section-subtitle
H3 / supporting subtitle inside a section. Includes bottom margin.
Section Subtitle
<h3 class="c-section-subtitle">Section Subtitle</h3>
.c-card-heading
Compact heading for cards and panels. Includes bottom margin.
Card Heading
<h4 class="c-card-heading">Card Heading</h4>
Form Labels
Labels for form fields. Pick the variant that matches the surrounding density and tone.
.c-form-label
Default form label, paired with text inputs and selects.
<label class="c-form-label">Email address</label> <input type="email" placeholder="you@example.com" />
.c-field-label-dim
Quiet field label for secondary or read-only fields.
<label class="c-field-label-dim">Internal note</label> <input type="text" placeholder="optional" />
.c-mono-field-label
Mono-spaced field label for technical fields like IDs, slugs, or codes.
<label class="c-mono-field-label">post_id</label> <input type="text" placeholder="abc-123" />
Meta & Eyebrows
Small mono-styled text for metadata and category eyebrows above headings.
.c-meta-mono
Tiny mono metadata (timestamps, counts) at 11px.
<span class="c-meta-mono">posted 2h ago · 142 views</span>
.c-meta-mono-md
Medium mono metadata at 12px for slightly larger displays.
<span class="c-meta-mono-md">v1.4.2 · build 88a3</span>
.c-eyebrow-tag
Uppercase mono tag, inline. Good for category chips inside lists.
<span class="c-eyebrow-tag">breaking news</span>
.c-eyebrow-mono
Uppercase mono eyebrow rendered above a heading. Includes bottom margin.
Downtown protest update
<div> <div class="c-eyebrow-mono">field report</div> <h2 class="c-section-title">Downtown protest update</h2> </div>
Notices
Centered single-line notices for empty states or success confirmations inside lists and panels.
.c-notice-dim
Muted notice for empty states ("No results yet").
<div class="c-notice-dim">No items to show.</div>
.c-notice-success
Green success notice for confirmations.
<div class="c-notice-success">Saved successfully.</div>
Layout Rows & Stacks
Flexbox primitives for the most common row and stack patterns. Use these instead of stacking u-flex + u-gap-* + u-items-center.
.c-row-8
Horizontal row, vertically centered, 8px gap. Good for icon + label pairs.
<div class="c-row-8"> <span class="sg-preview-box">icon</span> <span class="sg-preview-box">label</span> </div>
.c-row-12
Horizontal row, vertically centered, 12px gap. Default for inline groups.
<div class="c-row-12"> <span class="sg-preview-box">A</span> <span class="sg-preview-box">B</span> <span class="sg-preview-box">C</span> </div>
.c-stack-12
Vertical stack with 12px gap between children.
<div class="c-stack-12"> <div class="sg-preview-box">First</div> <div class="sg-preview-box">Second</div> <div class="sg-preview-box">Third</div> </div>
.c-header-row
Page/section header row: title on the left, actions on the right. Wraps on small screens and includes bottom margin.
Recent posts
<div class="c-header-row">
<h2 class="c-section-title">Recent posts</h2>
<div class="c-row-8">
<span class="sg-preview-box">Filter</span>
<span class="sg-preview-box">New</span>
</div>
</div>
.c-toolbar-row
Toolbar row aligned to the top (not centered). Use when one side has multi-line content like filter chips.
<div class="c-toolbar-row">
<div class="c-row-8">
<span class="sg-preview-box">chip</span>
<span class="sg-preview-box">chip</span>
<span class="sg-preview-box">chip</span>
</div>
<span class="sg-preview-box">Sort</span>
</div>
Promoted Component Classes
Six classes promoted from the most-repeated u-* utility stacks (task #85). Reach for these first instead of re-pasting the underlying utility chains.
.c-page-title
Top-of-page H1 used on legal, DMCA, privacy, and other simple section pages. Use once per page.
Privacy Policy
<h1 class="c-page-title">Privacy Policy</h1>
.c-row-between
Section header row: title on the left, actions on the right. Used in admin views, collections, and reading lists. Includes 24px bottom margin.
<div class="c-row-between"> <span class="sg-preview-box">Section title</span> <span class="sg-preview-box">Action</span> </div>
.c-row-between-tight
Tighter variant of c-row-between for dense admin lists. Same layout but only 0.5rem bottom margin.
<div class="c-row-between-tight"> <span class="sg-preview-box">List item</span> <span class="sg-preview-box">Edit</span> </div>
.c-error-banner
Inline error banner shown above legal/DMCA/privacy forms. Red tinted background with 1px border.
<div class="c-error-banner">Please fix the errors below before submitting.</div>
.c-form-input
Full-width form input on the default page background. Used in newsletter signup and source-protection forms.
<input class="c-form-input" type="email" placeholder="you@example.com" />
.c-form-input-surface
Same shape as c-form-input, but on a surface-colored card (e.g. poll-create). Use when the input sits inside an elevated card.
<input class="c-form-input-surface" type="text" placeholder="What is your question?" />