Files

alvocool fe268cb8aa Redesign the UI after the fitness reference and replace the logo

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

2026-11-02 12:33:13 +03:00

3.6 KiB

Raw Blame History

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.

3.6 KiB Raw Blame History Unescape Escape