name: cobalt-blueprint-design
version: alpha
description: >
  A literal architectural-blueprint UI: a cobalt-blue gridded "drafting paper"
  canvas (#0047AB) overlaid with fine and major grid lines, drawn entirely in
  white chalk ink (rgba 255/0.9) with a single electric cyan accent (#00FFFF)
  for selections, CTAs and "marching ants" selection borders. Type is a
  technical mix — Zilla Slab slab-serif headings, Inter body, Space Mono for
  the pervasive uppercase engineering labels (DIM_REF, SCALE 1:1). Everything
  is sharp-cornered (radius 0), bordered with hairline whites and corner ticks,
  and annotated like a CAD drawing.
colors:
  # Brand
  primary: '#0047AB'            # blueprint cobalt (canvas)
  primary-deep: '#003380'       # dark-blueprint panels / sidebar
  accent: '#00FFFF'             # cyan highlight — selection, CTA, marching ants
  on-accent: '#1E3A8A'          # blue-900 ink on cyan button
  # Surface / chalk
  surface: '#0047AB'            # gridded drafting canvas
  surface-panel: 'rgba(0,51,128,0.9)' # blueprint-blue/40 frosted panels
  chalk: 'rgba(255,255,255,0.9)'      # primary white "chalk" text
  chalk-muted: 'rgba(255,255,255,0.6)'
  chalk-faint: 'rgba(255,255,255,0.3)' # annotations, dim_ref labels
  # Hairlines / grid
  hairline: 'rgba(255,255,255,0.2)'
  grid-major: 'rgba(255,255,255,0.1)'  # 100px grid
  grid-fine: 'rgba(255,255,255,0.04)'  # 20px grid
  # Semantic
  success: '#4ADE80'           # green-400 status badges (ACTIVE/OPTIMAL)
typography:
  display:
    fontFamily: '"Zilla Slab", serif'
    fontSize: 96px              # hero h1 (text-8xl)
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.05em      # tracking-tighter
    effect: 'text-shadow chalk glow: 0 0 1px #fff, 0 0 8px rgba(0,255,255,0.2)'
  headline:
    fontFamily: '"Zilla Slab", serif'
    fontSize: 60px              # section h2 (text-6xl)
    fontWeight: 700
    lineHeight: 1.1
  body:
    fontFamily: '"Inter", sans-serif'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  label-mono:
    fontFamily: '"Space Mono", monospace'
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.1em        # uppercase engineering annotations
  button-mono:
    fontFamily: '"Space Mono", monospace'
    fontSize: 14px
    fontWeight: 700
    letterSpacing: 0.1em        # tracking-widest, uppercase
rounded:
  none: 0px                     # everything is sharp / technical
spacing:
  # base unit = 4px; grid rhythm 20px (fine) / 100px (major)
  sm: 16px
  md: 32px
  lg: 64px
  xl: 128px                     # section py-32
components:
  button-primary:
    background: '{colors.accent}'
    textColor: '{colors.on-accent}'
    typography: '{typography.button-mono}'
    rounded: '{rounded.none}'
    padding: '20px 48px'
    boxShadow: '0 0 30px rgba(0,255,255,0.4)'  # cyan glow
    hover: 'bg #fff, scale 1.05'
  button-secondary:
    background: 'transparent'
    border: '1px solid {colors.hairline}'
    textColor: '{colors.chalk}'
    rounded: '{rounded.none}'
    hover: 'border + text → {colors.accent}'
  panel:
    background: '{colors.surface-panel}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.none}'
    cornerTicks: '{colors.accent}'  # technical-border ::before/::after L-marks
  marching-ants:
    border: 'animated dashed {colors.accent} (ants 5s linear infinite)'
  measurement-line:
    color: '{colors.hairline}'      # 1px rule with end-tick marks
  table-row:
    font: '{typography.label-mono}'
    hover: 'bg rgba(0,255,255,0.1)'
motion:
  easing-standard: 'ease / linear'
  duration: 300ms
  signatures: 'marching-ants dash march, animate-pulse status dots'
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont   # ti-binary, ti-ruler-2, ti-vector-bezier
  style: line / outline
  colorRule: 'cyan when active, chalk-muted otherwise'

Cobalt Blueprint — "WanderSketch Tech"

Design spec — version alpha. Source: static HTML (cobalt-blueprint.html); tokens read from :root and component CSS. Fictional CAD/sketching brand; described factually.

Overview

A literal architectural blueprint. The canvas is cobalt blue ({colors.primary} #0047AB) printed as drafting paper — layered grid backgrounds at 100px (major), 20px (fine) and a 5px dot grid. Everything is rendered in white "chalk" ink ({colors.chalk} rgba(255,255,255,0.9)) with one electric accent: cyan {colors.accent} #00FFFF, reserved for selections, CTAs, the animated "marching ants" selection borders and corner ticks. The interface is annotated like a CAD drawing — uppercase mono labels (DIM_REF_240, SCALE 1:1.0, PROJ: ORTHOGRAPHIC), measurement lines with end-ticks, dashed detail rectangles. Type mixes Zilla Slab slab-serif headings (with a faint chalk glow), Inter body, and Space Mono for the pervasive technical labels and buttons. Shapes are strictly sharp (radius 0). Layout uses a fixed icon sidebar + main column with a floating bottom toolbar.

Colors

Brand. Cobalt {colors.primary} #0047AB is the paper; {colors.primary-deep} #003380 backs the sidebar and frosted panels. Cyan {colors.accent} #00FFFF is the single voltage — selection glow, primary button, marching ants, corner L-ticks, active nav. Discipline: cyan means "active/selected/primary"; never a passive decoration.

Chalk & grid. Text steps from {colors.chalk} (90%) → {colors.chalk-muted} (60%) → {colors.chalk-faint} (30%, annotations). Grid lines use {colors.grid-major} (10%) and {colors.grid-fine} (4%); rules/borders use {colors.hairline} (20%).

Semantic. Status badges use green {colors.success} #4ADE80 (ACTIVE/OPTIMAL) outlined, distinct from the cyan UI accent.

Typography

Zilla Slab for display/headlines (700, tight tracking, chalk text-shadow glow); Inter for body prose; Space Mono for all uppercase engineering labels, table cells and button text.

Token	Family	Size	Weight	Tracking	Usage
display	Zilla Slab	96px	700	-0.05em	Hero h1 ("Drafting the Future")
headline	Zilla Slab	60px	700	normal	Section h2
body	Inter	18px	400	normal	Body prose
label-mono	Space Mono	10px	400	0.1em	Annotations, table, captions
button-mono	Space Mono	14px	700	0.1em	Buttons (uppercase)

Layout

Base 4px with a literal 20/100px grid rhythm. A 80px fixed icon sidebar (rotated-45 logo tile, vertical nav) sits left of a main column: hero (centered marching-ants panel with floating dashed "detail sketches"), a specs section (3 feature cards + a technical data table), an image/feature split, and a floating sticky bottom toolbar. Annotations and dashed reference rectangles float in negative space.

Elevation & Depth

Mostly flat and paper-like; depth comes from frosted blue panels (backdrop-blur), cyan glow shadows on primary actions/selected panels (0 0 15–30px rgba(0,255,255,0.x)), and large shadow-2xl under floating panels. Corner ticks and measurement lines imply technical layering rather than material shadow.

Shapes

Strictly sharp — radius 0 everywhere (.swiss-like). The geometric language is technical/orthographic: hairline borders, dashed rectangles, corner L-brackets (technical-border/l-corner), and tick-marked measurement lines.

Components

• button-primary — solid cyan, blue-900 mono label, cyan glow, hover → white + scale.
• button-secondary — transparent, white/30 border, hover → cyan border+text.
• panel — frosted dark-blueprint, hairline border, cyan corner ticks.
• marching-ants — animated dashed cyan border framing hero/selected media.
• measurement-line — 1px rule with end-ticks for dimension callouts.
• data table — mono, hairline rows, cyan-tinted hover, outlined green/cyan status pills.

Motion

Subtle and mechanical: the marching-ants dashed borders march (ants 5s linear), status dots animate-pulse. Hovers swap colors/scale. (The source globally disables CSS transitions for capture, so durations above are the intended nominal values.)

Iconography

Tabler line icons (ti-binary, ti-ruler-2, ti-geometry, ti-vector-bezier) — thin outline, cyan when active, chalk-muted at rest, sized ~24px.

Do's and Don'ts

• Do keep the cobalt gridded paper canvas; it is the brand surface.
• Do reserve cyan for active/selected/primary states and marching-ants only.
• Do annotate with uppercase Space Mono labels, measurement lines and corner ticks.
• Do keep every corner sharp (radius 0).
• Don't round corners or add soft material shadows — depth is glow + frosted panels.
• Don't use cyan for body text or passive decoration.
• Don't mix in a warm accent; green is for status badges only.

Known Gaps

• Values read from the static implementation's resolved :root. The source disables transitions globally, so motion timings are intended/nominal. Copy and imagery are sample content.