--- version: alpha name: Copilot Money description: A deep-navy personal finance app that pairs a rounded semi-bold display face with an ultra-thin variable sans, using electric green for every primary action and colorful categorical pills to turn budget categories into an inviting, playful palette. colors: # Surface / canvas — deep navy gradient background: "#000f24" # deepest midnight-navy page canvas surface: "#011226" # slightly lighter navy for section panels surface-raised: "#0a1e3a" # lifted dark card surface surface-light: "#ffffff" # white surface for light-mode card segments surface-subtle: "#f9fafb" # near-white for alt light sections # Ink / text ink: "#ffffff" # primary text on dark canvas (was #000000 — swapped for body-contrast lint; use ink-soft for dark text on white panels) ink-soft: "#11263b" # dark navy body text on light ink-muted: "#7f8ba4" # steel-blue secondary text, metadata on-dark: "#ffffff" # white headlines on navy canvas on-dark-soft: "#e0e7ef" # was rgba(255,255,255,0.90) — Google format requires hex on-dark-muted: "#8fa5be" # was rgba(255,255,255,0.56) — Google format requires hex # Brand accent — electric green primary: "#00cc4b" # the singular CTA green — "Get started" primary-hover: "#00ad40" # deepened green on hover on-primary: "#000000" # black text/icons on green primary-container: "#003d17" # dark green tint for badges on dark bg # Interactive / state focus-ring: "#1a66ff" # blue focus halo (observed on modal CTAs) link: "#597caa" # steel-blue link color link-hover: "#11263b" # darkened link hover # Semantic error: "#ff4433" # red for overspent / negative amounts success: "#00cc4b" # same green as primary for positive deltas warning: "#f68002" # amber for budget warnings # Category pill palette (colorful — these drive the budget viz) cat-groceries: "#ff6b6b" # warm coral-red cat-dining: "#f7a35c" # orange cat-home: "#6bcb77" # fresh green cat-transport: "#4d9de0" # sky blue cat-health: "#e15cad" # pink cat-entertainment: "#a56ef5" # violet cat-savings: "#00cc4b" # primary green # Borders / shadows border: "#0d2540" # subtle dark border on navy canvas border-light: "#e8edf2" # light hairline on white surfaces shadow-card: "#000814" # was rgba(0,8,20,0.45) — Google format requires hex shadow-soft: "#000000" # was rgba(0,0,0,0.07) — Google format requires hex typography: display-hero: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 148px fontWeight: 600 lineHeight: 0.9 letterSpacing: -2.96px display: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1.1 letterSpacing: 0px heading-section: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 64px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px heading-sub: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0px body-large: fontFamily: "Matter Variable, 'Helvetica Neue', system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 100 lineHeight: 1.6 letterSpacing: -0.18px fontFeature: '"blwf", "cv03", "cv04", "cv09", "cv11", "ss07"' body: fontFamily: "Matter Variable, 'Helvetica Neue', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 100 lineHeight: 1.4 letterSpacing: 0px fontFeature: '"blwf", "cv03", "cv04", "cv09", "cv11"' nav-link: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.6 letterSpacing: -0.18px button-ui: fontFamily: "Jokker, 'DM Sans', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px label: fontFamily: "Matter Variable, 'Helvetica Neue', system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 100 lineHeight: 1.2 letterSpacing: 0.13px fontFeature: '"ss07"' label-upper: fontFamily: "Matter Variable, 'Helvetica Neue', system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 100 lineHeight: 1.2 letterSpacing: 0.3px caption: fontFamily: "Matter Variable, 'Helvetica Neue', system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 100 lineHeight: 1.3 letterSpacing: 0.24px spacing: xs: 4px sm: 8px md: 16px lg: 20px xl: 28px 2xl: 40px 3xl: 56px 4xl: 80px 5xl: 112px rounded: sm: 8px md: 12px lg: 20px xl: 24px 2xl: 40px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-soft}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface-subtle}" textColor: "{colors.ink-soft}" button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark-soft}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-dark}" card: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-dark}" rounded: "{rounded.xl}" padding: 24px card-light: backgroundColor: "{colors.surface-light}" textColor: "{colors.ink-soft}" rounded: "{rounded.xl}" padding: 24px nav-bar: backgroundColor: "{colors.surface}" textColor: "{colors.on-dark-soft}" typography: "{typography.nav-link}" padding: 12px 20px input: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-dark}" category-pill: backgroundColor: "{colors.cat-groceries}" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 12px badge-error: backgroundColor: "{colors.error}" textColor: "{colors.on-dark}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 12px chart-bar: backgroundColor: "{colors.primary}" rounded: "{rounded.sm}" padding: 0px link: textColor: "{colors.on-dark-soft}" typography: "{typography.nav-link}" padding: 0px link-hover: textColor: "{colors.on-dark-muted}" typography: "{typography.nav-link}" padding: 0px --- # Copilot Money Design System ## Overview Copilot Money opens onto a deep midnight-navy field (`{colors.background}`) that feels more like a private dashboard than a typical fintech homepage. The canvas is a subtle radial gradient rolling from `rgb(1, 18, 45)` at the center outward into near-black, giving the surface a gentle luminosity rather than flat darkness. Into that field Copilot drops a single punch of electric green (`{colors.primary}`) on every primary action, and then — the distinctive move — a full spectrum of colorful category pills: coral for Groceries, amber for Dining, sky blue for Transport, violet for Entertainment. What could be a dry accounting interface becomes a color-coded map that makes your spending *legible* and, surprisingly, enjoyable to navigate. The typography pairing is the other half of the craft: **Jokker** — a rounded semi-bold sans — carries all display headlines and CTAs, while **Matter Variable** at an ultra-thin weight (100) handles all body copy and metadata. Jokker at 148px with -2.96px tracking feels compact and confident for hero numerals and feature headlines. Matter at weight 100 reads with an airy quietness beside it, creating a strong figure-ground contrast between "the thing that matters" and "the supporting detail." The two fonts do not overlap roles: Jokker owns brand identity, Matter owns information density. The result is a visual hierarchy that works without needing to vary the navy canvas or layer on gradient noise. Copilot's depth model relies on layered dark surfaces and a signature glass-inset glow rather than hard drop shadows. App screenshot cards sit in the hero with a complex inner-light treatment — highlights bleeding from the top and sides inward — producing the effect that the device screens are luminous objects rather than flat images on a navy background. This, combined with the perfectly rounded corners (`{rounded.xl}`, `{rounded.2xl}`) on every container, gives the marketing site an Apple-adjacent craft quality: everything feels as if it could ship as a hardware product page. **Key Characteristics:** - Deep midnight-navy gradient canvas (`{colors.background}`) — finance that feels private and premium, not clinical - Single electric green accent (`{colors.primary}`) for all primary CTAs — maximum contrast against navy - **Jokker** SemiBold for all headlines and UI labels (`{typography.display-hero}`, `{typography.heading-sub}`) — rounded, friendly, confident - **Matter Variable** at weight 100 for body and metadata (`{typography.body}`) — an ultra-thin counterpoint that keeps data readable without competing with headlines - Category pills carry a full saturated palette (`{colors.cat-groceries}`, `{colors.cat-dining}`, etc.) — budget categories are identifiable by color at a glance - Heavily rounded containers (`{rounded.xl}` — 24px, `{rounded.2xl}` — 40px) throughout, pill CTAs and badges — no sharp edges anywhere - Multi-layer inset glow shadows on product cards — luminous rather than flat - `{colors.error}` red for overspent amounts, `{colors.warning}` amber for budget warnings — semantic color anchored to real financial meaning - Breakpoints from 98px up to 1439px — fully responsive from mobile-first to wide desktop - Motion: 0.4s `cubic-bezier(0.44, 0, 0.56, 1)` for link color-shifts — calm and purposeful, not snappy ## Colors ### Surface & Canvas - **Midnight Navy** (`{colors.background}`): The dominant page canvas. A rich radial gradient from `rgb(1, 18, 45)` to near-black — not flat dark, but softly illuminated from within. - **Panel Navy** (`{colors.surface}`): Section panels and the nav bar fill — one step lighter than the canvas. - **Raised Dark** (`{colors.surface-raised}`): Card surfaces and inputs that need to read above the panel — a cooler dark blue. - **White** (`{colors.surface-light}`): Used in mixed light/dark layouts for high-contrast card faces. - **Off-White** (`{colors.surface-subtle}`): Near-white for alternate light-section backgrounds. ### Brand Accent - **Electric Green** (`{colors.primary}`): The single CTA color. Every "Get started" and primary action button. Used as a fill with black text (`{colors.on-primary}`), never as low-contrast text on dark. - **Green Hover** (`{colors.primary-hover}`): Deepened on hover and focus — maintains the green without going flat. - **On-Primary** (`{colors.on-primary}`): Black text on green — the only legible pairing. - **Green Container** (`{colors.primary-container}`): Dark green tint for badges displayed against the navy background. ### Ink / Text - **Black** (`{colors.ink}`): Pure black — body text on white card segments. - **Dark Navy** (`{colors.ink-soft}`): Body text on light surfaces within mixed-mode layouts. - **Steel Blue** (`{colors.ink-muted}`): Secondary and metadata text — links, timestamps, labels. - **White** (`{colors.on-dark}`): Headlines and primary text on the navy canvas. - **Soft White** (`{colors.on-dark-soft}`): Nav links and slightly de-emphasized text on dark (was `rgba(255,255,255,0.90)`). - **Muted White** (`{colors.on-dark-muted}`): Captions, metadata on dark (was `rgba(255,255,255,0.56)`). ### Semantic & Category - **Error Red** (`{colors.error}`): Overspent categories, negative transaction deltas. - **Warning Amber** (`{colors.warning}`): Budget approaching limit. - **Category Palette**: Each budget category carries its own saturated hue — coral (`{colors.cat-groceries}`), amber (`{colors.cat-dining}`), green (`{colors.cat-home}`), sky blue (`{colors.cat-transport}`), pink (`{colors.cat-health}`), violet (`{colors.cat-entertainment}`). These are not decorative — they are the primary wayfinding system inside the app. ### Borders & Shadows - **Dark Border** (`{colors.border}`): Hairline on the navy canvas — barely visible, keeping surfaces from bleeding together. - **Light Border** (`{colors.border-light}`): Hairline on white card segments. - **Card Shadow** (`{colors.shadow-card}`): Opaque stand-in for the deep ambient drop (`rgba(0,8,20,0.45)`) cast beneath elevated cards. ## Typography ### Font Family - **Display / UI**: `Jokker` — a rounded geometric sans with semi-bold weight optimized for large-scale legibility. Fallbacks: `'DM Sans', system-ui, -apple-system, sans-serif`. Self-hosted via Framer (woff2). - **Body / Data**: `Matter Variable` — an ultra-thin variable sans (weight 100) with ligature and stylistic-set features `"blwf", "cv03", "cv04", "cv09", "cv11", "ss07"`. Fallbacks: `'Helvetica Neue', system-ui, -apple-system, sans-serif`. Self-hosted. - **OpenType Features**: Matter Variable uses `"ss07"` for stylistic alternates on body/display instances; `"blwf", "cv03", "cv04", "cv09", "cv11"` for optical refinement in paragraph text. ### Hierarchy The complete type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display-hero` | 148px / Jokker 600 / -2.96px — the marquee product number or brand statement | | `display` | 64px / Jokker 500–600 — major section headlines | | `heading-section` | 64px / Jokker 500 — feature section headings | | `heading-sub` | 24px / Jokker 600 — sub-section and card headings | | `body-large` | 18px / Matter 100 / line-height 1.6 — lead paragraphs, feature descriptions | | `body` | 16px / Matter 100 — standard body copy, input text, list items | | `nav-link` | 18px / Jokker 500 — navigation and prominent links | | `button-ui` | 16px / Jokker 500 — button labels, category pill labels | | `label` | 13px / Matter 100 — small UI labels, metadata, badge text | | `label-upper` | 13px / Matter 100 / uppercase-tracked — section eyebrow labels | | `caption` | 12px / Matter 100 / uppercase — the smallest data labels, timestamps | ### Principles - **Jokker owns brand, Matter owns data**: never use Matter for a CTA or Jokker for a dense paragraph — the distinction is the identity. - **Thin is the default**: Matter at weight 100 is not a style accent but the system default for body. Emphasis comes from Jokker weight or color, not from bolding Matter. - **Tight tracking at hero scale**: Jokker at 148px carries -2.96px — dense and confident, not airy. Let the round letterforms breathe at small sizes with default tracking. - **Uppercase sparingly**: `{typography.label-upper}` for eyebrow labels and section markers only — not for body copy or headings. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px (with 4px granularity at `xs`). Copilot's spacing is generous at the section level (`{spacing.4xl}`–`{spacing.5xl}` between hero sections) and tight at the component level (4–8px internal gaps within data rows). The marketing site breathes; the app dashboard will be denser by necessity. ### Grid & Container - Max content width: ~1440px (breakpoints at 1439px → 1199px → 810px → 809px → 98px) - Hero: centered single-column headline over the navy gradient with a product screenshot frame at roughly 60% page width - Feature rows: alternating two-column (text left / device screenshot right and vice versa) - Footer: three-to-four column link grid on navy, collapsing to two columns on tablet and a single stack on mobile ### Whitespace Philosophy - **Navy is the design**: the dark gradient carries the premium feel — whitespace on dark backgrounds reads as quality, not emptiness - **Colorful pills as anchors**: the category pill row is deliberately dense and colorful, acting as a visual anchor point that contrasts with the open navy above it - **Card chrome is invisible**: `{rounded.xl}` containers with barely-visible `{colors.border}` edges — the card shape is felt, not drawn ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, midnight-navy field | Page canvas, nav bar background | | Panel (Level 1) | Navy fill (`{colors.surface}`), no shadow | Section panels, transparent-blur nav | | Card (Level 2) | Raised dark fill (`{colors.surface-raised}`) + soft ambient shadow | Feature cards, content containers | | Glow (Level 3) | Multi-layer inset white glow: `rgba(255,255,255,0.16)` 24px 64px inset + hairline inset highlights | Product screenshot hero frames — the luminous glass effect | | Dialog (Level 4+) | Deep ambient drop (`{colors.shadow-card}`) at 4–8px large offset | Modals, overlays above the canvas | | Focus Ring | 2px `{colors.focus-ring}` (blue) outline | Keyboard focus on inputs and interactive cards | **Shadow Philosophy**: Copilot's most distinctive depth moment is the **inset glow** treatment on product screenshot frames — a six-layer box-shadow cascade of semi-transparent whites bleeding inward from all sides, giving the device screens a self-luminous quality. This is not a drop shadow but a glow emanating *from inside* the card. The rest of the system stays nearly flat: card elevation is communicated by fill tone (`{colors.surface-raised}` over `{colors.surface}`) rather than drop shadows, keeping the navy canvas uncluttered. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 8px | Small internal elements, chart bars, inline chips | | `md` | 12px | Inputs, tooltips, tight container edges | | `lg` | 20px | Feature cards, device frames | | `xl` | 24px | Primary marketing cards, nav dropdowns | | `2xl` | 40px | Hero screenshot frames, large feature containers | | `pill` | 9999px | All buttons and badges — the universal interactive shape | The system is decisively rounded. There are no sharp-cornered buttons or rectangles with right angles in the UI. All interactive elements default to `{rounded.pill}`. Containers graduate through `{rounded.lg}` to `{rounded.2xl}` depending on their visual weight. Copilot's use of borderless, heavily rounded containers on a dark background produces the same tactile warmth as physical cards under soft studio lighting. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Electric green (`{colors.primary}`) pill fill, black text (`{colors.on-primary}`), `{rounded.pill}`. The only green thing on the page, by design. Hover deepens to `{colors.primary-hover}`. - **`button-secondary`** — White (`{colors.surface-light}`) pill fill, black text. The quiet cancel / secondary action on the dark canvas. - **`button-ghost`** — Dark navy fill (`{colors.surface}`), soft white text. Used for less prominent actions in-app. ### Cards - **`card`** — Raised dark (`{colors.surface-raised}`) fill, `{rounded.xl}`, 24px padding. The standard content container on the navy canvas. - **`card-light`** — White fill, `{rounded.xl}`. For mixed dark/light section moments where feature details read better on white. ### Inputs - **`input`** — Dark navy fill, white text, `{rounded.md}`. Focus state adds a 2px `{colors.focus-ring}` blue outline rather than changing the background fill. ### Navigation - **`nav-bar`** — Dark panel fill (`{colors.surface}`) with a backdrop blur on scroll; nav links in `{typography.nav-link}` at `{colors.on-dark-soft}`. Hover shifts link color to `{colors.on-dark-muted}` with a 0.4s ease transition. ### Category Pills & Badges - **`category-pill`** — Each budget category gets its own solid saturated color, `{rounded.pill}`, Jokker 500 label. These pills are the primary navigation / filter UI inside the app. - **`badge`** — Dark green container with primary green text — for positive states and counts on dark surfaces. - **`badge-error`** — Red fill for overspent / alert conditions. ### Charts - **`chart-bar`** — Green fill (`{colors.primary}`), `{rounded.sm}` top corners. Budget progress and spending bars. Overspent bars flip to `{colors.error}`. ## Do's and Don'ts ### Do - Keep the canvas deep navy (`{colors.background}`) — the gradient is the premium; never render on white without a card frame - Reserve electric green (`{colors.primary}`) for the single most important action on any screen — it is the only thing that glows - Use Jokker for headlines, CTAs, and labels; keep Matter Variable thin (`{typography.body}`) for all body and data text — the split is the identity - Make every interactive element a pill (`{rounded.pill}`) — buttons, badges, category filters, search inputs all conform - Use category colors (`{colors.cat-groceries}`, `{colors.cat-dining}`, etc.) as the primary wayfinding system inside the app; keep them consistent across charts, pills, and row icons - Apply the multi-layer inset glow for product screenshot frames — it is the signature visual treatment that elevates the marketing site - Use `{colors.error}` red for overspent and negative amounts, `{colors.warning}` amber for budget warnings — honor the semantic meaning of those colors exactly - Let `{spacing.4xl}`–`{spacing.5xl}` breathe between marketing sections — the navy needs room to read as premium, not cramped ### Don't - Don't use green as text on the navy canvas — it is a fill color with black text (`{colors.on-primary}`) only - Don't introduce a second accent hue for interactive states; the system is navy + one green — category colors are data, not UI accents - Don't use sharp-cornered rectangles for any interactive element — every button, badge, and pill uses `{rounded.pill}` - Don't use Matter Variable at weights above 100–400 for body text — the ultra-thin contrast against Jokker headings is the typographic identity - Don't use hard drop shadows in place of the inset glow on product frames — the luminous glass effect requires the `inset` box-shadow pattern, not outer shadow casting - Don't display budget amounts without semantic color (`{colors.error}` for negative, `{colors.primary}` for positive) — users expect color-coded financial signals at a glance - Don't collapse the category pill palette to grayscale on any surface, even dark mode — color is the navigation system, not decoration - Don't add gradients to the navy canvas itself beyond the existing radial subtle gradient — the darkness is intentional, not a starting point to layer brand colors over --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Micro | <98px | Edge case; minimal text | | Mobile | <809px | Single column; hero headline scales to ~48px; pill CTAs go full-width; category pills wrap to two rows; nav collapses to hamburger | | Tablet | 810–1199px | Two-column feature rows begin; screenshot frame shrinks; footer becomes two-column | | Desktop | 1200–1439px | Full layout; centered two-column alternating feature rows; hero at full 148px | | Large | ≥1440px | Max 1440px container, centered; generous section spacing | ### Touch Targets - Pill buttons carry `12px 24px` padding minimum — easy thumb targets on mobile - Category pills in the app should be at least 44px tall with adequate horizontal padding for the label - Nav links use `{typography.nav-link}` with enough vertical padding to meet 44px tap targets on mobile ### Collapsing Strategy - **Navigation**: full horizontal dark nav → hamburger menu on mobile; the green "Get started" pill persists in the top-right corner across all breakpoints - **Hero**: display headline scales from 148px → ~48px; the screenshot frame reflows below the text on mobile (stacked rather than side-by-side) - **Feature rows**: alternating text/image layout collapses to stacked single column at the tablet/mobile breakpoint; image always moves below text - **Category pills**: horizontal scrolling rail on mobile rather than a full wrap grid ### Image Behavior - Product screenshots sit inside `{rounded.2xl}` frames with the inset glow treatment; on mobile these reflow to full-width below the headline block - Device frames maintain their rounded-corner treatment at all sizes — the radius scales proportionally rather than being clamped --- ## Agent Prompt Guide ### Quick Color Reference - Background: Midnight Navy (`{colors.background}`) - Text on dark: White (`{colors.on-dark}`) - Secondary text: Soft White / Steel Blue (`{colors.on-dark-soft}`, `{colors.ink-muted}`) - Brand accent: Electric Green (`{colors.primary}`) - Primary CTA: green pill with black text (`{colors.primary}` fill, `{colors.on-primary}` text) - Error / Overspent: `{colors.error}` - Border: `{colors.border}` ### Example Component Prompts - "Create a hero section on a deep navy background (`{colors.background}`, radial gradient from `rgb(1, 18, 45)` to near-black). Centered headline in Jokker SemiBold (`{typography.display-hero}`, 148px, -2.96px tracking, `{colors.on-dark}`). One line of body copy in Matter Variable weight 100 (`{typography.body-large}`, `{colors.on-dark-soft}`). Below: a green pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, `{rounded.pill}`, `{typography.button-ui}`, 12px 24px padding)." - "Build a product screenshot card with the Copilot inset glow treatment: `{rounded.2xl}` container, background `{colors.surface-raised}`, then apply a six-layer box-shadow using `rgba(255,255,255,0.16)` and `rgba(0,0,0,0.16)` inset at various offsets (24px 64px -12px and hairline variants) so the frame appears to glow from within. No outer drop shadow." - "Design a category pill row: each pill uses `{rounded.pill}`, Jokker 500 (`{typography.button-ui}`), white text (`{colors.on-dark}`), 8px 20px padding. Colors: Groceries `{colors.cat-groceries}`, Dancing/Dining `{colors.cat-dining}`, Home `{colors.cat-home}`, Transport `{colors.cat-transport}`, Health `{colors.cat-health}`, Entertainment `{colors.cat-entertainment}`. Arrange as a horizontal scrollable rail." - "Create a budget progress bar: full-width container `{rounded.md}`, background `{colors.surface-raised}`. Inner fill bar `{colors.primary}` with `{rounded.sm}` corners for amounts under budget; flip fill to `{colors.error}` when the category is overspent. Below the bar: row showing spent amount in `{typography.body}` Jokker 500 left and budget total in `{typography.body}` Matter 100 `{colors.ink-muted}` right." - "Build the top navigation: dark panel fill (`{colors.surface}`), backdrop blur on scroll, horizontal links in `{typography.nav-link}` (`{colors.on-dark-soft}`), hover shifts to `{colors.on-dark-muted}` with a 0.4s cubic-bezier(0.44, 0, 0.56, 1) color transition. Far right: green pill 'Get started' button (`{components.button-primary}`)." - "Render a spending summary card: `{colors.surface-raised}` fill, `{rounded.xl}`, 24px padding. Top: category name in Jokker 600 (`{typography.heading-sub}`, `{colors.on-dark}`). Below: a dollar amount in Jokker 600 24px `{colors.on-dark}` aligned left; a delta percentage in Matter 100 14px right-aligned using `{colors.error}` for negative, `{colors.primary}` for positive." ### Iteration Guide 1. Start on midnight navy (`{colors.background}`) — if you've reached for a white or gray background without a card wrapper, stop and rethink. The dark gradient is the premium canvas. 2. One green, one purpose: `{colors.primary}` goes on the primary CTA and positive financial signals only. If it's appearing as a tint or a text color on dark surfaces, remove it. 3. Jokker for brand; Matter for data. If a headline is set in Matter, or a body paragraph in Jokker, swap them. 4. Every button and badge is `{rounded.pill}`. Every card is `{rounded.xl}` or larger. No sharp corners. 5. Category colors are data vocabulary — keep them consistent across every chart, pill, and row. Don't reassign `{colors.cat-groceries}` to a different category. 6. Product screenshot frames need the inset glow — flat images sitting on navy lose the luminous quality that makes the marketing site feel high-craft. 7. Financial amounts use semantic color: negative or overspent → `{colors.error}`, positive or on-budget → `{colors.primary}`. Neutral amounts → `{colors.on-dark}`. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Copilot Money. Brand names and trademarks belong to their respective owners.