---
version: alpha
name: iCare
description: Cinematic 3D dreamworld interface — a near-black canvas pierced by soft luminous teal and warm amber light, oversized display type set tight, glassy translucent overlays floating over a real-time rendered world. Atmosphere over chrome; the UI dissolves so the world can breathe.
colors:
  # Canvas + ink
  background: "#06080d"
  surface: "#0d111a"
  surface-soft: "#141a26"
  ink: "#f4f6fb"
  ink-secondary: "#a3acc2"
  ink-muted: "#6c7589"

  # Luminous accents — dream light
  primary: "#5fe3d0"        # luminous teal
  primary-soft: "#1f3b3a"   # teal flattened low over canvas
  amber: "#ffb35c"          # warm dream amber
  violet: "#9d8cff"         # twilight violet glow

  # Glass overlay (flattened over near-black canvas)
  glass: "#11151f"
  glass-border: "#262d3c"

  # Interactive
  link: "#5fe3d0"
  focus-ring: "#7fe9da"
  hairline: "#1c2230"

  # On-color
  on-primary: "#06080d"
  on-ink: "#06080d"

typography:
  display-hero:
    fontFamily: "Sora, Inter, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -2.5px
  display-large:
    fontFamily: "Sora, Inter, sans-serif"
    fontSize: 52px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Sora, Inter, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  card-title:
    fontFamily: "Sora, Inter, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.focus-ring}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.glass-border}"

  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 5px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.hairline}"

  card-glass:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 28px
    borderColor: "{colors.glass-border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.hairline}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.glass}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.hairline}"
---

# iCare Design System

## Overview

iCare is a real-time 3D dreamworld adventure from World Labs, rendered in the browser with the Spark 2.0 engine. Its interface design follows from a single conviction: the world is the hero, and the UI exists only to frame and guide. The canvas is a near-black `{colors.background}` — not pure black, but a deep blue-tinted void that reads as nighttime atmosphere rather than dead screen. Against it, content floats in translucent glass panels and luminous accent light, the way a heads-up display hovers over a rendered scene.

The accent system is built from "dream light" rather than brand swatches. A luminous teal (`{colors.primary}`) anchors interaction and links, joined by a warm amber (`{colors.amber}`) and a twilight violet (`{colors.violet}`) that echo the atmospheric gradients of a 3D sky. These colors glow — they are used at high saturation against the dark canvas so they appear self-illuminated, like light sources inside the world rather than paint on a surface.

Typography pairs a tightly-tracked geometric display face (Sora) for oversized headlines with a clean humanist sans (Inter) for reading text and UI. Headlines compress to -2.5px tracking at hero scale, giving the marketing copy a cinematic, title-card weight. A mono label face (JetBrains Mono) handles uppercase technical tags — engine names, build labels, status pills — connecting the marketing surface to the underlying real-time tech.

**Key Characteristics:**
- Near-black blue-tinted canvas (`{colors.background}`) as immersive 3D backdrop, not flat UI gray
- Self-illuminated accent light: luminous teal, warm amber, twilight violet glowing against dark
- Glass overlay panels (`{colors.glass}` with `{colors.glass-border}`) floating over the rendered world
- Oversized display type (Sora) with tight negative tracking for cinematic title-card headlines
- Mono uppercase labels for engine/build/status tags
- Contrast-safe by design: bright `{colors.ink}` reads cleanly on every dark surface
- Pill-shaped primary CTA in luminous teal — the single clear call to action

## Colors

### Canvas & Ink
- **Void** (`{colors.background}`): The deep blue-black canvas. Reads as atmosphere, never as flat UI.
- **Surface** (`{colors.surface}`): Raised panels and cards, one step up from the void.
- **Surface Soft** (`{colors.surface-soft}`): Secondary panels, inset regions.
- **Ink** (`{colors.ink}`): Primary text, near-white with a cool cast.
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Dream Light Accents
- **Luminous Teal** (`{colors.primary}`): Primary CTA, links, focus, active states. The signal color.
- **Teal Soft** (`{colors.primary-soft}`): Low-saturation teal for badge fills over the canvas.
- **Dream Amber** (`{colors.amber}`): Warm secondary accent, atmospheric highlights.
- **Twilight Violet** (`{colors.violet}`): Tertiary glow, gradient depth.

### Glass & Hairlines
- **Glass** (`{colors.glass}`): Translucent overlay panels flattened over the void.
- **Glass Border** (`{colors.glass-border}`): The thin lit edge of glass panels.
- **Hairline** (`{colors.hairline}`): Dividers, card outlines, subtle separation.

### Interactive
- **Link** (`{colors.link}`): Luminous teal links.
- **Focus Ring** (`{colors.focus-ring}`): Brighter teal for keyboard focus and hover.

## Typography

### Font Family
- **Display**: `Sora`, with fallbacks: `Inter, Helvetica, Arial, sans-serif`
- **Text/UI**: `Inter`, with fallbacks: `Helvetica, Arial, sans-serif`
- **Mono**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 72px cinematic title-card headline |
| `display-large` | Secondary hero, large feature titles |
| `section-heading` | Section titles |
| `card-title` | Card and panel headings |
| `body-large` | Lead paragraphs, feature copy |
| `body` | Standard reading and UI text |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, fine print |
| `label-mono` | Uppercase technical tags, status pills |

### Principles
- **Tight display, relaxed body**: Sora compresses to -2.5px at hero scale; Inter body stays at neutral tracking for readability.
- **Mono as tech voice**: Uppercase JetBrains Mono with +1.2px tracking marks engine names, build labels, and status — the product's technical register surfacing into marketing.
- **Two-weight discipline**: 400 for reading, 500–600 for headings and UI emphasis. No heavy black weights.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large cinematic jumps (`{spacing.3xl}`–`{spacing.4xl}`) for full-bleed sections that let the rendered world breathe.

### Grid & Container
- Full-bleed 3D canvas behind content; UI overlays constrained to ~1200px max width
- Hero: oversized centered or left-aligned title card floating over the world
- Glass panels anchored to corners and edges rather than filling the frame

### Whitespace Philosophy
- **The world is the whitespace**: Empty space is the rendered scene, not blank background. UI clusters tightly so the world stays visible.
- **Float, don't fill**: Glass overlays occupy minimal footprint, letting atmosphere dominate.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Canvas (0) | No surface | The rendered 3D world |
| Hairline (1) | 1px `{colors.hairline}` | Cards, dividers |
| Glass (2) | `{colors.glass}` + 1px `{colors.glass-border}` + backdrop blur | Floating overlay panels |
| Glow (3) | Accent color with soft outer glow | Primary CTA, active focus |

**Depth Philosophy**: Depth comes from luminosity and translucency, not drop shadows. Panels feel like lit glass hovering in front of a scene; accents feel like light sources. The brighter and more saturated an element, the closer it reads to the viewer.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed canvas |
| `sm` | 6px | Small chips, inline elements |
| `md` | 10px | Inputs, compact controls |
| `lg` | 16px | Cards, panels |
| `xl` | 24px | Glass overlay panels |
| `pill` | 9999px | Buttons, badges, status pills |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Luminous teal pill, dark text. The single clear CTA.
- **`button-secondary`** — Glass surface with lit border, white text.

### Badges
- **`badge`** — Soft teal fill, teal mono uppercase label. Engine/build/status tags.

### Cards
- **`card`** — Surface panel with hairline outline.
- **`card-glass`** — Translucent floating panel with lit glass border, larger radius.

### Inputs
- **`input`** — Surface fill, hairline border; focus brightens the border to `{colors.focus-ring}`.

### Navigation
- **`nav-bar`** — Glass header floating over the canvas, hairline bottom edge.

## Do's and Don'ts

### Do
- Keep the canvas a deep blue-black (`{colors.background}`), not pure black or gray
- Use accent colors at high saturation so they read as self-illuminated light
- Float UI in glass panels; let the rendered world dominate the frame
- Use tight negative tracking on Sora display headlines
- Reserve luminous teal for the primary action and links
- Use mono uppercase only for technical tags

### Don't
- Don't fill the screen with chrome — the world is the design
- Don't use drop shadows for depth; use luminosity and translucency
- Don't desaturate accents into dull pastels — they must glow
- Don't set body text in Sora — Inter for reading
- Don't introduce light/white backgrounds that break the immersive dark mood

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, glass panels full-width |
| Tablet | 600–1024px | 2-column feature grids |
| Desktop | 1024–1400px | Full layout, floating corner overlays |
| Large | >1400px | Centered, generous margins, full-bleed canvas |

### Collapsing Strategy
- Hero: 72px display scales down while preserving proportional negative tracking
- Glass overlays: corner-anchored → full-width stacked on mobile
- Feature grids: multi-column → single column
- Nav: floating glass bar → compact menu

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable taps
- Nav links spaced for touch on the glass bar

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Void `{colors.background}`
- Primary CTA: Luminous Teal `{colors.primary}` with dark text `{colors.on-primary}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Glass panel: `{colors.glass}` with `{colors.glass-border}` border
- Link / focus: Teal `{colors.primary}` / `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero over a dark 3D canvas. Headline at 72px Sora weight 600, letter-spacing -2.5px, color `{colors.ink}`. Subtitle at 20px Inter weight 400, color `{colors.ink-secondary}`. Luminous teal pill CTA (`{colors.primary}`, dark text, 9999px radius, 14px 28px padding) beside a glass ghost button (`{colors.glass}`, 1px `{colors.glass-border}`)."
- "Design a glass overlay panel: `{colors.glass}` background, 1px `{colors.glass-border}`, 24px radius, backdrop blur, 28px padding. Title 24px Sora weight 500, body 16px Inter `{colors.ink-secondary}`."
- "Build a status pill: `{colors.primary-soft}` fill, `{colors.primary}` text, 12px JetBrains Mono uppercase +1.2px tracking, 9999px radius."

### Iteration Guide
1. The canvas is the rendered world — keep it deep blue-black and minimal
2. Accents must glow: high saturation teal/amber/violet against the dark
3. Sora for display with tight tracking, Inter for everything readable
4. Depth = translucency + luminosity, never drop shadows
5. Teal is the single signal color — one clear CTA per view

---

## 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 iCare. Brand names and trademarks belong to their respective owners.