prism-design 2.13.0

package/extractions/choisis-ton-avenir.com/tokens.json

@@ -0,0 +1,227 @@
+{
+  "meta": {
+    "source": "https://www.choisis-ton-avenir.com",
+    "domain": "choisis-ton-avenir.com",
+    "extractedAt": "2026-05-31T04:56:27.249Z",
+    "tokenizedAt": "2026-05-31T04:56:42.407Z"
+  },
+  "colors": {
+    "background": {
+      "primary": "rgb(255, 255, 255)",
+      "secondary": "rgb(243, 241, 253)",
+      "tertiary": "rgb(244, 241, 253)"
+    },
+    "text": {
+      "primary": "rgb(38, 38, 38)",
+      "secondary": "rgb(0, 0, 0)",
+      "muted": "#54595F"
+    },
+    "accent": {
+      "primary": "rgb(255, 228, 86)",
+      "secondary": "rgb(86, 60, 220)"
+    },
+    "border": "rgb(102, 102, 102)",
+    "shadow": "rgba(0,0,0,0.1)",
+    "semantic": {
+      "error": "#dc3545",
+      "success": "#198754",
+      "warning": "#ffc107",
+      "info": "#0dcaf0"
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "primary": "Poppins",
+      "secondary": "Merriweather",
+      "mono": "monospace"
+    },
+    "fontSize": {
+      "xs": "11px",
+      "sm": "15px",
+      "base": "16px",
+      "lg": "20px",
+      "xl": "25px",
+      "2xl": "28px",
+      "3xl": "35px",
+      "4xl": "44px"
+    },
+    "fontWeight": {
+      "normal": "400",
+      "medium": "500",
+      "semibold": "700",
+      "bold": "700"
+    },
+    "lineHeight": {
+      "tight": "1.27",
+      "normal": "1.5",
+      "relaxed": "1.5"
+    },
+    "letterSpacing": {
+      "tight": "-0.025em",
+      "normal": "0em",
+      "wide": "0.025em"
+    }
+  },
+  "spacing": {
+    "xxs": "2px",
+    "xs": "10px",
+    "sm": "15px",
+    "md": "20px",
+    "base": "24px",
+    "lg": "25px",
+    "xl": "30px",
+    "2xl": "50px",
+    "3xl": "64px"
+  },
+  "borderRadius": {
+    "none": "0px",
+    "xs": "4px",
+    "sm": "10px",
+    "md": "12px",
+    "lg": "20px",
+    "xl": "25px",
+    "full": "9999px"
+  },
+  "shadows": {
+    "shadow-1": "rgba(0, 0, 0, 0.19) 0px 10px 20px 0px, rgba(0, 0, 0, 0.23) 0px 6px 6px 0px",
+    "shadow-2": "rgba(0, 0, 0, 0.05) 0px -2px 3px 0px",
+    "shadow-3": "rgb(128, 128, 128) 0px 0px 5px 0px"
+  },
+  "transitions": {
+    "transition-1": "all",
+    "transition-2": "0.5s",
+    "transition-3": "0.3s",
+    "transition-4": "background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s, transform 0.4s",
+    "transition-5": "0.3s ease-in"
+  },
+  "layout": {
+    "maxWidth": "1200px",
+    "headerHeight": "82px",
+    "sidebarWidth": "0px",
+    "gap": "normal",
+    "containerPadding": "0px"
+  },
+  "cssCustomProperties": {
+    "--bs-yellow": "#ffc107",
+    "--bs-info": "#0dcaf0",
+    "--bs-orange": "#fd7e14",
+    "--wp--preset--gradient--midnight": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+    "--bs-gray": "#6c757d",
+    "--cmplz_category_header_title_font_size": "14px",
+    "--wp--preset--font-size--large": "36px",
+    "--wp--preset--shadow--outlined": "6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)",
+    "--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+    "--bs-success": "#198754",
+    "--wp--preset--color--vivid-purple": "#9b51e0",
+    "--wp--preset--gradient--blush-light-purple": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+    "--cmplz_button_font_size": "15px",
+    "--wp--preset--aspect-ratio--16-9": "16/9",
+    "--wp--preset--color--pale-pink": "#f78da7",
+    "--cmplz_slider_inactive_color": "#F56E28",
+    "--bs-primary": "#0d6efd",
+    "--wp--preset--color--cyan-bluish-gray": "#abb8c3",
+    "--cmplz_text_font_size": "14px",
+    "--bs-font-monospace": "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
+    "--wp--preset--gradient--electric-grass": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+    "--cmplz_text_color": "#222222",
+    "--cmplz_banner_border_width": "0px 0px 0px 0px",
+    "--cmplz_button_border_radius": "10px 10px 10px 10px",
+    "--wp--preset--gradient--blush-bordeaux": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+    "--wp--preset--spacing--60": "2.25rem",
+    "--cmplz_button_deny_text_color": "#ffffff",
+    "--wp--preset--color--vivid-green-cyan": "#00d084",
+    "--wp--preset--shadow--deep": "12px 12px 50px rgba(0, 0, 0, 0.4)",
+    "--cmplz_banner_border_radius": "12px 12px 12px 12px",
+    "--cmplz_button_deny_border_color": "#573ddb",
+    "--bs-cyan": "#0dcaf0",
+    "--bs-purple": "#6f42c1",
+    "--cmplz_button_settings_text_color": "#333333",
+    "--bs-green": "#198754",
+    "--cmplz_button_accept_text_color": "#ffffff",
+    "--cmplz_category_header_active_font_size": "12px",
+    "--cmplz_slider_bullet_color": "#ffffff",
+    "--cmplz_banner_width": "626px",
+    "--cmplz_button_settings_background_color": "#f9f9f9",
+    "--wp--preset--spacing--40": "1rem",
+    "--wp--preset--aspect-ratio--3-2": "3/2",
+    "--cmplz_slider_active_color": "#1e73be",
+    "--bs-secondary": "#6c757d",
+    "--page-title-display": "block",
+    "--wp--preset--color--luminous-vivid-orange": "#ff6900",
+    "--wp--preset--aspect-ratio--2-3": "2/3",
+    "--wp--preset--font-size--x-large": "42px",
+    "--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple": "linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)",
+    "--cmplz_categories-height": "216px",
+    "--bs-gray-dark": "#343a40",
+    "--bs-pink": "#d63384",
+    "--bs-red": "#dc3545",
+    "--cmplz_text_line_height": "calc(14px * 1.5)",
+    "--bs-white": "#fff",
+    "--cmplz_title_font_size": "15px",
+    "--cmplz-manage-consent-height": "50px",
+    "--bs-danger": "#dc3545",
+    "--wp--preset--color--vivid-cyan-blue": "#0693e3",
+    "--wp--preset--shadow--natural": "6px 6px 9px rgba(0, 0, 0, 0.2)",
+    "--cmplz_button_settings_border_color": "#f2f2f2",
+    "--wp--preset--spacing--30": "0.67rem",
+    "--wp--preset--aspect-ratio--4-3": "4/3",
+    "--cmplz_button_accept_background_color": "#573ddb",
+    "--wp--preset--spacing--50": "1.5rem",
+    "--wp--preset--color--pale-cyan-blue": "#8ed1fc",
+    "--bs-gradient": "linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))",
+    "--wp--preset--font-size--small": "13px",
+    "--cmplz_category_header_always_active_color": "green",
+    "--wp--preset--spacing--70": "3.38rem",
+    "--cmplz_link_font_size": "14px",
+    "--cmplz_banner_background_color": "#ffffff",
+    "--bs-teal": "#20c997",
+    "--direction-multiplier": "1",
+    "--cmplz-manage-consent-offset": "-35px",
+    "--bs-indigo": "#6610f2",
+    "--cmplz_button_accept_border_color": "#573ddb",
+    "--wp--preset--gradient--luminous-dusk": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+    "--cmplz_banner_margin": "10px",
+    "--wp--preset--color--luminous-vivid-amber": "#fcb900",
+    "--bs-dark": "#212529",
+    "--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange": "linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)",
+    "--wp--preset--aspect-ratio--9-16": "9/16",
+    "--wp--preset--color--vivid-red": "#cf2e2e",
+    "--bs-font-sans-serif": "system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",\"Liberation Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
+    "--wp--preset--shadow--crisp": "6px 6px 0px rgb(0, 0, 0)",
+    "--wp--preset--color--light-green-cyan": "#7bdcb5",
+    "--wp--preset--aspect-ratio--square": "1",
+    "--cmplz_hyperlink_color": "#563cdc",
+    "--wp--preset--shadow--sharp": "6px 6px 0px rgba(0, 0, 0, 0.2)",
+    "--wp--preset--gradient--pale-ocean": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+    "--cmplz_banner_border_color": "#f2f2f2",
+    "--wp--preset--spacing--80": "5.06rem",
+    "--wp--preset--color--white": "#ffffff",
+    "--wp--preset--font-size--medium": "20px",
+    "--wp--preset--color--black": "#000000",
+    "--wp--preset--aspect-ratio--3-4": "3/4",
+    "--wp--preset--gradient--luminous-vivid-orange-to-vivid-red": "linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%)",
+    "--bs-warning": "#ffc107",
+    "--wp--preset--spacing--20": "0.44rem",
+    "--bs-light": "#f8f9fa",
+    "--cmplz_button_deny_background_color": "#573ddb",
+    "--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+    "--bs-blue": "#0d6efd",
+    "--wp--preset--gradient--cool-to-warm-spectrum": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+    "--cmplz_category_body_font_size": "14px",
+    "--e-global-color-primary": "#000000",
+    "--e-global-typography-secondary-font-weight": "400",
+    "--e-global-typography-accent-font-weight": "500",
+    "--e-global-typography-primary-font-family": "\"Poppins\"",
+    "--e-global-typography-primary-font-weight": "600",
+    "--e-global-color-bd976d2": "#EE5C52",
+    "--e-global-typography-secondary-font-family": "\"Tiro Bangla Italic\"",
+    "--e-global-typography-text-font-weight": "400",
+    "--e-global-color-text": "#000000",
+    "--e-global-color-accent": "#61CE70",
+    "--e-global-color-c4d8a40": "#563CDC",
+    "--e-global-color-7da9569": "#FFE456",
+    "--e-global-typography-text-font-family": "\"Poppins\"",
+    "--e-global-color-secondary": "#54595F",
+    "--e-global-typography-accent-font-family": "\"Poppins\""
+  }
+}

package/extractions/example.com/DESIGN.md

@@ -0,0 +1,436 @@
+---
+version: alpha
+name: example.com
+description: "Light product system built on #eeeeee with #334488 as the primary CTA accent. Type anchored in system-ui at 24px / weight 700. Extracted automatically from https://example.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
+narrative: |
+  example.com is built on a soft, near-white canvas (rgb(238, 238, 238)).
+  The system uses rgb(51, 68, 136) as the accent for primary actions and brand signals.
+  System-ui as the primary typeface.
+  Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
+  Motion is minimal — a few targeted transitions, no decorative animation.
+
+colors:
+  background: "#eeeeee"
+  surface-1: "#eeeeee"
+  surface-2: "#eeeeee"
+  primary: "#334488"
+  on-primary: "#ffffff"
+  primary-hover: "#334488"
+  hairline: "#e5e7eb"
+
+typography:
+  display-xl:
+    fontFamily: "system-ui"
+    fontSize: 24px
+    fontWeight: 700
+    lineHeight: normal
+    letterSpacing: 0
+  body:
+    fontFamily: "system-ui"
+    fontSize: 16px
+    fontWeight: 400
+    lineHeight: normal
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 4px
+  sm: 8px
+  md: 14px
+  lg: 20px
+  xl: 32px
+  pill: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 16.08px
+  sm: 135px
+  md: 12px
+  lg: 24px
+  xl: 32px
+  xxl: 64px
+  section: 80px
+
+components:
+
+
+extracted_at: "2026-05-30T22:28:35.442Z"
+completeness: 13
+scoreVersion: "v2"
+
+---
+
+# Design System — example.com
+> Extracted automatically by Clone Architect from https://example.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(238, 238, 238)` is the page background. Every component composits against this.
+> - **Accent**: `rgb(51, 68, 136)` 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.
+> - **Forbidden**: Do NOT introduce heavy box-shadows — this system relies on borders for separation
+>
+> **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
+
+example.com sits on a light gray canvas (`#eeeeee`), a neutral foundation calibrated for sustained reading and component contrast. 
+
+The system font stack (system-ui) trades brand voice for performance and platform familiarity. 
+
+Body text reads in Pure Black (`#000000`) (contrast ratio 19.7:1, well above WCAG AA). **#334488** (`#334488`) provides interactive distinction without visual aggression. Shadow is absent by design — depth is conveyed through borders, spacing, and color differentiation rather than light simulation. 
+
+
+**Key Characteristics:**
+- Background: Light Gray (`#eeeeee`)
+- Accent: #334488 (`#334488`)
+
+## 2. Color Palette & Roles
+
+### Background & Surface
+- **Light Gray** (`#eeeeee`): Page background (primary)
+
+### Text & Content
+- **Pure Black** (`#000000`): Primary body text
+
+### Accent & Interactive
+- **#334488** (`#334488`): Interactive / accent
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `system-ui`
+
+### Typography Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | system-ui | 24px | 700 | normal | normal | Main headline (h1) |
+| Body | system-ui | 16px | 400 | normal | normal | Standard reading text |
+
+### Full Font Size Scale
+
+Sizes detected in the design (descending): `24px`, `16px`
+
+## 4. Component Stylings
+
+
+## 4b. Component Behaviors (State Matrix)
+
+### Interaction State Narrative
+
+
+*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*
+
+```yaml
+component-behaviors:
+  link:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(51, 68, 136)"
+```
+
+**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.
+
+## 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 | 16.08px |
+| sm | 135px |
+| md | 12px |
+| base | 16px |
+| lg | 24px |
+| xl | 32px |
+| 2xl | 48px |
+| 3xl | 64px |
+
+### Border Radius Scale
+| Name | Value | Use |
+|------|-------|-----|
+| None | 0px | No rounding |
+| Xs | 4px | Tiny corners (badges, micro elements) |
+| Sm | 8px | Buttons, inputs, small elements |
+| Md | 14px | Cards, containers |
+| Lg | 20px | Large rounded elements, pill segments |
+| Xl | 32px | Category strips, featured containers |
+| Full | 9999px | Pills, avatars, circular elements |
+
+### Shape Language
+
+| Component | Border Radius |
+|-----------|---------------|
+| Page Body | `0px` |
+
+**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.
+
+
+## 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** | `135px` | Form fields, tight clusters, badge padding |
+| **micro** | `16.08px` | 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).
+
+**2/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:** 98px tall (not full-viewport)
+- **Heading:** "Example Domain" — 24px left-aligned
+- **Subheading:** "This domain is for use in documentation examples without needing permission. Avoid use in operations."
+- **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.
+
+### Footer Pattern
+
+- **Columns:** 1
+- **Links:** 1 total
+- **Height:** 98px
+- **Includes:** ✗ no newsletter | ✗ no social |  
+- **Clone instruction:** Build a 1-column footer with ~1 links per column.
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow | Page background, content blocks |
+
+**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.
+
+## 8. Do's and Don'ts
+
+### Do
+- Use Light Gray (`#eeeeee`) as the page background — it's intentionally not pure white
+- Use #334488 (`#334488`) as the primary accent — it's the brand's signature interactive color
+- Keep the hero centered and text-driven — no decorative media, typography carries the message
+
+### Don't
+- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
+- Don't introduce additional saturated accent colors — the palette is intentionally controlled
+- Don't add hero illustrations or photos — they'll break the typographic restraint
+- Don't over-build the footer — this design keeps it minimal (1 cols, 1 links)
+
+
+## 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(238, 238, 238)` as the base canvas"
+    why: "Every component is designed to composit against this exact tone"
+    test: "document.body.style.backgroundColor === 'rgb(238, 238, 238)'"
+  - id: brand-accent-001
+    type: do
+    rule: "Reserve `rgb(51, 68, 136)` for primary CTAs and brand-mark signals only"
+    why: "Single chromatic assertion device — overuse dilutes meaning"
+    test: "querySelectorAll('[style*=\"rgb(51, 68, 136)\"]').length <= 3 per fold"
+  - id: brand-depth-001
+    type: dont
+    rule: "Do NOT introduce drop shadows on cards or sections"
+    why: "Containment is achieved via borders, not elevation — adding shadows breaks the depth contract"
+    test: "getComputedStyle(card).boxShadow === 'none'"
+```
+
+## 9. Responsive Behavior
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | 640px | Single column layout |
+| Tablet | 768px | 2-column grids |
+| Desktop | 1024px | Full layout |
+| Large Desktop | 1280px | Maximum width |
+
+### Collapsing Strategy
+- Navigation: horizontal links → hamburger menu on mobile
+- Cards: multi-column → stacked vertical on mobile
+- Footer: multi-column → stacked single column on mobile
+
+### Touch Targets
+- 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):
+
+*No major structural differences detected between desktop and mobile widgets. The same blueprints scale rather than collapse — verify by inspecting actual mobile render.*
+
+## 9b. Visual Tone & Photography
+
+**Tone:** No imagery
+
+No detectable photographic content. The site composes entirely with typography, color blocks, and minimal vector graphics. Clone strategy: lean on type hierarchy + layout rhythm rather than visual media.
+
+**Media Format Mix:**
+- *No detectable images.*
+
+**Imagery Guidance for clones:**
+- Don't add stock imagery just to "fill space" — this site's clarity comes from typographic restraint.
+- Use generous whitespace, strong type hierarchy, and color blocks for visual rhythm.
+
+## 10. Agent Prompt Guide
+
+### Quick Reference
+- Background: Light Gray (`#eeeeee`)
+- Primary text: Pure Black (`#000000`)
+- Accent: #334488 (`#334488`)
+- Border: Light Gray (`#e5e7eb`)
+- Font: system-ui
+- Body: 16px weight 400
+
+### Example Component Prompts
+- "Create a hero section on Light Gray background (#eeeeee). Headline at 24px system-ui weight 700, line-height normal, color #000000."
+- "Create the primary CTA button: `#334488` background, `#ffffff` text, 9999px border-radius, 11px 21px padding, 700 weight, system-ui font."
+- "Build navigation: sticky on `#eeeeee`. system-ui 16px weight 400 for links."
+
+### Iteration Guide
+1. **Canvas**: Set the light canvas to Light Gray (`#eeeeee`) — every component is composited against this exact base.
+2. **Typography**: All type in system-ui, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint.
+3. **Accent**: #334488 (`#334488`) is the sole interactive color. On hover → #334488 (`#334488`). Use CSS transitions, not opacity/brightness filters.
+4. **Spacing**: Use the `--ca-space-*` token scale (16px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
+5. **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-surface-2: #eeeeee;
+  --ca-primary-hover: #334488;
+  --ca-on-primary: #ffffff;
+  --ca-hairline: #e5e7eb;
+}
+
+/* Typography */
+:root {
+  --ca-font-primary: "system-ui", system-ui, sans-serif;
+  --ca-text-display: 24px;
+  --ca-text-body: 16px;
+}
+
+/* Spacing & Radius */
+:root {
+  --ca-space-xxs: 2px;
+  --ca-space-xs: 16.08px;
+  --ca-space-sm: 135px;
+  --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: 4px;
+  --ca-radius-sm: 8px;
+  --ca-radius-md: 14px;
+  --ca-radius-lg: 20px;
+  --ca-radius-xl: 32px;
+  --ca-radius-full: 9999px;
+}
+```
+
+
+## 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: 98px
+    width: 864px
+    layout: block
+    children: 3
+```
+
+**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).
+
+
+## 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.
+
+
+---
+## Extraction Completeness: 13/100 (D)
+
+| Category | Score | Max | Detail |
+|----------|-------|-----|--------|
+| Colors & Palette | 4 | 25 | 3 named colors |
+| Typography | 5 | 20 | 2 roles defined |
+| Components | 0 | 20 | 0 specs extracted |
+| Motion & Interaction | 0 | 15 | No keyframes |
+| CSS Custom Properties | 0 | 10 | 0 vars |
+| Responsive Breakpoints | 4 | 5 | 4 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 |
+|----------|----------------|-------------------|
+| **Photography** | No photographic content detected on this page | Don't add stock imagery; clarity comes from type + color blocks |
+| **Keyframe animations** | No @keyframes declarations found (transitions only) | Use CSS transitions for state changes; avoid complex scroll-based animations |
+| **Dark mode** | No dark-mode CSS variables or media queries detected | Light mode is canonical; do not generate dark-mode variants unless explicitly requested |
+| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |
+| **Design tokens** | Only 0 CSS custom properties (low signal for semantic naming) | Color names are nearest-neighbor approximations; verify against brand guidelines if available |
+
+### Per-section confidence
+
+| Section | Confidence | Reason |
+|---------|------------|--------|
+| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
+| §2 Colors | Low | 0 CSS vars (semantic naming requires ≥20 for high) |
+| §3 Typography | Low | 2 typography roles inferred |
+| §4 Components | Low | 0 component variants captured |
+| §7 Motion | Medium | Transitions only |
+| §8 Do's/Don'ts | Medium | 7 rules generated; design-decisions.json has evidence per rule |
+| §9 Responsive | High | 4 breakpoints detected |
+| §9b Photography | Low | 0 images, hero not detected |
+
+---
+*Generated by Clone Architect — automated Playwright extraction + design analysis.*
+*Source: https://example.com | 2026-05-30T22:28:35.448Z*
+*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.*