webdesignhot · 0.1

Four distinctive features in our spec.

webdesignhot/0.1 is our DESIGN.md spec — a parallel format alongside the Google Labs alpha spec. Same plain-text philosophy, richer machine-readable layer. Every entry in this directory ships spec: webdesignhot/0.1 with the four capabilities below built in as first-class fields.

01

Themes — multiple palettes per file

Same component library renders identically across editorial-dark, daylight, fintech-cool — by swapping a single attribute.

A flat colors map describes a single palette. Real systems ship two or more (light + dark, or three brand variants). webdesignhot/0.1 nests palettes under colors by theme name, and a top-level themes block declares the default + runtime switch mechanism. 

---
name: AgentKit
spec: webdesignhot/0.1
themes:
  default: editorial-dark
  available: [editorial-dark, bright, cool-blue]
  switch-via: 'data-theme attribute on <html>; persisted in localStorage'
colors:
  editorial-dark:
    bg: '#0a0a0a'
    text: '#ededed'
    brand: '#c6f432'
  bright:
    bg: '#fafafa'
    text: '#0a0a0a'
    brand: '#16a34a'
  cool-blue:
    bg: '#0b1120'
    text: '#f1f5f9'
    brand: '#06b6d4'
---
02

Motion — easing + duration tokens

Cubic-bezier curves and millisecond durations agents can wire into any component animation.

Without motion tokens, agents either copy-paste random durations or hard-code them. Both patterns drift fast. webdesignhot/0.1's top-level motion block declares the design's pacing once. 

motion:
  ease: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast:     150  # hover, focus
  duration-standard: 240  # card open, expand
  duration-slow:     320  # dialog enter
  cursor-blink:      '1s step-end infinite'
  reduced-motion:    'respects prefers-reduced-motion: reduce'
03

Breakpoints — viewport size scale

Standard widths so responsive media queries stay consistent across components.

Layout fields touch container widths but not viewport boundaries. webdesignhot/0.1 ships an explicit breakpoint scale that doubles as the media-query token an agent can pick when writing CSS. 

breakpoints:
  sm:  640
  md:  768
  lg:  1024
  xl:  1280
  2xl: 1440
04

Dark mode — same-file pair

Light + dark in one DESIGN.md so agents don't have to track two source-of-truth files.

A canonical case of the themes feature, named so agents can query "give me the dark variant" without parsing arbitrary theme names. Single-theme entries get a dark block alongside colors; multi-theme entries declare dark as one of the available themes. 

# single-theme entry
colors:
  bg: '#fafafa'
  text: '#0a0a0a'
  brand: '#c6f432'
dark:
  bg: '#0a0a0a'
  surface: '#141416'
  text: '#ededed'
  brand: '#c6f432'  # often unchanged across light/dark
Compatibility with Google Labs alpha

webdesignhot/0.1 is a parallel format, not a fork. Tools that read Google Labs alpha files can read webdesignhot/0.1 files — only the section structure and the four extra fields above will be unfamiliar. If Google's spec evolves to absorb any of these capabilities natively, we'll align. Until then, every entry here ships under our own spec: webdesignhot/0.1 namespace.