Viewport: 0px (Mobile)

ScanCheck Atomic System

Interactive tokens, atomic components, and layout specs powering the ScanCheck public safety mobile app and web experience.

TOKENS

ATOMS

MOLECULES

ORGANISMS

JSON

1. Core Color Tokens (Palette)

Official brand lockup colors and semantic functional colors. Click any swatch to copy.

#12A150

BrandColors.green

Official Lockup Mark 07 Accent

#1DB954

BrandColors.vibrantGreen

Interactive UI CTA Accent

#141821

BrandColors.ink

Official Logo Dark & Primary Text

#64748B

BrandColors.slate

Secondary Metadata Text & Icons

#FFFFFF

BrandColors.surface

Primary Card & Column Surface

#F8FAFC

BrandColors.surfaceMuted

Subtle Background & Input Fill

#E2E8F0

BrandColors.border

Standard Hairline Border

#DC2626

BrandColors.danger

Critical Recall / Destructive Action

#D97706

BrandColors.warning

State Chemical / Advisory Warning

2. Typography Scale

Responsive scale with semantic weights. Edit the text below to preview all type styles live:

Display Headline (42px / 900)

42px • Heavy • -1.0 letter-spacing

Scan it. Check it. Protect what matters.

Title (32px / 800)

32px • Bold • -0.75 letter-spacing

Scan it. Check it. Protect what matters.

Subtitle (20px / 700)

20px • SemiBold • -0.3 letter-spacing

Scan it. Check it. Protect what matters.

Default Body (16px / 400)

16px • Regular • 24px line-height

Scan it. Check it. Protect what matters.

Default SemiBold (16px / 600)

16px • SemiBold

Scan it. Check it. Protect what matters.

Small / Caption (14px / 400)

14px • Regular • 20px line-height

Scan it. Check it. Protect what matters.

Small Bold (14px / 700)

14px • Bold

Scan it. Check it. Protect what matters.

Code / Monospace (13px / 600)

13px • ui-monospace / SFMono

Scan it. Check it. Protect what matters.

Harmonized Brand Display & Landing Typestack

Typestack: Spline Sans, Inter, system-ui, sans-serif (--font-display)

H1 Display Headline (Weight 900)

Spline Sans Display Black • #141821 • -1.5 tracking

Scan it. Check it.

Subhead under H1 (Weight 500)

Spline Sans Regular • #3B4250 • Italic on 'before' • clamp(0.95rem, 1.8vh, 1.15rem)

Point your camera at any barcode and know what you're buying before it goes in the cart.

Closing Copy over Button (Weight 500)

Spline Sans Regular • #3B4250 • Italic on 'informed' • Modeled identically to Subhead

And be informed when there's more to know.

3. Spacing, Insets & Breakpoints

8pt progressive spacing scale plus centralized layout constants:

Spacing.half

2px micro spacing

2px

Spacing.one

4px tight padding

4px

Spacing.two

8px base unit

8px

Spacing.three

16px standard gutter

16px

Spacing.four

24px card padding

24px

Spacing.five

32px section gap

32px

Spacing.six

64px container margin

64px

BottomSpacing (bottomSpacing)

140px baked-in mobile bottom clearance

140px

MobileBreakpoint

768px

Triggers 100% full-width mobile view & native format

MaxContentWidth

1024px

Locks centered desktop column with side shadows

Democratic, zero-friction product safety and recall screening for everyday shoppers and parents.

100% Zero Telemetry

Zero Trackers

No Account Needed

Navigation

Safety Data Sources

U.S. CPSC Recalls

openFDA Recalls

Trust & IP Center

Legal & Privacy

Download Android APK

Terms of Service

MIT License

Disclaimer: ScanCheck is an independent public safety utility not affiliated with or endorsed by CPSC, FDA, or any government agency. Recall data is aggregated from public government APIs. Always verify urgent recalls and remedies at CPSC.gov or with manufacturers.

© 2026 ScanCheck. Built as an open public safety initiative.

ScanCheck

Verification Pending

Newsletter Editor