fe268cb8aa
Light sage-to-cream ambient backdrop, frosted glass controls and painted SceneArt landscapes in place of photography. Home becomes a dashboard with a two-tone greeting, a frosted summary ring, category portraits, an up-next rail of image-led cards and a floating glass tab bar. The routine library gets an image header and painted cards; the player gets a scene stage, steps on an arc, a dotted clock and a night pill with a lime spark. Goals become painted cards in their own colour. New logo: a lime sun resting on a ground line under two arcs. The splash raises the sun and lights the arcs; launcher icons and native splash are regenerated to match. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KhQh614DMeYoQEH9SoMRUw
81 lines
3.6 KiB
Markdown
81 lines
3.6 KiB
Markdown
# Grounded — Design Language
|
||
|
||
Reference: an airy fitness-app look. Sage mist drifting into cream behind
|
||
everything (`AmbientBackground`), frosted glass for controls and floating
|
||
chrome (`GlassSurface`, `glassCircle`), ink type with a soft grey second
|
||
tone, painted landscapes instead of photography (`SceneArt`), a floating
|
||
glass tab bar with a dark round action button (`FloatingNav`), and one lime
|
||
spark on night-green for the primary control.
|
||
|
||
## Building blocks (`designs/`)
|
||
|
||
| Piece | Use |
|
||
|---|---|
|
||
| `AmbientBackground` | The backdrop for every light screen. |
|
||
| `GlassSurface` / `glassCircle` | Frosted panels and round controls; `onDark` over a scene or tinted stage. |
|
||
| `SceneArt` | Painted sky, sun and ridges with an optional figure glyph. Palettes come from `scenePalette(kind)`, `goalScene(accent)`, `classScene(class)`; seed with `sceneSeed(title)` so an item always wears the same picture. |
|
||
| `DotDigits` | The dotted clock in the routine player. |
|
||
| `FloatingNav` | Home's tab bar and action button. |
|
||
| `GroundedMark` | The logo, drawn — a lime sun on a ground line under two arcs. The launcher PNGs in `assets/icons/` were rendered from the same geometry. |
|
||
|
||
Cards are image-led where an item has a kind (routines, goals, tasks): scene on
|
||
top or as a thumbnail, white type over the shaded lower half, three light
|
||
numbers along the bottom. Greetings are two-tone: Medium ink, then Regular
|
||
`colorInkSoft`. Primary buttons are night pills with a lime icon.
|
||
|
||
`Sheet` is light (ambient) by default; passing `chrome`, `banner` or
|
||
`scene` gives a tinted stage with white type. Home, Routines and the player
|
||
build their own layouts from the same pieces.
|
||
|
||
The sections below describe the original record-style type scale, which still
|
||
applies to labels and metrics.
|
||
|
||
## Type — General Sans
|
||
|
||
| Role | Family | Size | Use |
|
||
|---|---|---|---|
|
||
| Display | `TextType.Light` | 30–44 | Screen titles. Always light, never bold. |
|
||
| Title | `TextType.Bold` | 17–20 | Card and section titles. |
|
||
| Body | `TextType.Regular` | 13–14, `height: 1.5` | Descriptions, copy. |
|
||
| Label | `TextType.Bold` | 10–11, `letterSpacing: 0.8–1.2`, uppercase, `colorGrey2` | Metadata above a value. |
|
||
| Metric | `TextType.Bold` | 24–34 | Debt score, counts. |
|
||
|
||
The label/value pair is the core unit: a tiny grey all-caps label sitting
|
||
directly above a large dark value. Used everywhere numbers appear.
|
||
|
||
## Geometry
|
||
|
||
- Sheet radius `28`, card radius `16`, chip radius `999`, control radius `12`.
|
||
- Screen padding `20` horizontal. Card padding `16`. Section gap `28`.
|
||
- Hairlines at `colorDivider` (black 7%), borders at `colorBorder` (black 8%).
|
||
- One soft shadow only: `0 4 18 rgba(0,0,0,0.03)`. No coloured glows.
|
||
|
||
## Colour
|
||
|
||
Near-black ink (`colorPrimaryDark #141414`) on warm off-white
|
||
(`colorPrimaryLight #EDEEEA`), with a single green accent (`colorPrimary
|
||
#2F6F4E`). Enforcement tiers own the rest of the palette:
|
||
|
||
| Standing | Colour |
|
||
|---|---|
|
||
| Good | green `#2F6F4E` |
|
||
| Warned | amber `#C98A04` |
|
||
| Grounded | rust `#B5442F` |
|
||
| Lockdown | oxblood `#7A1F14` |
|
||
|
||
The tier colour is used consistently — header, chip, meter, queue accent — so
|
||
the standing is legible without reading the word.
|
||
|
||
## Structure
|
||
|
||
Every screen is: black `headerBar` (back, title, action) → white sheet with a
|
||
`28` top radius → `sectionHeader` (label + light display title) → content.
|
||
|
||
## Rules
|
||
|
||
- Display titles are Light. Bold is for labels and metrics only.
|
||
- Numbers get a label above them, never beside them.
|
||
- Chips carry state, never actions.
|
||
- One primary button per screen; everything else is outlined or text.
|
||
- Empty states are plain. An empty overdue queue is good news, not a party.
|