Extensions · v1

Four extensions to the official spec.

The Google Labs DESIGN.md spec is intentionally minimal — a foundation for design tokens that any agent can read. We've added four orthogonal capabilities under an x-webdesignhot namespace (per the spec's "unknown content is preserved" rule, so files stay valid against the official lint).

01

Themes — multiple palettes per file

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

The spec's colors map describes a single palette. Real systems ship two or more (light + dark, or three brand variants). Our x-webdesignhot.themes block lists the available themes, the default, and the runtime switch mechanism. Each theme is a complete colors map of its own. 

---
name: AgentKit
spec: design.md/v1
colors: # this is the *default* theme, flat — passes Google's lint
  bg: '#0a0a0a'
  text: '#ededed'
  brand: '#c6f432'

x-webdesignhot:
  themes:
    default: editorial-dark
    available: [editorial-dark, bright, cool-blue]
    switch-via: 'data-theme attribute on <html>; persisted in localStorage'
    palettes:
      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. x-webdesignhot.motion declares the design's pacing once. 

x-webdesignhot:
  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'
03

Breakpoints — viewport size scale

Standard widths so responsive media queries stay consistent across components.

The spec touches layout but not viewport boundaries. We add an explicit breakpoint scale that doubles as the media-query token an agent can pick when writing CSS. 

x-webdesignhot:
  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 standalone case of the themes extension, formalized so agents can query "give me the dark variant" without parsing arbitrary theme names. 

x-webdesignhot:
  dark:
    bg: '#0a0a0a'
    surface: '#141416'
    text: '#ededed'
    brand: '#c6f432'  # often unchanged across light/dark
Why x-namespaced

Google's spec explicitly says: "Unknown sections / unknown YAML keys — preserve, don't error." That means our extensions sit alongside the canonical fields without breaking design.md lint. If the spec evolves to absorb any of these, we'll move them up. Until then, the x- prefix means "non-normative; expect change".