Design system · v1.0
Threadwise.
The interface system for a sustainable shopping app that feels like a festival, not a sacrifice.
Principles
Six rules keep the system colourful without ever becoming chaotic, carried over from the brand. When a UI decision is unclear, these break the tie.
Alongside these, the product keeps its behaviour principles from the earlier phases: answer first with depth on demand, guide and never shame, be honest about confidence, and always offer a better path including repair, reuse, and skip. The visuals are joyful; the guidance stays gentle.
The adaptive arch
One shape, a Jaipur jharokha arch with a scalloped, cusped opening. It is the doorway you step through to shop wiser, and it is the system's signature, used as logo, app icon, and framing motif.
Five lobes carry the full richness; the count steps down as space shrinks so nothing blurs. Three lobes were tested and rejected for reading too plain. The count never sits at three.
Colour
One colour to own, a warm cast for joy, and a jewel and metal set for depth. The discipline is the ratio: 60 percent calm ground, 25 percent warm, 10 percent jewel, 5 percent gold.
A wine-fuchsia that reads as heritage and confidence, not candy. It owns the logo, every primary action, and the brand moments, and nothing else. This single-colour discipline is how Threadwise stays recognisable at a glance.
| Role | Token | Colour | Contrast note |
|---|---|---|---|
| Primary action | color.action.primary | Heritage #8B2149, white text | 8.7:1 · AAA |
| Good / low impact | color.impact.good | Emerald, on pale tint #E3F0E8 | text uses Emerald Deep #156638 · AA |
| Okay / tradeoff | color.impact.okay | Marigold tint, dark amber text #8A5410 | amber text 5.9:1 · AA |
| Skip / high impact | color.impact.skip | Sindoor on pale tint #F7DEDF | 7:1 · AAA · kept calm, not alarming |
| Verified eco claim | color.verified | Solid Emerald Deep, white text | reserved for genuine certification |
| Information | color.info | Jaipur Blue | 5:1 · AA |
| Error (system) | color.error | Sindoor Red | shares red with Skip; differs by context and icon |
| Background | color.background | Khadi Cream #FBF4E6 | warm, never pure white |
| Text primary | color.text.primary | Teak Ink #2A1810 | 13:1 on cream · AAA |
| Text secondary | color.text.secondary | Muted #7A5A38 | 5.9:1 · AA · Faint #B89868 is decorative only |
Assumption: the brand reserves emerald for verified eco-claims. A positive sustainability verdict is treated as an earned green in that spirit, and truly certified items get a solid emerald Verified badge. The illustrative cue always rides with the score so the green never overclaims.
Typography
Two voices, two jobs. Rozha One, a high-contrast Didone drawn by an Indian foundry, carries emotion and names. Hind, a clean geometric sans, handles everything functional.
The couture, invitation-card feeling. Logo, the verdict, the score, and product names. Never set below 20px, the thin strokes break.
| Display H1Rozha One · 40px and up | The world wears warm |
| Headline H2Rozha One · 22 to 28px | Marigold block-print dress |
| Score / dataRozha One · big, colour by verdict | 78 |
| BodyHind Regular · 15px | Made by weavers who are paid fairly. |
| Label / eyebrowHind Semibold · tracked caps | Verified sustainable |
| ButtonHind Medium · tracked caps | Find a better option |
Foundations
An eight-point rhythm, generous rounding with pill actions, warm shadows, and cream never white. Craft over grid.
sections on cream
cards
the sheet at rest
expanded sheet
Components
Pill actions in heritage, warm inputs, verdict badges, the earned Verified badge, and calm data bars.
Heritage Pink is for primary actions only, always a pill. One primary per screen. Labels say what happens. "Skip for now" is a valid, guilt-free choice.
The verdict is never colour alone: always a word and an icon. The solid emerald Verified badge is reserved for genuine certification, keeping green honest.
Neutral tones on purpose, never a verdict colour, so confidence is never mistaken for sustainability.
Impact summary
What it is made of
Key cards
The score card, the breakdown, the tradeoff, and the better-path card, in their real verdict states. The score is Rozha; the guidance stays gentle.
Fabric breakdown
Show the two or three dominant fibers; collapse the rest. If a fiber is unknown: "We do not have data on one fiber yet. The score covers the rest."
A real tradeoff
This fabric is durable and easy-care, but it sheds tiny plastic fibers when washed.
A better path
Ordered to favour not buying new. Joyful, but never a shopping funnel: no buy-now links in the core flow.
Make it last
System states
Plain, specific, recoverable, and never blaming. The voice is the interface's, warm but honest.
In context · the verdict sheet
The locked flow, wearing the brand. The result peeks up over Home with the glance, expands for detail if wanted, and swipes away to check the next item. Cream ground, one verdict colour, the heritage action.
pull up for detail · swipe down for the next item
- Peek shows only the glance: verdict, score in Rozha, one alternative, and the pull-up hint. The two-second read in the aisle.
- Expand reveals the breakdown, the why bars, the care note, and the full better-path card, with the verdict pinned at the top.
- Dismiss with a swipe down, straight back to Home, so checking item after item stays fast.
- The screen holds to the ratio: cream ground, a single verdict colour, and the heritage action. The honesty cue rides along in every state.
Accessibility
Built in with a senior accessibility pass, and specific to a fabric scanner. Warmth never comes at the cost of legibility.
Colour contrast
Body and essential UI meet WCAG AA. White on Heritage clears AAA at 8.7:1. Verdict text uses contrast-safe shades (Emerald Deep, dark amber, Sindoor) on pale tints. Faint gold is decorative only, never for text.
Never colour alone
Every verdict pairs a word and an icon with its colour, so Good, Okay, and Skip are distinguishable without colour vision. Bars carry labels and values; tradeoffs carry a labelled flag.
Touch targets and focus
All controls are at least 44 by 44px, including the sheet grabber and dismiss. Focus is always visible as a heritage ring, and focus moves into the sheet on open and back to Home on close.
Text and reading
Body never below 15px, line-height 1.5. Rozha never below 20px so its thin strokes hold. Numbers use Rozha at large sizes only; small data uses Hind for clarity.
Screen readers
The score, verdict, confidence, and each fiber percentage have descriptive labels, for example "Polyester, 38 percent, synthetic" and "Sustainability score 54 of 100, illustrative, verdict okay with tradeoffs."
Motion and plain language
The sheet slide and expand respect reduced-motion with instant equivalents. Sustainability terms are defined in plain words on first contact, and errors say what happened and the next step, never blaming the user.