Devices · second draft.
A second cut of the component library, rebuilt against the impeccable design language: OKLCH tinted neutrals, sixty-five character measure, exponential easing, native dialog, tabular numbers, and a sixteen-pixel floor on body text.
01
Countdown timer
Live tabular digits, no flip-card animation, no bounce. The numbers update in place and never push surrounding layout.
live
00 days
·
00 hrs
·
00 min
·
00 sec
02
Modal overlay
Native <dialog> element. Top-layer rendering, ESC closes, focus trap built in, body content goes inert, backdrop blur. No z-index wars.
click to open
03 · 04
Sticky dock + CTA bar
Two persistent-call patterns. The dock floats over content as a soft pill with a calm pulse. The CTA bar is a top strip that tints with the brand without shouting.
03 · dock
183 kits tested today
See results →
04 · cta bar
05
Price strike
Old price gets a strike, new price gets weight, savings live in a soft pill in the brand rust. No red, no urgency theater.
$199 → $149
$199
$149
save $50
06
Email capture
Visible label (not placeholder-as-label), 44px touch target, on-blur validation, error/success states named. Wires to Klaviyo list X5FcVw in the live build.
07
Spinner
Single arc on a tinted track. Slow under prefers-reduced-motion. No emoji, no animated dots, no skeleton-blink.
08
Reveal / disclose
Accordion via grid-template-rows transition, not animated height. Smooth open, no layout thrash, keeps text-selection alive while opening.
X-ray fluorescence reads the actual lead content of a painted layer in seconds. It is the same instrument the CPSC and ASTM testing labs use for consumer-product compliance work, just smaller.
The reagent only fluoresces when it meets lead. Plain ceramic has no lead pigment, so it stays dark. The glow locks to the painted decoration the way a stamp locks to ink.
No. The carrier is isopropanol. It dries off in under a minute, leaving the dish exactly the way you found it.
09
Journey breadcrumb
Numbered steps with state (done · current · upcoming). Wraps cleanly on narrow widths. Numeric chips use tabular-nums so the row stays still while values change.
10
Inline quiz · auto-advancing
One question per screen, pick advances, progress bar fills with exponential easing. Score rolls up to a daily exposure number that lands inside the FDA IRL band.
11
Risk meter · 3-band µg/day
FDA Interim Reference Level for adults is 12.5 µg/day. Children: 2.2 µg/day. The needle slides smoothly with exponential easing and the verdict color flips on band cross.
3.1 µg/day
Under IRL
02.2 (child IRL)12.5 (adult IRL)25
12
FDA IRL card pair
The exposure on the left, the official daily limit on the right. Tabular numerals, dark/light inversion for contrast, no fake urgency.
FDA Interim Reference Level · child
2.2 µg/day
Daily lead ceiling for children before measurable IQ effects begin to accumulate.
In real life · 1 cup of contaminated rice
5.4 µg/day
2.5x the child IRL from a single normal portion. The math is unforgiving.
13
Stat strip
Three to four pull-numbers, tabular-nums so the row stays still while values change. Rule under each number for visual rhythm.
stats
47,802
baby food results
5,818
ceramic dishes
187
documented cases
30s
to a result at home
14
Value card · 3-column
Glyph + heading + 1-2 sentences. Auto-fit columns at 220px minimum.
vcards
P
Paint
Pre-1978 layered paint. The drip bottle finds it on chips, chalking, and exposed wood.
D
Dust
Wipe-and-spray method for sills, floor edges, and anywhere a toddler crawls.
C
Ceramic
Painted decoration glows under UV. The white ceramic stays dark because there is nothing for the reagent to react with.
15
Comparison row · us vs. them
Three-column grid, criterion label centered. Their cells are ash instead of ink to read as the lesser side without being aggressive.
compare
FluoroSpec FS1D
vs
Lumetallix
Drip and spray bottles, 30s reads.
format
Single spray bottle, 2-3 min.
UV-locked perovskite glow.
chemistry
Same perovskite chemistry.
$149 full kit, lifetime UV.
price
$199 single bottle, refill needed.
16
Pull quote
Left rust hairline, paper background, sentence-case body, attribution as monospaced caption.
quote
Most of the people buying my lead tests already had a lead-poisoning diagnosis. The point is to test before, not after.
Eric Ritter, DetectLead
17
Notice callout
Three tones, all OKLCH. Use sparingly. Not for legal copy.
callouts
How to read the glow.
Bright green on the decoration means lead-bearing pigment. White ceramic stays dark because there is nothing for the reagent to react with.
Hot or acidic food on painted china.
Citrus, tomato, coffee, hot dishes. They leach more lead than cold food. If the dish glows, do not serve hot or acidic food on it.
Cleared.
No glow on the painted decoration after 60 seconds under UV. Re-test once a year.
18
Step-by-step
Numbered process. Large rust numerals, short body, divider rules between steps.
steps
1
Spray or drip onto the surface.
Drip for dishes. Spray for walls, dust, soil samples.
2
Wait 30 seconds.
The carrier evaporates. The reagent stays.
3
Shine the UV light. Read the glow.
Green means lead. No glow means below the detection floor.
19
Ribbon
Lime accent, used sparingly to flag offers or downloads. No clip-path arrowheads. Just a small pill.
ribbon
$200+ value · free for life
20
Anchor TOC
Sticky strip for long pages. Current section gets ink + bold, others stay in ash.
toc
Long page content scrolls under the sticky strip.
21
Photo + caption
Rounded card with 16:9 image and a real-sentences caption. Caption strong tag for the lede phrase.
photo
photo
The grandmother's plate, 60 seconds after one drop. The painted band glows green at the exact shape of the decoration. The white ceramic underneath does not react.
22
Tags + sources
Categorical chips and a source citation block. Chips are pill-shaped, on-state is ink. Sources sit under a thin rule.
tags + cite
Sources.
- FDA Interim Reference Level for lead in food. fda.gov
- California AB 899 (2024). Baby food heavy-metal disclosure. leginfo.legislature.ca.gov
- Healthy Babies Bright Futures (2025). Rice report. hbbf.org