Default styles

Every design decision on this site was made for a reason tied to accessibility. This page documents those decisions — which components are used, which fonts and colors, and why each one helps specific neurodivergent and disability groups.

Fonts

Three fonts are available. All are self-hosted (no CDN). Switch between them in the footer.

LexendThe quick brown fox jumps over the lazy dog. 1l|I0ODefault · ADHD · Dyspraxia · DID · OCD
OpenDyslexicThe quick brown fox jumps over the lazy dog. bdpqDyslexia · Dyspraxia
Atkinson HyperlegibleThe quick brown fox jumps over the lazy dog. 1l|I0OASD · Tourette · Interface labels

See Default fonts for full spacing guidance and links to each font project.

Color palette

All colors use the OKLCH color space for perceptually uniform contrast. Every text-on-background pairing meets WCAG 2.2 AAA (7:1) for normal text and 4.5:1 for large text.

Background and surface

bgoklch(99.0% 0.005 251)
surfaceoklch(100% 0 0)
ruleoklch(86.0% 0.010 251)
mutedoklch(36.0% 0.020 251)

Calming accent palette

blue-mist
blue-sky
green-pale
green-mint
purple-lavender
purple-mist

Calming blues, greens, and purples are chosen for low sensory stimulation. Saturated reds, oranges, and high-chroma yellows are avoided — they increase anxiety and sensory overload for ASD and OCD users.

Accent design tokens (AAA-safe text variants)

Two-tier accent system. --*-mid tokens (oklch L=55% light / L=72% dark) are for decoration only — borders, gradient strips, large icons, tinted backgrounds. --*-texttokens (oklch L=32% light / L=88% dark) are darker/lighter so text rendered with them clears AAA 7:1 contrast on both light and dark surfaces.

purple-mid
blue-mid
green-mid
purple-text
blue-text
green-text

Status accents extend the system for state communication. Red and amber follow the same mid/text split.

red-mid
red-text
amber-mid
amber-text

Alert cards (5 accent variants)

Reusable .alert-card class with five accent variants. Text stays in --color-ink-900; the alert title uses--accent-text for AAA contrast on the tinted background. Drop into any page with role=“status” orrole=“note” as appropriate.

Info — alert-card--blueNeutral information or process explanations.
Success — alert-card--greenConfirmations, “all checks pass”, audit-clean states.
Pending — alert-card--amberWarnings, “not yet performed”, incomplete states.
Error — alert-card--redFailures, audit violations, blocked deploys.
Accent — alert-card--purpleBrand-aligned highlights and feature announcements.

Status pills

Compact 3-state indicator used in tables and summary cards. Pass = green, fail = red, pending = amber. AAA text contrast via accent-text on tinted pill background.

PassFailPending

Ink (text)

ink-900
ink-800
ink-700
link
focus (ring)

Components

Skip link

A visually hidden link appears on Tab press that jumps to the main content. Required for keyboard users and screen readers. Tab to this page now to see it.

  • Why: SC 2.4.1 Bypass Blocks (A) + SC 2.4.3 Focus Order (A)
  • Helps: All keyboard users, motor disabilities, screen reader users

Navigation

Hamburger menu on mobile, inline on desktop (≥1024px). Uses aria-expanded, aria-controls, and aria-current="page". Escape key closes the menu and returns focus to the trigger.

  • Why: SC 1.3.1 Info and Relationships (A) + SC 2.1.1 Keyboard (A)
  • Helps: Screen reader users, keyboard-only users, motor disabilities

Hero

Hero component — calm gradient background

Blue → purple → green. Low chroma, OKLCH-uniform.

  • Why: Calm gradients reduce sensory overload (ASD, OCD, anxiety)
  • WCAG: SC 1.4.1 Use of Color (A) — no information conveyed by color alone

Card

Card component

Surface background, 1px rule border, 14px radius, light shadow.

  • Why: Distinct containers help DID and ADHD users group related content
  • WCAG: SC 1.3.1 Info and Relationships

Focus ring

Every interactive element uses a 3px solid focus outline in var(--color-focus) (an amber-gold OKLCH color), with 2px offset and 4px border radius.

  • Why: SC 2.4.13 Focus Appearance (AAA) — must be 3:1 contrast with adjacent color
  • Helps: Tourette, motor disabilities, ADHD (easily lose cursor position)

Font switcher

Pill buttons in the footer. Each button renders in its own font so users can preview before selecting. Preference saved to localStorage and restored before first paint (no FOUC). Uses aria-pressed.

  • Why: SC 1.4.12 Text Spacing (AA) + WCAG 2.2 AAA user customization principle
  • Helps: Dyslexia, ADHD, ASD — font affects readability for different cognitive patterns

Theme switcher

System / Light / Dark. Respects prefers-color-scheme by default. Explicit override saved to localStorage. Uses aria-pressed.

  • Why: SC 1.4.3 Contrast Minimum (AA) + SC 1.4.6 Contrast Enhanced (AAA)
  • Helps: Low vision (dark mode removes glare), migraines, photosensitivity, ADHD (dark mode reduces visual noise)

Reduced motion

All transitions and animations are disabled when the user has set prefers-reduced-motion: reduce. Durations collapse to 0.001ms to prevent the motion without breaking JS behavior.

  • Why: SC 2.3.3 Animation from Interactions (AAA)
  • Helps: Vestibular disorders, epilepsy, motion sickness, ASD sensory sensitivity

Prose styles

All long-form pages use the .prose class. Key values:

  • Body text: var(--color-ink-800) — slightly lighter than pure ink to reduce fatigue on long reads
  • Headings: var(--color-ink-900)
  • Links: underlined, text-underline-offset: 2px, color-coded
  • Code blocks: dark background with light text, monospace, horizontal scroll on overflow
  • Blockquotes: left border in var(--color-purple-deep), purple-mist background
  • Tables: row headers in blue-mist, column headers in purple-mist