What The Care Loop is
The Care Loop helps people and organisations keep products in use for longer, closing the loop between buying, caring, repairing and recirculating. It connects shoppers, brands, service providers, retailers and cities around a shared, evidence-led Care Loop Score.
Keep things alive
Make care, repair and reuse the obvious path, not the hard one.
Earn trust with evidence
Every claim carries a signal and a confidence level. No greenwashing.
Connect the ecosystem
One loop linking owners, brands, repairers, retailers and regions.
What users hire us for
- “When I buy something, help me understand its real impact, with evidence.”
- “Help me keep what I own working and valuable for as long as possible.”
- “When something breaks, get it repaired instead of replaced.”
- “When I'm done with an item, route it to its best next life.”
- “As a brand, show me how my products live in the real world.”
- “As a city, show me circular progress across my region.”
User roles & portals
Roles live in a dedicated table and are resolved server-side. After sign-in, users are routed to the right portal automatically.
Shopper / Consumer
consumer/appAnyone who buys, owns and cares for products.
- →Scan or look up a product and read its Care Loop Score
- →Claim ownership and build a private timeline
- →Log care events, repairs and next-life routes
- →Generate a public Care Pass (Digital Product Passport)
- →Share reviews, repair knowledge and flag greenwashing
Brand
brand_admin/brandSustainability, product and compliance teams at a brand.
- →Manage products, scores and certifications
- →Track compliance panels and transparency signals
- →See how customers care for, repair and recirculate items
Service provider
service_provider/providerRepair, refurbish, resale, recycle, rental and donation partners.
- →Publish capabilities into the repair & reuse network
- →Receive and manage repair requests
- →Be discovered as a next-life route for owned items
Retailer
retailer/retailerRetailers turning point-of-sale into circular outcomes.
- →Link sales to ownership records
- →Surface trade-in and take-back programmes
- →Report on circular outcomes across the catalogue
City / Municipality
city_admin/cityLocal governments tracking regional circular progress.
- →Monitor circular activity across the region
- →Understand waste diverted and value retained
- →Coordinate with brands and providers locally
User journeys
Shopper · scan → own → care → pass
- 1Discover a product by barcode scan, search or filtered Discover grid
- 2Read the Care Loop Score (health · planet · ethics · longevity) plus verified evidence
- 3Claim “I own this” to start a private ownership log
- 4Schedule reminders and log care on the care timeline, request repairs, route to next life
- 5Publish a Care Pass and share the public passport link
Brand · onboard → publish → observe
- 1Sign up as a Brand, and an org is provisioned automatically
- 2Manage products, scores and certifications
- 3Watch real-world care, repair and recirculation signals
Provider · list → match → fulfil
- 1Register capabilities and service type
- 2Get matched to repair requests and next-life routes
- 3Fulfil work and feed outcomes back into the loop
Auth · role-aware routing
- 1One sign-in form for everyone (no role toggle)
- 2Role resolved server-side after sign-in
- 3Routed to the matching portal, or the shopper app
Features
Scan & lookup
Find a product by barcode or search and surface its Care Loop Score.
External registry
Real product data from Open Facts registries first, with a barcode lookup fallback.
Discover filters
Browse 150+ products (incl. Nordic brands) filtered by category and subcategory.
Care Loop Score
Composite of health, planet, ethics, longevity, with a confidence signal.
Verified evidence
Each product shows what we verified (score signals) and what we couldn't (unknowns).
Ownership log
Private record of items a user owns and their status.
Care events
Clean, store, rotate, service, kept on the item timeline.
Care timeline
Upcoming reminders and completed care across self, brand, retailer and services.
Care network
End-to-end care: who made it, who sold it, and who keeps it alive.
Repair requests
Route an item to a service provider for repair or refurb.
Next-life routes
Reuse, resell, donate, refurbish or recycle at end of life.
Care Pass (DPP)
Shareable Digital Product Passport with a QR-coded PDF export.
Community signals
Owner reviews and opt-in repair knowledge tips.
Greenwashing flags
Flag misleading claims. Public only after moderation.
Impact
Items kept alive, value retained and planet averages.
Colour
Tech-luxury on a deep midnight canvas. Colours are defined as OKLCH tokens in src/styles.css, never hard-code hex in components, use the semantic tokens.
Score dimensions
Typography
Core components & utilities
Built on shadcn/ui primitives and the DS library, themed with custom Tailwind utilities (the tl- family). Every specimen below is the live component: change it once and the pages and dashboards change with it.
tl-cardPrimary surface, flat panel with a 1px cream hairline border. No gradient, shadow or glow.
tl-glassSolid raised panel on --canvas-2. Flat, no blur, kept for backwards-compatible markup.
tl-btn / tl-btn-glowFlat ochre pill. Press nudges translate(1px,1px); no halo.
tl-btn-ghostOutlined ochre pill for secondary actions.
tl-chipUppercase mono-label pill for metadata and tags.
eyebrow / label-monoUppercase, +0.05em tracked mono kicker above headings.
tl-divider1px hairline rule between sections.
container-editorialCentred editorial max-width wrapper with responsive gutters.
Everything below is the running component, not a screenshot. Each specimen imports from the same module the pages and dashboards use, so a change to a component or a token in src/styles.css lands here and on every screen at the same time.
Buttons
@/components/ds · ButtonUsed on landing, scan flow, every dashboard action
shadcn button
@/components/ui/buttonUsed on forms, admin panels, dialogs
Badges & tags
@/components/ds · Badge, TagUsed on product pages, review queue, filters
Score stamp
@/components/ds · ScoreStampUsed on app home, product page, ownership detail
Confidence badge
@/components/ds · ConfidenceBadgeUsed on every score readout and generated answer
Dimension bars
@/components/ds · DimensionBarUsed on Trust Score breakdown
Evidence rows
@/components/ds · EvidenceRowUsed on score explainer, methodology
Product cards
@/components/ds · ProductCardUsed on search results, brand catalogue
Cards & index rows
@/components/ds · Card, IndexRowUsed on dashboards, Care Pass, handbook
Form fields
@/components/ds · Input, Select, Checkbox, Switch, RadioUsed on onboarding, scan flow, settings
Navigation
@/components/ds · Tabs, MetaBarUsed on product detail, portal headers
Feedback
@/components/ds · Toast, TooltipUsed on care logging, publishing, assistant
tl- utilities
src/styles.cssUsed on marketing pages and shared chrome
DS component library
Editorial primitives ported from the Care Loop design system. Import from @/components/ds, they theme automatically via the DS role tokens (--canvas, --ink, --ochre…) and are showcased live at /design-system.
Button / IconButton
Flat pill actions in primary, accent, outline and ghost variants.
Badge / Tag
Uppercase status pills (outline, contrast, ochre, coral).
Card
Bordered surface with eyebrow / title / footer slots and tint tones.
MetaBar / IndexRow
Editorial header chrome and dotted index rows from the deck.
ScoreStamp
Circular Care Loop Score stamp used on product and pass views.
PhotoSlot
Framed image placeholder for product and editorial imagery.
ConfidenceBadge
Confidence pill (high/medium/estimated) with coverage %, showing how much of a score is verified.
DimensionBar
Segmented bar for one score dimension (health/planet/ethics/longevity) with verdict + value.
EvidenceRow
One verified or unverifiable claim behind a score, with a signed delta chip.
ProductCard
Discover-grid unit: thumb, confidence badge, brand/name, Trust Score and view link.
Forms
Field, Input, Checkbox, Radio, Select, Switch, sharp corners, hairline borders.
Feedback
Dialog, Toast, Tooltip and Tabs matching the flat DS specs.
Responsiveness
Every page and dashboard is verified across mobile and tablet. Design mobile-first, then promote to multi-column at sm / md / lg.
Mobile
Single column. Stack cards, badges and dimension bars full-width.
Tablet
Two-up card grids; TOC still inline chips, not the sidebar.
Desktop
Sticky sidebar TOC (220px) plus content. Up to 3-up grids.
- →Multi-item header rows use a grid + min-w-0 (text) + shrink-0 (icons) so labels never clip on mobile.
- →Add min-w-0 to flex/grid text containers and truncate to single-line headings.
- →Scale display type with clamp / responsive text-* steps, display-xl floors at 2rem so long words don't overflow.
- →Verify every public page and dashboard is free of horizontal overflow at 390px and 820px.
Footer & mode switching
The whole platform shares two footers plus a light/dark theme toggle, so navigation and mode switching are always one reach away.
MarketingFooter
Public site footer: logo lockup, a responsive 3-column website menu (Platform · Company · Legal) and the light/dark ThemeToggle.
AppFooter
Compact footer for authenticated dashboards: quick links plus the same mode switch, wired into the _authenticated layout.
Mode switching
Theme is driven by the ThemeToggle (Light / Dark), flipping .light / .dark on the root so the DS tokens re-resolve. Toggle wrappers use items-start so buttons never stretch full-width on wide viewports.
Voice & tone
We sound like a trusted, investigative friend, clear, warm and evidence-led.
Do
- ✓Plain, confident, investigative
- ✓Evidence-led, name the signal
- ✓Warm and human, never preachy
- ✓Concrete verbs: scan, log, repair, route
Don't
- ✕Hype, jargon, vague eco-claims
- ✕Unbacked superlatives (“the greenest”)
- ✕Guilt-tripping or moralising
- ✕Abstract corporate filler
AI patterns
AI assists judgement, it never stands in for it. Five rules govern every generated surface.
Labelled at the point of reading
Generated text carries a meta strip naming it as generated, with the confidence tier and data completeness behind it. No label, no generated text.
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.
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.
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.
Opt in, never ambient
No panel generates on page load. A person presses a button, and can dismiss the result back to that button.
Where AI shows up
- Care assistant at /app/assistant. Answers from the catalog, your ownership log and the provider network, with tool calls visible but collapsed.
- Explain this score on a product page. A plain reading of the four dimensions plus what is still unknown.
- Suggest a care plan on an owned item. Drafted steps you accept, edit or discard one by one.
Decision log
What we chose, what we turned down, and why. Kept public so the reasoning can be argued with.
Every answer comes from a tool call against the catalog, ownership log or provider network, and the system prompt forbids inventing a score or a certification.
Rejected A general chatbot with the product description pasted into the prompt. It reads fluently and quietly fabricates evidence, which is the one failure this product cannot absorb.
Score explanations return a caveats block, and an empty caveats list is a claim we stand behind rather than a formatting accident.
Rejected Hiding gaps behind confident summaries. Confidence tiers already exist in the data model, so the interface has no excuse to flatten them.
The care plan writes nothing. Each step is accepted, edited or discarded individually, and only accepted steps become reminders.
Rejected Auto-scheduling the plan with an undo. Undo puts the burden of correction on the person after the fact and trains them to distrust the whole surface.
Tool headers show a plain-language label and status. Parameters and raw output stay behind a disclosure.
Rejected Streaming the full reasoning trace. It raises perceived rigour and actual cognitive load at the same time, which is a bad trade for a shopper.
Nothing generates on page load. AI panels start as a button and can be dismissed back to it, so the non-AI path is always complete on its own.
Rejected An always-on summary at the top of every product page. It spends credits and attention on people who did not ask, and makes the generated text look like a fact of the record.
Chat, explanations and plans all run on a single fast general model, so behaviour stays consistent and answers land inside a few seconds.
Rejected Routing per task to larger models. The gain in prose quality did not survive the grounding constraints, and the added wait did more damage than the polish repaired.
Shared vocabulary
Use these terms consistently across UI copy, code and conversation.
Getting set up
The platform runs on TanStack Start (React 19) with Lovable Cloud for database, auth, storage and server functions. App logic lives in createServerFn handlers; roles are enforced with RLS and security-definer helpers. Start at the home page, then explore each portal.