THE CARE LOOPDESIGN SYSTEMEDITION II

Design system

The live foundations and primitives of The Care Loop: flat surfaces, hairline rules, sentence-case display type, pills reserved for buttons, badges and stamps. Everything on this page renders from the same tokens and components the product ships.

SECTION 00FOUNDATIONSCOMPONENTS
Colour roles
Canvas
--canvas
Surface
--canvas-2
Ink
--ink
Ink soft
--ink-soft
Ochre
--ochre
Coral
--coral
Green
--green
Type scale
--text-heroCare
--text-h1Trust score
--text-h2Care timeline
--text-h3Next life routes
--text-body-lgEvidence-led ratings, written plainly.
--text-body-mdEvidence-led ratings, written plainly.
--text-body-smEvidence-led ratings, written plainly.
--text-metaVERIFIED · 2026

Unitea Sans sets every headline in sentence case. Neutiva carries body copy. Only eyebrows, badges, labels, buttons and chips stay in caps.

SECTION 00bBRAND MARKSCOMPONENTS
The Care Loop

The wordmark is the default lockup. The heart takes over wherever the wordmark stops being readable, such as collapsed navigation and favicons.

SECTION 00cICONSCOMPONENTS
Search
Camera
Wrench
Recycle
BadgeCheck
CheckCircle2
Clock
BarChart3
BookOpen
Compass
Award
BellRing
Download
ExternalLink
Sparkles

Icons come from the self-hosted LineIcons set through @/components/icons. Names mirror the old Lucide imports, so swaps are one-to-one.

SECTION 01ACTIONSCOMPONENTS
SECTION 02DISPLAYCOMPONENTS
OutlineContrastOchreCoral
LongevityRepairableNordic brand
THE CARE LOOPTRUST SCORE92EVIDENCE-LED7441
TRUST SCORE
Merino Base Layer
Evidence-led rating across health, planet, ethics and longevity.
P. 01→
Care Pass
The shareable Digital Product Passport for an owned item.
NEXT LIFE
Route it on
Reuse, resell, donate, refurbish or recycle.
Trust scoreP. 01
Care timelineP. 07
Community signalsP. 12
[ product photo ]
SECTION 02bTRUST SCORECOMPONENTS
HIGH92% COVERAGEMEDIUM64% COVERAGEESTIMATED
HEALTH· Low-tox82 /100
PLANET· Recycled inputs64 /100
ETHICS· Partial audit48 /100
LONGEVITY· Repairable91 /100
Bluesign certified fabric
Verified · 2025
+8
Repair program available
Verified · brand site
+5
Living wage in supply chain
Unverifiable
?
Air-freight shipping
Verified · logistics
-6
[ photo ]
HIGH
Fjäll Merino
Base Layer LS
92 /100View →
[ photo ]
MEDIUM
Nordic Denim
Selvage 14oz
74 /100View →
[ photo ]
ESTIMATED
Trailhead Co.
Shell Jacket
41 /100View →
SECTION 03FORMSCOMPONENTS
SECTION 04NAVIGATIONCOMPONENTS
BUILDER HANDBOOKP. 01/25THE CARE LOOP 2026
SECTION 05FEEDBACKCOMPONENTS
Care event logged
Care Pass published
Could not verify
Hover me
SECTION 06AI PATTERNSCOMPONENTS

AI in The Care Loop is an assistant to judgement, not a replacement for it. Every generated surface follows the same five rules, so the reader always knows what they are looking at and what it cost them to read it.

RULE 01
Labelled at the point of reading
Generated text carries a meta line naming it as generated, with the confidence tier and data completeness of the evidence behind it. No label, no generated text.
RULE 02
Grounded or silent
The model answers from stored records only. When a fact is missing it says so. An unknown is a finding, not a gap to fill with prose.
RULE 03
Draft, then accept
Suggestions never write to a person's data. Each step carries accept, edit and discard, and the panel states that nothing is saved yet.
RULE 04
Work shown on request
Tool calls are visible but collapsed. The reader sees which sources were touched without being handed a transcript they did not ask for.
RULE 05
Opt in, never ambient
No panel generates on page load. A person presses a button, and can dismiss the result back to that button.
COGNITIVE LOADWHAT THE RULES BUYMEASURE
Reading a score without opening the evidence tableRULE 01
Deciding whether to trust a claimRULE 02
Turning advice into a scheduled actionRULE 03
Auditing an answer after the factRULE 04
Ignoring AI entirely and still finishing the taskRULE 05
Generated reading · confidence medium · 64% data
Strong on longevity, weaker on ethics because the supply chain audit stops at tier one.
LongevityRepair program published by the brand, verified 2025.
Still unknown
Living wage below tier one is unverifiable from public filings.

The anatomy of every generated panel: provenance strip, one-sentence reading, evidence per dimension, and an explicit unknowns block that is never omitted.