Hearth / Design system
Care, made clear.
A visual language for the work of looking after a home. Familiar materials, thoughtful boundaries, and room to breathe.
01
Clear before clever
Readable choices. Specific language. A visible reason behind every outcome.
02
Calm by default
Paper, ink, and useful space. Color speaks when something needs attention.
03
Yours to decide
Boundaries stay visible. Every permission has a place, and every change can be traced.
Household patterns
- ActivityRecapA read-only snapshot of recent household activity, an open question, and an itemised receipt from work done on its own.
- SurfaceStateShared page loading, recovery, and empty feedback.
- TemplateCardA helper’s starting note, followed by the last few moments of its evaluated household example.
- ActivityReplayA practice week with scrubbing, playback, event details and a comparison against your saved note.
- ActivityDetailThe selected event’s explanation and contract link, shared by a panel and a phone sheet.
- AutonomyLadderThe three-rung control every capability sits on: Do it, Ask first, Never.
- CeilingA numeric limit on a Do-it capability that reads as a sentence and adjusts as a slider.
- HardRuleA plain-language never that takes a deliberate hold or explicit acknowledgement to turn off and one tap to turn back on.
- RiskSummaryWhat the contract adds up to, in a handful of sentences that recompute as the contract changes.
- ContractLinkThe pill that connects an outcome to the contract line that produced it.
- TraceEventOne thing the helper did, asked, or refused, as a row in a list.
- TimelineThe week as a strip: day columns, one marker per event, and a playhead you can drag.
- ApprovalCardThe ask as you see it: what it wants, why it stopped, how long it will wait, and afterwards what you said.
- ReceiptWhat the helper did, itemised, with the line that allowed it.
- WorkingIndicatorThe helper is doing something. A breathing dot and a sentence, never a spinner.
Everyday primitives
- ImplementationBriefA selectable brief for implementing a screen, with a copy action and a manual fallback.
- HouseholdIllustrationThree quiet still lifes for the ordinary work of a household.
- ButtonOne button, five jobs. Accent only for the thing that needs you.
- CardA quiet paper surface: precise edges, restrained rounding, and minimal elevation.
- SheetA modal surface: bottom sheet on phones, side panel on wider screens.
- TabsA tab list with a sliding underline.
- ChoiceGroupPick one of a few: cards for choices with consequences, chips for quick ones.
- ToggleA switch. Ink when on, never the accent.
Colour
Paper surfaces, green ink. One accent, reserved for anything waiting on you. Five outcome tones, each with a tint, each clearing AA on its tint in both themes. Left swatch light, right swatch dark.
Household illustrations
- paper-green#DCE8CF · #2D412B
- paper-blue#DDE8EB · #293E42
- paper-clay#EFE0D2 · #45382B
- illustration#344B37 · #C2D4B5
- illustration-paper#FFFDF2 · #202922
Surfaces
- bg#F4F5F0 · #171E19
- surface#FEFFFA · #202922
- raised#E9EDE4 · #2B362D
- sunken#E0E5DA · #131A15
Ink
- ink#25352B · #EFF2E8
- ink-2#505D52 · #BDC8B8
- ink-3#5D6958 · #9DAE97
- line#D9DED3 · #364238
- line-strong#BAC4B4 · #546551
- focus#25352B · #EFF2E8
Needs you
- accent#B04508 · #F08A44
- accent-strong#943905 · #F79E63
- accent-tint#FCEADC · #3F2716
- on-accent#FFFFFF · #1A1714
Outcomes
- acted#3E6B47 · #93C49A
- asked#3F5F7F · #93B4D4
- downgraded#7A5A0E · #D9B24E
- expired#6E665A · #A2988B
- refused#8A2C38 · #E38E9A
Outcome tints
- acted-tint#E0EBDF · #213021
- asked-tint#E0E8F0 · #1F2B38
- downgraded-tint#F3EACF · #33290F
- expired-tint#ECE6DB · #2E2924
- refused-tint#F5E0E1 · #3B2126
Type
Fraunces for anything that speaks: headlines, questions, the risk summary. Instrument Sans for everything else. Tabular figures wherever money or time appears.
- xs · 12pxNever buy alcoholReorder a staple
- sm · 14pxNever buy alcoholReorder a staple
- base · 16pxNever buy alcoholReorder a staple
- md · 18pxNever buy alcoholReorder a staple
- lg · 20pxNever buy alcoholReorder a staple
- xl · 24pxNever buy alcoholReorder a staple
- 2xl · 30pxNever buy alcoholReorder a staple
- 3xl · 40pxNever buy alcoholReorder a staple
- 4xl · 52pxNever buy alcoholReorder a staple
- hero · 68pxNever buy alcoholReorder a staple
- Leading
- tight 1.12 · snug 1.3 · normal 1.5
- Weight
- regular 400 · medium 500 · semibold 600
- Tracking
- tight -0.035em · normal 0em · wide 0.075em
Space
A 4px grid. Generous by default: cards breathe, rows do not touch.
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 8
- 10
- 12
- 16
- 20
- 24
Radius
- sm · 4px
- md · 6px
- lg · 10px
- xl · 16px
- full · 999px
Shadow
- card
- lift
- sheet
Motion
Purposeful and consistent. Two places carry meaning: the playhead settling when you scrub, and outcomes recolouring under what-if. Everything else is a short standard ease. Reduced motion is honoured throughout.
Every transition, side by side.
- spring.settletype:spring, stiffness:420, damping:36, mass:1
- spring.scrubtype:spring, stiffness:260, damping:32, mass:1
- spring.softtype:spring, stiffness:180, damping:26, mass:1
- duration.instant80ms, ease.standard
- duration.fast160ms, ease.standard
- duration.base240ms, ease.standard
- duration.slow400ms, ease.standard
- duration.scrub600ms, ease.standard
- ease.standard
- cubic-bezier(0.2, 0, 0, 1)
- ease.enter
- cubic-bezier(0, 0, 0.2, 1)
- ease.exit
- cubic-bezier(0.4, 0, 1, 1)