---
version: alpha
name: chance.co
description: "Light product system built on #e0ddee with #f7ff01 as the primary CTA accent. Type anchored in Bricolage Grotesque at 84px / weight 800. Extracted automatically from https://chance.co/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  chance.co is built on a mid-light canvas (rgb(224, 221, 238)).
  The system uses rgb(247, 255, 1) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Bricolage Grotesque as the primary typeface.
  Bricolage Grotesque is paired with webflow-icons for secondary roles.
  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
  Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

colors:
  background: "#e0ddee"
  surface-1: "#f7f5ff"
  surface-2: "#e2efff"
  ink: "#181f18"
  ink-muted: "rgba(24, 31, 24, 0.65)"
  ink-subtle: "#2c2f31"
  primary: "#f7ff01"
  on-primary: "#111111"
  primary-hover: "#8ebdff"
  hairline: "#e0ddee"

typography:
  display-xl:
    fontFamily: "Bricolage Grotesque, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 100px
    fontWeight: 800
    lineHeight: 0.8
    letterSpacing: 0
  display-md:
    fontFamily: "Bricolage Grotesque, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 40px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -1px
  body:
    fontFamily: "Bricolage Grotesque, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0
  caption:
    fontFamily: "Post, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 0.83
    letterSpacing: 0
  button:
    fontFamily: "Bricolage Grotesque, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 18px
  xl: 26px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 14px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-light--invert:
    backgroundColor: "#ffffff"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.ink-muted}"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 12px 24px
  button-primary-brand:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 14px 28px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 64px
  cta-banner-full-width-cta:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 156px 0px 0px
  alert-alert-banner:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 32px

extracted_at: "2026-06-11T06:07:28.840Z"
completeness: 86
scoreVersion: "v2"

---

# Design System — chance.co
> Extracted automatically by Prism from https://www.chance.co
> Date: 2026-06-11
> 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).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: heavy  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | cool | `#e0ddee` |
| Type posture | sans-led (Bricolage Grotesque) | "Définissez le projet pro" |
| Color assertion | dual-accent | #f7ff01 |
| Whitespace | moderate | section rhythm 48px |
| Interaction | expressive | 1 keyframes, 9 transitions |
| Radius language | 4px-rounded | from token scale |

**Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 4px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(224, 221, 238)` is the page background. Every component composits against this.
> - **Accent**: `rgb(247, 255, 1)` 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

**Signature:** a gradient wash in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

chance.co sits on a light gray canvas (`#e0ddee`), a neutral foundation calibrated for sustained reading and component contrast. 

Typography is anchored in **Bricolage Grotesque**. Headlines use weight 800 for confident, assertive presence — the brand wants to be heard. 

Body text reads in Near-Black (`#181f18`) — softened from pure black, a small but deliberate detail that lowers reading friction. **#f7ff01** (`#f7ff01`) 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 (5 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with WDTH + OPSZ + WGHT axes, enabling precise weight/width control across the type hierarchy. 

**Key Characteristics:**
- Background: Light Gray (`#e0ddee`)
- Primary typeface: Post
- Primary text: Near-Black (`#181f18`)
- Accent: #f7ff01 (`#f7ff01`)
- Display: 100px weight 800
- Shadow system: 5 distinct elevation levels
- Custom fonts loaded: Post, Bricolage Grotesque, BricolageGrotesque

## 2. Color Palette & Roles

### Background & Surface
- **Light Gray** (`#e0ddee`): Page background (primary)
- **Transparent** (`transparent`): Surface / elevated background
- **Pure White** (`#ffffff`): Surface / elevated background
- **Off-White** (`#f7f5ff`): Surface / elevated background
- **#f7ff01** (`#f7ff01`): Surface / elevated background

### Text & Content
- **Near-Black** (`#181f18`): Primary body text
- **Pure Black** (`#000000`): Secondary text
- **Charcoal** (`#333333`): Secondary text
- **Near-Black** (`#222222`): Secondary text
- **#7f0000** (`#7f0000`): Secondary text

### Accent & Interactive
- **Baby Blue** (`#8ebdff`): Interactive / accent
- **Hot Pink** (`#f66bae`): Interactive / accent
- **Slate Gray** (`#675c99`): Interactive / accent
- **Royal Blue** (`#4a6fde`): Interactive / accent
- **#c00c63** (`#c00c63`): Interactive / accent
- **#636600** (`#636600`): Interactive / accent
- **#1c2977** (`#1c2977`): Interactive / accent

### Border & Divider
- **Light Grey** (`#c4c6ca`): Borders / dividers
- **Whitesmoke** (`#e4eaed`): Borders / dividers
- **Translucent Light Gray (10%)** (`rgba(221, 221, 221, 0.1)`): Borders / dividers

### Full Extracted Palette
**33 colors rendered on the page** + **9** more declared in design tokens (CSS custom properties — not necessarily painted). (20 categorized above + 22 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#515355` — Charcoal
- `#e2efff` — Light Gray
- `#727272` — Slate Grey
- `#fee7f2` — Warm Cream
- `#efedf7` — Off-White
- `#1f181b` — Near-Black
- `#a3a3a3` — Grey
- `#df011a` — #df011a
- `#5f6267` — Slate Grey
- `#5e6266` — Slate Grey
- `#f0f4f7` — Off-White
- `#30363c` — Charcoal
- `#2c2f31` — Charcoal
- `#eaeff2` — Off-White
- `#faff60` — Secondary Yellow *(token)*
- `#d5dee2` — #d5dee2 *(token)*
- `#dee4e9` — Light Gray *(token)*
- `#e9eff4` — Light Gray *(token)*
- `#fbb7d8` — Pink *(token)*
- `#d4dae0` — #d4dae0 *(token)*
- `#efecfb` — Light Gray *(token)*
- `#667481` — Slate Gray *(token)*

### CSS Custom Properties (Design Tokens)

**Motion Token**
- `--cc-modal-transition-duration`: `.25s`

**Border Radius Token**
- `--cc-pm-toggle-border-radius`: `4em`
- `--cc-modal-border-radius`: `.5rem`
- `--cc-btn-border-radius`: `.4rem`

**Z-Index Token**
- `--cc-z-index`: `2147483647`

**Spacing Token**
- `--padding-top`: `9.25rem`

**Other tokens**
- `--cc-btn-primary-hover-border-color`: `#000`
- `--cc-webkit-scrollbar-bg`: `#f0f4f7`
- `--cc-toggle-enabled-icon-color`: `#fff`
- `--cc-bg`: `#fff`
- `--cc-btn-primary-hover-color`: `#fff`
- `--cc-toggle-readonly-bg`: `#d5dee2`
- `--cc-overlay-bg`: `rgba(0,0,0,.65)`
- `--cc-btn-secondary-bg`: `#eaeff2`

## 3. Typography Rules

### Font Families
- **Primary**: `Bricolage Grotesque`
- **Secondary**: `webflow-icons`
- **Font 3**: `Post`
- **Font 4**: `BricolageGrotesque`
- **Font 5**: `-apple-system`

### Custom Fonts Loaded
- **webflow-icons** weight 400 (normal)
- **Post** weight 400 (normal)
- **Bricolage Grotesque** weight 200 800 (normal)
- **BricolageGrotesque** weight 200 800 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Bricolage Grotesque | 100px | 800 | 0.8 | normal | Main headline (h1) |
| Sub-heading | Bricolage Grotesque | 40px | 800 | 1 | -1px | Third-level heading (h3) |
| Caption / Badge | Post | 24px | 400 | 0.83 | normal | small text (24px) |
| Caption / Badge | Bricolage Grotesque | 20px | 600 | 1 | normal | small text (20px) |
| Button Large | Bricolage Grotesque | 16px | 400 | 1.25 | normal | Button label (16px) |
| Button Large | Bricolage Grotesque | 16px | 500 | 1.25 | normal | Button label (16px) |
| Card Title | Bricolage Grotesque | 14px | 400 | 1.43 | normal | Card headings |
| Button | Bricolage Grotesque | 14px | 600 | 1.43 | normal | Button label (14px) |
| Button | Bricolage Grotesque | 14px | 500 | 1.43 | normal | Button label (14px) |

### Full Font Size Scale

Sizes detected in the design (descending): `100px`, `84px`, `80px`, `68px`, `64px`, `40px`, `36px`, `32px`, `28px`, `24px`, `20px`, `18px`, `16.80px`, `16px`, `14.40px`, `14px`, `13.12px`, `12.80px`, `12px`

> 13 size(s) detected outside the sampled hierarchy (84px, 80px, 68px, 64px, 36px, 32px, 28px, 18px, 16.8px, 14.4px, 13.12px, 12.8px, 12px). 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

**Variable font axes:**
- WDTH axis
- OPSZ axis
- WGHT axis

## 4. Component Stylings

### Buttons

**Light / Invert**
- Background: `#ffffff`
- Text: `#181f18` `{colors.ink-muted}`
- Padding: 12px 24px
- Radius: 4px
- Shadow: `rgb(24, 31, 24) 0px 0px 0px 1px`
- Font: 14px weight 600
- Use: Bright CTA on dark sections

**Secondary**
- Background: `#181f18` `{colors.ink-muted}`
- Text: `#ffffff`
- Padding: 12px 24px
- Radius: 4px
- Font: 16px weight 500
- Use: Secondary action

**Primary Brand**
- Background: `#f7ff01` `{colors.primary}`
- Text: `#181f18` `{colors.ink-muted}`
- Padding: 14px 28px
- Radius: 4px
- Shadow: `rgb(247, 255, 1) 0px 0px 0px 1px`
- Font: 16px weight 400
- Use: Primary CTA / brand action

**Secondary**
- Background: `#181f18` `{colors.ink-muted}`
- Text: `#ffffff`
- Padding: 14px 28px
- Radius: 4px
- Shadow: `rgb(24, 31, 24) 0px 0px 0px 1px`
- Font: 16px weight 400
- Use: Secondary action

**Ghost**
- Background: `transparent`
- Text: `#181f18` `{colors.ink-muted}`
- Padding: 16px 20.8px
- Radius: 0px
- Font: 16px weight 400
- Use: Subtle action, toolbar, nav button

**Secondary**
- Background: `#181f18` `{colors.ink-muted}`
- Text: `#ffffff`
- Padding: 6.56px 13.12px
- Radius: 6.4px
- Border: 1px solid rgb(48, 54, 60)
- Font: 13.12px weight 600
- Use: Secondary action

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px 64px
- Radius: none
- Font: 14px weight 400
- Use: Fixed/sticky flex nav — N/A items
- Hover: outline: `rgb(34, 34, 34) none 0px`

### CTA Banners

**Full-width CTA**
- Background: `transparent`
- Text: `#181f18` `{colors.ink-muted}`
- Padding: 156px 0px 0px
- Radius: 0px
- Font: 14px weight 400
- Use: Full-width conversion strip with headline + button

### Alerts

**Alert Banner**
- Background: `#f7f5ff` `{colors.surface-1}`
- Text: `#181f18` `{colors.ink-muted}`
- Padding: 32px
- Radius: 6px
- Font: 14px weight 400
- Use: System alert, banner notification, toast


## 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: "rgb(255, 255, 255)"
      fg: "rgb(24, 31, 24)"
      shadow: "rgb(24, 31, 24) 0px 0px 0px 1px"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(51, 51, 51)"
    hover:
      bg: "transparent"
      fg: "inherit"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(24, 31, 24)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(34, 34, 34)"
    hover:
      bg: "transparent"
      fg: "inherit"
  badge:
    default:
      bg: "rgb(224, 221, 238)"
      fg: "rgb(24, 31, 24)"
```

**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
- **4 shape(s)** in this system: `Light / Invert`, `Secondary`, `Primary Brand`, `Ghost`
- **DO NOT introduce new buttons variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### CTA Banners
- **1 shape(s)** in this system: `Full-width CTA`
- **DO NOT introduce new cta banners variants** without justification

### Alerts
- **1 shape(s)** in this system: `Alert Banner`
- **DO NOT introduce new alerts variants** without justification

## 5. Layout Principles

### Layout Type
**hero + sections**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 14px |
| 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 | 12px | Cards, containers |
| Lg | 18px | Large rounded elements, pill segments |
| Xl | 26px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `4px` |
| Navigation | `none` |
| CTA Banners | `0px` |
| Alerts | `6px` |
| Page Body | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 2px, 4px, 6px, 6.4px, 7.2px, 8px, 12px, 16px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~64px internal vertical padding (up to 145px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*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** | `14px` | 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).

**6/8 structural patterns detected.**

### Hero Pattern

- **Composition:** left-aligned — 
- **Viewport coverage:** 344px tall (not full-viewport)
- **Heading:** "Découvrezla vie proqu'il vous faut" — 100px left-aligned
- **CTAs:** none detected in hero (unusual — agent should verify)
- **Clone instruction:** Reproduce the **left-aligned** layout. Use the heading font-size token at the documented size. Pair the centered text with the hero’s decorative visual (gradient / SVG / hero image — see §9b), not bare text.

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** unknown — Layout not classified
- **Height:** 44px
- **Logo:** ✗ absent
- **Nav links:** 4 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static unknown navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 4 cards detected
- **Columns (desktop):** 2-up grid
- **Card dimensions:** 588×288px (aspect 2.04:1)
- **Gap:** 24px between cards
- **Content:** ✓ image + CTA
- **Image position:** top
- **Clone instruction:** Build a 2-column grid (desktop) with cards at ~2.04:1 aspect ratio. Each card has an image at the top.

### Testimonial Pattern

- **Count:** 1 testimonial blocks
- **Layout:** single-feature
- **Avg quote length:** 61 chars (short blurb)
- **Includes:** ✓ avatars | ✗ no logos | ✓ star ratings
- **Clone instruction:** Build a single-feature of 1 testimonials. Each includes an avatar.  Display ratings prominently.

### CTA Banner Pattern

- **Banner count:** 2
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "Etape 1clarifier ma relation au travailJe m'appuie sur les 4"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 2
- **Links:** 6 total
- **Height:** 84px
- **Includes:** ✗ no newsletter | ✗ no social |  ✓ copyright
- **Clone instruction:** Build a 2-column footer with ~3 links per column, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgb(24, 31, 24) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(31, 24, 27, 0.04) 0px 113px 45px 0px`,<br>`rgba(31, 24, 27, 0.04) 0px 64px 38px 0px`,<br>`rgba(31, 24, 27, 0.21) 0px 28px 28px 0px`,<br>`rgba(31, 24, 27, 0.24) 0px 7px 16px 0px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.12) 0px 8px 40px 0px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgb(247, 255, 1) 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

### Dominant Easing Curves

| Curve | Semantic Name |
|-------|---------------|
| `ease-in-out` | Ease In-Out — Symmetric |
| `ease-in` | Ease In — Accelerating |
| `ease` | CSS ease — Default |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--cc-modal-transition-duration` | `.25s` | Normal |

### Copy-Paste Transition Snippets

**Opacity**
```css
transition: opacity 0.2s;
```

**All Props**
```css
transition: 0.1s ease-in-out;
```

**All Props**
```css
transition: 0.2s ease-in-out;
```

**Background**
```css
transition: background-color 0.2s, color 0.2s;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `spin` | Rotate / Spin | transform | Loading indicator |

### Motion Fingerprint

- **Speed Character**: Balanced Pacing (median duration: `200ms`)
- **Dominant Easing**: symmetric in-out (precise)
- **Animation Library**: 1 unique animation (1 total including variants)

> This design moves with balanced pacing timing using symmetric in-out (precise), creating a UI that feels natural and fluid.

## 8. Do's and Don'ts

### Do
- Use Light Gray (`#e0ddee`) as the page background — it's intentionally not pure white
- Use Near-Black (`#181f18`) for text — not pure black, it's warmer and more readable
- Use Bricolage Grotesque as the primary typeface — it defines the brand personality
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use #f7ff01 (`#f7ff01`) as the primary accent — it's the brand's signature interactive color
- Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
- Maintain nav height at 44px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a top image — imagery is part of the card identity, not optional
- Show person avatars with testimonials — social proof is human-centric here
- Repeat the primary CTA across 2 banner sections — conversion paths are layered, not single

### Don't
- Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity
- Don't use pure black (`#000000`) for text — the near-black adds warmth
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't invent new shadow values — use only the extracted shadow levels
- 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
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus
- Don't over-build the footer — this design keeps it minimal (2 cols, 6 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(224, 221, 238)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(224, 221, 238)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(247, 255, 1)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(247, 255, 1)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 479px | Single column, compact spacing |
| Mobile Large | 640px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 991px | Multi-column grids begin |
| Desktop | 1280px | Full feature layout |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `100px` | `44px` |
| heading | line-height | `80px` | `36.52px` |
| nav | display | `flex` | `none` |
| nav | flex-direction | `row` | `column` |
| nav | height | `44px` | `auto` |
| hero | padding | `156px 0px 0px` | `64px 0px 0px` |
| hero | height | `759.844px` | `682.375px` |
| button | font-size | `16px` | `12.8px` |
| button | width | `149px` | `auto` |
| card | width | `588px` | `183px` |

### Collapsing Strategy
- Headlines: 100px → 44px on mobile
- Navigation: flex → none on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 0px 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):

- **Hero collapses left-aligned → centered** — composition shifts (verify on actual mobile render).
- **Card grid: 2-up → 1-up** — cards stack as viewport narrows, becoming a vertical list on mobile.
- **Footer columns collapse:** 2 columns (desktop) → 1 column (mobile).


## 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.*

- **Clip-path shapes** — 1 non-rectangular cut(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.

> **Motion fingerprint**: non-rectangular shapes (1), CSS scroll-driven animations

## 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://cdn.prod.website-files.com/68499d22938ad4db077f938e/6863a9e8b5ffe52f853e01e7_opengraph-chance.webp
  *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.72:1 (portrait / vertical)
- Rendered size: 1440×1987px
- *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): 9 (20%)
- Portrait (<0.87): 7 (15%)
- Square (0.87–1.15): 30 (65%)

**Media Format Mix:**
- WebP: 6 (optimized photo/illustration hybrid)
- PNG: 10 (logos, transparent UI elements, mockups)
- SVG: 5 (icons, illustrations, decorative geometry)

**Average rendered image size:** 288×312px
**Above-fold image count:** 4 / 46

**Decorative Patterns Detected:**
- 2 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 6 background patterns (non-photo url() backgrounds) — textures/illustrations as backdrops

**Clone instruction for decorative work:** Decorative details are subtle — don't over-style; the design relies on restraint.

**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 (`#e0ddee`)
- Primary text: Near-Black (`#181f18`)
- Accent: #f7ff01 (`#f7ff01`)
- Border: Light Gray (`#e0ddee`)
- Font: Bricolage Grotesque
- Body: 14px weight 400

### Example Component Prompts
- "Create a hero section on Light Gray background (#e0ddee). Headline at 100px Bricolage Grotesque weight 800, line-height 0.8, color #181f18."
- "Create the primary CTA button: `#f7ff01` background, `#181f18` text, 4px border-radius, 14px 28px padding, 800 weight, Bricolage Grotesque font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: relative on `#e0ddee`. Bricolage Grotesque 14px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the light canvas to Light Gray (`#e0ddee`) — every component is composited against this exact base.
2. **Typography**: All type in Bricolage Grotesque, weight range 400–800. Never exceed 800 — heavier weights break the brand's tonal restraint.
3. **Accent**: #f7ff01 (`#f7ff01`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
5. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
6. **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-hairline: #e0ddee;
  --ca-surface-1: #f7f5ff;
  --ca-surface-2: #e2efff;
  --ca-ink-muted: #181f18;
  --ca-ink-subtle: #2c2f31;
  --ca-primary: #f7ff01;
  --ca-on-primary: #111111;
  --ca-primary-hover: #8ebdff;
}

/* Typography */
:root {
  --ca-font-primary: "Bricolage Grotesque", system-ui, sans-serif;
  --ca-text-display: 100px;
  --ca-text-body: 14px;
  --ca-text-caption: 24px;
  --ca-text-button: 16px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 14px;
  --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: 12px;
  --ca-radius-lg: 18px;
  --ca-radius-xl: 26px;
  --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: hero
    tag: div
    classes: ["page-wrapper"]
    height: 9933px
    width: full-bleed
    layout: block
    children: 3
  - section: hero
    tag: section
    classes: ["section_home-hero", "v2"]
    height: 760px
    width: full-bleed
    layout: block
    children: 2
    vertical-padding: ~78px (generous)
    padding: "156px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["main-wrapper", "position-relative"]
    height: 9933px
    width: full-bleed
    layout: block
    children: 11
    vertical-padding: ~145px (airy)
  - section: feature-section
    tag: div
    classes: ["container-large", "v2"]
    height: 604px
    width: 1200px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["w-layout-grid", "v2"]
    height: 604px
    width: 1200px
    layout: grid: 2-col gap=48px 32px
    children: 3
  - section: feature-section
    tag: div
    classes: ["home_hero_left-content", "v2"]
    height: 512px
    width: 568px
    layout: flex-column justify=normal
    children: 1
    vertical-padding: ~24px
  - section: feature-section
    tag: div
    classes: ["home_hero_upper-content"]
    height: 512px
    width: 568px
    layout: flex-column justify=flex-start
    children: 1
    vertical-padding: ~24px
    padding: "48px 0px 0px"
  - section: card-grid
    tag: div
    classes: ["w-layout-layout", "home-hero_right-content", "wf-layout-layout"]
    height: 604px
    width: 584px
    layout: grid: 2-col gap=24px
    children: 3
  - section: unknown
    tag: div
    classes: ["w-layout-cell", "home-hero-cell-1"]
    height: 291px
    width: 280px
    layout: flex-column justify=flex-end
    children: 1
  - section: unknown
    tag: div
    classes: ["w-layout-cell", "home-hero-cell-3", "hide-tablet"]
    height: 604px
    width: 280px
    layout: flex-column justify=center
    children: 1
  - section: unknown
    tag: div
    classes: ["home-hero_portrait-container"]
    height: 274px
    width: 280px
    layout: block
    children: 2
  - section: feature-section
    tag: div
    height: 464px
    width: 568px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: div
    classes: ["home_hero_heading-content"]
    height: 344px
    width: 568px
    layout: flex-column justify=normal
    children: 2
  - section: unknown
    tag: div
    classes: ["home-hero_portrait-container"]
    height: 358px
    width: 280px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["hero_name-container"]
    height: 88px
    width: 280px
    layout: flex-column justify=flex-start
    children: 3
  - section: unknown
    tag: div
    classes: ["home-hero_portrait-container"]
    height: 272px
    width: 280px
    layout: block
    children: 2
  - section: unknown
    tag: div
    classes: ["w-layout-cell", "home-hero-cell-2"]
    height: 289px
    width: 280px
    layout: flex-column justify=flex-start
    children: 1
  - section: unknown
    tag: div
    classes: ["hero_name-container"]
    height: 88px
    width: 280px
    layout: flex-column justify=flex-start
    children: 3
  - section: unknown
    tag: div
    classes: ["hero_name-container"]
    height: 88px
    width: 280px
    layout: flex-column justify=flex-start
    children: 3
  - section: hero
    tag: section
    classes: ["v2"]
    height: 967px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~74px (generous)
    padding: "148px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["container-large", "v2"]
    height: 819px
    width: 1200px
    layout: block
    children: 2
    vertical-padding: ~56px (generous)
  - section: unknown
    tag: div
    classes: ["arrows_visual-wrapper", "v2"]
    height: 506px
    width: 512px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["is-homepage-v2"]
    height: 1967px
    width: full-bleed
    layout: block
    children: 2
    bg: "rgba(247, 245, 255, 0)"
    vertical-padding: ~95px (generous)
    padding: "126.5px 0px 64px"
  - section: feature-section
    tag: div
    classes: ["container-large", "v2"]
    height: 1777px
    width: 1200px
    layout: block
    children: 2
  - section: feature-section
    tag: div
    height: 664px
    width: 1200px
    layout: block
    children: 1
    vertical-padding: ~32px
```

**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:
    - "CHANCE CHOISI PAR GOOGLE.ORG"
    - "DÉFINISSEZ LE PROJET PRO QUI VOUS CORRESPOND VRAIMENT EN 3 MOIS !"
    - "NOTRE MÉTHODE UNIQUE LE TRÈFLE™ DE CHANCE"
    - "L'AMOUR PRO"
    - "LES MÉDIAS EN PARLENT"
  sub-headings:
    - "CLARIFIER MA RELATION AU TRAVAIL"
    - "EXPLORER"
    - "VOUS VOUS POSEZ DES QUESTIONS SUR VOTRE TRAVAIL ?"
    - "BILAN CHANCE™"
  ctas:
    - "Qui sommes-nous ?"
    - "Se connecter"
    - "En savoir plus"
    - "Voir tous les témoignages"
    - "Faites le test de l’Amour Pro"
  navigation:
    - "Faire Chance"
    - "Rejoindre le collectif"
    - "Partenariat Google.org"
    - "Entreprise"
    - "Se connecter"
```

**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:
  product:
    count: 5
    avg-ratio: 1.09
    common-aspect: "~1:1 square"
  thumbnail:
    count: 23
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
  icon:
    count: 4
    avg-ratio: 1.29
    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">
  Qui sommes-nous ?
</button>
```
_Source pattern detected: padding `0px` · radius `0px` · weight `400`_

### 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.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 5 · **cta** 2 · **auth** 2 · **docs** 2 · **blog** 1 · **social** 7 · **footer** 17 · **download** 5 · **other** 15

**Primary actions (conversion path):**
- Primary call-to-action — "Je fais le point avec un·e conseiller·e" (the conversion path) → `https://www.chance.co/fr/signup`
- Primary call-to-action — "VOTRE NOUVELLE VIE PRO COMMENCE ICI Je fais le p" (the conversion path) → `https://www.chance.co/fr/signup`
- Account access — "Se connecter" (login/signup) → `https://talent.chance.co/auth/login`
- Account access — "Connexion" (login/signup) → `https://talent.chance.co/`

**Signals:** 25/56 links carry a featured image · device mockups detected: tablet ×2 · dominant link roles: footer-link (29), content-card (18), navigation (4).


---
## Extraction Completeness: 86/100 (B)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 20 named colors |
| Typography | 20 | 20 | 9 roles defined |
| Components | 16 | 20 | 4 specs extracted |
| Motion & Interaction | 12 | 15 | Keyframes |
| CSS Custom Properties | 3 | 10 | 68 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 5 | 5 | WDTH, OPSZ, WGHT axes |

## 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.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (webflow-icons, Post, Bricolage Grotesque)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **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.

| 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 | 68 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 9 typography roles inferred |
| §4 Components | Medium | 4 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 20 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 46 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

2 font file(s) captured (307KB total). When running `prism add`, fonts are saved to `extractions/chance.co/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'webflow-icons';
  /* src: url('/fonts/webflow-icons.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Post';
  /* src: url('/fonts/Post.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  /* src: url('/fonts/Bricolage-Grotesque.woff2') format('woff2'); */
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**1 @keyframes found** — these are the real animation definitions:

```
@keyframes spin { ... }
```

<details><summary>Full keyframes CSS (1 animations)</summary>

```css
@keyframes spin{0%{transform:rotate(0)}
```
</details>

### Hover State CSS (Intercepted)

**2 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
a:active,a:hover{outline:0}

.w-lightbox-control:hover{opacity:1}

.w-lightbox-inactive,.w-lightbox-inactive:hover{opacity:0}

.button:hover{background-color:var(--dark);color:var(--white)}

.button.is-nav:hover{background-color:var(--jaune);color:var(--dark)}

.button.is-white,.button.is-white.is-icon:hover{background-color:var(--white)}

.button.is-icon-inverted:hover{background-color:var(--jaune);color:var(--dark)}

.button.is-white:hover{background-color:var(--jaune);color:var(--dark)}

.button.is-black.is-icon:hover{box-shadow:inset 0 0 0 1px var(--white);filter:invert()}

.button.is-secondary:hover{background-color:#efecfb}

.button.is-icon:hover{background-color:var(--jaune);color:var(--dark)}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 938 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**8 breakpoints** read from the live `@media` rules (not guessed):
`479px` · `640px` · `767px` · `768px` · `991px` · `1280px` · `1440px` · `1920px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `14px`×505 · `16px`×237 · `20px`×39 · `40px`×28 · `12px`×26 · `84px`×19 · `24px`×18 · `13.12px`×9

**Radius scale** (× = paint count): `4px`×33 · `16px`×30 · `24px`×23 · `2px`×14 · `40px`×4 · `26px`×4 · `7.2px`×3 · `6.4px`×3

**Weights** (× = paint count): `400`×529 · `500`×187 · `600`×104 · `800`×84 · `700`×33

**Layout gaps** (× = paint count): `24px`×35 · `16px`×34 · `8px`×28 · `40px`×17 · `12px`×11 · `10px`×10 · `32px`×7 · `48px`×4

**Elevation (real shadows)**:
```css
rgb(24, 31, 24) 0px 0px 0px 1px
rgba(0, 0, 0, 0.12) 0px 8px 40px 0px
rgb(247, 255, 1) 0px 0px 0px 1px
rgba(31, 24, 27, 0.04) 0px 113px 45px 0px, rgba(31, 24, 27, 0.04) 0px 64px 38px 0px, rgba(31, 24, 27, 0.21) 0px 28px 28px 0px, rgba(31, 24, 27, 0.24) 0px 7px 16px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { color:#333; background-color:#fff; font-family:Arial,sans-serif; font-size:14px }
body { background-color:var(--craie); color:var(--dark); font-family:Bricolage Grotesque,Arial,sans-serif; font-size:.875rem }
body { font-family:Bricolage Grotesque,Arial,sans-serif }
h1 { font-size:2em }
h1 { font-size:38px }
h1 { font-size:2.375rem; font-weight:700 }
h1 { font-family:Bricolage Grotesque,Arial,sans-serif; font-size:120px; font-weight:800 }
h1 { font-size:100px }
h2 { font-size:32px }
h2 { font-size:2rem; font-weight:700 }
h2 { font-size:32px; font-weight:800 }
@media screen and (min-width: 1280px) h2 { font-size:36px }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://www.chance.co | 2026-06-11T06:07:28.864Z*
*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.*