Choose a theme
Pick one to preview the full UI kit below.
Typography
Readable hierarchy for emotional, practical planning.
A simple plan for life's hardest moments.
Section Heading: Keep priorities clear
Card Heading: One next action at a time
Body text is tuned for clarity and comfort. Instructions should feel calm and direct,
especially during stressful moments.
Muted text for helper notes, metadata, and secondary labels.
Inline link style sample Color Palette
Core tokens used by components.
Primary--tl-primary
Secondary--tl-secondary
Accent--tl-accent
Background--tl-bg
Surface--tl-surface
Border--tl-border
Buttons
Primary actions, supportive actions, and ghost links.
Cards and Containers
Use surface depth to separate guidance from actions.
Checklist Progress
12 of 28 tasks completed.
Next Step
Add two trusted contacts.
Form Controls
Field styles, focus states, and affordances.
Checks and Toggles
Binary controls with clear state visibility.
