FamilySmash Design System

Shared foundation + per-app accent. Every value here is a --fs-* token — if a value isn't a token, it doesn't belong in an app.

App accents

Each app supplies one vivid accent; the generator derives text-safe variants and verifies them against WCAG AA (4.5:1) on both light surfaces and both dark surfaces. Click a card to preview the whole page in that app's skin.

Typography

Headings use Nunito (self-hosted, weights 700–900 only — nothing lighter exists in the shipped files). Body copy uses the native system stack.

--fs-text-xl · 900
Family apps, built right
--fs-text-lg · 800
Whose turn is it tonight?
--fs-text-base · 700
Section heading in body stack
--fs-text-base · 400
Body copy — calm, legible, never below AA contrast.
--fs-text-sm · 400
Secondary text for supporting detail.
--fs-text-xs · 500
Captions, timestamps, metadata.

Spacing — strict 4px grid

All spacing comes from --fs-space-*. No arbitrary pixel values.

Radii & shadows

radius-sm
radius-md
radius-lg
card + shadow-sm
shadow-md
shadow-lg
shadow-elevated
icon 22%

Components

Live from familysmash-base.css — the same file apps vendor. Buttons scale down on press; inputs glow with the app accent on focus.

Buttons

Inputs & chips

Daily Needs approval Active

Pressable card

Take out recycling
Next up: Sam · resets daily
Tap to advance turn →

Status colors

Reserved for status meaning in every app, and always paired with an icon or label — never color alone. Where an app's accent coincides with a status color (AlarmSmash/amber, AllowanceSmash/green, ChoreSmash/teal), shape and context disambiguate.

✓ Done ⚠ Pending approval ✕ Overdue ★ Streak