§ 01 · Principles
Six non-negotiables.
Dark-first live. Light-first read.
Scanner, kiosk, overlay = dark. Admin, tables, forms = light.
One signal per surface.
Signal green carries state changed. Never two chromatic signals on one surface.
Content-first chrome.
The UI recedes so the count, the name, the next action can breathe.
Precision beats polish.
Tabular numerics, 4 px grid, hairline borders, consistent duration formats.
Restraint over reach.
Two font weights per surface. No emoji. No hype. No exclamation marks.
Token layer is sovereign.
A hex literal in a component is a bug. Every decision flows from main.css.
§ 02 · Palette
Signal green · sage neutrals.
Signal 500 is the electric pulse. Accent 700 is the workhorse button fill. Sage 50–200 is the paper.
chk-green
chk-sage · light-mode neutrals
Success · Checked-in
#047857 · #ECFDF5
Warning
#B4620A · #FCF1DC
Danger
#BE2F2A · #FBE9E7
Info · Expected
#0B6BD8 · #E4EFFD
§ 03 · Forest darks
The cockpit scale.
Kiosk, scanner, marketing hero. Not pure black — a forest-teal with a faint green undertone.
Kiosk surface · forest-900
3 / 10
§ 04 · Typography
Inter, two weights per surface.
Ultra-light (300) display, medium (500) headings, regular (400) body. JetBrains Mono for technical labels.
Priya Shah
142 / 10
Tech conference 2026
Attendees
Live check-in
Equipment loans
Doors open 30 minutes before start.
Hold still — the scanner will handle it automatically.
142 attendees · 10 expected this hour
Expected arrival
Section · live
A3F-22-01
§ 05 · Signatures
The brand's fingerprint moves.
Signal underline
Event starts at 14:00
2 px solid signal under the single most important heading per section.
Mono eyebrow
Section · Live ops
Attendees checked in today
Wide-tracked mono above headings · 0.14em tracking, weight 600.
Atmospheric halo
Radial · once per page
Signal flash
120 ms tint-in, 280 ms fade. State changed, nothing else.
§ 06 · Spacing · radii · shadows
4 px grid, pill CTA, teal shadows.
Spacing · 4 px base
space-1
space-2
space-3
space-4
space-5
space-6
space-8
space-10
space-12
space-16
space-20
Corner radii
sm
md
lg
xl
2xl
3xl
pill
Shadows · teal-tinted
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl
§ 07 · Motion
120 · 180 · 280 ms.
Fade-and-slide only. Turnstile goes green, it doesn't bounce.
dur-fast
Hover, press, tooltip, scan flash
dur-base
Tab change, row reveal, state change
dur-slow
Modal open, drawer slide, route
§ 08 · Attendee state triad
Four states, one visual language.
James Whitmore
Emma Beckett
Oliver Grant
Charlotte Hayes
Henry Ashford
§ 09 · Marketing hero (dark)
One ethereal display, one CTA, one halo.
CheckInHub
Count everyone.
Live.
QR check-in, barcode lookups, and equipment loans in one calm ops console. Built for venues that run the door themselves.
§ 10 · Admin dashboard (light)
Sidebar, fluid main, right rail.
Events · live
Today
Expected
142
Checked in
89
Walk-ins
12
No-shows
3
§ 11 · Scanner · kiosk
Dark-first where the screen is live.
Full-bleed camera capture frame · kiosk portrait card — both on forest darks.
Kiosk · portrait
Emma Beckett
Expected today · 14:00
§ 12 · Empty · loading · error
Three states, one voice.
No spinners in content areas. No sorry-opening errors. Retry always available.
No events yet
Add your first event to start importing attendees and generating QR codes.
Loading · table
Couldn't reach the scanner
Camera permission denied. Allow in system settings and retry.
§ 13 · Logo system
Mark, wordmark, lockup.
The signal dot is the only coloured element. Clear space equals the wordmark height.
Mark · light
Mark · dark
CheckInHub
Wordmark
CheckInHub
Lockup
§ 14 · Voice
Plainspoken, brief, factual.
A good venue ops lead who respects your time. No hype, no emoji, no exclamation marks.
Primary action
Empty state
Error
Success message
Field label
Destructive
Kiosk prompt
§ 15 · Do's & don'ts
The short table.
Topic
Do
Don't
Signal green
Small, deliberate, electric — underlines, focus rings, active dots.
Fill a whole button or card with signal green.
Accent green
Button fills, link text, pressed states.
Confuse with signal — it is the workhorse, not the pulse.
Dark surfaces
Forest-teal (#0A1612), warm green undertone.
Pure black. Warm-toned darks.
Display type
Ultra-light (weight 300) at big sizes — ethereal authority.
Heavy display type. It reads the opposite of the voice.
Status
Carry state only, paired with an icon.
Colour a whole card with status.
Shadows
Teal-tinted rgba(10, 22, 18, …).
Generic neutral-black or coloured shadows.
Motion
120 / 180 / 280 ms, ease-out, fade-and-slide.
Bounce, elastic, scale-from-zero, spring.
Pill buttons
Primary CTA pill, always 100 px radius.
Pill on secondary / utility buttons.
Tokens
Hex at the token layer; components read var(--chk-*).
Hex literal in a component <style> block.