MixShift · design system
Every surface, drawn from the tokens
The design record as exported: 30 cards across brand, colour, type, spacing and the component set, each rendered at the width it declares, plus the six-page marketing kit running live at the end. One green on a near-black canvas, teal only as the second node in a gradient, and elevation that comes from a tinted surface rather than a border.
Brand
Iconography lucide-react · 22px · stroke 2 900x240
Logo Horizontal & mark, on dark / light / brand 900x200
Brand · Textures Dot grid · ambient grid · hero glow · soft tint 900x320
Colors
Color · Brand Green primary, teal accent, amber warning 900x280
Color · Gradients Brand · emerald · hero glow · soft tint 900x280
Color · Semantic Success / warning / error / info 900x180
Color · Surfaces Dark canonical · light inverse 900x320
Color · Text & Borders Three text levels · two-tier borders 900x260
Type
Type · Body Inter body + UI sizes — local fonts 720x360
Type · Display Poppins display sizes — local fonts 720x360
Type · Stack Poppins + Inter w/ 3 optical sizes 720x480
Spacing
Spacing · Radius & Shadow Radii 8 → pill · shadows sm/md/lg/glow 900x260
Spacing · Scale 8pt grid · 4 → 88px 700x360
Components
Component · Badges & Pills Eyebrow, status, category 900x180
Breadcrumb Mono nav · 2 and 3 levels 800x320
Component · Buttons Primary, magic (outline), secondary, ghost 900x220
Component · Cards Surface card with gradient & flat icon tiles 900x240
Email capture & coming soon Lead-gen card + coming-soon placeholder 800x600
FAQ accordion Single-open · chevron rotates on expand 800x400
Footer 5-col grid · brand col + 4 link cols + meta bar 1200x360
Founder card Photo + role + bio + pull-quote · alternating 1100x720
Component · Inputs Text · focused · search w/ icon 900x240
Component · Nav Bar Marketing nav with active link 1200x80
Newsletter signup Inline email + button · default and success states 600x360
Page hero Sub-page hero with green radial glow 1200x480
Pricing tier card 3-up tiers + monthly/annual toggle · highlighted variant 1100x600
Product preview block Window-chrome frame · forecast variant 1000x480
Section header Eyebrow + headline + subhead · center & left 900x720
Shift card Status pill · builder · problem/what-it-does 1100x380
UI Kit — Marketing
Marketing UI Kit 6 pages: Home, About, Shifts, Shift detail, Pricing, Pricing detail 1280x900 Open full screen →