mymind.com

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: mymind.com
description: "Light product system built on #ffffff with #1573dd as the primary CTA accent. Type anchored in Louize-Regular-205TF at 140px / weight 400. Extracted automatically from https://mymind.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  mymind.com is built on a pure-white canvas (rgb(255,255,255)).
  The system uses rgb(21, 115, 221) as the high-saturation accent for primary actions.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside Louize-Regular-205TF as the primary typeface.
  A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 11 keyframe animations plus transition-driven interactions.

colors:
  background: "#ffffff"
  surface-1: "#f9fafc"
  surface-2: "#f5f7f9"
  primary: "#1573dd"
  on-primary: "#ffffff"
  primary-hover: "#ff5924"
  hairline: "rgba(74, 84, 101, 0.8)"

typography:
  display-xl:
    fontFamily: "Louize-Regular-205TF, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 140.004px
    fontWeight: 400
    lineHeight: 0.89
    letterSpacing: -3.6px
  display-md:
    fontFamily: "neue-haas-grotesk-display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0
  body:
    fontFamily: "miller-display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0
  body-sm:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  button:
    fontFamily: "miller-display, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 13.3333px
    fontWeight: 400
    lineHeight: normal
    letterSpacing: 0

rounded:
  none: 0px
  xs: 2px
  sm: 12px
  md: 14px
  lg: 20px
  xl: 30px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 5px
  sm: 15px
  md: 17px
  lg: 24px
  xl: 33px
  xxl: 64px

components:
  card-standard-card:
    backgroundColor: "transparent"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 20px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 33px 0px 0px

extracted_at: "2026-06-17T03:14:20.062Z"
completeness: 82
scoreVersion: "v2"

---

# Design System — mymind.com
> Extracted automatically by Prism from https://mymind.com
> Date: 2026-06-17
> 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**: medium  |  **Aesthetic**: product-neutral

| Dimension | Value | Signal |
|---|---|---|
| Canvas | neutral | `#ffffff` |
| Type posture | sans-led (Open Sans) | "Remember everything.Organize n" |
| Color assertion | dual-accent | #1573dd |
| Whitespace | moderate | section rhythm 50px |
| Interaction | expressive | 11 keyframes, 13 transitions |
| Radius language | 12px-rounded | from token scale |

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

> **🤖 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(21, 115, 221)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 50px between major bands. Card padding: 24px.
> - **Default radius**: 12px 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 full-bleed image backdrop in the hero. This is the brand's most recognizable visual — reproduce it, don't replace it with a generic card or flat panel.

mymind.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. 

Headlines are set in **Louize-Regular-205TF**, a sans-serif display face (the dominant type signature, e.g. "Remember everything.Organize nothing." at 140px). A second display voice — **Louize-Italic-205TF** (italic sans) — appears in lower bands (e.g. "visual moodboards."), used for editorial accent. Body text is set in **Open Sans**. Negative letter-spacing at display sizes (-3.6px at 140.004px) compresses headlines into engineered blocks, dense and precise. 

Body text reads in Pure Black (`#000000`) (contrast ratio 21.0:1, well above WCAG AA). **M Tricolor Blue** (`#1573dd`) 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. 
Border radius varies from pill-shaped (fully rounded) to moderately rounded elements, creating visual rhythm. Motion design uses smooth easing curves for polished state transitions. The site uses a variable font with WGHT axis, enabling precise weight control across the type hierarchy. 

**Key Characteristics:**
- Background: Pure White (`#ffffff`)
- Primary typeface: miller-display
- Accent: M Tricolor Blue (`#1573dd`)
- Display: 140.004px weight 400, letter-spacing -3.6px
- Shadow system: 5 distinct elevation levels
- Custom fonts loaded: miller-display, neue-haas-grotesk-display, neue-haas-grotesk-text, Space Mono, Avenir LT W01_35 Light1475496, Avenir LT W01_45 Book1475508, Avenir LT W01_55 Roman1475520, Avenir LT W01_65 Medium1475532, Louize-Italic-205TF, Louize-Medium-Italic-205TF, Louize-Regular-205TF, Louize-Medium-205TF, Louize-Bold-205TF, MaisonNeue-Light, MaisonNeue-Book, Nunito-Regular, Nunito-SemiBold, MaisonNeue-Demi, MaisonNeue-Medium, FKRomanStandard-Light, FKRomanStandard-Regular, Nunito-Medium, mymindnu-Regular, mymindai-Regular, Inter-Medium, Inter-Regular, Satoshi-BlackItalic, Satoshi-Black, Satoshi-MediumItalic, Satoshi-Variable, Satoshi-Italic, Satoshi-BoldItalic, Satoshi-Bold, Satoshi-Medium, Satoshi-LightItalic, Satoshi-Regular, Satoshi-Light, Satoshi-VariableItalic, Inter

## 2. Color Palette & Roles

### Background & Surface
- **Pure White** (`#ffffff`): Page background (primary)
- **#ffe926** (`#ffe926`): Surface / elevated background
- **Off-White** (`#f9fafc`): Surface / elevated background
- **Off-White** (`#f5f7f9`): Surface / elevated background
- **Whitesmoke** (`#e2e2e2`): Surface / elevated background

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **Dark Gray** (`#383f4a`): Secondary text
- **Near-Black** (`#24272d`): Secondary text
- **Translucent Warm Brown (40%)** (`rgba(33, 37, 42, 0.4)`): Secondary text
- **Dark Gray** (`#343552`): Secondary text

### Accent & Interactive
- **M Tricolor Blue** (`#1573dd`): Interactive / accent
- **Bright Orange** (`#ff5924`): Interactive / accent
- **Translucent Slate (80%)** (`rgba(74, 84, 101, 0.8)`): Interactive / accent
- **Magenta** (`#ff7dd3`): Interactive / accent
- **#5cb13e** (`#5cb13e`): Interactive / accent
- **Coral** (`#e98f53`): Interactive / accent
- **#e48abf** (`#e48abf`): Interactive / accent

### Border & Divider
- **Soft Pink** (`#e6dbdb`): Borders / dividers
- **Light Gray** (`#e5eaf2`): Borders / dividers
- **Beige** (`#dde9d3`): Borders / dividers
- **Whitesmoke** (`#e1e6ea`): Borders / dividers
- **Translucent Light Gray (50%)** (`rgba(228, 232, 236, 0.5)`): Borders / dividers
- **Silver** (`#afb5c1`): Borders / dividers

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

- `#99d2fb` — Baby Blue
- `#ea726b` — Warm Terracotta
- `#ffcf27` — Gold
- `#748297` — Medium Gray
- `#3a475a` — Slate
- `#f6f4f2` — Off-White
- `#f0f2f5` — Off-White
- `#f3f0e7` — Warm Cream
- `#f4ecef` — Off-White
- `#ffece5` — Warm Cream
- `#fcfcfe` — Pure White
- `#fff1f1` — Warm Cream
- `#ccddd8` — Light Blue
- `#3f4854` — Dark Gray
- `#717286` — Slate Gray
- `#d5dae0` — #d5dae0
- `#f5f5f5` — Off-White
- `#f0c6d4` — Pink
- `#dae4fd` — Light Gray
- `#2f343c` — Charcoal
- `#d7dee3` — Light Gray
- `#232a35` — Charcoal
- `#cccccc` — Light Grey
- `#020381` — #020381 *(token)*
- `#2874fc` — Ring Blue *(token)*
- `#005a87` — #005a87 *(token)*
- `#7adcb4` — #7adcb4 *(token)*
- `#00d082` — Emerald *(token)*
- `#ffceec` — Soft Pink *(token)*
- `#9896f0` — #9896f0 *(token)*
- `#9b51e0` — Amethyst *(token)*
- `#f78da7` — #f78da7 *(token)*
- *…+30 more in `raw-css.json` (`desktop.allColors`).*

### Gradients & Decorative Fills

- `linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)` — (--wp--preset--gradient--midnight)
- `linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)` — (--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan)
- `linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)` — (--wp--preset--gradient--blush-light-purple)
- `linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)` — (--wp--preset--gradient--electric-grass)
- `linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)` — (--wp--preset--gradient--blush-bordeaux)
- `linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%)` — (--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple)
- `linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)` — (--wp--preset--gradient--luminous-dusk)
- `linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%)` — (--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange)

### CSS Custom Properties (Design Tokens)

**Font Size Token**
- `--wp--preset--font-size--large`: `36px`
- `--wp--preset--font-size--x-large`: `42px`
- `--wp--preset--font-size--huge`: `42px`
- `--wp--preset--font-size--normal`: `16px`

**Shadow Token**
- `--wp--preset--shadow--outlined`: `6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)`
- `--wp--preset--shadow--deep`: `12px 12px 50px rgba(0, 0, 0, 0.4)`
- `--wp--preset--shadow--natural`: `6px 6px 9px rgba(0, 0, 0, 0.2)`
- `--wp--preset--shadow--crisp`: `6px 6px 0px rgb(0, 0, 0)`

**Spacing Token**
- `--wp--preset--spacing--60`: `2.25rem`
- `--wp--preset--spacing--40`: `1rem`
- `--wp--preset--spacing--30`: `0.67rem`
- `--wp--preset--spacing--50`: `1.5rem`

**Other tokens**
- `--wp-admin-theme-color-darker-20`: `#005a87`
- `--wp--preset--color--vivid-purple`: `#9b51e0`
- `--wp--preset--color--pale-pink`: `#f78da7`
- `--wp-block-synced-color--rgb`: `122,0,223`
- `--wp-bound-block-color`: `#7a00df`
- `--wp--preset--color--cyan-bluish-gray`: `#abb8c3`
- `--wp--preset--color--vivid-green-cyan`: `#00d084`
- `--wp-admin-theme-color-darker-20--rgb`: `0,90,135`

## 3. Typography Rules

### Font Families
- **Primary**: `Open Sans`
- **Secondary**: `Louize-Regular-205TF`
- **Font 3**: `miller-display`
- **Font 4**: `neue-haas-grotesk-display`
- **Font 5**: `neue-haas-grotesk-text`

### Custom Fonts Loaded
- **miller-display** weight 400
- **miller-display** weight 700
- **miller-display** weight 300
- **neue-haas-grotesk-display** weight 400
- **neue-haas-grotesk-display** weight 500
- **neue-haas-grotesk-display** weight 600
- **neue-haas-grotesk-display** weight 700
- **neue-haas-grotesk-text** weight 400
- **neue-haas-grotesk-text** weight 700
- **Space Mono** weight 400
- **Avenir LT W01_35 Light1475496** weight normal
- **Avenir LT W01_45 Book1475508** weight normal
- **Avenir LT W01_55 Roman1475520** weight normal
- **Avenir LT W01_65 Medium1475532** weight normal
- **Louize-Italic-205TF** weight normal
- **Louize-Medium-Italic-205TF** weight normal
- **Louize-Regular-205TF** weight normal
- **Louize-Medium-205TF** weight normal
- **Louize-Bold-205TF** weight normal
- **MaisonNeue-Light** weight normal
- **MaisonNeue-Book** weight normal
- **Nunito-Regular** weight normal
- **Nunito-SemiBold** weight normal
- **MaisonNeue-Demi** weight normal
- **MaisonNeue-Medium** weight normal
- **FKRomanStandard-Light** weight normal
- **FKRomanStandard-Regular** weight normal
- **Nunito-Medium** weight normal
- **mymindnu-Regular** weight normal
- **mymindai-Regular** weight normal
- **Inter-Medium** weight normal
- **Inter-Regular** weight normal
- **Satoshi-BlackItalic** weight normal
- **Satoshi-Black** weight normal
- **Satoshi-MediumItalic** weight normal
- **Satoshi-Variable** weight normal
- **Satoshi-Italic** weight normal
- **Satoshi-BoldItalic** weight normal
- **Satoshi-Bold** weight normal
- **Satoshi-Medium** weight normal
- **Satoshi-LightItalic** weight normal
- **Satoshi-Regular** weight normal
- **Satoshi-Light** weight normal
- **Satoshi-VariableItalic** weight normal
- **Inter** weight 100 900

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Louize-Regular-205TF | 140.004px | 400 | 0.89 | -3.6px | Main headline (span) |
| Sub-heading | neue-haas-grotesk-display | 24px | 500 | 1.25 | normal | Section titles (h2) |
| Link Large | Open Sans | 22px | 400 | 1 | normal | Link (22px) — Decoration: none |
| Link Large | Louize-Regular-205TF | 20px | 400 | 0px | normal | Link (20px) — Decoration: none |
| Card Title | Open Sans | 18px | 400 | 1.67 | normal | Card headings |
| Link Large | Nunito-SemiBold | 18px | 400 | 1.67 | -0.4px | Link (18px) — Decoration: none |
| Navigation | Louize-Regular-205TF | 18px | 400 | 1 | normal | Navigation items |
| Link Large | Nunito-SemiBold | 16px | 400 | 1.67 | 0.4px | Link (16px) — Decoration: none |
| Link | Nunito-SemiBold | 15px | 400 | 1.67 | 0.8px | Link (15px) — Decoration: none |
| Button | miller-display | 13.3333px | 400 | normal | normal | Button label (13.3333px) |

### Full Font Size Scale

Sizes detected in the design (descending): `140.00px`, `140px`, `95.99px`, `84.01px`, `84px`, `79.99px`, `61.99px`, `54px`, `52.00px`, `52px`, `48.01px`, `43.99px`, `41.99px`, `40.00px`, `38.00px`, `36px`, `32.00px`, `32px`, `30.01px`, `24px`, `23.99px`, `22px`, `20px`, `20.00px`, `19px`, `18px`, `16.99px`, `16.00px`, `16px`, `15px`, `14.99px`, `14.00px`, `13.33px`, `13px`

> 26 size(s) detected outside the sampled hierarchy (140px, 95.994px, 84.006px, 84px, 79.992px, 61.992px, 54px, 52.002px, 52px, 48.006px, 43.992px, 41.994px, 39.996px, 37.998px, 36px, 32.004px, 32px, 30.006px, 23.994px, 19.998px, 19px, 16.992px, 16.002px, 14.994px, 14.004px, 13px). 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:**
- Weight axis (wght) — variable font weight range

*The weight axis lets the design system fine-tune type weight per role (e.g., 380 for body, 580 for headings) rather than relying on discrete 400/500/600/700 steps.*

## 4. Component Stylings

### Cards & Containers

**Standard Card**
- Background: `transparent`
- Padding: 0px 20px
- Radius: 0px
- Use: Content containers, listing items

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 33px 0px 0px
- Radius: none
- Font: 18px weight 400
- Use: Fixed/sticky block nav — N/A items


## 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, 89, 36)"
      fg: "rgb(255, 255, 255)"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(0, 0, 0)"
    current:
      bg: "transparent"
      fg: "rgb(21, 115, 221)"
```

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

### Cards & Containers
- **1 shape(s)** in this system: `Standard Card`
- **DO NOT introduce new cards & containers variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation 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 | 5px |
| sm | 15px |
| md | 17px |
| base | 20px |
| lg | 24px |
| xl | 33px |
| 2xl | 50px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 2px | Tiny corners (badges, micro elements) |
| Sm | 12px | Buttons, inputs, small elements |
| Md | 14px | Cards, containers |
| Lg | 20px | Large rounded elements, pill segments |
| Xl | 30px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Cards & Containers | `0px` |
| Navigation | `none` |
| Page Body | `0px` |

**Shape Personality**: Sharp & Angular — No rounding. Precise, editorial, enterprise feel.

**Full Radius Spectrum**: 0px, 2px, 12px, 14px, 16px, 20px, 30px, 36px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~50px internal vertical padding (up to 190px) — **standard**. (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** | `33px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `17px` | Card padding, list-item spacing |
| **compact** | `15px` | Form fields, tight clusters, badge padding |
| **micro** | `5px` | 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:** centered — Centered composition — heading + subheading + CTAs stacked vertically, content centered horizontally. Common for SaaS marketing pages.
- **Viewport coverage:** full-viewport hero (≥70% screen height)
- **Heading:** "Remember everything.Organize nothing." — 140px center-aligned
- **Subheading:** "All your notes bookmarks inspiration articles and images in one single, private place."
- **CTAs:** 3 (primary: "iPhone app")
- **Clone instruction:** Reproduce the **centered** 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:** 54px
- **Logo:** ✗ absent
- **Nav links:** 6 primary items
- **CTAs in nav:** 0 (no buttons — links only)
- **Clone instruction:** Build a static unknown navigation. Link-only — no button styling needed.

### Card Grid Pattern

- **Card count:** 8 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 1348×681px (aspect 1.98:1)
- **Gap:** 0px between cards
- **Content:** ✗ no image
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.98:1 aspect ratio. Text/icon-only cards (no photography).

### Testimonial Pattern

- **Count:** 1 testimonial blocks
- **Layout:** single-feature
- **Avg quote length:** 219 chars (long-form story)
- **Includes:** ✗ no avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a single-feature of 1 testimonials.   

### CTA Banner Pattern

- **Banner count:** 3
- **Position:** multiple
- **Visual treatment:** ✓ contrasting background
- **Primary CTA text:** "GET APP"
- **Clone instruction:** Place multiple CTA banners across page sections. Use contrasting solid background.

### Footer Pattern

- **Columns:** 3
- **Links:** 3 total
- **Height:** 84px
- **Includes:** ✗ no newsletter | ✗ no social |  ✓ copyright
- **Clone instruction:** Build a 3-column footer with ~1 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>`rgba(0, 0, 0, 0.15) 0px 0px 120px 0px` | Cards, elevated surfaces |
| Layered (Level 2) | <br>`rgba(255, 154, 36, 0.1) 0px 8px 16px 2px` | Cards, elevated surfaces |
| Layered (Level 3) | <br>`rgba(255, 167, 129, 0.44) 0px 57px 60px -54px`,<br>`rgba(255, 128, 36, 0.27) 0px -27px 50px -40px` | Cards, elevated surfaces |
| Layered (Level 4) | <br>`rgba(140, 142, 151, 0.32) 0px 4px 7px -4px` | Cards, elevated surfaces |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-out-back` | `cubic-bezier(0.175, 0.885, 0.32, 1.275)` | Ease Out — Decelerating |
| `--ease-in-out-back` | `cubic-bezier(0.68, -0.55, 0.265, 1.55)` | cubic-bezier(0.68, -0.55, 0.265, 1.55) |
| `--ease-in-out-quint` | `cubic-bezier(0.86, 0, 0.07, 1)` | Quint In-Out — Dramatic Symmetric |
| `--ease-out-quad` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | Quad Out — Smooth Ease |
| `--ease-in-back` | `cubic-bezier(0.6, -0.28, 0.735, 0.045)` | cubic-bezier(0.6, -0.28, 0.735, 0.045) |
| `--ease-in-out-expo` | `cubic-bezier(1, 0, 0, 1)` | Expo In-Out — Mechanical Snap |
| `--ease-in-quint` | `cubic-bezier(0.755, 0.05, 0.855, 0.06)` | Ease In — Accelerating |
| `--ease-out-cubic` | `cubic-bezier(0.215, 0.61, 0.355, 1)` | Cubic Out — Natural Ease |
| `--ease-in-out-quart` | `cubic-bezier(0.77, 0, 0.175, 1)` | Quart In-Out — Precise Symmetric |
| `--ease-in-out-quad` | `cubic-bezier(0.455, 0.03, 0.515, 0.955)` | Quad In-Out — Balanced |
| `--ease-out-circ` | `cubic-bezier(0.075, 0.82, 0.165, 1)` | Circ Out — Fast Exit |
| `--ease-out-quint` | `cubic-bezier(0.23, 1, 0.32, 1)` | Quint Out — Strong Ease |

### Duration Scale

| Value | Tier | Typical Use |
|-------|------|-------------|
| `150ms` | Fast | Hover states, micro-interactions |
| `200ms` | Normal | Panel open/close, navigation |
| `250ms` | Normal | Panel open/close, navigation |
| `300ms` | Normal | Panel open/close, navigation |
| `360ms` | Slow | Hero animations, page transitions |
| `500ms` | Slow | Hero animations, page transitions |
| `700ms` | Cinematic | Splash, marketing reveals |
| `2s` | Cinematic | Splash, marketing reveals |

### Copy-Paste Transition Snippets

**All Props**
```css
transition: 0.2s linear;
```

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

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

**All Props**
```css
transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `coverZoom` | Scale | transform | Focus / emphasis |
| `sliderPreloader` | Scale | transform | Loading indicator |
| `clockwise` | Rotate / Spin | transform | UI transition |
| `donut-rotate` | Rotate / Spin | transform | Loading indicator |
| `nprogress-spinner` | Rotate / Spin | transform | Loading indicator |
| `a` | Rotate / Spin | transform | UI transition |
| `b` | Custom | background-position-x, background-position-y | UI transition |
| `pop` | Scale | transform | UI transition |
| `pop-out` | Scale | transform | UI transition |
| `play-pop` | Custom | width, height | UI transition |
| `play-pop-out` | Custom | width, height | UI transition |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `360ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 11 unique animations (11 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 Open Sans as the primary typeface — it defines the brand personality
- Keep font weights between 400-500 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-3.6px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)
- Use M Tricolor Blue (`#1573dd`) as the primary accent — it's the brand's signature interactive color
- Maintain nav height at 54px — consistent vertical space for the navigation bar
- Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
- Include exactly 3 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose
- Repeat the primary CTA across 3 banner sections — conversion paths are layered, not single

### Don't
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't reach for weight 700 (bold) or above — 500 is the heaviest weight this design paints
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't 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 put a CTA button in the nav — this design uses links only at the top


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(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(21, 115, 221)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(21, 115, 221)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile Large | 543px | Expanded mobile layout |
| Mobile Large | 600px | Expanded mobile layout |
| Mobile Large | 767px | Expanded mobile layout |
| Tablet | 991px | Multi-column grids begin |
| Tablet | 1024px | Multi-column grids begin |
| Large Desktop | 1440px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `140.004px` | `95.994px` |
| heading | line-height | `124.002px` | `95.994px` |
| heading | letter-spacing | `-3.6px` | `normal` |
| nav | display | `block` | `none` |
| nav | height | `54px` | `100%` |
| hero | height | `850px` | `844px` |
| card | width | `1340px` | `390.031px` |

### Collapsing Strategy
- Headlines: 140.004px → 95.994px on mobile
- Navigation: block → 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 CTAs:** 3 on desktop → 1 on mobile (secondary CTAs dropped on small screens).
- **Footer columns collapse:** 3 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** — 2 non-rectangular cut(s).

> **Motion fingerprint**: non-rectangular shapes (2)


## 7d. Motion Choreography (measured)

*Real timing extracted from `getComputedStyle` at load — not guessed. Match these curves and durations to reproduce the brand's motion feel; flat clones miss this entirely.*

**Keyframe animations** — the named, looping/entrance motions actually applied:

| Animation | Duration | Easing | Delay | Iteration | Used by | Keyframes captured |
|---|---|---|---|---|---|---|
| `pop-out` | 0.2s | `ease-in-out` | — | 1 | 8× | ✅ |
| `play-pop-out` | 0.2s | `ease-in-out` | — | 1 | 1× | ✅ |

**Transition profiles** — the interactive easing fingerprint (hover/focus/state changes):

| Property | Duration | Easing | Delay | Count |
|---|---|---|---|---|
| all | 0.2s | `linear` | — | 71× |
| all | 0.7s | `cubic-bezier(0.19, 1, 0.22, 1)` | — | 41× |
| all | 0.4s | `ease` | — | 18× |
| all | 0.25s | `ease-in-out` | — | 8× |
| color | 0.2s | `linear` | — | 7× |
| opacity | 0.2s | `ease` | — | 6× |
| flex | 0.5s | `ease-in-out` | — | 4× |
| all | 0.5s | `cubic-bezier(0.165, 0.84, 0.44, 1)` | — | 3× |
| transform | 0.3s | `cubic-bezier(0.45, 0, 0.26, 1)` | — | 3× |
| opacity | 0.333s | `cubic-bezier(0.4, 0, 0.22, 1)` | — | 3× |
| transform | 0.36s | `ease-out` | — | 2× |
| all | 0.6s | `cubic-bezier(0.165, 0.84, 0.44, 1)` | — | 2× |

**Scroll-reveal** *(heuristic — initial hidden state, not runtime-observed)* — 15 candidate element(s) start hidden and animate in on scroll (library-class, opacity0+transition).
  - e.g. `video.header-video.fade-in-visible` → initial opacity 1, transform `matrix(1, 0, 0, 1, 864, -510)`, transition `2s cubic-bezier(0.25, 0.89, 0.58, 1)`. Build a fade/translate reveal-on-scroll for below-fold bands.

> **Motion coverage** (measured on 1720 sampled elements; scroll-reveal is heuristic): 2 animation signatures, 23 transition profiles, 15 scroll-reveal candidates.

## 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://mymind.com/wp-content/uploads/2023/05/Mymind_2023_F-1024x538.jpg (1024×538px)
  *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.5:1 (portrait / vertical)
- Rendered size: 261×517px
- Alt text: "iPhone Mockup"
- *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): 6 (32%)
- Portrait (<0.87): 5 (26%)
- Square (0.87–1.15): 4 (21%)
- Ultra-wide (>2.3): 4 (21%)

**Media Format Mix:**
- JPG: 4 (typically photographic content)
- WebP: 8 (optimized photo/illustration hybrid)
- PNG: 6 (logos, transparent UI elements, mockups)
- SVG: 1 (icons, illustrations, decorative geometry)

**Average rendered image size:** 587×483px
**Above-fold image count:** 0 / 19

**Decorative Patterns Detected:**
- 21 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 1 radial gradient — circular color blooms used for spotlight/glow effects

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- 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: M Tricolor Blue (`#1573dd`)
- Border: Translucent Slate (80%) (`rgba(74, 84, 101, 0.8)`)
- Font: Open Sans
- Body: 18px weight 400

### Example Component Prompts
- "Create a hero section on Pure White background (#ffffff). Headline at 140.004px Open Sans weight 400, line-height 0.89, letter-spacing -3.6px, color #000000."
- "Create the primary CTA button: `#1573dd` background, `#000000` text, 9999px border-radius, 10px 20px padding, 500 weight, Open Sans font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px 20px."
- "Build navigation: absolute on `#ffffff`. Open Sans 18px 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**: Open Sans is a variable font with wght axis — use interpolated weights (400–500) for precise hierarchy, not integer multiples of 100.
3. **Accent**: M Tricolor Blue (`#1573dd`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Motion**: All transitions use `cubic-bezier(0.19,1,0.22,1)`. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (5px–33px). 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: #f9fafc;
  --ca-surface-2: #f5f7f9;
  --ca-primary: #1573dd;
  --ca-primary-hover: #ff5924;
  --ca-hairline: #4a5465;
}

/* Typography */
:root {
  --ca-font-primary: "Louize-Regular-205TF", system-ui, sans-serif;
  --ca-text-display: 140.004px;
  --ca-text-body: 13.3333px;
  --ca-text-small: 22px;
  --ca-text-button: 13.3333px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 5px;
  --ca-space-sm: 15px;
  --ca-space-md: 17px;
  --ca-space-base: 20px;
  --ca-space-lg: 24px;
  --ca-space-xl: 33px;
  --ca-space-2xl: 50px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 2px;
  --ca-radius-sm: 12px;
  --ca-radius-md: 14px;
  --ca-radius-lg: 20px;
  --ca-radius-xl: 30px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ca-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ca-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ca-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ca-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ca-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ca-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ca-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ca-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ca-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
```


## 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: feature-section
    tag: div
    height: 900px
    width: full-bleed
    layout: block
    children: 3
  - section: header
    tag: header
    classes: ["semplice-navbar", "active-navbar", "sticky-nav", "non-container-nav"]
    height: 87px
    width: full-bleed
    layout: block
    children: 1
    padding: "33px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["content-container", "active-content", "hide-on-init"]
    height: 900px
    width: full-bleed
    layout: block
    children: 1
  - section: content-section
    tag: section
    classes: ["content-block", "hero-section"]
    height: 850px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
  - section: feature-section
    tag: div
    classes: ["sections"]
    height: 19847px
    width: full-bleed
    layout: block
    children: 17
    vertical-padding: ~132px (airy)
  - section: content-section
    tag: div
    classes: ["container"]
    height: 850px
    width: full-bleed
    layout: flex-row justify=normal
    children: 2
    padding: "0px 70px"
  - section: content-section
    tag: div
    classes: ["content-wrapper"]
    height: 616px
    width: 1300px
    layout: block
    children: 3
    vertical-padding: ~106px (airy)
  - section: header
    tag: div
    classes: ["header-video-container"]
    height: 850px
    width: full-bleed
    layout: block
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 178px
    width: 407px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 178px
    width: 407px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 178px
    width: 407px
    layout: block
    children: 1
  - section: header
    tag: section
    classes: ["content-block", "header-video-section"]
    height: 881px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
  - section: content-section
    tag: div
    classes: ["container"]
    height: 881px
    width: full-bleed
    layout: flex-row justify=normal
    children: 1
    bg: "rgb(255, 255, 255)"
    padding: "0px 70px"
  - section: unknown
    tag: div
    classes: ["video-container"]
    height: 781px
    width: 1100px
    layout: block
    children: 2
  - section: content-section
    tag: div
    classes: ["content-wrapper"]
    height: 881px
    width: 1300px
    layout: block
    children: 1
    vertical-padding: ~50px
  - section: header
    tag: section
    classes: ["content-block", "header-gradient-section"]
    height: 164px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
    vertical-padding: ~82px (generous)
    padding: "164px 0px 0px"
  - section: content-section
    tag: section
    classes: ["content-block"]
    height: 2229px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
    vertical-padding: ~190px (airy)
  - section: content-section
    tag: div
    classes: ["container"]
    height: 2229px
    width: full-bleed
    layout: flex-row justify=normal
    children: 3
    bg: "rgb(255, 255, 255)"
    bg-treatment: image
    vertical-padding: ~190px (airy)
    padding: "180px 70px 200px"
  - section: content-section
    tag: div
    classes: ["content-wrapper"]
    height: 801px
    width: 742px
    layout: block
    children: 2
    vertical-padding: ~30px
  - section: content-section
    tag: div
    classes: ["content-wrapper"]
    height: 406px
    width: 1300px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 342px
    width: 1300px
    layout: block
    children: 2
    vertical-padding: ~45px
  - section: section
    tag: section
    classes: ["content-block"]
    height: 233px
    width: full-bleed
    layout: flex-column justify=normal
    children: 1
    bg: "rgb(255, 255, 255)"
  - section: unknown
    tag: div
    classes: ["container"]
    height: 233px
    width: full-bleed
    layout: flex-row justify=normal
    children: 1
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 233px
    width: 239px
    layout: block
    children: 3
    vertical-padding: ~40px
    padding: "40px 24px"
  - section: unknown
    tag: div
    classes: ["content-wrapper"]
    height: 233px
    width: 239px
    layout: block
    children: 3
    vertical-padding: ~40px
    padding: "40px 24px"
```

**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:
    - "The new Quick Note"
    - "On the human endeavor, building a brand & old Apple"
  navigation:
    - "What"
    - "Why"
    - "How"
    - "What’s New"
    - "Log in"
    - "Sign up"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 1
    avg-ratio: 2.00
    common-aspect: "~16:9 landscape"
    sample-alts:
      - "button-icon"
  product:
    count: 4
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "NOTE"
      - "COL"
      - "AI"
  editorial:
    count: 2
    avg-ratio: 0.60
    common-aspect: "~9:16 portrait"
    sample-alts:
      - "iPhone Mockup"
      - "Reviews section bg gradient"
  thumbnail:
    count: 16
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
    sample-alts:
      - "button-icon"
      - "button-icon"
      - "Astore"
  icon:
    count: 1
    avg-ratio: 0.58
    common-aspect: "~9:16 portrait"
    sample-alts:
      - "button-icon"
```

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

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px 20px` · 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** 3 · **auth** 2 · **pricing** 1 · **blog** 1 · **social** 1 · **legal** 1 · **footer** 24 · **other** 12

**Primary actions (conversion path):**
- Primary call-to-action — "TRY IT OUT" (the conversion path) → `https://access.mymind.com/signin`
- Account access — "Log in" (login/signup) → `https://access.mymind.com/signin`
- Primary call-to-action — "Sign up" (the conversion path) → `https://access.mymind.com/`
- Primary call-to-action — "SIGN UP FOR FREE" (the conversion path) → `https://access.mymind.com/signin`
- Account access — "Sign in to mymind" (login/signup) → `https://access.mymind.com/signin`

**Signals:** 12/50 links carry a featured image · device mockups detected: laptop ×1, tablet ×3 · dominant link roles: footer-link (30), content-card (8), inline-link (6).


---
## Coverage: 82% of dimensions extracted

> Coverage measures how much of the design we could read, **not** how pixel-faithful a clone is. For fidelity, see the SSIM/structure score.

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 23 named colors |
| Typography | 20 | 20 | 10 roles defined |
| Components | 8 | 20 | 2 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 4 | 10 | 86 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 5 | 5 | 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 (miller-display, neue-haas-grotesk-display, neue-haas-grotesk-text)** — 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.
- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

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

10 font file(s) captured (1114KB total). When running `prism add`, fonts are saved to `extractions/mymind.com/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'miller-display';
  /* src: url('/fonts/miller-display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'miller-display';
  /* src: url('/fonts/miller-display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'miller-display';
  /* src: url('/fonts/miller-display.woff2') format('woff2'); */
  font-weight: 300;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'miller-display';
  /* src: url('/fonts/miller-display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'miller-display';
  /* src: url('/fonts/miller-display.woff2') format('woff2'); */
  font-weight: 300;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 600;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-display';
  /* src: url('/fonts/neue-haas-grotesk-display.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-text';
  /* src: url('/fonts/neue-haas-grotesk-text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-text';
  /* src: url('/fonts/neue-haas-grotesk-text.woff2') format('woff2'); */
  font-weight: 400;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-text';
  /* src: url('/fonts/neue-haas-grotesk-text.woff2') format('woff2'); */
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'neue-haas-grotesk-text';
  /* src: url('/fonts/neue-haas-grotesk-text.woff2') format('woff2'); */
  font-weight: 700;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'Avenir LT W01_35 Light1475496';
  /* src: url('/fonts/Avenir-LT-W01_35-Light1475496.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir LT W01_45 Book1475508';
  /* src: url('/fonts/Avenir-LT-W01_45-Book1475508.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir LT W01_55 Roman1475520';
  /* src: url('/fonts/Avenir-LT-W01_55-Roman1475520.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir LT W01_65 Medium1475532';
  /* src: url('/fonts/Avenir-LT-W01_65-Medium1475532.woff2') format('woff2'); */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

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

```
@keyframes a { ... }
@keyframes b { ... }
@keyframes coverZoom { ... }
@keyframes sliderPreloader { ... }
@keyframes clockwise { ... }
@keyframes donut-rotate { ... }
@keyframes nprogress-spinner { ... }
```

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

```css
@-webkit-keyframes a{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
@-webkit-keyframes b{0%{background-position:0 0}
@keyframes coverZoom{0%,100%{transform:scale(1)}50%{transform:scale(1.24)}}
@keyframes sliderPreloader{0%,100%{transform:scale(1)}50%{transform:scale(1.11)}}
@keyframes clockwise{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes donut-rotate{0%,100%{transform:rotate(0)}50%{transform:rotate(-140deg)}}
@-webkit-keyframes nprogress-spinner{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}
```
</details>

### Brand Gradient Palette

**3 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);

/* Gradient 2 */
background: linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);

/* Gradient 3 */
background: linear-gradient(0deg,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100%);

```

### Hover State CSS (Intercepted)

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

```css
.wp-video-popup-close:hover{opacity:0.7}

.mejs-overlay:hover>.mejs-overlay-button{background-position:-80px -39px}

.mejs-time-rail .mejs-time-handle-content:active,.mejs-time-rail .mejs-time-handle-content:focus,.mejs-time-rail:hover .mejs-time-handle-content{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}

.mejs-volume-button:hover{border-radius:0 0 4px 4px}

.mejs-captions-selector-list-item:hover,.mejs-chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}

.container-nav .navbar-inner .hamburger:hover a.close-menu,.container-nav .navbar-inner .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-left-menu-left] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-left-menu-left] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-left-menu-right] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-left-menu-right] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-middle-menu-corners] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-middle-menu-corners] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-middle-menu-sides] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-middle-menu-sides] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-middle-menu-stacked] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-middle-menu-stacked] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-right-menu-left] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-right-menu-left] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=logo-right-menu-right] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=logo-right-menu-right] .hamburger:hover a.open-menu,.semplice-navbar [data-nav=no-logo-menu-distributed] .hamburger:hover a.close-menu,.semplice-navbar [data-nav=no-logo-menu-distributed] .hamburger:hover a.open-menu{opacity:1!important}

a:hover{color:#000}

.select-box select:focus,.select-box select:hover{color:#000}

input:hover,textarea:hover{border:1px solid #bbb}

.search-form .search-field:hover{color:#000;background-color:#e9e9e9}

.search-form:hover input:hover::placeholder,.search-form:hover textarea:hover::placeholder{color:#666;opacity:1!important}

.search-form:hover .blogsearch-icon svg{fill:#666}
```

> **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 1253 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**15 breakpoints** read from the live `@media` rules (not guessed) — 14 most relevant:
`543px` · `544px` · `600px` · `767px` · `768px` · `769px` · `991px` · `992px` · `1024px` · `1080px` · `1169px` · `1170px` · `1400px` · `1440px` … (+1 more)

### Measured Design Scale
**Type scale by usage** (× = paint count): `18px`×570 · `20px`×122 · `16px`×69 · `19.998px`×44 · `95.994px`×39 · `16.002px`×38 · `39.996px`×31 · `52px`×30

**Radius scale** (× = paint count): `50%`×27 · `100px`×26 · `36px`×10 · `16px`×10 · `120px`×8 · `12px`×3 · `14px`×3 · `20px`×2

**Weights** (× = paint count): `400`×1230 · `500`×22

**Layout gaps** (× = paint count): `42px`×1 · `26px`×1

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.15) 0px 0px 120px 0px
rgba(255, 154, 36, 0.1) 0px 8px 16px 2px
rgba(255, 167, 129, 0.44) 0px 57px 60px -54px, rgba(255, 128, 36, 0.27) 0px -27px 50px -40px
rgba(140, 142, 151, 0.32) 0px 4px 7px -4px
```

### 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 { font-size:18px; font-family:"Open Sans",Arial,sans-serif; color:#000 }
header { background-color:#FFF; transition:none }
header { transition:background-color .2s linear }
header { background:#f5f5f5; background-color:rgb(245, 245, 245) }
nav { font-family:"Louize-Regular-205TF", sans-serif; font-weight:400 }
h2 { color:#000000; font-size:1.3333333333333333rem }
h2 { font-family:"neue-haas-grotesk-display", sans-serif; font-weight:500 }
h2 { font-size:2rem }
h2 { font-family:"Avenir LT W01_65 Medium1475532", sans-serif; font-weight:400 }
button { transition:opacity .2s; box-shadow:none }
a { color:#000 }
a { transition:all .2s linear; color:#1573dd }
```

> 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://mymind.com | 2026-06-17T03:14:20.117Z*
*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.*