TheHidden Cause

The Hidden Cause — Reference

Style Guide

A living reference of the site's design tokens — colours, typography, spacing and components — rendered straight from the live Automatic.css variables.

Accent: sage — one quiet accent for links, active states and markers. Buttons are ink; red is retired. Fonts: Newsreader headings, Source Sans 3 body. Toggle dark mode bottom-right. A public, living reference of the site's design tokens.

Colour

Palette

Three roles are enabled. Each role carries a fixed lightness ramp (chroma & hue held constant) computed in OKLCH.

Primary (oxblood) — retired from the UI. The single quiet accent is now sage.

–primary-ultra-lightoklch(0.95 0.174 29.7)

–primary-lightoklch(0.85 0.174 29.7)

–primary-semi-lightoklch(0.65 0.174 29.7)

–primary#C0392B · retired from UI

–primary-hoveroklch(0.46 0.174 29.7)

–primary-semi-darkoklch(0.35 0.174 29.7)

–primary-darkoklch(0.25 0.174 29.7)

–primary-ultra-darkoklch(0.1 0.174 29.7)

Base — backgrounds & body text (warm, low-chroma).

–base-ultra-lightoklch(0.95 0.016 71)

–base-lightoklch(0.85 0.016 71)

–base-semi-lightoklch(0.65 0.016 71)

–baseoklch(0.446 0.016 71)

–base-hoveroklch(0.138 0.016 71)

–base-semi-darkoklch(0.35 0.016 71)

–base-darkoklch(0.25 0.016 71)

–base-ultra-darkoklch(0.1 0.016 71)

Neutral — greys, plus pure white / black.

–neutral-ultra-lightoklch(0.95 0 0)

–neutral-lightoklch(0.85 0 0)

–neutral-semi-lightoklch(0.65 0 0)

–neutral-semi-darkoklch(0.35 0 0)

–neutral-darkoklch(0.25 0 0)

–neutral-ultra-darkoklch(0.1 0 0)

–white#fff

–black#000

Assignment tokens — these flip between light and dark.

–body-bg-color#FAF8F5 → dark

–text-dark#2C2723 → dark

–sg-surface#fff → dark

–heading-colorvar(–text-dark)

–link-colorvar(–accent) · sage #5E7A45

–border-color-dark#ECE7DF → dark

–white#fff

–focus-ringvar(–accent)

Type

Typography

Headings are Newsreader (self-hosted): H1 500, H2–H4 600, H5–H6 500 — no 700 anywhere. Body is Source Sans 3 (self-hosted) 400. Every size is a fluid clamp(min, fluid, max).

The hidden cause

h1 · –h1 · clamp(1.944rem, …, 2.961rem) · Newsreader 500

The hidden cause

h2 · –h2 · clamp(1.62rem, …, 2.221rem) · Newsreader 600

The hidden cause

h3 · –h3 · clamp(1.35rem, …, 1.666rem) · Newsreader 600

The hidden cause

h4 · –h4 · clamp(1.125rem, …, 1.25rem) · Newsreader 600

The hidden cause

h5 · –h5 · clamp(0.875rem, …, 0.9375rem) · Newsreader 500

The hidden cause

h6 · –h6 · clamp(0.8125rem, …, 0.875rem) · Newsreader 500

The cause you couldn't see has been working the whole time.

–text-xxl · .text–xxl · clamp(1.728rem, …, 2.665rem) · Source Sans 3 400

The cause you couldn't see has been working the whole time.

–text-xl · .text–xl · clamp(1.44rem, …, 1.999rem) · Source Sans 3 400

The cause you couldn't see has been working the whole time.

–text-l · .text–l · clamp(1.2rem, …, 1.500rem) · Source Sans 3 400

The cause you couldn't see has been working the whole time.

–text-m · .text–m · clamp(1rem, …, 1.125rem) · body · Source Sans 3 400

The cause you couldn't see has been working the whole time.

–text-s · .text–s · clamp(0.875rem, …, 0.9375rem) · Source Sans 3 400

The cause you couldn't see has been working the whole time.

–text-xs · .text–xs · clamp(0.8125rem, …, 0.875rem) · Source Sans 3 400

Body copy with an inline link showing –link-color and its hover.

–link-color: var(–primary) · dark: #D9695C

The hidden cause is not against you — it is how you are able to have an experience at all.

blockquote · –blockquote-border-color: var(–primary)

Space

Spacing & sizing

Spacing is a fluid t-shirt scale. Space between elements comes from gap on flex/grid parents — never margins.

Spacing scale — –space-xs → –space-xxl (bar width = the token).

–space-xs

–space-s

–space-m

–space-l

–space-xl

–space-xxl

Section spacing — –section-space-xs → –section-space-xxl.

–section-space-xs

–section-space-s

–section-space-m

–section-space-l

–section-space-xl

–section-space-xxl

Contextual gaps: –content-gap = –space-m · –container-gap = –space-xl · –grid-gap = –space-m · –gutter clamp(1rem → 5rem).

Border radius scale.

–radius-none · 0

–radius · 5px

–radius-50 · 50%

–radius-circle · pill

Layout — content width 85.375rem (1366px); grids .grid–2 … .grid–12; widths .width–10 … .width–90.

1

2

3

Components

Components

Real ACSS component classes — what you'll actually place on the page.

Buttons — role variants (.btn–primary / –base / –neutral) and .btn–outline.

Primary Base Neutral Outline

Button sizes — .btn–xs → .btn–xl.

XS S Default L XL

Form fields — border, radius and focus ring from tokens.

Text input

Email

Select

Textarea

Cards.

Card title

A sample card. In dark it drops the shadow and leans on border + surface for elevation.

Another card

Cards are a pattern here, not a single ACSS class — built from shared tokens.

Badges.

NeutralPrimaryMuted

Shadows — –box-shadow-1 → 3 (fade on dark; elevation shifts to surface + border).

–box-shadow-1

–box-shadow-2

–box-shadow-3

Calm system

Semantic roles

The calm system — sage accent, ink buttons, terracotta alert. These flip between light and dark; red plays no role.

–accentsage #5E7A45 / #A6B47C

–accent-softsage tint

–accent-inkdeep sage

–btn-primary-bgink #2C2723 / #ECE3D6

–btn-primary-textlabel on ink

–btn-secondary-borderoutline

–alertterracotta #A85A3C

–alert-softalert tint

–badge-active-bgactive / verified

–markersage

–surface-sunkeninset surface

–border-strongemphasis line