how we designed omegcol's onboarding system
> Inter Tight runs the UI, Lora serif carries headline copy. greeting and value slides sit at 26-29px, card titles 15px, button labels 15.5px, section labels 12-13px
> headline tracking sits at -0.3px so big serif type stays tight against the photo. section labels flip to +0.4px because uppercase micro labels read better opened up, not tightened
> no shared light/dark token set here, one dark photo backdrop drives every surface. white glass panels promote to a cream fill on selection, ink text stays constant throughout
> cards carry zero border color, a 1.5px ink ring marks the selected state instead, plus two shadow presets total, raised and raisedSoft, nothing tuned per component
> radius follows a hierarchy: 27-28px for the button pill, 20-26px for cards, 16px for chips and input rows, 12px for icon slots, 10px for the checkbox
> spacing stays dense, 20px page margins, 12px gaps between rows, 22-32px between step sections
once these tokens were locked the same button, same card, same type scale carried the whole onboarding flow, seven steps deep, nothing rebuilt per screen
steal this dark UI system we built for omegcol's onboarding
- headlines: Lora serif bold, 26px, -0.3px tracking, pure white over the photo
- intro slides go bigger, 29/37px, same -0.3 tracking, so the value props read like a magazine not an app
- card titles: Inter Tight semibold 15px, description 12.5/17
- buttons: 54px pill, radius 27, cream fill over ink text, never a flat dark button
- selected state is a border ring not a shadow, because white vs cream alone doesn't read as "selected" on a busy photo
- cards radius 20, chips radius 16, icon slots 36x36 at radius 12, nothing's a true circle except the checkbox
- progress track sits straight on the art at 4px tall, radius 2, a white card there would've killed the photo
- two shadow presets total, raised and raisedSoft, that's it, no per-component tuning
one photo backdrop, one type system doing two jobs, serif for voice and Inter Tight for UI !