Refined fashion editorial
A wardrobe,
well considered.
Cloud Dancer, Obsidian, and Quiet Violet. A refined fashion direction with more space for the clothes and a calmer, clearer interface.
A visual proposal for discussion. The app and its current design system are unchanged.
Read the full redesign plan →Review every current app screen →
Cloud Dancer. Quiet Violet.
Your chosen direction, with alternatives to compare.
Preview the same system
in light and dark.
Quiet Violet gives the chosen palette a soft fashion character. Cloud Dancer warms the canvas; Obsidian provides structure. Use the soft violet as a brand accent and its deeper functional tone for readable labels, selection, and controls.
6.10:1 on the light canvasFunctional accent #66516F on #F0EEE9. Passes WCAG AA for normal text.
Palette names and IDs: Pantone Color of the Year 2026. Cloud Dancer is PANTONE 11-4201. All RGB values here are provisional screen interpretations, not verified Pantone conversions. Canvas #F0EEE9; Obsidian #2A2A2A. Functional tones are LAYR accessibility adaptations.
The same system, in context.
Web concepts · 390 × 844 layout units
Good morning.
27°Let’s make getting dressed easier.
LOOK 01Easy, but considered.
An outfit built around pieces you own.
One look, one main action. A quiet clothing stage and a focused hierarchy give the outfit room to lead.
Your closet.
48 pieces
Ribbed crewneck
Knitwear · Olive
Pleated trousers
Bottoms · Ivory
Leather loafers
Shoes · Black
Round sunglasses
Accessories · Black
20 pt margins. 12 pt between pieces. Persistent search, restrained filters, and neutral image wells make browsing feel orderly.
MAKE IT PERSONAL
What would you
like help with?
Choose what matters most.
We’ll shape LAYR around you.
You can update your preferences later.
Readable choices, gentle emphasis. Selection uses a tint, outline, and check. The main action maintains clear contrast in both appearances.
Illustrative wardrobe, weather, dates, and onboarding steps. These are web concepts, not native iOS renders. Existing clothing pixels are unchanged. Only palette and appearance selectors are interactive. Home / Closet / You are destinations; Create is a toolbar action. App controls shown are static.
A few rules. Everywhere.
Proposed foundations & static component states
Type & rhythm
Bricolage Bold / 32
Make space for style.
San Francisco for the words you read and the actions you take.
- Body / control / metadata17 / 17 / 13 pt
- Section title24 pt · SF semibold
- Page / section / inner space20 / 32 / 16–20 pt
- Garment grid gap12 pt
- Image surfaceNeutral in both appearances
Actions & touch
Disabled
Loading
44 × 44 pt minimum hit areas are intended. In the app, semantic Dynamic Type expands controls; loading preserves the action’s position.
Selection & feedback
Selected row / 14 pt corners
Custom field specimen / persistent label
Outfit name
Add a name to save this outfit.Clear words and an icon explain the error.
State uses words, shape, and contrast. Native controls own platform materials and behavior. The clothes carry the visual texture.
LAYR character. Native behavior.
Apple Human Interface Guidelines
- Destinations belong in the tab bar.Home, Closet, and You remain stable destinations. Create sits in the toolbar and opens its actions. Tab bars
- Let the system own its chrome.Use native navigation, controls, sheets, and appropriate system materials in the iOS implementation. This board only approximates their placement. Materials
- Color responds to its context.Semantic canvas, text, and accent roles adapt to light and dark. The soft brand swatch is separate from readable functional color. Color
- Make the hierarchy accessible.Plan for 44 pt targets, semantic Dynamic Type, VoiceOver, safe areas, sufficient contrast, and state cues beyond color. Native validation remains part of implementation. Accessibility
20 pt page gutters, 14 pt content corners, 32 pt section spacing, and 56 pt primary actions are proposed LAYR choices, not fixed Apple rules. Final platform control geometry and materials follow native components. Following system appearance is the proposed product behavior.
Read the full Apple HIG checklist →