FitCheck is a wardrobe-cataloging + resale app (Wardrobe hub, Add/Edit Item, AI-assisted item review, List on Marketplace). The system is built for a calm, high-contrast, photo-first UI on iOS-style screens (390×844), with a strict separation between a translucent "control layer" (nav/actions) and crisp, opaque "content layer" (your actual stuff — clothes, cards, listings).
| Goal | Evidence in file |
|---|---|
| Accessibility-first color | Every swatch ships a WCAG contrast ratio next to the hex (e.g. Ink/Navy 18.3:1, Accent Blue 5.74:1, Destructive Red 4.83:1) |
| Rebrand-proof theming | Three-tier token architecture: Primitives → Semantics → Usage |
| Photo-forward layout | Dedicated "Canvas White" background specifically for photo-grid/hub surfaces |
| Consistent nav feel | One documented rule ("glass vs. crisp") governs every screen |
| Fast screen production | A "Starter Template" frame exists to duplicate for new screens, pre-wired with header + floating CTA |
| Component/Token | What it is | Why it's in the system |
|---|---|---|
| Color palette (7 core colors) | Ink/Navy, Accent Blue, Canvas White, Background/Light, Placeholder/Grey, Surface/White, Destructive/Red | Each maps to one job (text, brand action, hub bg, screen bg, image placeholder, card surface, delete/warning) — no ambiguity about which white or which grey to use |
| Color scales (100–900) | Tonal ramps for Navy, Accent Blue, Destructive Red | Needed for hover/disabled/border states without hand-picking one-off shades |
| Typography (Manrope, 6 sizes) | ExtraBold 20 → Medium 11 | Bound to Text Styles so nobody hand-sets font sizes; hierarchy from screen titles down to captions |
| Buttons ×3 variants ×3 states | Primary/Secondary/Outline, each with Default/Pressed/Disabled | Disabled state exists specifically to gate flows like Add Item / List on Marketplace until required fields are filled |
| Chips (Default/Selected/Dashed-Add) | Size, category, gender selectors | "Dashed-Add" variant gives a built-in "add new option" affordance instead of a separate button |
| Category Circle | Default/Selected | Wardrobe category selection |
| Toggle (On/Off) | Private/Public wardrobe visibility | One toggle per item, nothing more (see rejected section) |
| Badges (Private/Public) | Status labels | Visual echo of the toggle state on cards/lists |
| Card/Base | Crisp content surface | The "content layer" default — opaque, soft shadow, no blur |
| Header/With Back Button | Glass nav element | Part of the "control layer” |
| Floating Bar/CTA | Glass, fixed-position CTA | Also control layer; requires a specific 3-layer structure (static frame + scroll viewport + sibling bar) since Figma's native "fix on scroll" flag wasn't available in this tooling |
| Rule | Rationale |
|---|---|
| Glass vs. crisp | Glass (blur + translucent + inner highlight) is reserved for nav/control elements only — bottom nav, header, FAB, floating bars. Content (cards, lists, forms) stays crisp/opaque. Called out as "the fastest way to make a screen feel off-brand" if mixed up |
| Token tiers | Never bind fills to a Primitive or raw hex — always go through a Semantic token, so a rebrand is a one-place edit |
| Spacing/radius scale | Padding: 16/20/28. Radius: 12 (chips/rows), 14–18 (buttons/cards), 24–28 (sheets/bars), 999 (pills/circles/toggles) |
| Naming | Prefix by type (Screen/, Button/, Chip/, etc.) so the layers panel stays searchable |
Each part of the design system was chosen intentionally, from the colors to the typography.
The main colors are blue, white, as well as red for certain actions. We wanted to keep the app to a few key colors so that the clothing’s colors wouldn’t be overshadowed by a busy visual design.
<aside>
Blue was chosen due to how general it is within the realm of fashion. Everyone will probably own something in blue even if you keep to a very limited color scheme due to how neutral of a color it is. Ask pretty much anyone and they probably own a pair of blue jeans, a blue button up, or something else in blue, which makes blue as a main color fit into any fashion style, complementing any outfit a user is wearing or looking at
</aside>
<aside>
White was chosen as the main background color due to its neutrality, really allowing clothing to shine
</aside>
<aside>
Red is reserved for destructive actions like deleting something in order to stay consistent with other apps
</aside>
We chose a sans-serif because it reads as clean, modern, and functional, the right fit for a utility app rather than an editorial or luxury fashion brand. Manrope specifically brings a geometric, slightly rounded character that feels approachable rather than corporate, while still staying sharp enough for a product interface. Just as important, its wide weight range, from regular through bold, gives us a full type hierarchy from a single family, so we never have to mix fonts or introduce visual noise.
We used a liquid glass aesthetic as translucent, blurred surfaces let content show through instead of sitting on flat, opaque cards, giving the interface a lighter feel and clearer sense of depth, so navigation bars and floating buttons read as sitting above the content rather than as separate panels. It also mirrors iOS's current Liquid Glass direction, which means the app feels native to the platform instead of a foreign layer on top of it, and users already carry that mental model with them before they even open the app.