themes.chaserich.com

Universal Accessibility Suite, Typography Engine, and Shared Theme Registry across the cr84 fleet.

Atkinson Hyperlegible Universal Default OpenDyslexic Accommodation Lexend Reading Fluency Colorblind Modes (Deuteranopia, Protanopia, Tritanopia) WCAG AAA High Contrast Sensory Accommodations 37 Shared Themes

Universal Typography Suite

Atkinson Hyperlegible is the fleet-wide default typeface, crafted by the Braille Institute to maximize character recognition and reduce reading fatigue. Seamless fallbacks and accommodation toggles ensure every reader has a comfortable viewing experience.

Sample Reading Passage

Clear letterforms distinguish easily confused characters: 0 (zero) vs O (capital o), 1 (one), l (lowercase L), and I (capital i), B (capital b) and 8 (eight), rn and m. Line height and spacing are calibrated for optimal legibility across desktop, tablet, and mobile displays.

Numbers and symbols: 0123456789 • Code: const ratio = contrastRatio('#ffffff', '#000000');

Colorblind Accommodations

Scientific color palettes ensure information is never communicated by hue alone. Toggles adjust status signals, line indicators, and accent highlights:

✓ Status OK (Success / Passing)

! Warning (Attention Required)

✗ Critical (Error / Offline)

☆ Accent Highlight

Sensory Accommodations

Sensory options provide gentle accommodations for motion-sensitive or light-sensitive viewers:

Integration & CDN Assets

Every fleet service can vendor or link the distribution files directly:

Asset	Path	Description
`fleet-theme.css`	`/fleet-theme.css`	CSS variables, typography stacks, accessibility accommodations
`fleet-theme.js`	`/fleet-theme.js`	Engine module, picker custom element, cookie/storage synchronizer
`fleet-theme-inline.min.js`	`/fleet-theme-inline.min.js`	Zero-dependency synchronous <head> pre-paint snippet
`themes.json`	`/themes.json`	Complete registry of 37 fleet themes and metadata

Quick Start HTML Template

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Service</title>
  <!-- Pre-paint snippet runs synchronously before stylesheet to prevent theme flash -->
  <script src="https://themes.chaserich.com/fleet-theme-inline.min.js"></script>
  <link rel="stylesheet" href="https://themes.chaserich.com/fleet-theme.css">
  <script src="https://themes.chaserich.com/fleet-theme.js" defer></script>
</head>
<body class="fleet-theme-base">
  <!-- Application UI here -->
  <fleet-theme-picker corner="bottom-right"></fleet-theme-picker>
</body>
</html>