--- version: 1 name: Deep Teal Console Mobile colors: background: "#0A1211" surface: "#0D1917" surface-alt: "#0F1E1B" surface-tonal: "#12312C" on-surface: "#E9F5F1" on-surface-variant: "#A7C2BB" border: "#1B2F2B" primary: "#2DD4BF" on-primary: "#06201C" accent: "#34D399" on-accent: "#06201C" error: "#F43F5E" chart-1: "#2DD4BF" chart-2: "#60A5FA" chart-3: "#A78BFA" chart-4: "#FBBF24" chart-5: "#FB7185" typography: headline-lg: fontFamily: Plus Jakarta Sans fontSize: 24px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.02em headline-md: fontFamily: Plus Jakarta Sans fontSize: 18px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.01em numeral-lg: fontFamily: Plus Jakarta Sans fontSize: 24px fontWeight: 600 lineHeight: 1.1 letterSpacing: -0.02em body-md: fontFamily: Plus Jakarta Sans fontSize: 14px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0em label-md: fontFamily: Plus Jakarta Sans fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.005em label-sm: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0em caption: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0em tab-label: fontFamily: Plus Jakarta Sans fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0em rounded: sm: 8px md: 12px lg: 16px xl: 20px full: 9999px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px gutter: 16px card-padding: 16px section-gap: 20px icons: set: phosphor default_variant: fill active_variant: fill stroke_weight: n/a default_size: 24px components: card: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: 16px border: none boxShadow: none card-inset: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: "{rounded.lg}" padding: 16px border: none boxShadow: none button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.md}" paddingX: 16px paddingY: 12px border: none boxShadow: none button-secondary: backgroundColor: "{colors.surface-tonal}" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.md}" paddingX: 12px paddingY: 8px gap: 8px iconSize: 20px border: none boxShadow: none button-icon: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.md}" size: 44px iconSize: 24px border: none boxShadow: none fab: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" size: 56px iconSize: 28px border: none boxShadow: "0 10px 25px rgba(0,0,0,0.35)" input-text: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface-variant}" typography: "{typography.body-md}" rounded: "{rounded.lg}" paddingX: 16px paddingY: 12px gap: 8px iconSize: 20px border: none boxShadow: none chip: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface-variant}" typography: "{typography.label-sm}" rounded: "{rounded.full}" paddingX: 8px paddingY: 4px border: none boxShadow: none chip-active: backgroundColor: "{colors.surface-tonal}" textColor: "{colors.on-surface}" typography: "{typography.label-sm}" rounded: "{rounded.full}" paddingX: 8px paddingY: 4px border: none boxShadow: none badge-pill: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface-variant}" typography: "{typography.caption}" rounded: "{rounded.full}" paddingX: 12px paddingY: 4px border: none boxShadow: none badge-circle: backgroundColor: "{colors.surface-tonal}" textColor: "{colors.on-surface}" rounded: "{rounded.full}" size: 8px border: none boxShadow: none avatar: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" size: 40px border: none boxShadow: none list-row: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-surface}" rounded: "{rounded.md}" paddingX: 12px paddingY: 12px gap: 12px border: none boxShadow: none icon-tile: backgroundColor: "{colors.surface-tonal}" rounded: "{rounded.md}" size: 44px iconSize: 24px border: none boxShadow: none progress-bar: backgroundColor: "{colors.surface-alt}" textColor: "{colors.primary}" rounded: "{rounded.full}" height: 12px border: none boxShadow: none progress-ring: backgroundColor: "{colors.surface-alt}" textColor: "{colors.primary}" size: 128px border: none boxShadow: none top-app-bar: backgroundColor: "{colors.background}" textColor: "{colors.on-surface}" paddingX: 16px paddingY: 24px border: none boxShadow: none tab-bar: backgroundColor: "{colors.background}" borderColor: "{colors.border}" borderWidth: 1px paddingX: 8px paddingY: 8px boxShadow: none tab-item-active: backgroundColor: "{colors.surface-alt}" textColor: "{colors.primary}" typography: "{typography.tab-label}" rounded: "{rounded.md}" paddingX: 8px paddingY: 8px iconSize: 24px gap: 4px border: none boxShadow: none tab-item-inactive: backgroundColor: transparent textColor: "{colors.on-surface-variant}" typography: "{typography.tab-label}" rounded: "{rounded.md}" paddingX: 8px paddingY: 8px iconSize: 24px gap: 4px border: none boxShadow: none --- # Deep Teal Console Mobile ## Overview **Calm, instrument-panel dark.** A near-black teal background reads less like "dark mode" and more like the soft glow of a well-lit cockpit at night. Information is arranged into rounded tonal cards that nest inside each other — a quiet two-step elevation system built from color shifts, not shadows. The mood is focused, technical, and trustworthy: every metric has a slot, every slot has a color, and the eye glides from one bright accent to the next without ever feeling busy. The palette commits to **deep teal-greens** for chrome and a **vibrant categorical chart palette** (teal, blue, violet, amber, coral) for data. Saturated color is reserved for accents — the surfaces themselves are restrained. Type is a single neutral geometric sans (Plus Jakarta Sans) used at semibold for everything that matters and regular for everything supporting it. The result is dense without being noisy. ## Colors This is a **dark, near-monochrome chrome** with a **categorical accent palette** layered on top. **Chrome surfaces** form a four-step tonal stack, each only a few percent apart in luminance — they read as the same family but provide enough separation to nest: - `{colors.background}` — the page (`#0A1211`), the deepest tone - `{colors.surface}` — primary cards (`#0D1917`) - `{colors.surface-alt}` — inset panels and rows inside cards (`#0F1E1B`); also the muted/inactive tone - `{colors.surface-tonal}` — colored emphasis tone for icon tiles and active chips (`#12312C`), the only saturated chrome **Foreground** uses two near-white tones: `{colors.on-surface}` (`#E9F5F1`) for primary text and numerals, `{colors.on-surface-variant}` (`#A7C2BB`) for labels, captions, and inactive states. There is no third tier — contrast is binary. **`{colors.primary}` (`#2DD4BF`)** is the only saturated brand color in chrome — it appears as the primary CTA fill, the active tab label, and progress-fill where progress is the headline metric. **`{colors.accent}` (`#34D399`)** is a near-twin used sparingly for affirmative semantic moments. **The chart palette** (`chart-1` teal, `chart-2` blue, `chart-3` violet, `chart-4` amber, `chart-5` coral) is the *categorical* palette: each metric type gets a fixed color and keeps it everywhere it appears. These colors are used as **icon glyph tints inside tonal tiles**, **progress-bar fills**, **bar/line strokes**, and **legend dots** — never as surface fills. **Hard palette boundary:** chart colors NEVER fill chrome surfaces (no amber buttons, no violet cards). Chrome stays in the teal-stack; categorical color appears only as ink and 2–12px fills inside chrome. ## Typography A single-family system: **Plus Jakarta Sans** for everything. Playfair Display and JetBrains Mono are declared as theme variables but are not used in source — treat them as available fallbacks for serif/mono needs, not as part of the working palette. **Weight strategy:** Semibold 600 is the workhorse — every heading, every numeral, every emphasized label. Regular 400 carries supporting body and caption text. Medium 500 covers active-state labels and small buttons. Bold 700+ is unused; restraint is the point. **Tracking:** Headlines and large numerals use slightly negative letter-spacing (`-0.01em` to `-0.02em`, expressed via Tailwind `tracking-tight`) for a tighter, modern feel. Body and small labels run at default tracking — never tracked-out, never uppercase. Roles: - `{typography.headline-lg}` — top-of-screen page title (the user name / page name slot) - `{typography.headline-md}` — section anchor inside the body - `{typography.numeral-lg}` — large stat numerals on cards (same size as headline-lg, but conceptually a numeral) - `{typography.body-md}` — supporting paragraphs and search-bar placeholder - `{typography.label-md}` — primary action labels, list-row titles, button text - `{typography.label-sm}` — chip labels, in-card metadata values - `{typography.caption}` — eyebrow text above titles, small metadata, "X / Y" subtitles - `{typography.tab-label}` — bottom tab bar labels ## Spacing & Layout Density is **balanced** — neither dashboard-dense nor lifestyle-airy. The screen edge inset is `{spacing.gutter}` (16px) consistently. Inside cards, `{spacing.card-padding}` (16px) is universal. Vertical rhythm between sections uses `{spacing.xl}`–`{spacing.2xl}` (20–24px), and rows inside a card breathe at 12px gaps. **The signature rhythm is nesting**: a 16px-padded card contains a 16px-padded inset panel, which contains 12px-padded rows. The rounded radii step down with the nesting (lg → md → sm), so each interior layer feels visibly contained. Grid usage: 2-column metric grids with `{spacing.md}` (12px) gap; 3-column micro-stat grids with the same gap; 7-column day strips with 8px gap. ## Elevation & Depth **Tonal, not shadowed.** Depth is conveyed entirely by stepping up the surface tone (`background` → `surface` → `surface-alt` → `surface-tonal`). No card carries a box-shadow. The single exception is the floating action button, which uses a soft drop shadow (`0 10px 25px rgba(0,0,0,0.35)`) because it sits over content rather than nested within it. The fixed top fade — a `bg-gradient-to-b from-background to-transparent` 80px-tall scrim across the top of the viewport — is a chrome detail, not an elevation cue: it softens the transition between scrolling content and the header. ## Shapes Geometry is **smooth-cornered rectangles**, never circles (except the dot-badges and the pill chips) and never sharp. The radius scale steps cleanly: - `{rounded.sm}` (8px) — small inline pills, dot badges - `{rounded.md}` (12px) — buttons, list rows, inset chips, icon tiles, tab items - `{rounded.lg}` (16px) — cards, inset panels, search bar - `{rounded.xl}` (20px) — large nested feature panels (calendar day cells) - `{rounded.full}` — pills, progress bars, dot indicators, ring outlines Rule of thumb: **the bigger the surface, the bigger the radius**. Progress bars and chip-shaped badges always go full-pill; everything rectangular stays in the 12–20px range. ## Components ### card The primary surface — `{colors.surface}` fill, no border, no shadow, 16px padding, `{rounded.lg}` corners. ```html

[Section title]

[Supporting line]

[Filter]
``` ### card-inset A second tonal layer used *inside* a card to group a self-contained block (a chart, a macro stack, a water grid). Same radius, same padding, but `{colors.surface-alt}` fill so it nests visibly. ```html
``` ### Composition recipe — stat card A stat card is built by composing primitives. Top row: an `icon-tile` (`{colors.surface-tonal}` fill, chart-color glyph) on the left, a `badge-pill` on the right. Bottom block: `{typography.numeral-lg}` value with `{typography.body-md}` caption beneath, separated by 12px from the top row. ### button-primary Saturated teal pill-rectangle, dark on-primary text. Used for committed CTAs (Start, Submit). ```html ``` ### button-secondary The workhorse. Tonal-teal fill that reads as a quiet pill on the page; carries an optional leading icon. Most "Edit", "Filter", "View", "Add" buttons use this. ```html ``` **Tonal recipe — soft button on a tonal-card:** for an inline button sitting *inside* an already-tonal card, swap to `bg-muted` (surface-alt) instead of `bg-secondary` so it doesn't compete with the card's tonal layer. ### button-icon 44px square `{colors.surface}` tile with a single 24px icon. Used in the top app bar for back / bell / settings / calendar actions. ```html ``` ### fab (floating action button) A 56px primary-teal square with a 28px icon, drop-shadowed and floated above content (typically `bottom-24 right-4` to clear the tab bar). ```html ``` ### input-text Pill-rectangle search field on `{colors.surface-alt}`, leading magnifier icon, muted-foreground placeholder. No focus ring is shown in source — when needed, use `{colors.primary}` ring at 1px. ```html

[Placeholder]

``` ### chip / chip-active Small pill conveying a metadata pair (label + value) or a state. Inactive chip sits on `{colors.surface-alt}`; active flips to `{colors.surface-tonal}` with brighter text. ```html
[Label] [Value]
``` ### badge-pill / badge-circle `badge-pill` is a small caption pill, often holding a counter (`2/7`) or status tag. `badge-circle` is the 8px solid color dot — used as a categorical legend marker, a day-state indicator below a calendar number, etc. The dot color is always a chart-color, NEVER a chrome tone. ```html ``` ### avatar 40px rounded square (`{rounded.md}`), `object-cover`, no ring. Sits inside a 2px-padded card frame in the header. ### list-row A row inside a card, fill `{colors.surface-alt}`, `{rounded.md}`, 12px padding, 12px gap. Left: optional icon-tile or text. Right: trailing `caret-right` icon or a numeric value. ```html

[Row title]

[Row metadata]

``` ### icon-tile A 44px `{rounded.md}` square in `{colors.surface-tonal}` holding a 24px filled phosphor icon tinted with a chart color. **This is the categorical signature** — every metric category gets a fixed chart color, and the tile makes the color glow softly against the tonal background. ```html
``` ### progress-bar 12px-tall full-pill bar. Track is `{colors.surface-alt}` (or `{colors.surface}` when nested inside a tonal panel); fill is a chart-color matching the metric category. No animation specified. ```html
``` ### progress-ring A 128px circular gauge built from layered border tricks: outer ring `{colors.surface-alt}`, progress arc `{colors.primary}` (or chart-color) with two sides masked to track color, inner disk `{colors.surface}` for the typographic center. Center holds a large numeral and a "% of goal" caption. ### top-app-bar A flat header — no fill, no border. Greeting/eyebrow caption + page-title `headline-lg` on the left; one or two `button-icon`s on the right. A `bg-gradient-to-b from-background to-transparent` 80px scrim is fixed at the very top to soften scroll. ### tab-bar Fixed bottom nav, `{colors.background}` fill, 1px `{colors.border}` top border. Four equal grid cells. Active item: `tab-item-active` (tonal-pill background with `{colors.primary}` icon and label). Inactive: transparent with muted-foreground icon and label. ```html ``` ## Iconography **Phosphor (`ph`)**, fill variant, used at 16/20/24/28px. The fill style is mandatory — line variants would not carry enough visual weight against the dark surfaces and would break the categorical color system (filled glyphs read as colored shapes; line glyphs read as outlines). **Phosphor variant-name quirk: the "regular" variant has NO suffix.** Phosphor's variants (`bold`, `fill`, `light`, `thin`, `duotone`) are appended as suffixes; the "regular" weight is the bare name with no suffix. Never write `ph:user-regular` — that icon does not exist and will render as a missing glyph. Write `ph:user`. Since this aesthetic is fill-default, this rarely matters, but if a future implementer needs a regular-weight icon for any reason, omit the suffix entirely. Active vs inactive in the tab bar is conveyed by **color and a tonal background pill**, not by a variant swap — both states use `-fill` icons. This is intentional: the categorical palette depends on every glyph being a solid shape. The implementer picks brief-appropriate phosphor icon names. Never bake icon-name choices into tokens. ## Illustration & Imagery **Note**: no illustrative imagery in source HTML — only a single rounded-square user avatar photo. This section is *inferred* from the aesthetic's type, color, and shape language, with the avatar treatment extracted directly. Treat illustration guidance as a starting point. **Style / Technique**: this aesthetic is fundamentally **iconographic and data-driven, not illustrative**. The visual identity comes from filled phosphor glyphs inside tonal tiles, progress geometry, and chart bars — not from rendered scenes. If a future brief requires illustrative content, lean toward **flat 2D vector with no shading**, geometric and schematic, in the spirit of dashboard / monitoring UIs. Avoid anything organic, painterly, or character-driven. **Palette**: limit any illustration to 3–4 colors drawn exclusively from the chart palette (`{colors.chart-1}` through `{colors.chart-5}`) over a `{colors.surface-alt}` or `{colors.surface}` background. Never introduce new hues; the categorical palette IS the illustration palette. **Edge treatment**: no outlines. Filled solid shapes only. If a stroke is unavoidable, 1.5–2px in the same color as the fill at higher luminance. **Shading & light**: pure flat. No gradients, no soft shadows, no inner glow. Volume is suggested only by overlapping flat shapes. **Composition & framing**: schematic, centered, generous negative space inside the container. Subjects sit comfortably inside the frame — never bleed. **Background within the illustration**: matches the host container (`{colors.surface}` or `{colors.surface-alt}`) — no separate illustration backplate. **Container styling**: rounded-`{rounded.lg}` (16px) frame, no border, no shadow, surface-alt fill, 16px padding around the artwork — identical to a `card-inset`. **CSS treatment on ``**: `object-cover`, no `mix-blend-mode`, no opacity reduction, no filter. The avatar in source uses `class="size-10 rounded-xl object-cover"` — preserve that recipe for any user photo. **Box-shadow on the image or its frame**: none. Images sit flat on the surface, identical to cards. **Aspect ratio rule**: avatars are 1:1 in a `{rounded.md}` square. Hero / content imagery, if any, prefers 1:1 or 4:3 inside a `{rounded.lg}` frame; do not crop to wide cinematic ratios — they fight the rounded-rect rhythm. **Anti-references**: NOT 3D, NOT claymation, NOT photoreal, NOT pastel, NOT painterly, NOT hand-drawn, NOT character-driven, NOT outlined cartoon, NOT gradient-rich. **Style recipe prompt**: *Flat 2D vector illustration of [SUBJECT], rendered as solid filled geometric shapes with no outlines, no gradients, and no shading. Limited to 3–4 colors drawn from a categorical data palette: bright teal, vibrant blue, soft violet, warm amber, coral pink. Background is a deep teal-black (#0F1E1B). Schematic, dashboard-app aesthetic — every element a clean filled shape, no texture, no realism, no character work. Centered composition with generous negative space. Visually adjacent to phosphor-fill iconography scaled up.* For most briefs in this aesthetic, **prefer iconography and data visualization over illustration** — a well-chosen filled phosphor icon inside a tonal `icon-tile` carries more of the aesthetic identity than any custom illustration would. ## Hierarchy & Emphasis What gets weight, in order: 1. **Large numerals** in semibold near-white — the loudest thing on any screen 2. **Saturated chart colors** as glyph tints and progress fills — second loudest 3. **Section titles** in `headline-md` semibold 4. **Tonal-pill buttons and chips** — quiet but visible 5. **Body and metadata** in muted-foreground — whispers Rules: - The primary teal is reserved for *commitment moments*: primary CTAs, the active tab, headline progress fills. Don't spend it on decoration. - Categorical chart colors are *always* tied to a metric category — never decorative. If a color appears, it means "this is the X category". - Eyebrow captions sit above page titles in muted-foreground at 14px to give the headline room without competing. ## Distinctive Details 1. **Tonal nesting with stepped radii.** A `{rounded.lg}` card holds a `{rounded.lg}` inset panel that holds `{rounded.md}` rows that hold `{rounded.full}` progress bars. Each layer is a distinct surface tone, and the radius reduction tracks the nesting depth — the screen has visible "rooms inside rooms". 2. **Categorical icon-tile system.** The 44px tonal-teal square holding a chart-color filled phosphor icon is the recurring unit of identity. Every metric — steps, calories, sleep, hydration, workout type, meal type — is presented through this tile, and the chart color stays glued to its meaning across screens. 3. **Pill-tagged data pairs.** Small inline `chip`s like `[Avg] [72]` or `[Today] [8,420]` — a muted-foreground label and a foreground value packed into one full-radius pill — appear repeatedly as in-card metadata. They're the design's substitute for tables. ## Do's and Don'ts ### Do - Use the four-step tonal stack (background → surface → surface-alt → surface-tonal) for all chrome depth. - Reserve `{colors.primary}` for committed actions, the active tab, and headline progress. - Tie every chart color to a fixed category and reuse it everywhere that category appears. - Compose stat cards as: icon-tile + corner badge-pill, then large numeral + caption beneath. - Use phosphor `-fill` icons exclusively, sized 16/20/24/28. - Keep buttons rectangular at `{rounded.md}`; reserve `{rounded.full}` for chips, badges, dots, and progress bars. - Set negative tracking (`tracking-tight`) on every numeral and headline. ### Don't - Don't fill chrome surfaces with chart colors (no amber cards, no violet buttons). - Don't add box-shadows to cards — depth is tonal, not lifted. The FAB is the only exception. - Don't introduce a third tier of foreground gray between `on-surface` and `on-surface-variant`. - Don't use line-variant phosphor icons; the categorical color system requires filled glyphs. - Don't write `ph:[name]-regular` — phosphor's regular variant is the bare name with no suffix. - Don't use uppercase or tracked-out labels — this aesthetic is sentence-case throughout. - Don't add custom illustrations when an icon-tile carries the meaning; iconography is the native language. - Don't put primary-teal on more than one element per visible screen region — it loses its signal.