Bill Tracker is a premium calm household finance app: private, self-hosted, practical, and emotionally quiet. The brand should make money planning feel under control without pretending to be a bank or a consumer fintech toy.
**Name:** Bill Tracker
**Tagline:** Calm command for household money.
**Promise:** Know what is due, what is paid, and what remains with less mental load.
## Personality
- Calm, precise, and trustworthy.
- Modern but not flashy.
- Helpful without sounding cute.
- Confident about money without using pressure or shame.
- Private by default; self-hosted is a feature, not a caveat.
Use plain language. Prefer "what changed" and "what to do next" over abstract product copy.
## Visual Direction
The visual lane is **premium calm**.
- Deep ink surfaces, warm paper light mode, quiet graphite borders.
- Trust green is the signature color.
- Teal supports connected systems and data flow.
- Amber means caution or attention.
- Rose means overdue, destructive, or urgent.
- Avoid purple as a primary brand cue.
- Avoid heavy gradients, glassy novelty, and decorative clutter.
## Core Colors
| Token | Hex | Use |
| --- | --- | --- |
| Ink | `#101417` | Dark app shell, mark background, premium depth |
| Paper | `#f8faf9` | Light app background, high-contrast text on dark |
| Trust | `#40c878` | Primary actions, brand mark, success, active states |
| Teal | `#23b6a8` | Bank sync, data flow, secondary brand accent |
| Amber | `#d99a24` | Due soon, warnings, drift, review-needed states |
| Rose | `#df4661` | Overdue, destructive, high urgency |
The app implementation maps these through OKLCH theme tokens in `client/index.css`; do not hardcode the hex values in components unless creating static brand assets.
## Logo Assets
Primary source files live in `client/public/brand/`.
-`lockup.svg` - primary logo for dark surfaces.
-`lockup-light.svg` - primary logo for light surfaces.
