prism-design 2.13.0

package/extractions/instagram.com/DESIGN.md

@@ -0,0 +1,996 @@
+---
+version: alpha
+name: instagram.com
+description: "Light product system built on #ffffff with #4150f7 as the primary CTA accent. Type anchored in -apple-system at 24px / weight 700. Extracted automatically from https://instagram.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
+narrative: |
+  instagram.com is built on a pure-white canvas (rgb(255, 255, 255)).
+  The system uses rgb(65, 80, 247) as the high-saturation accent for primary actions.
+  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside -apple-system as the primary typeface.
+  Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.
+  Motion is a first-class concern — 148 keyframe animations plus transition-driven interactions.
+
+colors:
+  background: "#ffffff"
+  surface-1: "#f3f5f7"
+  surface-2: "#efefef"
+  ink-muted: "#262626"
+  ink-subtle: "#8e8e8e"
+  primary: "#4150f7"
+  on-primary: "#ffffff"
+  primary-hover: "#4a5df9"
+  hairline: "rgba(43, 48, 54, 0.8)"
+  accent-glow: "#65676b"
+  semantic-success: "#31a24c"
+
+typography:
+  display-xl:
+    fontFamily: "Instagram Sans Condensed"
+    fontSize: 24px
+    fontWeight: 700
+    lineHeight: normal
+    letterSpacing: 0
+  body:
+    fontFamily: "Instagram Sans Condensed"
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.29
+    letterSpacing: 0
+  body-sm:
+    fontFamily: "Instagram Sans Condensed"
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.29
+    letterSpacing: 0
+  button:
+    fontFamily: "Instagram Sans Condensed"
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.29
+    letterSpacing: 0
+  mono:
+    fontFamily: "Instagram Sans Condensed"
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: normal
+    letterSpacing: 0
+
+rounded:
+  none: 0px
+  xs: 2px
+  sm: 8px
+  md: 12px
+  lg: 20px
+  xl: 32px
+  pill: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 8px
+  sm: 16px
+  md: 12px
+  lg: 24px
+  xl: 32px
+  xxl: 64px
+  section: 80px
+
+components:
+  button-icon-button:
+    backgroundColor: "transparent"
+    textColor: "#000000"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 8px
+  button-ghost:
+    backgroundColor: "transparent"
+    textColor: "#000000"
+    typography: "{typography.body}"
+    rounded: "{rounded.none}"
+    padding: 16px 8px
+  button-ghost-2:
+    backgroundColor: "transparent"
+    textColor: "#3143e3"
+    typography: "{typography.body}"
+    rounded: "{rounded.xs}"
+
+extracted_at: "2026-05-31T05:50:51.014Z"
+completeness: 69
+scoreVersion: "v2"
+
+---
+
+# Design System — instagram.com
+> Extracted automatically by Prism from https://www.instagram.com/p/DY936iSjPPd/
+> Date: 2026-05-31
+> 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(255, 255, 255)` is the page background. Every component composits against this.
+> - **Accent**: `rgb(65, 80, 247)` for primary CTAs ONLY. Never decorative.
+> - **Body type**: 14px (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
+
+instagram.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 
+
+Headlines are set in **-apple-system**, a sans-serif display face (the dominant type signature, e.g. "Ne manquez aucune publication de rondesignlab" at 24px). Body text is set in **Roboto**. 
+
+Body text reads in Pure Black (`#000000`) (contrast ratio 21.0:1, well above WCAG AA). **Deep Purple** (`#4150f7`) 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. Shadow is absent by design — depth is conveyed through borders, spacing, and color differentiation rather than light simulation. 
+Motion design uses smooth easing curves for polished state transitions. 
+
+**Key Characteristics:**
+- Background: Pure White (`#ffffff`)
+- Primary typeface: Instagram Sans Condensed
+- Accent: Deep Purple (`#4150f7`)
+- Custom fonts loaded: Instagram Sans Condensed, Instagram Sans Condensed Regular, Instagram Sans, Segoe UI Historic, Fix for Mac Chrome 80, Optimistic Text Light, Optimistic Text Light Swap, Optimistic Text Normal, Optimistic Text Normal Swap, Optimistic Text Medium, Optimistic Text Medium Swap, Optimistic Text Bold, Optimistic Text Bold Swap, Optimistic Text ExtraBold, Optimistic Text ExtraBold Swap, Optimistic Text Viet Light, Optimistic Text Viet Light Swap, Optimistic Text Viet Normal, Optimistic Text Viet Normal Swap, Optimistic Text Viet Bold, Optimistic Text Viet Bold Swap, Optimistic Text Arbc Light, Optimistic Text Arbc Light Swap, Optimistic Text Arbc Normal, Optimistic Text Arbc Normal Swap, Optimistic Text Arbc Bold, Optimistic Text Arbc Bold Swap, Optimistic Display Light, Optimistic Display Light Swap, Optimistic Display Medium, Optimistic Display Medium Swap, Optimistic Display Semibold, Optimistic Display Semibold Swap, Optimistic Display Bold, Optimistic Display Bold Swap, Optimistic Display Viet Light, Optimistic Display Viet Light Swap, Optimistic Display Viet Medium, Optimistic Display Viet Medium Swap, Optimistic Display Viet Bold, Optimistic Display Viet Bold Swap, Optimistic Display Arbc Light, Optimistic Display Arbc Light Swap, Optimistic Display Arbc Medium, Optimistic Display Arbc Medium Swap, Optimistic Display Arbc Bold, Optimistic Display Arbc Bold Swap, Optimistic, Optimistic DM, Optimistic 95
+
+## 2. Color Palette & Roles
+
+### Background & Surface
+- **Pure White** (`#ffffff`): Page background (primary)
+- **Light Gray** (`#f3f5f7`): Surface / elevated background
+- **#dbdbdb** (`#dbdbdb`): Surface / elevated background
+- **Light Gray** (`#efefef`): Surface / elevated background
+- **Light Gray** (`#dadde1`): Surface / elevated background
+
+### Text & Content
+- **Pure Black** (`#000000`): Primary body text
+- **Text Badge Success Background** (`#31a24c`): Text (CSS var)
+- **Text Highlight** (`rgba(24, 119, 242, 0.2)`): Text (CSS var)
+- **Text Badge Critical Background** (`#e41e3f`): Text (CSS var)
+- **Translucent Charcoal (80%)** (`rgba(43, 48, 54, 0.8)`): Secondary text
+
+### Accent & Interactive
+- **Primary Button Background** (`#0095f6`): Accent / interactive (CSS var)
+- **Primary Web Focus Indicator** (`#d24294`): Accent / interactive (CSS var)
+- **Primary Icon** (`#262626`): Accent / interactive (CSS var)
+- **Primary Button Pressed** (`#77a7ff`): Accent / interactive (CSS var)
+- **Deep Purple** (`#4150f7`): Interactive / accent
+- **Brand Indigo** (`#4a5df9`): Interactive / accent
+- **#3143e3** (`#3143e3`): Interactive / accent
+
+### Border & Divider
+- **Border Focused** (`#65676b`): Border (CSS var)
+- **Divider On Color** (`#ced0d4`): Border (CSS var)
+- **Silver** (`#ccd0d5`): Borders / dividers
+
+### Full Extracted Palette
+**17 colors rendered on the page** + **161** more declared in design tokens (CSS custom properties — not necessarily painted). (20 categorized above + 158 additional below.)
+Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.
+
+- `rgba(12, 16, 20, 0.7)` — Translucent Jet Black (70%)
+- `#737373` — Stone
+- `#00376b` — #00376b
+- `#1c1e21` — Near Black
+- `#483b0c` — #483b0c *(token)*
+- `rgba(68, 73, 80, 0.15)` — Translucent Dark Gray (15%) *(token)*
+- `#fff6a1` — Vibrant Yellow *(token)*
+- `#2851a3` — #2851a3 *(token)*
+- `#5e310e` — Chocolate *(token)*
+- `#0866ff` — #0866ff *(token)*
+- `#1a441b` — #1a441b *(token)*
+- `#00987c` — #00987c *(token)*
+- `#080809` — Pure Black *(token)*
+- `#ff66bf` — Hot Pink *(token)*
+- `#147b29` — Forest Green *(token)*
+- `rgba(45, 136, 255, 0.1)` — Translucent Ring Blue (10%) *(token)*
+- `rgba(190, 195, 201, 0.2)` — Translucent Silver (20%) *(token)*
+- `#4507a9` — #4507a9 *(token)*
+- `#f0f2f5` — Light Gray *(token)*
+- `#fef2d1` — Beige *(token)*
+- `#cdcfd1` — Silver *(token)*
+- `#fb724b` — Coral *(token)*
+- `#043b72` — #043b72 *(token)*
+- `#0a4438` — #0a4438 *(token)*
+- `#1c1c1c` — Near Black *(token)*
+- `#1455b0` — Cobalt Blue *(token)*
+- `#e7f3ff` — Light Gray *(token)*
+- `#ccd3db` — Light Blue *(token)*
+- `#5d2e04` — Chocolate *(token)*
+- `#d2f0ea` — Light Gray *(token)*
+- `#0a1317` — Jet Black *(token)*
+- `#fcdec5` — Vibrant Yellow *(token)*
+- *…+126 more in `raw-css.json` (`desktop.allColors`).*
+
+### Gradients & Decorative Fills
+
+- `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6))` — (--always-dark-gradient)
+- `linear-gradient(to top, #FFFFFF, rgba(255,255,255.9), rgba(255,255,255,.7), rgba(255,255,255,.4), rg…` — (--nav-bar-background-gradient)
+- `linear-gradient(to top, #F0F2F5, rgba(240,242,245.9), rgba(240,242,245,.7), rgba(240,242,245,.4), rg…` — (--nav-bar-background-gradient-wash)
+
+### CSS Custom Properties (Design Tokens)
+
+**Font Size Token**
+- `--system-26-font-size`: `26px`
+- `--system-13-font-size`: `12px`
+- `--text-input-field-font-size`: `1rem`
+- `--system-18-font-size`: `18px`
+
+**Border Radius Token**
+- `--card-corner-radius`: `4px`
+- `--button-corner-radius-large`: `12px`
+- `--live-video-border-radius`: `4px`
+- `--igds-dialog-border-radius`: `24px`
+
+**Spacing Token**
+- `--creation-padding-y`: `112px`
+- `--chat-bubble-padding-vertical`: `8px`
+- `--messenger-card-spacing`: `16px`
+- `--polaris-site-padding-top`: `30px`
+
+**Font Family Token**
+- `--font-family-default`: `Helvetica, Arial, sans-serif`
+- `--font-family-segoe`: `Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif`
+- `--font-family-code`: `ui-monospace, Menlo, Consolas, Monaco, monospace`
+- `--font-family-apple`: `system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif`
+
+**Shadow Token**
+- `--card-box-shadow`: `0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)`
+- `--shadow-base`: `0 1px 2px rgba(0, 0, 0, 0.2)`
+- `--shadow-2`: `rgba(0, 0, 0, 0.2)`
+- `--scroll-shadow`: `0 1px 2px rgba(0, 0, 0, 0.1), 0 -1px rgba(0, 0, 0, 0.1) inset`
+
+**Font Weight Token**
+- `--font-weight-system-medium`: `500`
+- `--font-weight-system-light`: `300`
+- `--font-weight-system-bold`: `700`
+- `--font-weight-system-regular`: `400`
+
+**Motion Token**
+- `--fds-animation-swap-shuffle-in`: `cubic-bezier(0.14, 1, 0.34, 1)`
+- `--glimmer-animation-duration`: `1000ms`
+- `--glimmer-animation-timing-function`: `steps(10, end)`
+
+**Error / Destructive**
+- `--input-label-color-error`: `hsl(350, 87%, 55%)`
+- `--badge-background-color-red`: `#e41e3f`
+
+**Success**
+- `--badge-background-color-green`: `#31A24C`
+
+**Warning**
+- `--badge-background-color-yellow`: `#F7B928`
+
+**Z-Index Token**
+- `--modal-z-index`: `100`
+
+**Text Color**
+- `--chat-text-blockquote-color-text-primary-media`: `rgba(255, 255, 255, 0.7)`
+
+**Background**
+- `--chat-text-blockquote-color-background-line`: `rgba(0, 0, 0, 0.12)`
+
+**Other tokens**
+- `--ig-colors-button-primary-background--pressed`: `65, 80, 247`
+- `--ig-menu-text-color`: `12, 16, 20`
+- `--text-badge-success-background`: `#31A24C`
+- `--text-secondary`: `153, 153, 153`
+- `--teal-primary`: `rgb(0,152,124)`
+- `--ig-text-input-border-hover-prism`: `12, 16, 20`
+- `--ig-colors-button-primary-text--disabled`: `white-00`
+- `--text-input-outside-label`: `#000000`
+
+## 3. Typography Rules
+
+### Font Families
+- **Primary**: `-apple-system`
+- **Secondary**: `Instagram Sans Condensed`
+- **Font 3**: `Instagram Sans Condensed Regular`
+- **Font 4**: `Instagram Sans`
+- **Font 5**: `Segoe UI Historic`
+
+### Custom Fonts Loaded
+- **Instagram Sans Condensed** weight 400 (normal)
+- **Instagram Sans Condensed Regular** weight 400 (normal)
+- **Instagram Sans** weight 400 (normal)
+- **Segoe UI Historic** weight normal (normal)
+- **Segoe UI Historic** weight 700 (normal)
+- **Fix for Mac Chrome 80** weight 500 (normal)
+- **Optimistic Text Light** weight 300 (normal)
+- **Optimistic Text Light Swap** weight 300 (normal)
+- **Optimistic Text Normal** weight 400 (normal)
+- **Optimistic Text Normal Swap** weight 400 (normal)
+- **Optimistic Text Medium** weight 500 (normal)
+- **Optimistic Text Medium Swap** weight 500 (normal)
+- **Optimistic Text Bold** weight 700 (normal)
+- **Optimistic Text Bold Swap** weight 700 (normal)
+- **Optimistic Text ExtraBold** weight 800 (normal)
+- **Optimistic Text ExtraBold Swap** weight 800 (normal)
+- **Optimistic Text Viet Light** weight 300 (normal)
+- **Optimistic Text Viet Light Swap** weight 300 (normal)
+- **Optimistic Text Viet Normal** weight 400 (normal)
+- **Optimistic Text Viet Normal Swap** weight 400 (normal)
+- **Optimistic Text Viet Bold** weight 700 (normal)
+- **Optimistic Text Viet Bold Swap** weight 700 (normal)
+- **Optimistic Text Arbc Light** weight 300 (normal)
+- **Optimistic Text Arbc Light Swap** weight 300 (normal)
+- **Optimistic Text Arbc Normal** weight 400 (normal)
+- **Optimistic Text Arbc Normal Swap** weight 400 (normal)
+- **Optimistic Text Arbc Bold** weight 700 (normal)
+- **Optimistic Text Arbc Bold Swap** weight 700 (normal)
+- **Optimistic Display Light** weight 300 (normal)
+- **Optimistic Display Light Swap** weight 300 (normal)
+- **Optimistic Display Medium** weight 500 (normal)
+- **Optimistic Display Medium Swap** weight 500 (normal)
+- **Optimistic Display Semibold** weight 600 (normal)
+- **Optimistic Display Semibold Swap** weight 600 (normal)
+- **Optimistic Display Bold** weight 700 (normal)
+- **Optimistic Display Bold Swap** weight 700 (normal)
+- **Optimistic Display Viet Light** weight 300 (normal)
+- **Optimistic Display Viet Light Swap** weight 300 (normal)
+- **Optimistic Display Viet Medium** weight 500 (normal)
+- **Optimistic Display Viet Medium Swap** weight 500 (normal)
+- **Optimistic Display Viet Bold** weight 700 (normal)
+- **Optimistic Display Viet Bold Swap** weight 700 (normal)
+- **Optimistic Display Arbc Light** weight 300 (normal)
+- **Optimistic Display Arbc Light Swap** weight 300 (normal)
+- **Optimistic Display Arbc Medium** weight 500 (normal)
+- **Optimistic Display Arbc Medium Swap** weight 500 (normal)
+- **Optimistic Display Arbc Bold** weight 700 (normal)
+- **Optimistic Display Arbc Bold Swap** weight 700 (normal)
+- **Optimistic** weight 300 800 (normal)
+- **Optimistic DM** weight 300 800 (normal)
+- **Optimistic 95** weight 300 800 (normal)
+
+### Typography Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Instagram Sans Condensed | 24px | 700 | normal | normal | Display face (visual prominence — no h1/h2 in DOM) |
+| Body | Instagram Sans Condensed | 14px | 400 | 1.29 | normal | Standard reading text |
+| Button | Instagram Sans Condensed | 14px | 500 | 1.29 | normal | Button label (14px) |
+| Link | Instagram Sans Condensed | 14px | 600 | 1.29 | normal | Link (14px) — Decoration: none |
+| Input | Instagram Sans Condensed | 12px | 400 | normal | normal | Form input (12px) |
+
+### Font Weight Scale
+
+CSS custom properties define 9 explicit weight steps:
+- `--font-weight-system-extra-light`: `200` — ExtraLight
+- `--font-weight-system-light`: `300` — Light
+- `--font-weight-system-regular`: `400` — Regular
+- `--text-input-label-font-weight`: `400` — Regular
+- `--font-weight-system-medium`: `500` — Medium
+- `--text-input-field-font-weight`: `500` — Medium
+- `--font-weight-system-semibold`: `600` — SemiBold
+- `--font-weight-system-bold`: `700` — Bold
+- `--font-weight-system-extra-bold`: `800` — ExtraBold
+
+### Full Font Size Scale
+
+Sizes detected in the design (descending): `24px`, `16px`, `14px`, `12px`
+
+> 1 size(s) detected outside the sampled hierarchy (16px). 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)
+
+**Clone instruction:** Enable these in your CSS:
+```css
+body {
+  font-feature-settings: "ss02", "ss01";
+}
+```
+
+## 4. Component Stylings
+
+### Buttons
+
+**Icon Button**
+- Background: `transparent`
+- Text: `#000000`
+- Padding: 8px
+- Radius: 0px
+- Font: 14px weight 400
+- Use: Toolbar/UI icons
+
+**Ghost**
+- Background: `transparent`
+- Text: `#000000`
+- Padding: 16px 8px
+- Radius: 0px
+- Font: 14px weight 400
+- Use: Subtle action, toolbar, nav button
+
+**Ghost**
+- Background: `transparent`
+- Text: `#3143e3`
+- Padding: 0px
+- Radius: 2px
+- Font: 14px weight 500
+- Use: Subtle action, toolbar, nav button
+
+**Primary Brand**
+- Background: `#4a5df9` `{colors.primary-hover}`
+- Text: `#ffffff` `{colors.on-primary}`
+- Padding: 0px 16px
+- Radius: 8px
+- Font: 14px weight 600
+- Use: Primary CTA / brand action
+
+**Primary Brand**
+- Background: `#4a5df9` `{colors.primary-hover}`
+- Text: `#ffffff` `{colors.on-primary}`
+- Padding: 12px 20px
+- Radius: 12px
+- Font: 14px weight 600
+- Use: Primary CTA / brand action
+
+
+## 4b. Component Behaviors (State Matrix)
+
+### Interaction State Narrative
+
+
+*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(0, 0, 0)"
+  link:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(65, 80, 247)"
+  footerLink:
+    default:
+      bg: "rgba(0, 0, 0, 0)"
+      fg: "rgb(115, 115, 115)"
+```
+
+**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
+- **3 shape(s)** in this system: `Icon Button`, `Ghost`, `Primary Brand`
+- **DO NOT introduce new buttons variants** without justification
+
+## 5. Layout Principles
+
+### Layout Type
+**top-nav + content**
+
+### Grid
+Flexbox column
+
+### Max Width
+935px
+
+### Spacing System
+Compact spacing — information density prioritized
+
+| Token | Value |
+|-------|-------|
+| xxs | 2px |
+| xs | 8px |
+| sm | 16px |
+| md | 12px |
+| base | 16px |
+| lg | 24px |
+| xl | 32px |
+| 2xl | 48px |
+| 3xl | 64px |
+
+### Border Radius Scale
+| Name | Value | Use |
+|------|-------|-----|
+| None | 0px | No rounding |
+| Xs | 2px | Tiny corners (badges, micro elements) |
+| Sm | 8px | Buttons, inputs, small elements |
+| Md | 12px | 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 |
+|-----------|---------------|
+| Buttons | `0px` |
+| Page Body | `0px` |
+
+**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.
+
+**Full Radius Spectrum**: 0px, 2px, 8px, 12px, 20px, 32px, 38px (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** | `16px` | Form fields, tight clusters, badge padding |
+| **micro** | `8px` | 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.**
+
+### Card Grid Pattern
+
+- **Card count:** 3 cards detected
+- **Columns (desktop):** 2-up grid
+- **Card dimensions:** 935×414px (aspect 2.26:1)
+- **Gap:** 1px between cards
+- **Content:** ✓ image
+- **Image position:** top
+- **Clone instruction:** Build a 2-column grid (desktop) with cards at ~2.26:1 aspect ratio. Each card has an image at the top.
+
+### Footer Pattern
+
+- **Columns:** 1
+- **Links:** 16 total
+- **Height:** 135px
+- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
+- **Clone instruction:** Build a 1-column footer with ~16 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 |
+
+**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.
+
+## 7. Motion & Interaction
+
+### Dominant Easing Curves
+
+| Curve | Semantic Name |
+|-------|---------------|
+| `ease` | CSS ease — Default |
+| `ease-out` | Ease Out — Decelerating |
+| `ease-in-out` | Ease In-Out — Symmetric |
+
+### Duration Scale
+
+| CSS Variable | Value | Tier |
+|--------------|-------|------|
+| `--glimmer-animation-duration` | `1000ms` | Cinematic |
+| `--ig-duration-extra-extra-short-in` | `100ms` | Fast |
+| `--fds-duration-extra-short-out` | `150ms` | Fast |
+| `--fds-duration-extra-short-in` | `200ms` | Normal |
+| `--fds-duration-extra-long-in` | `1000ms` | Cinematic |
+| `--fds-duration-short-out` | `200ms` | Normal |
+| `--fds-duration-none` | `0ms` | Instant |
+| `--fds-duration-short-in` | `280ms` | Normal |
+| `--fds-duration-long-out` | `350ms` | Slow |
+| `--fds-duration-extra-long-out` | `1000ms` | Cinematic |
+
+### Copy-Paste Transition Snippets
+
+**All Props**
+```css
+transition: height 0.2s ease-in-out;
+```
+
+**Opacity**
+```css
+transition: opacity 0.1s ease-out;
+```
+
+**Transform**
+```css
+transition: transform 0.15s ease-out;
+```
+
+**All Props**
+```css
+transition: 0.2s ease-in-out;
+```
+
+### Keyframe Animation Catalog
+
+| Animation Name | Type | Animated Props | Use Hint |
+|----------------|------|----------------|----------|
+| `x10tv6ar-B` | Slide | transform | UI transition |
+| `x122imku-B` | Fade | height, opacity | UI transition |
+| `x127erq4-B` | Fade | opacity | UI transition |
+| `x12cjf5l-B` | Custom | background-position-x | UI transition |
+| `x12ve19h-B` | Fade | opacity | UI transition |
+| `x1397pin-B` | Slide | transform | UI transition |
+| `x13sqfrp-B` | Slide | transform | UI transition |
+| `x16auqsx-B` | Fade | opacity | UI transition |
+| `x16ddlwn-B` | Slide | transform | UI transition |
+| `x16e58t8-B` | Rotate / Spin | transform | UI transition |
+| `x17f32z3-B` | Fade | opacity | UI transition |
+| `x17qceat-B` | Fade | opacity | UI transition |
+| `x17t1eie-B` | Custom | height | UI transition |
+| `x18ppsx7-B` | Fade | box-shadow, opacity | UI transition |
+| `x18re5ia-B` | Fade | opacity | UI transition |
+| `x18x0dr7-B` | Fade + Move | opacity, transform | UI transition |
+| `x190dji-B` | Custom | height | UI transition |
+| `x19100ke-B` | Custom | background-position-x, background-position-y | UI transition |
+| `x1941mlr-B` | Rotate / Spin | stroke-dashoffset, transform | UI transition |
+| `x1acst8a-B` | Custom | animation-timing-function, stroke-dasharray, stroke-dashoffset | UI transition |
+
+> *128 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.*
+
+### Motion Fingerprint
+
+- **Speed Character**: Deliberate & Calm (median duration: `350ms`)
+- **Dominant Easing**: custom cubic-bezier curves
+- **Animation Library**: 148 unique animations (148 total including variants)
+
+> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.
+
+## 8. Do's and Don'ts
+
+### Do
+- Use -apple-system as the primary typeface — it defines the brand personality
+- Use Deep Purple (`#4150f7`) as the primary accent — it's the brand's signature interactive color
+- Use small 2px radius for buttons — this design system uses subtle rounding, not pill shapes
+- Each card includes a top image — imagery is part of the card identity, not optional
+
+### Don't
+- Don't substitute with generic sans-serif or serif — the custom font carries the brand
+- Don't introduce additional saturated accent colors — the palette is intentionally controlled
+- Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
+
+
+## 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(255, 255, 255)` as the base canvas"
+    why: "Every component is designed to composit against this exact tone"
+    test: "document.body.style.backgroundColor === 'rgb(255, 255, 255)'"
+  - id: brand-accent-001
+    type: do
+    rule: "Reserve `rgb(65, 80, 247)` for primary CTAs and brand-mark signals only"
+    why: "Single chromatic assertion device — overuse dilutes meaning"
+    test: "querySelectorAll('[style*=\"rgb(65, 80, 247)\"]').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 | 375px | Single column, compact spacing |
+| Mobile | 480px | Single column, compact spacing |
+| Mobile Large | 639px | Expanded mobile layout |
+| Mobile Large | 735px | Expanded mobile layout |
+| Mobile Large | 767px | Expanded mobile layout |
+| Tablet | 1024px | Multi-column grids begin |
+| Desktop | 1263px | Full feature layout |
+| Large Desktop | 1439px | Maximum content width |
+
+### Token Diff — Desktop vs Mobile
+
+| Element | Property | Desktop | Mobile |
+|---------|----------|---------|--------|
+| button | padding | `8px` | `8px 0px 8px 8px` |
+| button | width | `34px` | `32px` |
+
+### 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
+- Buttons: 8px 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):
+
+*No major structural differences detected between desktop and mobile widgets. The same blueprints scale rather than collapse — verify by inspecting actual mobile render.*
+
+
+## 7c. Visual Effects & Dynamic Behavior
+
+*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*
+
+- **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image.
+- **CSS-variable animations** (5) — animated custom properties.
+
+> **Motion fingerprint**: Canvas 2D
+
+## 9b. Visual Tone & Photography
+
+**Tone:** Photography-driven
+
+The site is dominated by photography (JPG/WebP). Photos carry the brand voice as much as the typography. Use authentic, brand-appropriate imagery — generic stock will degrade quality.
+
+**Canonical Brand Image (OG):**
+- https://scontent-cdg4-1.cdninstagram.com/v/t51.82787-15/709864061_18594382267056352_782038829959996209_n.jpg?stp=c640.0.1920.1920a_dst-jpg_e35_s640x640_tt6&_nc_cat=105&ccb=7-5&_nc_sid=18de74&efg=eyJlZmdfdGFnIjoiQ0FST1VTRUxfSVRFTS5iZXN0X2ltYWdlX3VybGdlbi5DMyJ9&_nc_ohc=q4-XeQJNor4Q7kNvwGklCW3&_nc_oc=AdpOdIf864s9w-YljZwLWO0WTkD7BsGkRuP7Aww7UUT50PB-yqpL_auu2i9G-9bNjYlPint6WfAYoOWynZDHLqci&_nc_zt=23&_nc_ht=scontent-cdg4-1.cdninstagram.com&_nc_gid=9VW4g9KjXBQypPbIHBsk7Q&_nc_ss=79689&oh=00_Af-kr9bzhB8unOlv2_uc-Cg8G812aFezhJ0KtGg1shmgOQ&oe=6A2193E9
+  *This is the image shown when the site is shared on social media — represents the brand visual essence.*
+
+**Hero Image (above-fold dominant visual):**
+- Aspect: 0.8:1 (portrait / vertical)
+- Rendered size: 479×599px
+- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*
+
+**Aspect Ratio Distribution:**
+- Landscape (1.15–2.3): 1 (8%)
+- Portrait (<0.87): 10 (83%)
+- Square (0.87–1.15): 1 (8%)
+
+**Media Format Mix:**
+- JPG: 11 (typically photographic content)
+- GIF: 1 (animated content)
+
+**Average rendered image size:** 316×423px
+**Above-fold image count:** 6 / 12
+
+**Decorative Patterns Detected:**
+- 1 multi-stop linear gradient (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
+
+**Clone instruction for decorative work:** Decorative details are subtle — don't over-style; the design relies on restraint.
+
+**Imagery Guidance for clones:**
+- Source authentic photography (or licensed stock that matches the brand mood) — placeholders will visibly degrade the clone.
+- Match the dominant aspect ratio (see above) so card grids and hero compositions hold.
+
+## 10. Agent Prompt Guide
+
+### Quick Reference
+- Background: Pure White (`#ffffff`)
+- Primary text: Pure Black (`#000000`)
+- Accent: Deep Purple (`#4150f7`)
+- Border: Translucent Charcoal (80%) (`rgba(43, 48, 54, 0.8)`)
+- Font: Instagram Sans Condensed
+- Body: 14px weight 400
+
+### Example Component Prompts
+- "Create the primary CTA button: `#4150f7` background, `#000000` text, 9999px border-radius, 8px padding, 600 weight, Instagram Sans Condensed font."
+- "Build navigation: sticky on `#ffffff`. Instagram Sans Condensed 16px weight 400 for links."
+
+### Iteration Guide
+1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base.
+2. **Typography**: All type in Instagram Sans Condensed, weight range 200–800. Never exceed 800 — heavier weights break the brand's tonal restraint.
+3. **Accent**: Deep Purple (`#4150f7`) is the sole interactive color. On hover → Brand Indigo (`#4a5df9`). Use CSS transitions, not opacity/brightness filters.
+4. **Motion**: All transitions use `cubic-bezier(0,0,1,1)`. Timing: 100ms for micro-interactions, 350ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
+5. **Shape**: CTAs at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
+6. **Spacing**: Use the `--ca-space-*` token scale (8px–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-on-primary: #ffffff;
+  --ca-surface-1: #f3f5f7;
+  --ca-surface-2: #efefef;
+  --ca-ink-muted: #262626;
+  --ca-ink-subtle: #8e8e8e;
+  --ca-primary: #4150f7;
+  --ca-primary-hover: #4a5df9;
+  --ca-hairline: #2b3036;
+  --ca-accent-glow: #65676b;
+  --ca-semantic-success: #31a24c;
+}
+
+/* Typography */
+:root {
+  --ca-font-primary: "Instagram Sans Condensed", system-ui, sans-serif;
+  --ca-text-display: 24px;
+  --ca-text-body: 14px;
+  --ca-text-small: 14px;
+  --ca-text-button: 14px;
+  --ca-text-mono: 12px;
+}
+
+/* Spacing & Radius */
+:root {
+  --ca-space-xxs: 2px;
+  --ca-space-xs: 8px;
+  --ca-space-sm: 16px;
+  --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: 2px;
+  --ca-radius-sm: 8px;
+  --ca-radius-md: 12px;
+  --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: content-section
+    tag: div
+    height: 1374px
+    width: full-bleed
+    layout: block
+    children: 1
+    tone: dark
+    contains: chart/canvas (reproduce as live data-viz, not a flat image)
+  - section: content-section
+    tag: div
+    height: 1374px
+    width: full-bleed
+    layout: block
+    children: 1
+    tone: dark
+    contains: chart/canvas (reproduce as live data-viz, not a flat image)
+  - section: content-section
+    tag: main
+    classes: ["xvbhtw8", "x78zum5", "xdt5ytf", "x1iyjqo2"]
+    height: 2083px
+    width: full-bleed
+    layout: flex-column justify=center
+    children: 2
+    bg: "rgb(255, 255, 255)"
+    contains: chart/canvas (reproduce as live data-viz, not a flat image)
+  - section: content-section
+    tag: section
+    classes: ["x78zum5", "xdt5ytf", "x1iyjqo2", "xg6iff7"]
+    height: 2218px
+    width: full-bleed
+    layout: flex-column justify=normal
+    children: 3
+    tone: dark
+    contains: chart/canvas (reproduce as live data-viz, not a flat image)
+  - section: footer
+    tag: footer
+    classes: ["x1qjc9v5", "x9f619", "x78zum5", "xdt5ytf"]
+    height: 135px
+    width: full-bleed
+    layout: flex-column justify=normal
+    children: 1
+    bg: "rgb(255, 255, 255)"
+    contains: chart/canvas (reproduce as live data-viz, not a flat image)
+    padding: "0px 16px"
+```
+
+**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:
+  ctas:
+    - "Suivre"
+    - "J’aime"
+    - "Répondre"
+    - "355"
+  footer-links:
+    - "Meta"
+```
+
+**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:
+  editorial:
+    count: 2
+    avg-ratio: 0.56
+    common-aspect: "~9:16 portrait"
+    sample-alts:
+      - "Hi guys❣️Don’t miss our #Behance case tommorow 💙
+
+Veri came"
+      - "Hi guys❣️Meet our upcoming #Behance case 💙
+
+Moverta needed "
+  thumbnail:
+    count: 8
+    avg-ratio: 1.00
+    common-aspect: "~1:1 square"
+    sample-alts:
+      - "Photo de profil de rondesignlab"
+      - "Photo de profil de rondesignlab"
+      - "Photo de profil de rondesignlab"
+```
+
+**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">
+  Action
+</button>
+```
+_Source pattern detected: padding `8px` · radius `0px` · weight `400`_
+
+**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.
+
+
+---
+## Extraction Completeness: 69/100 (C)
+
+| Category | Score | Max | Detail |
+|----------|-------|-----|--------|
+| Colors & Palette | 25 | 25 | 20 named colors |
+| Typography | 13 | 20 | 5 roles defined |
+| Components | 4 | 20 | 1 specs extracted |
+| Motion & Interaction | 12 | 15 | Keyframes present |
+| CSS Custom Properties | 10 | 10 | 1141 vars |
+| Responsive Breakpoints | 5 | 5 | 8 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 |
+|----------|----------------|-------------------|
+| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |
+
+### Per-section confidence
+
+| Section | Confidence | Reason |
+|---------|------------|--------|
+| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
+| §2 Colors | High | 1141 CSS vars (semantic naming requires ≥20 for high) |
+| §3 Typography | High | 5 typography roles inferred |
+| §4 Components | Low | 1 component variants captured |
+| §7 Motion | High | Keyframes + transitions |
+| §8 Do's/Don'ts | Medium | 7 rules generated; design-decisions.json has evidence per rule |
+| §9 Responsive | High | 8 breakpoints detected |
+| §9b Photography | High | 12 images, hero present |
+
+---
+*Generated by Prism — automated Playwright extraction + design analysis.*
+*Source: https://www.instagram.com/p/DY936iSjPPd/ | 2026-05-31T05:50:51.306Z*
+*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.*