v1.0 · 2026-06-10 · Dark / Premium

CodeDrop / Design System

Kiosk surface · 1280×800 landscape · Touch-only · Chromium 39 (Android 5.1)
Prototypes use Outfit via CDN. Implementation uses Roboto (system font).

Color Tokens

Backgrounds
bg_base
#0d0d1a
Page / screen root
bg_surface
rgba(255,255,255,0.03)
Cards, panels
bg_surface_hover
rgba(0,229,255,0.06)
Active / available tint
bg_header
rgba(0,229,255,0.04)
Top bar
bg_overlay
rgba(0,0,0,0.30)
Footer bar, overlays
Accent
accent
#00E5FF
Primary — available, logo, actions
accent_dim
rgba(0,229,255,0.30)
Borders on active elements
accent_glow
rgba(0,229,255,0.08)
box-shadow glow color
Text
text_primary
#ffffff
Active door ID, headings
text_secondary
#c0c8d8
Body, door IDs default
text_muted
#3a4060
Status labels, captions
text_accent
#00E5FF
Available status label, logo accent
Borders
border_default
rgba(255,255,255,0.08)
Default card / button border
border_accent
rgba(0,229,255,0.30)
Active / available border
border_header
rgba(0,229,255,0.12)
Header bottom rule
Door States
Door 01 Available
Door 02 Occupied
Door 03 Unavailable

Typography

CODEDROP
usage Logo
size 24px
weight 300
tracking 0.18em
color text_primary
Select Your Door
usage Heading
size 20px
weight 400
tracking 0em
color text_primary
Tap a door to open it
usage Body
size 16px
weight 400
tracking 0em
color text_secondary
AVAILABLE
usage Status Label
size 13px
weight 300
tracking 0.10em
color text_accent
Door 01
usage Caption / ID
size 11px
weight 300
tracking 0.14em
color text_secondary

Spacing & Touch Targets

Scale — 8px base grid
4px
8px
12px
16px
24px
32px
48px
64px
Minimum Touch Target
Min Touch Target · Door Button Height 80px
header_height
64px
footer_height
48px
padding_screen
24px
gap_doors
12px

Border Radius

sm 4px
md 8px
lg 16px
pill 999px

Door Button States

Door 01
Available state: available
Door 02
Occupied state: occupied · opacity 0.5
Door 03
Unavailable state: unavailable · opacity 0.25
Token Reference
available → bg: rgba(0,229,255,0.06) · border: rgba(0,229,255,0.30) · shadow: 0 0 12px rgba(0,229,255,0.08)
occupied → opacity: 0.5
unavailable → opacity: 0.25

Shadows & Glow

glow_sm
0 0 8px rgba(0,229,255,0.06)
glow_md
0 0 16px rgba(0,229,255,0.10)
Safe in Chromium 39 — box-shadow works natively. No prefix required.

Chromium 39 Constraints

Chromium 39 Android 5.1 · Real Cabinet · Implementation Target
  • var() CSS custom properties NOT supported — hardcode all token values in implementation. No CSS variables.
  • backdrop-filter NOT supported — do not use blur or glass effects in implementation.
  • aspect-ratio NOT supported — use padding-top percentage hack for fixed ratios.
  • Flexbox works but requires -webkit- prefix — use display:-webkit-flex; display:flex; and prefix all flex properties.
  • gap on flex containers NOT supported — use margin on children instead.
  • Google Fonts CDN — prototype only. Implementation uses Roboto (Android system font). Outfit 300 → Roboto Light. Outfit 400 → Roboto Regular.
  • box-shadow works natively — glow effects are safe in implementation without prefix.
  • rgba() works natively — all rgba color tokens are safe.