name: material-dark-design
version: alpha
description: >
  A modern dark health-dashboard: deep indigo-charcoal surfaces (#1A1A24 canvas,
  #252533 cards) with white text and a single iOS-blue voltage (#007AFF) used
  for highlights, the active calendar/chart bars and the one accent "hydration"
  tile. Type pairs Inter (numbers, headings) with DM Sans (body). Generously
  rounded "glass cards" (24px) on a 12-column grid carry soft ambient shadows;
  data is shown via flat CSS bar charts, dot/line plots, a calendar and progress
  rings. Calm, spacious, screen-native — no skeuomorphism, restrained accent use.
colors:
  # Brand
  primary: '#007AFF'           # iOS blue — active bars, highlights, accent tile
  on-primary: '#FFFFFF'
  # Surface
  surface: '#1A1A24'           # app canvas
  surface-card: '#252533'      # glass cards
  surface-well: 'rgba(31,41,55,0.4)' # gray-800/40 inner wells, calendar
  # Text
  on-surface: '#FFFFFF'
  on-surface-secondary: '#9CA3AF' # gray-400 captions/metadata
  on-surface-muted: '#6B7280'     # gray-500 labels
  # Hairlines
  hairline: '#1F2937'          # gray-800 borders/dividers
  # Semantic
  danger: '#EF4444'            # red — pulse card accent, notification dot
  success: '#22C55E'           # green — "Optimal Range" badge
typography:
  display:
    fontFamily: '"Inter", sans-serif'
    fontSize: 36px             # page title (text-4xl)
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  metric:
    fontFamily: '"Inter", sans-serif'
    fontSize: 72px             # big stat numbers (text-6xl/7xl)
    fontWeight: 700
    letterSpacing: -0.03em     # tracking-tighter
  headline:
    fontFamily: '"Inter", sans-serif'
    fontSize: 20px             # card titles
    fontWeight: 700
  body:
    fontFamily: '"DM Sans", sans-serif'
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: '"DM Sans", sans-serif'
    fontSize: 10px
    fontWeight: 700
    letterSpacing: 0.1em       # uppercase eyebrows (tracking-widest)
rounded:
  md: 12px     # rounded-xl small wells, buttons
  lg: 16px     # rounded-2xl inner wells, queue rows
  xl: 24px     # glass-card (rounded-3xl)
  xxl: 32px    # hydration accent tile
  full: 9999px # avatars, pills, icon buttons, bars
spacing:
  # base unit = 4px; 12-col grid with gap-6 (24px)
  sm: 16px
  md: 24px
  lg: 40px
components:
  glass-card:
    background: '{colors.surface-card}'
    rounded: '{rounded.xl}'
    boxShadow: '0 10px 30px -5px rgba(0,0,0,0.3)'
    hoverBorder: '1px solid rgba(0,122,255,0.3)'  # blue glow on hover
  accent-tile:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.xxl}'
    boxShadow: '0 20px 40px rgba(0,122,255,0.3)'  # blue elevation
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    boxShadow: '0 8px 20px rgba(0,122,255,0.2)'
    active: 'scale 0.95'
  icon-button:
    background: 'rgba(31,41,55,0.5)' # gray-800
    rounded: '{rounded.full}'
    size: '48px'
  bar-chart:
    bars: 'flex-1 rounded-lg, blue opacity ladder 10→100%'
    active: '{colors.primary} solid + glow + white dot marker'
    transition: 'bar-transition height 0.6s cubic-bezier(0.34,1.56,0.64,1)'
  calendar:
    selected: 'white bg, black text, rounded-xl'
    available: '{colors.primary} bg'
    well: '{colors.surface-well}'
motion:
  easing-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'  # bar grow overshoot
  duration-bar: 600ms
  duration-hover: 300-500ms
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont  # ti-scale, ti-heart-rate-monitor, ti-droplet-filled
  style: line / filled mix
  colorRule: 'blue or red accent inside tinted icon tiles; gray for inline'

Material Dark — "VitalFlow"

Design spec — version alpha. Source: static HTML (material-dark.html); tokens read from :root and component CSS. Fictional health-tracking dashboard; described factually.

Overview

A calm, modern dark dashboard for personal health. Surfaces are deep indigo-charcoal — {colors.surface} #1A1A24 canvas, {colors.surface-card} #252533 "glass cards" — with white text and a single iOS-blue voltage {colors.primary} #007AFF. Blue is rationed: it lights the active chart bar, the selected/available calendar days, key metric deltas, and exactly one fully-blue hydration accent tile; everything else is neutral. Type pairs Inter (big stat numbers, titles) with DM Sans (body/labels). The layout is a 12-column grid of generously rounded glass cards (24px) carrying soft ambient shadows, populated by flat CSS data viz — bar charts, a dot/line blood-tracking plot, a calendar, and a progress mini-chart. It is screen-native and spacious: no skeuomorphism, restrained color, clear hierarchy.

Colors

Brand. Blue {colors.primary} #007AFF is the only accent — active bars (with a glow + white dot marker), selected calendar/queue states, the hydration tile, and positive deltas. Discipline: one blue highlight per chart; neutrals carry the rest.

Surfaces. Cards {colors.surface-card} #252533 on canvas {colors.surface} #1A1A24; inner wells use {colors.surface-well} rgba(31,41,55,0.4). Borders/dividers use {colors.hairline} #1F2937.

Text. White {colors.on-surface}, {colors.on-surface-secondary} #9CA3AF for captions, {colors.on-surface-muted} #6B7280 for labels.

Semantic. Red {colors.danger} #EF4444 accents the pulse card and notification dot; green {colors.success} #22C55E marks "Optimal Range."

Typography

Inter for headings and the large tracking-tight stat numbers; DM Sans for body and tiny uppercase labels.

Token	Family	Size	Weight	Tracking	Usage
display	Inter	36px	700	-0.02em	Page title
metric	Inter	72px	700	-0.03em	Big stat numbers (73, 86%)
headline	Inter	20px	700	normal	Card titles
body	DM Sans	14px	400	normal	Body, descriptions
label	DM Sans	10px	700	0.1em	Uppercase eyebrows

Layout

Base 4px on a 12-col grid (gap-6 = 24px). A transparent top nav (logo + search field + notifications + profile) over a two-pane body: a 400px left aside (a tall glass card with calendar, doctor, patient queue, action buttons) and a flexible main of stacked card rows — stat + pulse chart, sleep bar chart + hydration accent tile, and a wide blood-tracking dot plot. Cards are uniform rounded glass panels.

Elevation & Depth

Soft and modern. Glass cards carry 0 10px 30px -5px rgba(0,0,0,0.3); the blue accent tile and primary button carry colored blue elevation (rgba(0,122,255,0.2–0.3)). Hover adds a faint blue border glow. No hard shadows or borders — depth is gentle ambient shadow on rounded surfaces.

Shapes

Generous radii: {rounded.md} 12px (small wells/buttons), {rounded.lg} 16px (wells/rows), {rounded.xl} 24px (glass cards), {rounded.xxl} 32px (hydration tile), {rounded.full} (avatars, pills, icon buttons, chart bars). Soft, friendly, fully-rounded.

Components

• glass-card — #252533 rounded-3xl panel, soft shadow, blue border-glow on hover.
• accent-tile — solid blue 32px-radius tile with white stats and blue elevation (hydration).
• button-primary — blue pill with blue shadow, scales on press.
• icon-button — 48px round gray-800 well with a tinted icon.
• bar-chart — flex bars on a blue opacity ladder; the active bar is solid blue + glow + white dot, growing with a spring overshoot.
• calendar — gray well; available days blue, selected day white-on-black, both rounded-xl.

Motion

{motion.easing-spring} cubic-bezier(0.34,1.56,0.64,1) gives bars a 600ms overshoot grow; hovers transition 300–500ms; press states scale to 0.95. Motion is functional and subtle. (Transitions are globally disabled in the capture source, so timings are authored intent.)

Iconography

Tabler icons, line + filled mix (ti-scale, ti-heart-rate-monitor, ti-droplet-filled, ti-moon-stars), shown in tinted blue/red icon tiles or gray for inline UI; ~20–24px.

Do's and Don'ts

• Do keep the deep indigo-charcoal canvas with white text.
• Do reserve blue for active data, selected states, deltas and the single accent tile.
• Do use uniform rounded glass cards with soft ambient shadows on a 12-col grid.
• Do render data with flat CSS charts (bars/dots/rings), Inter for numbers.
• Don't add hard borders/shadows or skeuomorphic textures.
• Don't over-saturate — only one blue highlight per chart, mostly neutral surfaces.
• Don't shrink the radii; the friendly, rounded geometry is core.

Known Gaps

• Values read from the implementation's resolved :root. Charts are static CSS mock-ups (Chart.js is loaded but unused). Copy/imagery are sample content; the source disables transitions globally.