EmberlineDESIGN.md alpha

• Contrast: all text tokens meet WCAG 2.2 AA (≥4.5:1). Large/bold display text and non-text UI (borders, icons, focus rings) meet ≥3:1. Key verified pairs: on-primary on primary 6.30:1 · primary-strong on white 5.59:1 · on-surface-variant on surface-container 7.00:1 · dark-primary on dark-surface 5.73:1 · dark-on-surface-variant on dark-surface-container-high 6.62:1.

• Never put white text on #FF5C16 (3.09:1). Never use #FF5C16 as text on light backgrounds; use primary-strong.

• Colour is never the only signal: status needs an icon or text, links in prose are underlined, chart series get labels or patterns, and deltas carry a +/− sign.

• Keyboard: every interactive element is reachable by Tab in visual order and activatable with Enter/Space. Composite widgets (tabs, menus, radio groups) use arrow keys. A "Skip to content" link is the first focusable element.

• Focus: always visible via :focus-visible with the system ring; never trapped except inside modals.

• Semantics: use native elements first (button, a, input, table, dialog), and ARIA only to fill gaps. Every icon-only control has an accessible name.

• Theme preference: honour prefers-color-scheme by default, let users override it, and persist the choice. Honour prefers-reduced-motion and forced-colors (use CanvasText/Highlight system colours, and keep borders visible because shadows disappear).

• Text scaling: layouts survive 200% zoom and 400% reflow (320px width) without horizontal page scroll.

A minimal, framework-agnostic starting point. Generate the full variable set from the tokens above (for example npx @google/design.md export --format css-tailwind DESIGN.md or --format dtcg), then layer the theme switch on top:

```css

:root {

--color-primary: #FF5C16;

--color-on-primary: #1A0800;

--color-primary-strong: #B83F0A;

--color-background: #F7F5F3;

--color-surface: #FFFFFF;

--color-on-surface: #1A1714;

--color-on-surface-variant: #57514B;

--color-outline: #857E77;

--color-outline-variant: #E3DFDA;

--focus-ring: #B83F0A;

--shadow-1: 0 1px 2px 0 rgba(26, 23, 20, 0.06), 0 1px 1px 0 rgba(26, 23, 20, 0.04);

--radius-control: 6px;

--radius-card: 8px;

--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

color-scheme: light;

}

[data-theme="dark"] {

--color-primary: #FF5C16;

--color-on-primary: #1A0800;

--color-primary-strong: #FF5C16;

--color-background: #121110;

--color-surface: #1A1816;

--color-on-surface: #F3F1EE;

--color-on-surface-variant: #B5ADA6;

--color-outline: #8C857E;

--color-outline-variant: #3A3633;

--focus-ring: #FF5C16;

--shadow-1: none;

color-scheme: dark;

}

/* Repeat the dark block inside @media (prefers-color-scheme: dark)

scoped to :root:not([data-theme="light"]) to follow the OS setting. */

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

```

Checklist before an agent considers a screen done:

1. Every colour, size, radius and spacing value maps to a token in this file.

2. At most one button-primary is visible per view.

3. The screen renders correctly in both light and dark themes.

4. All interactive elements show hover, focus-visible and disabled states; async actions show loading.

5. It can be navigated with the keyboard alone, and modals trap and restore focus.

6. npx @google/design.md lint DESIGN.md reports no errors after any edit to this file.