TailSpend visual system
TailSpend combines editorial landscape photography with clear financial surfaces. Web and desktop share @repo/app-ui; native mobile and docs consume the same @repo/design-tokens foundation.
Identity and typography
- Original geometric mountain mark in navy and teal. The wordmark is TailSpend.
- Source Serif 4 for headings; Source Sans 3 for body text, controls, and tabular financial values.
- Fonts are bundled locally. Adobe's SIL Open Font License files are retained under
packages/design-tokens/assets/fonts. - Run
node scripts/generate-brand-assets.mjsthennpm run icons --workspace=desktopafter changing the vector mark. Launcher PNGs, Android adaptive/monochrome icons, splash assets, favicon, and desktop ICO/ICNS share that source.
Color and layout
| Role | Light value |
|---|---|
| Navigation / identity | Navy #172c36 |
| App canvas | Ivory #f7f5f0 |
| Financial panels | White #ffffff |
| Links / selection | Teal #176b6b |
| Positive state | Forest #25634d |
| Errors / owed amounts | Clay #b4433c |
Use semantic colors rather than literal hex values in components. Mobile retains a coordinated dark palette; web and desktop remain light. The docs app follows system appearance. Text contrast is checked in the token contract test.
Wide web/desktop layouts use navy side navigation and a centered content column. Phone web uses compact navigation; group sections retain their contextual bottom bar. Native navigation, platform gates, routes, and financial behavior stay intact. Cards have restrained 8–16px corners and subtle borders; forms remain on opaque surfaces. Reserve serif headings for content, never financial numerals.
Photography
Three decorative photographs: alpine lake by Luca Bravo, Mediterranean coast by Tamás Tokos, and autumn forest by Kristaps Ungurs. See the asset manifest for individual sources, retrieval date, license evidence, and derived files. The standard Unsplash license allows commercial use; no Unsplash+ assets are included. Stock scenery is not represented as a group's real destination, and is never used as a member avatar.
Local WebP variants at 640, 1280, and 1920px are fingerprinted by Vite; native uses bundled 1280px assets. Group covers are deterministic across clients through groupScenicAsset. Keep the ID order stable. Failed images leave readable navy panels. Attribution appears on the public brand page under Photo credits.
Verification and captures
npm run test --workspace=@repo/design-tokenschecks palette parity, text contrast, and photo provenance/file presence.npm run screenshots:mobile --workspace=web-e2eruns hermetic browser fixtures, captures responsive web screens, and checks group navigation/forms at phone, tablet, and desktop widths, local assets, image fallback, keyboard navigation, 200% text, long group names, and large balances.- Native screenshots use the actual simulator app:
apps/mobile/e2e/build-ios.shandapps/mobile/e2e/run-ios.sh. The native screenshot instructions describe refresh and review. Responsive web captures must never replace native marketing screenshots.
Error and timeout recovery
See Timeouts and recovery for shared waiting budgets, persistent error states, accessible recovery actions and safe handling of unconfirmed writes across web, desktop and native mobile.