01 — Color Foundation
Primary palette
Background
#f7f6ef
Yellow
#fbf2a7
Yellow Hover
#f3e570
Secondary palette
Purple
#e1c3e5
Purple Hover
#c69ecb
Green / Toggle
#d2d27a
Neutral + semantic
Almost White
#fdfdfc
Black
#1f1f1f
Error
#ef3232
02 — Typography
Apfel Grotezk — System Type Scale
Large Title
Apfel Grotezk 34 / Regular
34px · Regular · 40px lh
Title
Apfel Grotezk 28 / Regular
28px · Regular · 32px lh
Headline
Apfel Grotezk 17 / Semibold
17px · Semibold · 24px lh
Body
Body text should remain highly readable across device sizes and support Dynamic Type scaling.
17px · Regular · 24px lh
Callout
Supporting information or UI labels
16px · Regular · 24px lh
Subhead
Subheading text or secondary descriptions
15px · Regular · 20px lh
Footnote
Footnotes or secondary metadata
13px · Regular · 18px lh
Caption
Caption or helper text
12px · Regular · 16px lh
Link
Interactive text link
17px · Medium · 24px lh
Input
Input placeholder text
17px · Regular · 24px lh
03 — Buttons
Primary CTA — Yellow
Default
Hover
Pressed
Disabled
Secondary CTA — Purple
Default
Hover
Pressed
Disabled
Dark + Outline
Dark Default
Dark Hover
Outline Default
Outline Disabled
Icon buttons — 38px diameter
add
Add
close
Exit
remove
Remove
shuffle
Shuffle
arrow_back_ios
Back
arrow_back_ios
Disabled
add
Large Add
04 — Input Fields
Text input — states
Inactive
Selected / Active
Error
Disabled
Password + Email fields
Password — Inactive
Password — Active
Email — Inactive
Email — Entered
Search Bar component
05 — Category Chips
Filter chips — Default + Hover states
Accessories
Tops
Dresses
Bottoms
Handbags
Shoes
06 — Navigation Footer
Home active
Closet active
07 — Toggles
Toggle switch — On / Off
On
Off
08 — Icon Library
All Icons
Navigation
Home
Closet
Shop
Calendar
Mirror / Try On
Actions
Add
Close
Remove
Delete
Check
Warning
Error
Info
Fullscreen
Camera & Upload
Camera
Upload
Download
Image
Add Photo
Link / URL
UI Controls
Back
Forward
Caret Down
Search
Shuffle
More
Filter
Flag / Tag
Profile & Account
Profile
Manage Account
Login
Logout
Settings
Connect
Wardrobe & Styling
Clothing
Hanger
Favourite
Palette
Sort
Style Swap
09 — Design Tokens
| Token | Value | Usage |
|---|---|---|
| --yellow | #fbf2a7 | Primary CTA, icon buttons, Add to Bag |
| --yellow-hover | #f3e570 | Hover state for yellow buttons |
| --purple | #e1c3e5 | Secondary CTA (Login, Sign Up), Shuffle button |
| --purple-hover | #c69ecb | Hover state for purple buttons |
| --background | #f7f6ef | App background, nav footer fill |
| --almost-white | #fdfdfc | Input field background |
| --black | #1f1f1f | Text, borders, dark button fill |
| --error | #ef3232 | Error state inputs, error messages |
| --green | #d2d27a | Toggle "on" track fill |
| --radius-pill | 37px | All full-width buttons |
| --radius-input | 30px → 24px active | Input fields (radius reduces on focus) |