prism-design 2.13.0

package/extractions/miro.com/DESIGN.md

@@ -0,0 +1,1237 @@
+---
+version: alpha
+name: miro.com
+description: "Light product system built on #f0f0f0 with #fde050 as the primary CTA accent. Type anchored in Open Sans at 56px / weight 500. Extracted automatically from https://miro.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
+narrative: |
+  miro.com is built on a soft, near-white canvas (rgb(240, 240, 240)).
+  The system uses rgb(253, 224, 80) as the high-saturation accent for primary actions.
+  Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside Roobert PRO as the primary typeface.
+  Roobert PRO is paired with Noto Sans for secondary roles.
+  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
+  Motion is a first-class concern — 14 keyframe animations plus transition-driven interactions.
+
+colors:
+  background: "#f0f0f0"
+  surface-1: "#ffffff"
+  surface-2: "#fde0f0"
+  ink-subtle: "#555a6a"
+  primary: "#fde050"
+  on-primary: "#111111"
+  primary-hover: "#ffdd33"
+  hairline: "#cdd8ff"
+  accent-glow: "#fde050"
+  semantic-error: "#f24726"
+  semantic-success: "#00b473"
+  semantic-warning: "#fde050"
+
+typography:
+  display-xl:
+    fontFamily: "Roobert PRO Medium"
+    fontSize: 56px
+    fontWeight: 500
+    lineHeight: 1
+    letterSpacing: -1.68px
+  display-md:
+    fontFamily: "Roobert PRO Medium"
+    fontSize: 40px
+    fontWeight: 400
+    lineHeight: 1.15
+    letterSpacing: -1.2px
+  body:
+    fontFamily: "Open Sans"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: normal
+    letterSpacing: 0
+  button:
+    fontFamily: "Roobert PRO"
+    fontSize: 16px
+    fontWeight: 900
+    lineHeight: 1.43
+    letterSpacing: 0
+  mono:
+    fontFamily: "Open Sans"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: normal
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 8px
+  sm: 8px
+  md: 12px
+  lg: 20px
+  xl: 24px
+  pill: 999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 24px
+  xl: 32px
+  xxl: 64px
+  section: 80px
+
+components:
+  button-ghost:
+    backgroundColor: "transparent"
+    textColor: "#1c1c1e"
+    typography: "{typography.body}"
+    rounded: "{rounded.xs}"
+    padding: 4px
+  button-primary-brand:
+    backgroundColor: "{colors.semantic-warning}"
+    textColor: "#1c1c1e"
+    typography: "{typography.button}"
+    rounded: "{rounded.xs}"
+    padding: 8px 12px
+  button-ghost-2:
+    backgroundColor: "transparent"
+    textColor: "#1c1c1e"
+    typography: "{typography.button}"
+    rounded: "{rounded.xs}"
+    padding: 8px 4px 8px 8px
+  input-text-input:
+    backgroundColor: "{colors.surface-1}"
+    textColor: "#1c1c1e"
+    typography: "{typography.button}"
+    rounded: "{rounded.xs}"
+    padding: 16px
+  navigation-main-nav:
+    backgroundColor: "{colors.surface-1}"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 16px
+  pricing-card-default-tier:
+    backgroundColor: "transparent"
+    textColor: "#1c1c1e"
+    typography: "{typography.button}"
+    rounded: "{rounded.xs}"
+    padding: 8px
+
+extracted_at: "2026-05-30T22:28:30.881Z"
+completeness: 89
+scoreVersion: "v2"
+
+---
+
+# Design System — miro.com
+> Extracted automatically by Clone Architect from https://miro.com
+> Date: 2026-05-30
+> Viewport: Desktop 1440x900 + Mobile 390x844
+> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).
+
+> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
+>
+> - **Canvas**: `rgb(240, 240, 240)` is the page background. Every component composits against this.
+> - **Accent**: `rgb(253, 224, 80)` for primary CTAs ONLY. Never decorative.
+> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
+> - **Section rhythm**: 48px between major bands. Card padding: 24px.
+> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
+>
+> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.
+
+## 1. Visual Theme & Atmosphere
+
+miro.com sits on a light gray canvas (`#f0f0f0`), a neutral foundation calibrated for sustained reading and component contrast. 
+
+Typography is anchored in **Roobert PRO**, deployed with OpenType features enabled globally (`"liga" 0, "ss01", "ss04", "ss05"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Negative letter-spacing at display sizes (-1.68px at 56px) compresses headlines into engineered blocks, dense and precise. 
+
+Body text reads in Pure Black (`#000000`) (contrast ratio 19.8:1, well above WCAG AA). **#fde050** (`#fde050`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Elevation is built from multi-layer shadow stacks — each level combines several blurred layers at varying offsets to simulate how light falls on stacked surfaces. 
+Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. 
+
+**Key Characteristics:**
+- Background: Light Gray (`#f0f0f0`)
+- Primary typeface: Open Sans
+- Accent: #fde050 (`#fde050`)
+- Display: 56px weight 500, letter-spacing -1.68px
+- Shadow system: 5 distinct elevation levels
+- Custom fonts loaded: Open Sans, Fragment Mono, Nanum Pen Script, Roobert PRO Medium, Roobert PRO Bold, Roobert PRO SemiBold, Roobert PRO SemiBold Italic, Inter, Open Sans Placeholder, Noto Sans Placeholder, Roobert PRO Medium Placeholder, Roobert PRO Bold Placeholder, Roobert PRO SemiBold Placeholder, Roobert PRO SemiBold Italic Placeholder, Inter Placeholder
+
+## 2. Color Palette & Roles
+
+### Background & Surface
+- **Light Gray** (`#f0f0f0`): Page background (primary)
+- **Tertiary** (`#ffffff`): Surface / elevated background
+- **Soft Pink** (`#fde0f0`): Surface / elevated background
+- **#cdd8ff** (`#cdd8ff`): Surface / elevated background
+- **Light Gray** (`#e9eaef`): Surface / elevated background
+
+### Text & Content
+- **Pure Black** (`#000000`): Primary body text
+- **Primary** (`#1c1c1e`): Secondary text
+- **Warm Brown** (`#222428`): Secondary text
+- **#0000ee** (`#0000ee`): Secondary text
+- **#600000** (`#600000`): Secondary text
+
+### Accent & Interactive
+- **#ffdd33** (`#ffdd33`): Interactive / accent
+- **#fde050** (`#fde050`): Interactive / accent
+- **Cornflower Blue** (`#7a90fe`): Interactive / accent
+- **Secondary** (`#555a6a`): Interactive / accent
+- **Pink** (`#ffb4b4`): Interactive / accent
+- **M Tricolor Red** (`#c52c2c`): Interactive / accent
+- **Brand Indigo** (`#4658ff`): Interactive / accent
+
+### Border & Divider
+- **Silver** (`#c7cad5`): Borders / dividers
+- **Light Gray** (`#e0e2e8`): Borders / dividers
+- **Light Gray** (`#e5e2ff`): Borders / dividers
+
+### Full Extracted Palette
+**52 colors rendered on the page** + **51** more declared in design tokens (CSS custom properties — not necessarily painted). (20 categorized above + 83 additional below.)
+Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.
+
+- `#fafafc` — Off-White
+- `#111111` — Jet Black
+- `#656b81` — Slate Gray
+- `#3859ff` — #3859ff
+- `#fff09a` — Vibrant Yellow
+- `#ffe86d` — #ffe86d
+- `#6c4e05` — Chocolate
+- `#876208` — #876208
+- `#004e6f` — #004e6f
+- `#44ccff` — #44ccff
+- `#33aaff` — #33aaff
+- `#2c88c9` — Steel Blue
+- `#c9512c` — Terracotta
+- `#aa2cc9` — #aa2cc9
+- `#f1f2f5` — Light Gray
+- `#a8f7f0` — #a8f7f0
+- `#0a9285` — #0a9285
+- `#0e4343` — #0e4343
+- `#212121` — Warm Brown
+- `#c3f4d6` — #c3f4d6
+- `#0aae3a` — Success Green
+- `#e1fbf9` — Light Gray
+- `#187574` — Teal
+- `#fffae7` — Warm Cream
+- `#d7b029` — #d7b029
+- `#e3f7ea` — Light Gray
+- `#067429` — #067429
+- `#ffe6cd` — Vibrant Yellow
+- `#db8641` — Warm Terracotta
+- `#655be6` — Brand Indigo
+- `#808080` — Medium Gray
+- `#db4f4f` — Vermillion
+- *…+51 more in `raw-css.json` (`desktop.allColors`).*
+
+### Gradients & Decorative Fills
+
+- `linear-gradient(135deg,#e87ef1 0%,#fd3 25%,#47d1c4 50%,#85e1ff 75%,#867aff 100%)` — (--tw-background-image-ai-gradient)
+- `linear-gradient(42.9deg,#3859ff 13.33%,#6355e3 27.99%,#975eed 57.31%,#c966f6 86.64%)` — (--tw-nebula-sunrise-gradient)
+
+### CSS Custom Properties (Design Tokens)
+
+**Shadow Token**
+- `--tw-inset-shadow-alpha`: `100%`
+- `--tw-ring-shadow`: `0 0 #0000`
+- `--tw-drop-shadow-alpha`: `100%`
+- `--tw-inset-ring-shadow`: `0 0 #0000`
+
+**Motion Token**
+- `--tw-default-transition-duration`: `.15s`
+- `--tw-animation-delay`: `0s`
+- `--tw-default-transition-timing-function`: `cubic-bezier(.4,0,.2,1)`
+
+**Font Family Token**
+- `--tw-font-family-noto`: `"Noto Sans",sans-serif`
+- `--tw-font-family-pro`: `"Roobert PRO","Roobert PRO Medium",sans-serif`
+
+**Warning**
+- `--tw-color-yellow-light`: `#fffae7`
+- `--tw-color-yellow-dark`: `#746019`
+- `--tw-color-yellow-700`: `lab(47.8202% 25.2426 66.5015)`
+- `--tw-color-yellow-400`: `lab(83.2664% 8.65132 106.895)`
+
+**Success**
+- `--tw-color-green-400`: `lab(78.503% -64.9264 39.7492)`
+- `--tw-color-success-accent`: `#00b473`
+- `--tw-color-green`: `#d1f7ea`
+- `--tw-color-green-50`: `lab(98.1563% -5.60117 2.75913)`
+
+**Border Radius Token**
+- `--tw-radius-xs`: `.125rem`
+- `--tw-radius-2xl`: `1rem`
+- `--radius`: `.625rem`
+- `--tw-radius-3xl`: `1.5rem`
+
+**Spacing Token**
+- `--tw-spacing`: `.25rem`
+- `--container-padding`: `3rem`
+- `--tw-space-x-reverse`: `0`
+- `--container-padding-sm`: `1.5rem`
+
+**Font Weight Token**
+- `--tw-font-weight-normal`: `400`
+- `--tw-font-weight-black`: `900`
+- `--tw-font-weight-medium`: `500`
+- `--tw-font-weight-semibold`: `600`
+
+**Error / Destructive**
+- `--tw-color-red`: `#fbd4d4`
+- `--tw-color-error-accent`: `#f24726`
+- `--tw-color-error-background`: `#fbd4d4`
+
+**Border**
+- `--tw-color-divider-light`: `#f1f2f5`
+- `--tw-color-divider`: `#d9dae0`
+
+**Primary Brand Color**
+- `--tw-color-primary`: `#1c1c1e`
+
+**Secondary Color**
+- `--tw-color-secondary`: `#555a6a`
+
+**Background**
+- `--tw-color-canvas-sunshine`: `#fde050`
+
+**Other tokens**
+- `--tw-color-blue-50`: `lab(96.492% -1.14644 -5.11479)`
+- `--tw-text-lg`: `1.125rem`
+- `--tw-text-xs`: `.75rem`
+- `--tw-text-4xl`: `2.25rem`
+- `--sidebar-primary-foreground`: `lab(98.26% -.0000298023 0)`
+- `--tw-color-light-gray`: `#fafafc`
+- `--tw-color-orange-200`: `lab(88.4871% 9.94918 28.8378)`
+- `--tw-text-xs--line-height`: `calc(1/.75)`
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `Roobert PRO Medium`
+- **Secondary**: `Open Sans`
+- **Font 3**: `Fragment Mono`
+- **Font 4**: `Nanum Pen Script`
+- **Font 5**: `Noto Sans`
+
+### Custom Fonts Loaded
+- **Open Sans** weight 500 (normal)
+- **Fragment Mono** weight 400 (normal)
+- **Nanum Pen Script** weight 400 (normal)
+- **Noto Sans** weight 400 (normal)
+- **Noto Sans** weight 700 (normal)
+- **Roobert PRO Medium** weight 500 (normal)
+- **Roobert PRO Bold** weight 700 (normal)
+- **Roobert PRO Medium** weight normal (normal)
+- **Roobert PRO SemiBold** weight 600 (normal)
+- **Roobert PRO SemiBold Italic** weight normal (normal)
+- **Inter** weight 400 (normal)
+- **Inter** weight 600 (normal)
+- **Inter** weight 700 (normal)
+- **Inter** weight 900 (italic)
+- **Open Sans Placeholder** weight normal (normal)
+- **Noto Sans Placeholder** weight normal (normal)
+- **Roobert PRO Medium Placeholder** weight normal (normal)
+- **Roobert PRO Bold Placeholder** weight normal (normal)
+- **Roobert PRO SemiBold Placeholder** weight normal (normal)
+- **Roobert PRO SemiBold Italic Placeholder** weight normal (normal)
+- **Inter Placeholder** weight normal (normal)
+- **Noto Sans** weight 600 (normal)
+- **Noto Sans** weight 500 (normal)
+- **Noto Sans** weight 900 (normal)
+
+### Typography Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Roobert PRO Medium | 56px | 500 | 1 | -1.68px | Main headline (h1) |
+| Sub-heading | Roobert PRO Medium | 40px | 400 | 1.15 | -1.2px | Third-level heading (h3) |
+| Button Large | Roobert PRO | 16px | 900 | 1.43 | normal | Button label (16px) |
+| Button Large | Roobert PRO | 16px | 500 | 1.5 | normal | Button label (16px) |
+| Button Large | Open Sans | 16px | 600 | 1.5 | normal | Button label (16px) |
+| Input Large | Open Sans | 16px | 400 | normal | normal | Form input (16px) |
+| Card Title | Open Sans | 12px | 400 | normal | normal | Card headings |
+
+### Font Weight Scale
+
+CSS custom properties define 6 explicit weight steps:
+- `--tw-font-weight-normal`: `400` — Regular
+- `--tw-font-weight-regular`: `400` — Regular
+- `--tw-font-weight-medium`: `500` — Medium
+- `--tw-font-weight-semibold`: `600` — SemiBold
+- `--tw-font-weight-bold`: `700` — Bold
+- `--tw-font-weight-black`: `900` — Black
+
+### Full Font Size Scale
+
+Sizes detected in the design (descending): `56px`, `48px`, `40px`, `24px`, `22px`, `20px`, `18px`, `17.23px`, `16px`, `14px`, `12px`
+
+> 7 size(s) detected outside the sampled hierarchy (48px, 24px, 22px, 20px, 18px, 17.23px, 14px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.
+
+### OpenType & Variable Font Features
+
+The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback:
+
+- **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants)
+- **ligatures** — common letter pairs replaced with refined glyphs (fi, fl, etc.)
+
+**Clone instruction:** Enable these in your CSS:
+```css
+body {
+  font-feature-settings: "liga", "ss01", "ss04", "ss05", "blwf", "cv03", "cv04", "cv09", "cv11";
+}
+```
+
+## 4. Component Stylings
+
+### Buttons
+
+**Ghost**
+- Background: `transparent`
+- Text: `#1c1c1e`
+- Padding: 4px
+- Radius: 8px
+- Font: 12px weight 400
+- Use: Subtle action, toolbar, nav button
+
+**Primary Brand**
+- Background: `#fde050` `{colors.semantic-warning}`
+- Text: `#1c1c1e`
+- Padding: 8px 12px
+- Radius: 8px
+- Font: 16px weight 900
+- Use: Primary CTA / brand action
+
+**Ghost**
+- Background: `transparent`
+- Text: `#1c1c1e`
+- Padding: 8px 4px 8px 8px
+- Radius: 8px
+- Font: 16px weight 500
+- Use: Subtle action, toolbar, nav button
+
+**Outline**
+- Background: `transparent`
+- Text: `#1c1c1e`
+- Padding: 8px 12px
+- Radius: 8px
+- Border: 1px solid rgb(199, 202, 213)
+- Font: 16px weight 600
+- Use: Secondary action with border
+
+**Secondary**
+- Background: `#1c1c1e`
+- Text: `#ffffff` `{colors.surface-1}`
+- Padding: 8px 12px
+- Radius: 8px
+- Font: 16px weight 600
+- Use: Secondary action
+
+**Icon Button**
+- Background: `#ffffff` `{colors.surface-1}`
+- Text: `#1c1c1e`
+- Padding: 12px 12px 12px 9px
+- Radius: 50%
+- Shadow: `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2...`
+- Font: 12px weight 400
+- Use: Toolbar/UI icons
+
+**Icon Button**
+- Background: `#ffffff` `{colors.surface-1}`
+- Text: `#1c1c1e`
+- Padding: 12px 9px 12px 12px
+- Radius: 50%
+- Shadow: `rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2...`
+- Font: 12px weight 400
+- Use: Toolbar/UI icons
+
+### Inputs & Forms
+
+**Text Input**
+- Background: `#ffffff` `{colors.surface-1}`
+- Text: `#1c1c1e`
+- Padding: 16px
+- Radius: 8px
+- Border: 1px solid rgb(233, 234, 239)
+- Font: 16px weight 400
+- Use: Text fields, search inputs
+- Focus: outline: `rgb(16, 16, 16) auto 1px`
+
+### Navigation
+
+**Main Nav**
+- Background: `#ffffff` `{colors.surface-1}`
+- Padding: 16px
+- Radius: none
+- Shadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0...`
+- Font: 12px weight 400
+- Use: Fixed/sticky block nav — N/A items
+
+### Pricing Cards
+
+**Default Tier**
+- Background: `transparent`
+- Text: `#1c1c1e`
+- Padding: 8px
+- Radius: 8px
+- Font: 16px weight 500
+- Use: Subscription tier card
+
+
+## 4b. Component Behaviors (State Matrix)
+
+### Interaction State Narrative
+
+- **FooterLink**:
+  - **hover:** text #ffffff → #000000, border changes
+
+*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*
+
+```yaml
+component-behaviors:
+  button:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(28, 28, 30)"
+  input:
+    default:
+      bg: "rgb(255, 255, 255)"
+      fg: "rgb(28, 28, 30)"
+      border: "1px solid rgb(233, 234, 239)"
+    focus:
+      bg: "rgb(255, 255, 255)"
+      fg: "rgb(28, 28, 30)"
+      border: "1px solid rgb(233, 234, 239)"
+  link:
+    default:
+      bg: "rgb(253, 224, 80)"
+      fg: "rgb(28, 28, 30)"
+  card:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(0, 0, 0)"
+  navLink:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(0, 0, 238)"
+  footerLink:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(255, 255, 255)"
+    hover:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)"
+```
+
+**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.
+
+
+## 4c. Component Vocabulary (Closed System)
+
+*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*
+
+### Buttons
+- **5 shape(s)** in this system: `Ghost`, `Primary Brand`, `Outline`, `Secondary`, `Icon Button`
+- **DO NOT introduce new buttons variants** without justification
+
+### Inputs & Forms
+- **1 shape(s)** in this system: `Text Input`
+- **DO NOT introduce new inputs & forms variants** without justification
+
+### Navigation
+- **1 shape(s)** in this system: `Main Nav`
+- **DO NOT introduce new navigation variants** without justification
+
+### Pricing Cards
+- **1 shape(s)** in this system: `Default Tier`
+- **DO NOT introduce new pricing cards variants** without justification
+
+## 5. Layout Principles
+
+### Layout Type
+**top-nav + content**
+
+### Grid
+Single column, centered content
+
+### Max Width
+1200px
+
+### Spacing System
+Compact spacing — information density prioritized
+
+| Token | Value |
+|-------|-------|
+| xxs | 2px |
+| xs | 4px |
+| sm | 8px |
+| md | 12px |
+| base | 16px |
+| lg | 24px |
+| xl | 32px |
+| 2xl | 48px |
+| 3xl | 64px |
+
+### Border Radius Scale
+| Name | Value | Use |
+|------|-------|-----|
+| None | 0px | No rounding |
+| Xs | 8px | Tiny corners (badges, micro elements) |
+| Sm | 8px | Buttons, inputs, small elements |
+| Md | 12px | Cards, containers |
+| Lg | 20px | Large rounded elements, pill segments |
+| Xl | 24px | Category strips, featured containers |
+| Full | 999px | Pills, avatars, circular elements |
+
+### Shape Language
+
+| Component | Border Radius |
+|-----------|---------------|
+| Buttons | `8px` |
+| Inputs & Forms | `8px` |
+| Navigation | `none` |
+| Pricing Cards | `8px` |
+| Page Body | `0px` |
+| Primary Input | `8px` |
+
+**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.
+
+**Full Radius Spectrum**: 0px, 7px, 8px, 12px, 20px, 24px, 40px, 50px (from `allBorderRadii` scan)
+
+
+## 5b. Spacing Rhythm Names
+
+*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*
+
+| Name | Value | Use case |
+|------|-------|----------|
+| **hero** | `64px` | Top/bottom of full-bleed hero sections |
+| **section** | `32px` | Between major bands (color change, content shift) |
+| **subsection** | `24px` | Within a section, between content groups |
+| **card** | `12px` | Card padding, list-item spacing |
+| **compact** | `8px` | Form fields, tight clusters, badge padding |
+| **micro** | `4px` | Icon-text gap, tag inner padding |
+
+**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).
+
+## 5c. Widget & Structure Library
+
+Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).
+
+**4/8 structural patterns detected.**
+
+### Hero Pattern
+
+- **Composition:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
+- **Viewport coverage:** 130px tall (not full-viewport)
+- **Heading:** "La couche de collaboration dont vos outils d’IA ont besoin." — 56px center-aligned
+- **CTAs:** none detected in hero (unusual — agent should verify)
+- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. No imagery needed for hero — text-driven.
+
+### Navigation Pattern
+
+- **Position:** static (scrolls with page)
+- **Layout:** unknown — Layout not classified
+- **Height:** 1px
+- **Logo:** ✗ absent
+- **Nav links:** 76 primary items
+- **CTAs in nav:** 0 (no buttons — links only)
+- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.
+
+### Card Grid Pattern
+
+- **Card count:** 7 cards detected
+- **Columns (desktop):** 2-up grid
+- **Card dimensions:** 680×562px (aspect 1.21:1)
+- **Gap:** 24px between cards
+- **Content:** ✓ image + CTA
+- **Image position:** top
+- **Clone instruction:** Build a 2-column grid (desktop) with cards at ~1.21:1 aspect ratio. Each card has an image at the top.
+
+### Footer Pattern
+
+- **Columns:** 1
+- **Links:** 66 total
+- **Height:** 944px
+- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
+- **Clone instruction:** Build a 1-column footer with ~66 links per column, social media links, and a copyright line.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, content blocks |
+| Layered (Level 1) | <br>`rgba(0, 0, 0, 0) 0px 0px 0px 0px`,<br>`rgba(0, 0, 0, 0) 0px 0px 0px 0px`,<br>`rgba(0, 0, 0, 0) 0px 0px 0px 0px`,<br>`rgba(0, 0, 0, 0) 0px 0px 0px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`,<br>`rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Cards, elevated surfaces |
+| Layered (Level 2) | <br>`rgba(0, 0, 0, 0.06) 0px 1px 8px 0px` | Cards, elevated surfaces |
+| Inset (Level 3) | <br>`rgb(122, 144, 254) 0px 1px 1px 0px inset` | Buttons, pressed-state elements |
+| Layered (Level 4) | <br>`rgb(224, 226, 232) 0px 0px 0px 1px` | Cards, elevated surfaces |
+
+**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.
+
+## 7. Motion & Interaction
+
+### Easing System
+
+| CSS Variable | Curve | Semantic Name |
+|--------------|-------|---------------|
+| `--tw-default-transition-timing-function` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
+| `--tw-ease-in-out` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
+
+### Duration Scale
+
+| CSS Variable | Value | Tier |
+|--------------|-------|------|
+| `--tw-default-transition-duration` | `.15s` | Fast |
+
+### Copy-Paste Transition Snippets
+
+**Transform**
+```css
+transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), translate 0.2s cubic-bezier(0.4, 0, 0.2, 1), scale 0.2s cubic-bezier(0.4...;
+```
+
+**All Props**
+```css
+transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+```
+
+**Background**
+```css
+transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s;
+```
+
+**Background**
+```css
+transition: background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+```
+
+### Keyframe Animation Catalog
+
+| Animation Name | Type | Animated Props | Use Hint |
+|----------------|------|----------------|----------|
+| `pulse` | Fade | opacity | Attention / status |
+| `enter` | Fade + Move | opacity, transform, filter | Element entrance |
+| `exit` | Fade + Move | opacity, transform, filter | Element exit |
+| `accordion-down` | Custom | height | UI transition |
+| `accordion-up` | Custom | height | UI transition |
+| `collapsible-down` | Custom | height | UI transition |
+| `collapsible-up` | Custom | height | UI transition |
+| `float-top-left` | Slide | transform | UI transition |
+| `float-bottom-left` | Slide | transform | UI transition |
+| `float-bottom-right` | Slide | transform | UI transition |
+| `testimonial-card-reveal` | Fade + Move | opacity, transform | UI transition |
+| `ctaPulse` | Custom | box-shadow | Attention / status |
+| `__framer-loading-spin` | Rotate / Spin | transform | Loading indicator |
+| `onetrust-fade-in` | Fade | opacity | Element entrance |
+
+### Motion Fingerprint
+
+- **Speed Character**: Balanced Pacing (median duration: `200ms`)
+- **Dominant Easing**: custom cubic-bezier curves
+- **Animation Library**: 14 unique animations (14 total including variants)
+
+> This design moves with balanced pacing timing using custom cubic-bezier curves, creating a UI that feels natural and fluid.
+
+## 8. Do's and Don'ts
+
+### Do
+- Use Light Gray (`#f0f0f0`) as the page background — it's intentionally not pure white
+- Use sans-serif as the primary typeface — it defines the brand personality
+- Use negative letter-spacing (-1.68px) at display sizes for compressed, editorial headlines
+- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
+- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
+- Use #fde050 (`#fde050`) as the primary accent — it's the brand's signature interactive color
+- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
+- Style form inputs with a `1px solid rgb(233, 234, 239)` border — use border-based inputs, not floating labels or underline-only
+- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
+- Keep the hero centered and text-driven — no decorative media, typography carries the message
+- Each card includes a top image — imagery is part of the card identity, not optional
+
+### Don't
+- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
+- Don't substitute with generic sans-serif or serif — the custom font carries the brand
+- Don't increase letter-spacing on headings — the type is designed to run tight at scale
+- Don't invent new shadow values — use only the extracted shadow levels
+- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
+- Don't introduce additional saturated accent colors — the palette is intentionally controlled
+- Don't remove the input border — the border is the primary affordance indicator for form fields
+- Don't add hero illustrations or photos — they'll break the typographic restraint
+- Don't make the nav sticky — this design lets it scroll away to maximize content focus
+- Don't put a CTA button in the nav — this design uses links only at the top
+
+
+## 7b. Enforceable Brand Rules
+
+*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*
+
+```yaml
+rules:
+  - id: brand-canvas-001
+    type: do
+    rule: "Always use the page background `rgb(240, 240, 240)` as the base canvas"
+    why: "Every component is designed to composit against this exact tone"
+    test: "document.body.style.backgroundColor === 'rgb(240, 240, 240)'"
+  - id: brand-accent-001
+    type: do
+    rule: "Reserve `rgb(253, 224, 80)` for primary CTAs and brand-mark signals only"
+    why: "Single chromatic assertion device — overuse dilutes meaning"
+    test: "querySelectorAll('[style*=\"rgb(253, 224, 80)\"]').length <= 3 per fold"
+```
+
+## 9. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | 400px | Single column, compact spacing |
+| Mobile | 460px | Single column, compact spacing |
+| Mobile Large | 530px | Expanded mobile layout |
+| Mobile Large | 767px | Expanded mobile layout |
+| Tablet | 1023px | Multi-column grids begin |
+| Desktop | 1280px | Full feature layout |
+
+### Token Diff — Desktop vs Mobile
+
+| Element | Property | Desktop | Mobile |
+|---------|----------|---------|--------|
+| heading | font-size | `56px` | `32px` |
+| heading | line-height | `56px` | `33.6px` |
+| heading | letter-spacing | `-1.68px` | `-0.96px` |
+| button | width | `auto` | `32px` |
+| card | width | `800px` | `342px` |
+
+### Collapsing Strategy
+- Headlines: 56px → 32px on mobile
+- Navigation: horizontal links → hamburger menu on mobile
+- Cards: multi-column → stacked vertical on mobile
+- Footer: multi-column → stacked single column on mobile
+
+### Touch Targets
+- Buttons: 4px padding
+- Navigation: adequate spacing between items
+- Interactive elements: minimum 44px touch target recommended
+
+### Collapsing Narrative
+
+How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):
+
+- **Card grid: 2-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.
+
+## 9b. Visual Tone & Photography
+
+**Tone:** Mixed photography + illustration
+
+A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.
+
+**Canonical Brand Image (OG):**
+- https://framerusercontent.com/assets/Bab0War93Jeq5MpDPwqKFiyI.png
+  *This is the image shown when the site is shared on social media — represents the brand visual essence.*
+
+**Aspect Ratio Distribution:**
+- Landscape (1.15–2.3): 16 (64%)
+- Portrait (<0.87): 5 (20%)
+- Square (0.87–1.15): 1 (4%)
+- Ultra-wide (>2.3): 3 (12%)
+
+**Media Format Mix:**
+- JPG: 3 (typically photographic content)
+- WebP: 1 (optimized photo/illustration hybrid)
+- PNG: 19 (logos, transparent UI elements, mockups)
+- SVG: 5 (icons, illustrations, decorative geometry)
+
+**Average rendered image size:** 487×335px
+**Above-fold image count:** 0 / 25
+
+**Decorative Patterns Detected:**
+- 12 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
+- 1 radial gradient — circular color blooms used for spotlight/glow effects
+- 3 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents
+- 13 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops
+
+**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.
+
+**Imagery Guidance for clones:**
+- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
+- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.
+
+## 10. Agent Prompt Guide
+
+### Quick Reference
+- Background: Light Gray (`#f0f0f0`)
+- Primary text: Pure Black (`#000000`)
+- Accent: #fde050 (`#fde050`)
+- Border: #cdd8ff (`#cdd8ff`)
+- Font: Open Sans
+- Body: 12px weight 400
+
+### Example Component Prompts
+- "Create a hero section on Light Gray background (#f0f0f0). Headline at 56px Open Sans weight 500, line-height 1, letter-spacing -1.68px, color #000000."
+- "Create the primary CTA button: `#fde050` background, `#1c1c1e` text, 8px border-radius, 8px 12px padding, 900 weight, Open Sans font."
+- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
+- "Build navigation: absolute on `#f0f0f0`. Open Sans 12px weight 400 for links."
+
+### Iteration Guide
+1. **Canvas**: Set the light canvas to Light Gray (`#f0f0f0`) — every component is composited against this exact base.
+2. **Typography**: All type in Open Sans, weight range 400–900. Never exceed 900 — heavier weights break the brand's tonal restraint.
+3. **Accent**: #fde050 (`#fde050`) is the sole interactive color. On hover → #ffdd33 (`#ffdd33`). Use CSS transitions, not opacity/brightness filters.
+4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 150ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
+5. **Shape**: CTAs at `8px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
+6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
+7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.
+
+## 11. CSS Design Tokens Raw Export
+
+*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*
+
+```css
+/* Colors */
+:root {
+  --ca-background: #f0f0f0;
+  --ca-surface-1: #ffffff;
+  --ca-surface-2: #fde0f0;
+  --ca-ink-subtle: #555a6a;
+  --ca-semantic-warning: #fde050;
+  --ca-on-primary: #111111;
+  --ca-primary-hover: #ffdd33;
+  --ca-hairline: #cdd8ff;
+  --ca-semantic-error: #f24726;
+  --ca-semantic-success: #00b473;
+}
+
+/* Typography */
+:root {
+  --ca-font-primary: "Roobert PRO Medium", system-ui, sans-serif;
+  --ca-text-display: 56px;
+  --ca-text-body: 12px;
+  --ca-text-button: 16px;
+  --ca-text-mono: 16px;
+}
+
+/* Spacing & Radius */
+:root {
+  --ca-space-xxs: 2px;
+  --ca-space-xs: 4px;
+  --ca-space-sm: 8px;
+  --ca-space-md: 12px;
+  --ca-space-base: 16px;
+  --ca-space-lg: 24px;
+  --ca-space-xl: 32px;
+  --ca-space-2xl: 48px;
+  --ca-space-3xl: 64px;
+  --ca-radius-none: 0px;
+  --ca-radius-xs: 8px;
+  --ca-radius-sm: 8px;
+  --ca-radius-md: 12px;
+  --ca-radius-lg: 20px;
+  --ca-radius-xl: 24px;
+  --ca-radius-full: 999px;
+}
+```
+
+
+## 13. Page Structure Skeleton
+
+*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*
+
+```yaml
+page-skeleton:
+  - section: unknown
+    tag: div
+    height: 8767px
+    width: full-bleed
+    layout: block
+    children: 3
+  - section: unknown
+    tag: div
+    height: 773px
+    width: 1391px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-igemwh-container"]
+    height: 108px
+    width: 270px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1p1qfvd-container"]
+    height: 108px
+    width: 270px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 560px
+    width: 908px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 454px
+    width: 807px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1y4llaa-container"]
+    height: 545px
+    width: full-bleed
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 2700px
+    width: 4320px
+    layout: block
+    children: 1
+  - section: section-4
+    tag: section
+    classes: ["framer-26SBT"]
+    height: 1105px
+    width: full-bleed
+    layout: flex-row justify=flex-start
+    children: 1
+  - section: unknown
+    tag: div
+    height: 1105px
+    width: full-bleed
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 1105px
+    width: full-bleed
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1w5prbq-container"]
+    height: 1105px
+    width: full-bleed
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 174px
+    width: 284px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1qjurpq-container"]
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1qjurpq-container"]
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-gmmnrw-container"]
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-1qjurpq-container"]
+    height: 482px
+    width: 304px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 334px
+    width: 480px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 246px
+    width: 480px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 335px
+    width: 262px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-fsrpbl-container"]
+    height: 108px
+    width: 379px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    classes: ["framer-xcbgrj-container"]
+    height: 108px
+    width: 314px
+    layout: block
+    children: 1
+  - section: unknown
+    tag: div
+    height: 1747px
+    width: 3120px
+    layout: block
+    children: 1
+```
+
+**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).
+
+
+## 14. Copy Library (Real Content from Source)
+
+*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*
+
+```yaml
+copy:
+  section-headings:
+    - "Aller vite est essentiel,
+avoir un impact l’est encore plus"
+    - "+ de 100 M"
+    - "Découvrez l’espace de travail pour l’innovation"
+    - "Besoin d’aide pour démarrer ?"
+  sub-headings:
+    - "Donnez une direction commune à vos recherches"
+    - "IA"
+    - "Démarrez rapidement"
+    - "Discutez avec 
+des utilisateurs de Miro"
+    - "Démarrez 
+avec Miro"
+  ctas:
+    - "Regarder maintenant"
+    - "Produit"
+    - "Tarifs"
+    - "Se connecter"
+    - "Contacter l’équipe de vente"
+    - "Démarrez gratuitement"
+    - "S’inscrire gratuitement"
+  navigation:
+    - "IA"
+    - "AI Workflows"
+    - "Connecteurs"
+    - "MCP"
+    - "Playbooks d’IA"
+    - "Miro Prototypes"
+    - "Miro Insights"
+    - "Miro Roadmaps"
+    - "Miro Specs"
+    - "Miro Technical Design"
+  footer-links:
+    - "Applications et intégrations"
+    - "Plateforme de développement de Miro"
+    - "ISO 42001 READY"
+```
+
+**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.
+
+
+## 15. Asset Inventory (Image Roles & Ratios)
+
+*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*
+
+```yaml
+assets:
+  logo:
+    count: 24
+    avg-ratio: 3.44
+    common-aspect: "~16:6 banner"
+  editorial:
+    count: 3
+    avg-ratio: 0.63
+    common-aspect: "~9:16 portrait"
+  thumbnail:
+    count: 7
+    avg-ratio: 1.00
+    common-aspect: "~1:1 square"
+```
+
+**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.
+
+
+## 16. Component HTML Templates
+
+*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*
+
+### Button (primary action)
+```html
+<button class="btn btn-primary">
+  Regarder maintenant
+</button>
+```
+_Source pattern detected: padding `8px 12px` · radius `8px` · weight `900`_
+
+### Generic Card
+```html
+<div class="card">
+  <!-- content -->
+</div>
+```
+_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_
+
+**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.
+
+
+## 12. Known Extraction Gaps
+
+*Auto-detected limitations of this extraction — understand before building:*
+
+- **Sparse component extraction** — fewer than 5 component types detected. Highly dynamic sections (modals, datepickers, carousels) require interaction to render and are not captured in a static pass.
+- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.
+
+
+---
+## Extraction Completeness: 89/100 (B)
+
+| Category | Score | Max | Detail |
+|----------|-------|-----|--------|
+| Colors & Palette | 25 | 25 | 20 named colors |
+| Typography | 18 | 20 | 7 roles defined |
+| Components | 16 | 20 | 4 specs extracted |
+| Motion & Interaction | 15 | 15 | Keyframes present, easing vars |
+| CSS Custom Properties | 10 | 10 | 294 vars |
+| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
+| Variable Fonts | 0 | 5 | None detected |
+
+## 12. Known Gaps & Confidence
+
+Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.
+
+| Category | What's missing | Fallback strategy |
+|----------|----------------|-------------------|
+| **Hero imagery** | No dominant hero image detected above the fold | Use the canonical brand visual from §9b (OG image) for hero composition |
+
+### Per-section confidence
+
+| Section | Confidence | Reason |
+|---------|------------|--------|
+| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
+| §2 Colors | High | 294 CSS vars (semantic naming requires ≥20 for high) |
+| §3 Typography | High | 7 typography roles inferred |
+| §4 Components | Medium | 4 component variants captured |
+| §7 Motion | High | Keyframes + transitions |
+| §8 Do's/Don'ts | High | 21 rules generated; design-decisions.json has evidence per rule |
+| §9 Responsive | High | 6 breakpoints detected |
+| §9b Photography | Medium | 25 images, hero not detected |
+
+---
+*Generated by Clone Architect — automated Playwright extraction + design analysis.*
+*Source: https://miro.com | 2026-05-30T22:28:30.944Z*
+*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*