Design system
A living style guide for Plain Policies: the color palette, typography, reusable components, and accessibility commitments that every page on this site is built from. Everything shown below is rendered using the site's actual stylesheet — not a mockup.
1. Logo & brand
The Plain Policies mark, wordmark, and tagline, plus the rules for using them consistently across the site.
Plain Policies
Insurance, explained plainly.
Usage notes
The mark uses the primary blue (#0A4D8C) for the document outline and the teal accent (#0F766E) for the checkmark, matching the site's color tokens. Keep clear space around the mark roughly equal to the height of the checkmark stroke. Don't recolor the mark, stretch it, or place it on a background that drops its contrast below WCAG AA.
2. Color palette
Trustworthy blue as the primary color, a soft teal accent, and neutral cool grays for text and structure. Every text/background pairing listed here meets WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text and UI components).
3. Typography
Body font is Inter (loaded from Google Fonts, weights 400–800), falling back to the system UI font stack if unavailable. Base body size is 1.0625rem (~17px) for comfortable reading at an 8th-grade level.
Heading 1 — page titles
Heading 2 — section titles
Heading 3 — component & card titles
Body text — used for all paragraph copy across the site, written at an 8th-grade reading level.
Muted / secondary text — captions, table notes, disclaimers.
Heading hierarchy rule
Section titles are always H2. The first sub-heading inside any component (a card, step, or stepper item) is H3 — never H4 — so heading levels never skip for screen reader navigation. Footer navigation headings (H4) are scoped inside the page's <footer> landmark and are treated as their own sectioning context.
4. Components
Buttons
Expandable accordion / FAQ
What is this component for? ▼
Used for coverage explanations, rate factors, and myths vs. facts throughout the site. Built on native HTML so it works even if JavaScript fails to load.
Is it keyboard accessible? ▼
Yes — Tab to focus, Enter or Space to expand/collapse, no custom ARIA required since <details> handles this natively.
Data table
| Plan | Typical cost |
|---|---|
| Option A | $120/yr |
| Option B | $240/yr |
Definition card (glossary)
- Example Term
- A short, plain-English definition goes here, matching the tone used across the glossary.
Progress-style claim stepper
Notify
Report the loss to your insurer.
- Date and description of what happened
Resolution
The claim is reviewed and settled.
- Any documents your insurer requests
Sticky disclaimer
The real, functioning sticky disclaimer bar is currently visible at the bottom of your screen. It uses position: sticky, includes a dismiss button with an aria-label, and reappears on every new page since dismissal is scoped to sessionStorage, not permanent.
Mobile navigation
The hamburger toggle button includes aria-expanded and aria-controls, and the nav list becomes a full-width vertical menu. Try resizing your browser or viewing this page on a phone to see it in action.
Chips & tags
Raise / lower rate list
Tends to raise rates
- Example factor
Tends to lower rates
- Example factor
Callouts
Default callout
Used for tips, definitions, and supporting context.
Info callout
Used for neutral, important framing notes.
5. Accessibility commitments
Target: WCAG 2.1 Level AA across every page.
Keyboard navigation ▼
Every interactive element — nav links, the mobile menu toggle, accordions, the glossary search and A–Z filter, and the disclaimer dismiss button — is reachable and operable with Tab, Shift+Tab, Enter, and Space alone. Accordions use native <details> rather than custom JavaScript widgets specifically so keyboard and screen-reader support comes for free.
ARIA labels & roles ▼
The mobile nav toggle uses aria-expanded and aria-controls. The disclaimer dismiss button has an explicit aria-label. Search inputs have associated <label> elements (visually hidden where a visible label would be redundant). The glossary's letter filters use aria-pressed to reflect selection state.
Icons & “alt text” ▼
All icons are inline SVG, not <img> tags, so there's no literal alt attribute — the equivalent treatment applies instead: every icon sits next to a visible text label and is marked aria-hidden="true" so assistive tech doesn't announce it redundantly. No icon is ever used alone as the only label for a control.
Color contrast ▼
Every text/background color pairing in the palette above meets or exceeds 4.5:1 for normal text and 3:1 for large text and functional UI boundaries (see Section 1 for exact ratios).
Focus visibility ▼
A high-contrast focus ring (5.0:1 against white) appears on every link, button, and form control when navigating by keyboard, using :focus-visible so it doesn't appear on mouse clicks.
Heading structure ▼
Headings follow a strict, non-skipping order within the main content of every page (see Section 2), so screen reader users can navigate by heading level reliably.
6. Tech stack
Current implementation: static HTML, hand-written CSS (this stylesheet), and a small vanilla JavaScript file for the mobile menu, glossary search/filter, and disclaimer dismissal. No build step, no client-side framework, no analytics or tracking scripts, and no lead-generation forms anywhere on the site.
Why not a framework, by default
For a mostly-static, content-first educational site like this one, plain HTML/CSS loads faster than any JavaScript framework: there's no runtime to download, parse, or hydrate, and accordions work via native <details> with zero JavaScript required. A framework's benefits — easier large-scale maintenance, component reuse, routing — matter more as a site grows past a handful of pages or needs dynamic data.
If this site is later rebuilt on Next.js + Tailwind + shadcn/ui
The component set above maps cleanly onto shadcn/ui primitives, so a future migration wouldn't require redesigning anything — just re-implementing these same components:
| Current component | shadcn/ui / Radix equivalent |
|---|---|
Accordion (native <details>) | Accordion |
| Data tables | Table |
| Definition / glossary cards | Card |
| Claim stepper / mini-stepper | Custom component on Progress + Card primitives |
| Sticky disclaimer bar | Custom component (Radix has no direct equivalent; similar pattern to a persistent Toast) |
| Mobile navigation | Sheet or NavigationMenu |
| Chips / tags | Badge |