Style Guide
Every color, shape, word, and movement allowed in BreakGlass lives on this page. Copy patterns from here; do not invent new ones.
Color tokens
Swatches respond to the theme toggle — flip the half-circle button in the header to compare light and dark. Printing swaps in an ink-safe palette automatically.
Typography
Heading 1 · --fs-3xl
Boil water before you drink it
Heading 2 · --fs-2xl
Finding water in the field
Heading 3 · --fs-lg
Reading a compass at dusk
Body · --fs-md
Clear water can still carry sickness. Boil every drop until you know better.
Small muted · --fs-sm + --text-muted
Last checked before winter. Verify doses against the medical pages.
Badges
Default .badge
Needs network modeWarning · .badge.badge-warn
Requires serverCallouts
Danger
Blood that soaks through the cloth means pressure now. Press hard, stack fresh cloth on top, and do not lift to peek.
Warning
Generators, camp stoves, and charcoal make carbon monoxide. Run them outside, away from windows and doors.
Caution
Treat any well, cistern, or tap that flooded as dirty until it is disinfected and tested.
Info
This kit grows in passes. Draft pages cover the safety basics first; polish arrives later.
Cards & tiles
Plain card
A card groups related content without asking for action. Tiles invite clicks; cards hold still. Reach for a card when the reader only needs to read.
Forms
Checklists
.checklist — printable tick-boxes
Boxes print as empty squares so a printed page works as a pen-and-paper checklist. Use for anything a reader ticks off under stress.
Article prose
Wrap long-form page content in .article — it restores vertical rhythm (the site reset zeroes all margins) using only spacing tokens. Headings, lists, tables, and paragraphs space themselves; no inline margins.
Long articles pair .article with four scanning aids, demonstrated below: .toc-chips (section jump-links), .keyfacts (at-a-glance essentials), .steps (numbered procedures), and <details class="fold"> (optional depth that stays printable).
.toc-chips — section jump links under the h1
.keyfacts — the numbers and rules a reader needs first
At a glance
- 1 gallon per person per day — half drinking, half hygiene
- Boil 1 minute below 6,500 ft; 3 minutes above
- Unopened fridge keeps food safe 4 hours
ol.steps — procedures get accent-numbered circles
- Press hard on the wound with clean cloth.
- Add layers — never remove soaked ones.
- Keep pressure for ten full minutes.
details.fold — optional depth, closed by default, prints open
Why this works (background)
Deeper explanation lives here, off the main scanning path but present for readers who want it — and it still appears when the page is printed.
Cool the burn first
Hold the burned skin under cool running water for ten to twenty minutes. This does more good than any cream.
- Remove jewelry near the burn now, before swelling starts.
- Cover loosely with clean, non-stick cloth.
| Degree | Skin looks like |
|---|---|
| First | Red, dry, painful |
| Second | Blisters, wet-looking |
Tables
Sample data — not medical advice
| Weight of person | Liquid (100 mg / 5 mL) | Tablets (200 mg) |
|---|---|---|
| 24–35 lb | 5 mL | — |
| 36–47 lb | 7.5 mL | — |
| 48–59 lb | 10 mL | — |
| 60–71 lb | 12.5 mL | half tablet |
| 72–95 lb | 15 mL | one tablet |
| 96 lb and up | 20 mL | one tablet |
Icon reference
Emergency components
Patterns for the Emergency Hub: tone-tinted glance-cards, form fields for the printable document vault, and the drill timer.
.glance-card + .tone-* — one action set per emergency
Severe bleeding
- Press hard with clean cloth
- Add layers, never remove
- Ten full minutes, no peeking
Gas smell
- Don't flip switches
- Leave immediately
- Call from outside
.form-label + .form-input (+ .form-row spacing)
.timer-display — drill clock (tabular numerals)
04:37School components
Reward and identity pieces for the Schoolhouse: tone-tinted avatars, pop-in reveals, earned-star rows, and a confetti burst for celebrations (all freeze under prefers-reduced-motion).
Hard rules
- Tokens only. Every color, space, radius, shadow, duration, easing, and type size comes from a theme.css custom property.
- Functional without JS. Reading, navigation, search fallback, and print all work with scripts off.
- Styleguide-first components. New UI pieces land on this page before any page uses them.
- No external requests, ever. Fonts, icons, code, and data ride inside the kit folder.
- Print styles required. Survival pages get printed and taped to walls; assume paper.
- Plain voice. Calm authority, short sentences, zero hype.
Motion
The whole motion budget is three durations (--dur-fast, --dur-base, --dur-slow) and two easings (--ease-out, --ease-spring). Nothing else moves. Under prefers-reduced-motion every animation freezes site-wide while the kit stays fully usable.
Reader shell & embedded theming
Full-viewport reading surfaces (the ZIM wiki reader at wiki/read.html) use an app-shell layout: standard topbar on top, a slim toolbar row, then a content stage that flexes to fill all remaining height. Status badges live in the footer line, never in the toolbar.
Sandboxed third-party articles (Wikipedia ZIMs) are themed by bridging tokens: assets/wiki-theme.js reads computed token values from this document, writes them as --bgw-* variables onto the iframe root, and applies a scoped override sheet (.bg-wiki). Theme toggles re-paint live via a data-theme observer. Web-capture archives get color-scheme basics only (.bg-wiki-zimit). List rows for pickable packs use .kit-entry; a requested pack highlights with .kit-requested.