alpha to alpha

---

version: alpha

name: "OpenDesigner brand"

colors:

primary: "#2338ff"

on-primary: "#ffffff"

surface: "#fcfdff"

on-surface: "#222428"

error: "#d93834"

typography:

body-md: { fontFamily: "Hanken Grotesk", fontSize: 16px, lineHeight: 24px }

rounded:

spacing:

unit: 4px

---

# OpenDesigner brand

- **Runs on:** web, secondary

- **Brand color:** Your brand color (#2338FF) is on the buttons exactly, with white text that reads clearly on it.

- **Next:** zoom into Colors, Layout, Elevation & Depth, or stop here: each level works

> Generated by the OpenDesigner engine 1.0.0 from `opendesigner/state.json` and `opendesigner/decisions.md`; `opendesigner/tokens/` is the source of truth. Change the system with `engine.py set ...` and `engine.py build`, not by editing this file (notes inside `<!-- od:keep -->` blocks survive). Each section opens with one plain sentence; open **More** for the designer and engineer detail.

## Overview

<!-- od:zoom area=overview level=0 -->

Designers: visual style: flat, tonal, glass · Code: `preset in state.json`

<details><summary>More</summary>

**Your answers here** (each one either sets tokens or is a rule for this section):

- The memorable thing: not recorded yet (Q-brand-02)

- Platforms: web, secondary; inputs: pointer, touch

**Principles (ranked).**

No principles recorded yet (Q-brand-07). Until they are, the dials act as the tie-breakers below.

**Dial positions.** Three posture dials set the overall stance. Five character dials fine-tune it.

- **Warmth 30/100** (cool/formal to warm/friendly: cool/formal): neutral tint chroma 0.022 at hue 264, borders: strong-rules, sentence-case, contractions allowed.

**Zoom by area** (sketch, broad, defined, detailed). You can stop at any level; each one works.

| Area | Zoom | Next questions |

|---|---|---|

| Colors | sketch | Q-color-02 |

| Typography | broad | Q-type-02, Q-type-03, Q-type-04 |

| Layout | sketch | Q-space-01, Q-space-02, Q-space-03 |

| Elevation & Depth | sketch | Q-depth-01 |

| Shapes | sketch | Q-shape-01 |

| Components | sketch | Q-comp-01, Q-comp-02, Q-state-01 |

| Motion | sketch | Q-motion-01 |

| Iconography and Imagery | sketch | Q-icon-01, Q-icon-02, Q-icon-06 |

| Content and Voice | sketch | Q-voice-01, Q-voice-02, Q-voice-03 |

| Accessibility | sketch | Q-aud-02, Q-aud-03, Q-aud-04 |

| Platforms and Devices | sketch | Q-plat-05, Q-plat-10, Q-plat-08 |

The tokens in `opendesigner/tokens/` (DTCG 2025.10 with `opendesigner.resolver.json`) are the source of truth. This file is a generated view.

</details>

## Colors

> Zoom: sketch (0 of 3), 4 decisions in this area. To zoom in, answer Q-color-02.

<!-- od:zoom area=color level=0 -->

Designers: primary or brand accent · Code: `color.bg.accent`

<details><summary>More</summary>

**How ramps are built.** Each hue gets twelve steps in OKLCH, placed by contrast. Step 8 reaches at least 3:1 (edges and focus). Steps 10 and 11 reach the text minimum on backgrounds 1-4. Step 12 reaches at least 7:1. Steps 2-6 are spaced evenly in lightness between step 1 and step 7. Light and dark ramps are solved separately. Dark solids are lighter and carry dark text (dark mode is a separate mapping, never an inversion). Text minimum: 4.5:1 (WCAG 2.2 AA).

| Ramp | Light steps 1-12 | Solid carries |

|---|---|---|

| `accent` | `#fcfdff` `#eff4ff` `#e3ecff` `#d7e3ff` `#cbdbff` `#bfd2ff` `#b3c9ff` `#537eff` `#2338ff` `#1e2fe6` `#1c31ce` `#192e75` | light |

| `danger` | `#fffcfc` `#fff1ef` `#ffe6e3` `#ffdbd6` `#ffcfc9` `#ffc4bc` `#ffb8af` `#d76258` `#d93834` `#c72f2c` `#a82321` `#5c201c` | light |

| `info` | `#fbfdff` `#eaf6ff` `#d9efff` `#c7e7ff` `#b5e0ff` `#a3d8ff` `#8fd1ff` `#008ed1` `#007cb7` `#0070a6` `#005c8a` `#003755` | light |

| `neutral` | `#fcfdff` `#f2f4f9` `#e8ecf1` `#dfe3ea` `#d6dbe3` `#cdd2dc` `#c4cad5` `#808793` `#6f7683` `#5e6471` `#515762` `#222428` | light |

| `success` | `#f9fef9` `#ebf7ed` `#d9f1dd` `#c6eccc` `#b2e7bc` `#9de2ab` `#87dc9a` `#089a47` `#00883d` `#007b36` `#00652c` `#003d17` | light |

| `warning` | `#fffcf8` `#f8f4ec` `#f5ead9` `#f1e1c6` `#eed8b3` `#ebce9f` `#e7c58b` `#aa7f2c` `#efb239` `#dda331` `#845d00` `#463001` | dark |

**Step-distance guarantee** (neutral, light; WCAG contrast of a foreground step on background steps 1-5):

| Foreground | on 1 | on 2 | on 3 | on 4 | on 5 |

|---|---|---|---|---|---|

| neutral 8 | 3.55 | 3.29 | 3.05 | 2.81 | 2.60 |

| neutral 9 | 4.49 | 4.15 | 3.85 | 3.55 | 3.29 |

| neutral 10 | 5.83 | 5.40 | 5.00 | 4.61 | 4.27 |

| neutral 11 | 7.14 | 6.60 | 6.13 | 5.65 | 5.23 |

| neutral 12 | 15.27 | 14.13 | 13.10 | 12.07 | 11.18 |

**States.** Hover is at least 1.15:1 from its fill and pressed at least 1.3:1, as shade steps (DC-L01-17). Where a color is unknown at design time, use the state opacities in `opacity.state.*`.

| Fill | Base | Hover | Pressed |

|---|---|---|---|

| `color.bg.action.primary` | `#2338ff` | `#1e2fe6` (1.18:1) | `#1a21dc` (1.34:1) |

| `color.bg.accent.bold` | `#2338ff` | `#1e2fe6` (1.18:1) | `#1a21dc` (1.34:1) |

**Semantic roles** (use these, never the ramps):

| Token | Light | Dark | Use |

|---|---|---|---|

**Use / avoid.**

- Use one solid accent fill per view for the primary action; spend chroma on small, meaningful elements.

- Avoid gray text on colored fills; use the matching `text.on-*` role.

- Avoid color as the only signal: pair status colors with an icon or label.

- Charts: no chart palette yet (Q-color-19). Take chart colors from the status and accent hues, and check them separately.

**Tailwind classes:** `bg-action-primary`, `hover:bg-action-primary-hover`, `active:bg-action-primary-pressed`, `text-on-action`, `bg-surface-base`, `bg-surface-raised`, `text-fg-primary`, `text-fg-secondary`, `text-fg-link`, `border-line-subtle`, `border-line-input`, `outline-line-focus`, `bg-danger-bold`.

</details>

## Typography

<!-- od:zoom area=typography level=1 -->

Designers: type scale: base size and ratio · Code: `font.size.14`

<details><summary>More</summary>

**Your answers here** (each one either sets tokens or is a rule for this section):

- Should it use the device's built-in font, a free plain font like Inter, or your brand font? **A free font with character** (chosen; tokens; Q-type-01)

- Text face: Hanken Grotesk, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif. Licence status (hook H-type): **open-library**.

- Licence by platform: text: Hanken Grotesk (open licence or system font: web, apps and self-hosting).

- On iOS the Swift file uses Dynamic Type text styles (body 17 pt), so text follows the person's text size setting; Compose uses sp, which follows the Android font scale.

- Line heights snap to a 4px grid: 1.5 up to 17px, 1.4 to 26px, 1.25 to 44px, 1.12 above.

- Letter spacing: +0.02em at 11-12px, -0.01em from 32px, -0.02em from 48px.

- Text scaling: CSS sizes are rem, line heights unitless, so text scales to 200% (WCAG 1.4.4); containers must grow with it.

- Scripts: Latin only; add scripts in raw.scripts to get per-script line heights (DC-L02-25).

| Style | Size/line (px) | Weight | Tracking | Use |

|---|---|---|---|---|

| `text.body.md` | 16/24 | 400 | 0em | Default UI text: forms, tables, descriptions. |

| `text.code.md` | 16/24 | 400 | 0em | Code blocks, token names. |

| `text.label.lg` | 16/24 | 500 | 0em | Button and control labels. |

| `text.title.sm` | 16/24 | 400 | 0em | Table headers, field-group titles. |

**Use / avoid.**

- Use at most three sizes and two weights in one view; let color and weight carry hierarchy before size.

- Avoid all caps for sentences and in scripts without case; use weight for emphasis there.

</details>

## Layout

> Zoom: sketch (0 of 3), 1 decision in this area. To zoom in, answer Q-space-01, Q-space-02, Q-space-03.

<!-- od:zoom area=layout level=0 -->

Designers: spacing scale, 0 to 96 · Code: `space.0 to space.96`

<details><summary>More</summary>

- Target sizes: pointer 24px, touch 44px; `size.target.min` is the floor for the primary input, and `space.target.gap` separates adjacent targets.

- Inner gaps stay below outer gaps (at least half), so grouping reads without borders (L15 P16).

- Breakpoints and grid: not generated yet; use the platform defaults and keep layout spacing independent of density (DC-L03-17).

**Use / avoid.**

- Parents own spacing (padding and gap); children never set outer margins.

- Avoid values off the ladder; if one is needed, add it as a decision.

</details>

## Elevation & Depth

> Zoom: sketch (0 of 3), 1 decision in this area. To zoom in, answer Q-depth-01.

<!-- od:zoom area=elevation level=0 -->

Designers: flat, shadowed, tonal or glass · Code: `$extensions.opendesigner.model`

<details><summary>More</summary>

| Token | Layers (x y blur spread) | Use |

|---|---|---|

- Borders: 1px default, 2px selected and focus, 4px emphasis; width changes use an inset shadow so layout does not jump.

- Stacking: page < raised < floating (menus) < overlay (dialogs with `color.overlay.scrim`).

- No materials or glass in this system.

</details>

## Shapes

<!-- od:zoom area=shape level=0 -->

Designers: corner radius, sharp to pill · Code: `radius.control, CSS border-radius`

<details><summary>More</summary>

- Nested radius: inner = max(outer - padding, smallest step). Here it is 2px inside a container with `space.inset.lg` padding. Equal radii on nested shapes look uneven (DC-L04-05).

- Signature shapes: none generated; a brand shape library is a designer asset (hook H-motif).

</details>

## Components

> Zoom: sketch (0 of 3), 0 decisions in this area. To zoom in, answer Q-comp-01, Q-comp-02, Q-state-01.

<!-- od:zoom area=components level=0 -->

**Version 1 plans 25 components, all built from these tokens.**

Designers: core set of about 25 components · Code: `button.* (proposed), APG pattern`

<details><summary>More</summary>

| Component | Status |

|---|---|

| button | planned (tokens ready) |

| text-field | planned (tokens ready) |

| textarea | planned (tokens ready) |

| select | planned (tokens ready) |

| checkbox | planned (tokens ready) |

| radio | planned (tokens ready) |

| switch | planned (tokens ready) |

| slider | planned (tokens ready) |

| tabs | planned (tokens ready) |

| tooltip | planned (tokens ready) |

| popover | planned (tokens ready) |

| dialog | planned (tokens ready) |

| menu | planned (tokens ready) |

| progress-bar | planned (tokens ready) |

| spinner | planned (tokens ready) |

| banner | planned (tokens ready) |

| badge | planned (tokens ready) |

| avatar | planned (tokens ready) |

| card | planned (tokens ready) |

| list | planned (tokens ready) |

| table | planned (tokens ready) |

| link | planned (tokens ready) |

| breadcrumbs | planned (tokens ready) |

| side-navigation | planned (tokens ready) |

| accordion | planned (tokens ready) |

**Contested policies:** Validation timing and disabled submit: pending; Field style: pending; Toasts: pending; Undo versus confirm: pending; Danger actions: pending; Button emphasis levels: pending.

**Use / avoid.**

- Every interactive component shows hover, pressed, focus-visible and disabled states from the tokens.

- Component docs belong in `opendesigner/components/<name>.md` (spec 7.8).

Decisions: none recorded yet; values are defaults from references/levers.json.

</details>

## Do's and Don'ts

**These rules keep screens clear and easy to read.** The engine checks the ones it can.

Designers: guardrails and design linting · Code: `engine.py validate, engine.py review`

<details><summary>More</summary>

**Enforced by construction.** The generator cannot break these:

- text contrast 4.5:1, and 3:1 for edges, in every mode

- text on colored fills picked automatically

- tap areas pointer 24px, touch 44px

- a 2px focus ring with a 2px offset

- a reduced-motion mode

- inner spacing smaller than outer spacing, three text colors, and nested radii

**Do**

- Use semantic tokens; never raw hex, px or ms values in components.

- Keep one primary action per view and at most three type sizes per view.

- Pair every status color with an icon or label; underline links in running text.

**Don't**

- Don't shrink hit areas in dense layouts; shrink visuals and extend the hit area.

- Don't use motion as the only signal, or flash more than three times a second.

- Don't copy another brand's identity from a reference (colors, typeface, logo, imagery, copy).

**Current validation findings:** none (errors 0, warnings 0).

**Waivers:** none.

</details>

## Standards

**Follow these rules when you build.** They come from sources marked non-negotiable, their values are locked, and `engine.py review` checks the ones it can.

**Don't break these:**

- No motion on 100+ times-a-day actions (STD-when-to-animate-05).

- Never use ease-in on UI (STD-easing-duration-03).

- Never enter from scale(0) (STD-enter-exit-origin-01).

- Never use transition: all (STD-performance-properties-06).

- Never disable pinch zoom (STD-accessibility-motion-27).

- **When to animate** (14 rules, 12 must): Decide whether to animate first; Name a valid purpose for every animation; Scale motion down as frequency rises; No motion on 100+ times-a-day actions; Never animate keyboard-initiated actions; Remove or shrink motion seen tens-of-times daily; Spend delight only on rare moments; Explanatory motion only in marketing, onboarding; and 4 more must rules. Locks `motion.duration.instant` 0ms.

- **Easing and duration** (12 rules, 10 must): Pick easing by the motion's job; Strong custom curves, not built-in keywords; Never use ease-in on UI; UI motion under 300ms unless justified; Duration budget for each element; Nothing over 1s unless illustrative; Duration grows with size and distance; Slow deliberate phase, snappy response; and 2 more must rules. Locks `motion.easing.linear` [0, 0, 1, 1], `motion.easing.hover` [0.25, 0.1, 0.25, 1], `motion.easing.enter` [0.23, 1, 0.32, 1], `motion.easing.exit` [0.23, 1, 0.32, 1], `motion.easing.standard` [0.77, 0, 0.175, 1], `motion.duration.micro` 100ms, `motion.duration.short` 150ms, `motion.duration.medium` 200ms, `motion.duration.long` 250ms.

- **Enter, exit and origin** (29 rules, 16 must): Never enter from scale(0); No opacity-only fade entrances; Scale popovers from their trigger; Keep modals scaling from center; Exit the way it entered; Dropdowns and popovers: scale 0.95, 200ms; Tooltips: scale 0.97, 125ms; Delay only the first tooltip; and 8 more must rules. Locks `motion.scale.enter` 0.95, `motion.duration.medium` 200ms (STD-easing-duration-07 wins), `motion.duration.tooltip` 125ms, `motion.scale.enter-tooltip` 0.97, `motion.duration.instant` 0ms (STD-when-to-animate-05 wins), `motion.duration.modal` 250ms, `motion.scale.enter-modal` 0.96, `motion.duration.stagger` 50ms, `motion.duration.reveal` 600ms, `motion.blur.crossfade` 2px, `motion.easing.drawer` [0.32, 0.72, 0, 1], `motion.duration.drawer` 500ms.

- **Springs and gestures** (32 rules, 21 must): Springs for anything a finger drives; Default springs are critically damped; Bounce only after a momentum gesture; Keep bounce subtle, 0.1 to 0.3; Sheet and drawer spring values; Every animation can be grabbed mid-flight; Never block input during transitions; Start from the on-screen value; and 13 more must rules. Locks `motion.spring.spatial.dampingRatio` 1.0, `motion.spring.spatial.stiffness` 246.7, `motion.spring.momentum` a composite value (see standards.md), `motion.spring.sheet` a composite value (see standards.md), `motion.spring.rotation` a composite value (see standards.md), `motion.gesture.deceleration-rate` 0.998, `motion.gesture.dismiss-velocity` 0.11, `motion.gesture.rubberband-constant` 0.55, `motion.gesture.direction-threshold` 10px.

- **Performance and properties** (14 rules, 9 must): Animate only transform and opacity; Only clip-path, accordion height, childless width; Never use transition: all; Motion: animate the full transform string; Keep per-frame values out of React state; Set drag transforms on the moving element; Pick the cheapest animation tool; Treat dropped frames as a regression; and 1 more must rule.

- **Accessibility in motion** (18 rules, 11 must): Ship reduced motion with the animation; Reduced motion is gentler, never zero; Check reduced motion by toggling it; Reduced transparency makes surfaces solid; Increased contrast gets solid, bordered surfaces; Scale layout with the user's text size; Gate hover motion to fine pointers; Build overlays on accessible primitives; and 3 more must rules. Locks `raw.reducedMotion` "replace", `motion.duration.reduced-fade` 200ms, `reduced:motion.transition.enter` a composite value (see standards.md), `reduced:motion.transition.exit` a composite value (see standards.md), `reduced:motion.transition.expand` a composite value (see standards.md).

- **Toasts, drawers and overlays** (23 rules, 7 must): Fill gaps between toasts for hover; Pause toast timers in a hidden tab; Toast classNames need !important; Copy Sonner styles into shadow DOM; Drawer curve: cubic-bezier(0.32, 0.72, 0, 1); Feedback on press, commit on release; Hold to confirm: slow press, fast release. Locks `motion.duration.toast` 400ms, `motion.easing.toast` [0.25, 0.1, 0.25, 1], `component.toast.gap` 14px, `component.toast.visible` 3, `component.toast.duration` 4000ms, `component.toast.offset.desktop` 32px, `component.toast.offset.mobile` 16px, `motion.easing.drawer` [0.32, 0.72, 0, 1] (STD-enter-exit-origin-41 wins), `motion.gesture.drag-lock-after-scroll` 100ms.

- **Mobile and touch** (20 rules, 16 must): Detect touch by capability, never by device; Remove the tap highlight flash globally; Press feedback scales to 0.97, briefly; Remove the tap delay on tappables; Touch targets 44pt on iOS, 48dp on Android; Size full-height layouts with dvh and svh; Form inputs at 16px or larger; Contain overscroll in app layouts; and 8 more must rules. Locks `motion.scale.press` 0.97, `motion.duration.micro` 100ms (STD-easing-duration-07 wins), `size.target.touch` 44px, `size.target.min` 44px, `font.size.input` 16px.

- **Process, review and taste** (14 rules, 8 must): Motion that merely runs is not done; Self-check motion before finishing; Report review findings as one table; Close every motion review with Block or Approve; Make the motion call yourself; Keep the motion note to a few lines; Say when feel can't be judged from code; Judge feel on real hardware.

</details>

Every rule, with its values, reasons and sources: `opendesigner/standards.md` (it also has the 64 rules this file leaves out). Read the themes you touch before you build.

## Motion

> Zoom: sketch (0 of 3), 1 decision in this area. To zoom in, answer Q-motion-01.

<!-- od:zoom area=motion level=0 -->

**Most movements take 200ms.** They turn into fades when a person asks for less motion.

Designers: motion system: duration, easing, springs · Code: `motion.duration.*, motion.easing.*`

<details><summary>More</summary>

| Token | Value | Note |

|---|---|---|

| `motion.duration.instant` | 0ms | set by house standard STD-when-to-animate-05 |

| `motion.duration.micro` | 100ms | set by house standard STD-easing-duration-07 |

| `motion.duration.short` | 150ms | set by house standard STD-easing-duration-07 |

| `motion.duration.medium` | 200ms | set by house standard STD-easing-duration-07 |

| `motion.duration.long` | 250ms | set by house standard STD-easing-duration-07 |

| `motion.duration.medium-exit` | 160ms | derived: about 0.8 x medium |

| `motion.duration.long-exit` | 200ms | derived: about 0.8 x long |

| `motion.duration.drawer` | 500ms | set by house standard STD-enter-exit-origin-41 |

| `motion.duration.modal` | 250ms | set by house standard STD-enter-exit-origin-11 |

| `motion.duration.reduced-fade` | 200ms | set by house standard STD-accessibility-motion-02 |

| `motion.duration.reveal` | 600ms | set by house standard STD-enter-exit-origin-26 |

| `motion.duration.stagger` | 50ms | set by house standard STD-enter-exit-origin-13 |

| `motion.duration.toast` | 400ms | set by house standard STD-components-toasts-drawers-07 |

| `motion.duration.tooltip` | 125ms | set by house standard STD-enter-exit-origin-09 |

- Exits are derived, not set on their own: each is about 20% shorter than the entrance in force (medium-exit 160ms from medium 200ms, long-exit 200ms from long 250ms; STD-easing-duration-11). Change an entrance and its exit follows. Linear easing only for spinners and progress.

- Reduced motion (`prefers-reduced-motion` or `data-motion="reduced"`): travel becomes opacity, feedback stays, `motion.transition.move` is 0ms.

- Springs are stored as damping and stiffness in `$extensions.opendesigner.spring` because DTCG 2025.10 has no spring type.

</details>

## Modes and Themes

Designers: modes: light, dark, density, motion · Code: `resolver modifiers, Figma collection modes`

<details><summary>More</summary>

**Your answers here** (each one either sets tokens or is a rule for this section):

**Intent.** Modes live in the DTCG resolver (`opendesigner/tokens/opendesigner.resolver.json`); modifiers are orthogonal, so no two set the same token.

| Modifier | Contexts | Default |

|---|---|---|

| motion | standard, reduced | standard |

- Web: `prefers-color-scheme` with a `[data-theme]` override; `[data-density]`; `prefers-reduced-motion` with `[data-motion]` (see `opendesigner/build/css/tokens.css`).

- High-contrast themes are not generated; set `raw.contrastTarget` to AAA for 7:1 text everywhere.

- A second brand or a client re-skin may override the color primitives and `color.bg.brand`; semantic names never change.

</details>

## Iconography and Imagery

<!-- od:zoom area=iconography level=0 -->

Designers: icon system: style, sizes, color · Code: `size.icon.*, icon.stroke.*, color.icon.*`

<details><summary>More</summary>

| Asset | Hook | Status |

|---|---|---|

| Logo and marks | H-logo | have |

| Motifs and brand shapes | H-motif | pending |

- Placeholders are labelled as placeholders. A generated stand-in is never shown as a finished brand asset.

- Icon-only buttons need an accessible name and a hit area of `size.target.min`.

</details>

## Content and Voice

> Zoom: sketch (0 of 3), 0 decisions in this area. To zoom in, answer Q-voice-01, Q-voice-02, Q-voice-03.

<!-- od:zoom area=content level=0 -->

**Words stay plain and short, and every button says what it does.**

Designers: content: voice, tone, microcopy · Code: `DESIGN.md Content and Voice section`

<details><summary>More</summary>

- Buttons say what they do in two to four words; errors say what happened and how to fix it.

- Reading level: plain language; avoid jargon in UI copy.

- Word list: not recorded yet (Q-voice-03).

Decisions: none recorded yet; values are defaults from references/levers.json.

</details>

## Accessibility

> Zoom: sketch (0 of 3), 0 decisions in this area. To zoom in, answer Q-aud-02, Q-aud-03, Q-aud-04.

<!-- od:zoom area=accessibility level=0 -->

**Text passes WCAG 2.2 AA contrast in every mode, and focus is always visible.**

Designers: WCAG 2.2 AA target · Code: `raw.contrastTarget`

<details><summary>More</summary>

**Your answers here** (each one either sets tokens or is a rule for this section):

**Intent.** Standard: WCAG 2.2 AA. APCA is reported as advice only.

**The system guarantees:**

- text and edge contrast in every mode

- visible focus (2px ring, 2px offset, 3:1)

- minimum target sizes for each kind of input

- a reduced-motion mode

- rem-based type, so text scales to 200%

- text on colored fills chosen automatically

**Product teams own:** accessible names and labels, alt text, reading and focus order, and never using color alone. Also: clear error messages, dialogs that can be closed, no pre-checked consent boxes, and captions for media.

**Test on each platform:**

- keyboard only

- a screen reader (VoiceOver, NVDA or TalkBack)

- 200% zoom

- forced colors (Windows High Contrast)

- reduced motion

- touch on a phone, for every surface that allows touch

Decisions: none recorded yet; values are defaults from references/levers.json.

</details>

## Platforms and Devices

> Zoom: sketch (0 of 3), 1 decision in this area. To zoom in, answer Q-plat-05, Q-plat-10, Q-plat-08.

<!-- od:zoom area=platforms level=0 -->

**It runs on web, secondary, and each platform keeps its own navigation.**

Designers: target platforms · Code: `raw.platforms; size.target.min`

<details><summary>More</summary>

**Your answers here** (each one either sets tokens or is a rule for this section):

- Where will it run first: web, iOS, Android or desktop? **Web, Watch, TV, car or headset** (delegated; tokens; Q-plat-01)

- Navigation, back, sheets and pickers stay native on every platform (DC-L10-02).

- Swift and Compose files in `opendesigner/build/` use the same names as the CSS variables (Figma code syntax matches them).

- Fonts by platform: text: Hanken Grotesk (open licence or system font: web, apps and self-hosting).

Decisions: D-0006 (answers.Q-plat-01).

</details>

## Decisions

Designers: decision history with reasons · Code: `opendesigner/decisions.md`

<details><summary>More</summary>

Your own decisions first (the newest value per path), then your changes to standards, then one row per standards batch. Full log: [opendesigner/decisions.md](opendesigner/decisions.md).

| Id | Path | Value | Set by | Reason |

|---|---|---|---|---|

| D-0006 | `answers.Q-plat-01` | ["web", "secondary"] | delegated | sketch: picked for them |

| D-0013 | `dials.brand` | 80 | delegated | Kunal's taste-poll profile, nudged toward bold brand marketing |

| D-0018 | `dials.colour` | 62 | delegated | Kunal's taste-poll profile, nudged toward bold brand marketing |

| D-0022 | `dials.notADial` | 5 | chosen | test |

| D-0023 | `answers.Q-type-01` | "open-custom" | chosen | owner wants a real typeface; Hanken Grotesk, light display + bold highlight, picked by eye from a specimen |

| D-0024 | `raw.textFace` | "Hanken Grotesk" | chosen | specimen test: calm, premium at light weights, not tied to another company |

| D-0026 | `dials.warmth` | 30 | chosen | owner feedback 2026-10-14: hated brown background + orange + cream; wants striking color with clear tonal contrast; warmth 68 made the neutrals brown |

| D-0028 | `type.headingWeight` | 400 | chosen | owner: titles need not be bold; light/regular titles like Palantir's; bold is kept for the highlighted phrase |

| D-0029 | `hooks.H-logo.status` | "have" | asset | mark (square-to-circle tiles) and lockup in Hanken Grotesk, outlined; brand/design-system |

| D-0031 | `hooks.H-type.status` | "open-library" | chosen | Hanken Grotesk (SIL OFL) from Google Fonts |

| D-0032 | `hooks.H-logo.files` | ["design-system/project/assets/Logos/lockup-light.svg", "design-system/project/assets/Logos/mark-light.svg"] | asset | logo files, paths relative to the project root |

| D-0011 | standards | House standards v2: 289 applied | standard (locked) | OpenDesigner's house standards (sources marked non-negotiable) are applied without asking and locked. Change one only when the person asks: engine.py... |

</details>

## Open Items

**These parts are still defaults, guesses, or waiting for a person.**

- Waivers: none.

- Validation: 0 errors, 0 warnings.

## For Agents

**AI agents: read this file and the tokens before you change any screen.**

1. Before any visual work, read this file, PRODUCT.md and `opendesigner/tokens/` (start at `opendesigner/tokens/opendesigner.resolver.json`).

3. Do not change a locked decision without asking the owner.

4. To change the system: `engine.py set <path> <value> --why "..."`, then `engine.py generate`, `engine.py validate`, `engine.py design-md`.

5. To extend: add a decision (never hand-edit tokens or this file). Keep semantic names the same across modes. Deprecate instead of deleting.

6. After any implementation, run `engine.py review` and re-read this file.

7. Follow the Standards section. Change a standard only when the person explicitly asks: `engine.py standard override <id> --why "<their words>"`.

**Tailwind v4 classes** (one import: `@import "tailwindcss"; @import "<path>/opendesigner/build/tailwind/theme.css";`; Tailwind's default colors, text sizes, radii and shadows are switched off, so only these exist):

| Area | Classes |

|---|---|

| Color | `bg-action-primary`, `hover:bg-action-primary-hover`, `active:bg-action-primary-pressed`, `text-on-action`, `bg-surface-base`, `bg-surface-raised`, `text-fg-primary`, `text-fg-secondary`, `text-fg-link`, `border-line-subtle`, `border-line-input`, `outline-line-focus`, `bg-danger-bold` |

| Layout | `p-inset-md`, `gap-stack-md`, `gap-inline-sm`, `h-control-md`, `size-icon-md`, `min-h-target-min` |

| Shape | `rounded-control`, `rounded-container`, `rounded-overlay`, `rounded-full` |

| Elevation | `shadow-raised`, `shadow-floating`, `shadow-overlay` |

| Motion | `transition-feedback`, `ease-enter`, `ease-exit`, `ease-hover` |