--- version: alpha name: attio.com description: "Light product system built on #ffffff with #202124 as the primary CTA accent. Type anchored in interDisplay at 64px / weight 600. Extracted automatically from https://attio.com/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)." narrative: | attio.com is built on a mid-dark canvas (lab(99.9987 0.0337958 0.000309944)). The system uses rgb(32, 33, 36) as a near-neutral accent (low saturation). Moderately rounded CTAs (12px) — modern SaaS standard, neither sharp nor pill alongside interDisplay as the primary typeface. InterDisplay is paired with inter Fallback for secondary roles. A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 50 keyframe animations plus transition-driven interactions. colors: background: "#ffffff" surface-1: "#eeeff1" surface-2: "#e6e7ea" ink: "#1c1d1f" ink-muted: "rgba(28, 29, 31, 0.65)" ink-subtle: "#4e5967" primary: "#202124" on-primary: "#ffffff" primary-hover: "#266df0" hairline: "#cad0d9" typography: display-xl: fontFamily: "interDisplay, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 600 lineHeight: 1 letterSpacing: -1.28px display-md: fontFamily: "interDisplay, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.19 letterSpacing: -0.32px body: fontFamily: "interDisplay, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.17 letterSpacing: 0.72px button: fontFamily: "inter, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.47 letterSpacing: -0.16px eyebrow: fontFamily: "interDisplay, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.17 letterSpacing: 0.72px rounded: none: 0px xs: 4px sm: 8px md: 13px lg: 16px xl: 32px pill: 9999px spacing: xxs: 2px xs: 6px sm: 10px md: 13px lg: 24px xl: 30px xxl: 64px components: button-ghost: backgroundColor: "transparent" textColor: "#eceff3" typography: "{typography.button}" rounded: "{rounded.sm}" button-ghost-2: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 8px 4px button-light--invert: backgroundColor: "{colors.on-primary}" textColor: "#2d3238" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 0px 12px input-text-input: backgroundColor: "{colors.on-primary}" textColor: "#222529" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 10px 13px extracted_at: "2026-06-11T06:02:49.031Z" completeness: 78 scoreVersion: "v2" --- # Design System — attio.com > Extracted automatically by Prism from https://attio.com > 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**: animated  |  **Weight**: medium  |  **Aesthetic**: product-neutral | Dimension | Value | Signal | |---|---|---| | Canvas | neutral | `#ffffff` | | Type posture | sans-led (inter) | "The revenue platform engineere" | | Color assertion | dual-accent | #202124 | | Whitespace | moderate | section rhythm 40px | | Interaction | animated | 50 keyframes, 14 transitions | | Radius language | 10px-rounded | from token scale | **Prism fingerprint**: `neutral-canvas · sans-display · dual-accent · 10px-rounded · animated-motion` > **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc): > > - **Canvas**: `lab(99.9987 0.0337958 0.000309944)` is the page background. Every component composits against this. > - **Accent**: `rgb(32, 33, 36)` for primary CTAs ONLY. Never decorative. > - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role. > - **Section rhythm**: 40px 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. attio.com uses a pure-white canvas (`#ffffff`), letting typography, color and imagery carry the visual weight. Headlines are set in **interDisplay**, a sans-serif display face (the dominant type signature, e.g. "The revenue platform engineered for scale." at 64px). A second display voice — **tiemposText** (serif) — appears in lower bands (e.g. "runs on Attio."), used for editorial accent. Body text is set in **inter**, deployed with OpenType features enabled globally (`"ss03"`). These aren't decorative — they're load-bearing: without them, the typeface reverts to its generic state and the design loses its specific texture. Headlines use weight 600 for confident, assertive presence — the brand wants to be heard. Negative letter-spacing at display sizes (-1.28px at 64px) compresses headlines into engineered blocks, dense and precise. Body text reads in Near-Black (`#1c1d1f`) — softened from pure black, a small but deliberate detail that lowers reading friction. **Near-Black** (`#202124`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (6 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. **Key Characteristics:** - Background: Pure White (`#ffffff`) - Primary typeface: JetBrains Mono - Primary text: Near-Black (`#1c1d1f`) - Accent: Near-Black (`#202124`) - Display: 64px weight 600, letter-spacing -1.28px - Shadow system: 6 distinct elevation levels - Custom fonts loaded: JetBrains Mono, JetBrains Mono Fallback, inter, inter Fallback, interDisplay, interDisplay Fallback, tiemposText, tiemposText Fallback ## 2. Color Palette & Roles ### Background & Surface - **Pure White** (`#ffffff`): Page background (primary) - **Off-White** (`#fbfbfb`): Surface / elevated background - **Off-White** (`#eeeff1`): Surface / elevated background - **Whitesmoke** (`#e6e7ea`): Surface / elevated background - **Off-White** (`#f4f5f6`): Surface / elevated background ### Text & Content - **Near-Black** (`#1c1d1f`): Primary body text - **Pure Black** (`#000000`): Secondary text - **Near-Black** (`#23252a`): Secondary text - **Near-Black** (`#242629`): Secondary text - **Near-Black** (`#232529`): Secondary text ### Accent & Interactive - **Royal Blue** (`#266df0`): Interactive / accent - **#9162f9** (`#9162f9`): Interactive / accent - **Coral** (`#fd9038`): Interactive / accent - **Sky Bright** (`#17bde9`): Interactive / accent - **Emerald** (`#0fc27b`): Interactive / accent - **#a37bfa** (`#a37bfa`): Interactive / accent - **Ring Blue** (`#407ff2`): Interactive / accent ### Border & Divider - **Silver** (`#cad0d9`): Borders / dividers - **Light Grey** (`#d1d3d6`): Borders / dividers - **Whitesmoke** (`#e7e7e7`): Borders / dividers - **Whitesmoke** (`#e4e7ec`): Borders / dividers ### Full Extracted Palette **64 colors rendered on the page** + **1** more declared in design tokens (CSS custom properties — not necessarily painted). (21 categorized above + 44 additional below.) Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out. - `#5c5e63` — Slate Grey - `#75777c` — Slate Grey - `#505155` — Charcoal - `#5e5e5e` — Slate Grey - `#b8d0ff` — Light Blue - `#969696` — Grey - `#faf9ff` — Off-White - `#f5eeff` — Ghost White - `#4711bb` — #4711bb - `#e8ddfe` — Light Gray - `#daf4fc` — Light Gray - `#0a5a70` — #0a5a70 - `#c3edf9` — #c3edf9 - `#e5eeff` — Light Gray - `#183c81` — #183c81 - `#d6e5ff` — Light Gray - `#ddf9e4` — Light Gray - `#075a39` — #075a39 - `#c7f4d3` — #c7f4d3 - `#feeee1` — Beige - `#753501` — Chocolate - `#fee0c8` — Vibrant Yellow - `#fff3cc` — Vibrant Yellow - `#705500` — Chocolate - `#ffebad` — Vibrant Yellow - `#06a0c6` — #06a0c6 - `#9fa1a7` — Grey - `#5b5f63` — Slate Grey - `#ecefef` — Off-White - `#2475e5` — M Tricolor Blue - `rgba(46, 50, 56, 0.07)` — Translucent Charcoal (7%) - `#ffebeb` — Warm Cream - *…+12 more in `raw-css.json` (`desktop.allColors`).* ### CSS Custom Properties (Design Tokens) **Shadow Token** - `--tw-inset-shadow-alpha`: `100%` - `--tw-inset-ring-shadow`: `0 0 #0000` - `--tw-inset-shadow`: `0 0 #0000` - `--tw-shadow-alpha`: `100%` **Secondary Color** - `--internal-color-muted-background`: `lab(94.3726% -.157326 -2.23036)` - `--internal-color-secondary-background`: `lab(98.2947% .128329 -.513124)` - `--color-subtle-stroke`: `lab(91.5182% -.365466 -2.84777)` - `--internal-color-secondary-foreground`: `lab(14.599% -.159428 -2.99254)` **Font Weight Token** - `--text-heading-sm--font-weight`: `600` - `--text-sm--font-weight`: `500` - `--text-2xl--font-weight`: `500` - `--font-weight-bold`: `700` **Z-Index Token** - `--context-menu-portal-z-index`: `200` - `--mobile-nav-drawer-overlay-z-index`: `90` - `--dialog-overlay-z-index`: `100` - `--mobile-nav-drawer-content-z-index`: `91` **Primary Brand Color** - `--internal-color-primary-background`: `lab(99.9987% .0337958 .000309944)` - `--color-primary-foreground`: `lab(10.7201% -.0959039 -1.54182)` - `--color-accent-foreground`: `lab(50.3787% -1.31875 -9.56043)` - `--internal-color-accent-foreground`: `lab(50.3787% -1.31875 -9.56043)` **Success** - `--color-green-500`: `lab(69.4503% -54.6161 23.889)` - `--color-green-600`: `lab(64.8297% -51.5975 22.501)` **Spacing Token** - `--text-2xl--letter-spacing`: `-.01em` - `--tw-space-x-reverse`: `0` - `--text-sm--letter-spacing`: `-.005em` - `--text-heading-xs--letter-spacing`: `-.01em` **Border Radius Token** - `--radius-sm`: `.25rem` - `--radius-2xl`: `1rem` - `--radius-md`: `.375rem` - `--radius-lg`: `.5rem` **Motion Token** - `--default-transition-duration`: `.15s` - `--default-transition-timing-function`: `cubic-bezier(.4, 0, .2, 1)` - `--tw-duration`: `.25s` **Background** - `--color-surface`: `lab(94.3726% -.157326 -2.23036)` - `--internal-color-surface`: `lab(94.3726% -.157326 -2.23036)` - `--internal-color-surface-subtle`: `lab(96.1596% -.0828803 -1.13571)` **Error / Destructive** - `--color-red-600`: `lab(59.1651% 62.9685 37.6953)` - `--color-red-500`: `lab(61.966% 63.1275 36.9452)` **Warning** - `--color-yellow-600`: `lab(71.6198% 11.7839 74.107)` - `--color-yellow-500`: `lab(79.0964% 13.374 80.5465)` **Font Family Token** - `--default-font-family`: `"inter", "inter Fallback"` - `--default-mono-font-family`: `"JetBrains Mono", "JetBrains Mono Fallback"` **Other tokens** - `--color-black-500`: `lab(25.9077% -.872329 -6.43952)` - `--button-ghost-bg-hover`: `lab(96.1596% -.0828803 -1.13571)` - `--button-ghost-text-active`: `lab(12.7212% .103362 -2.22102)` - `--color-white-800`: `lab(83.208% -.844151 -5.26234)` - `--tw-mask-bottom-to-color`: `transparent` - `--tw-mask-bottom-from-color`: `black` - `--text-heading-lg`: `3.5rem` - `--text-heading-sm--line-height`: `2.375rem` ## 3. Typography Rules ### Font Families - **Primary**: `inter` - **Secondary**: `interDisplay` - **Font 3**: `JetBrains Mono` - **Font 4**: `JetBrains Mono Fallback` - **Font 5**: `inter Fallback` ### Custom Fonts Loaded - **JetBrains Mono** weight 100 800 (normal) - **JetBrains Mono Fallback** weight normal (normal) - **inter** weight 400 (normal) - **inter** weight 500 (normal) - **inter** weight 600 (normal) - **inter** weight 700 (normal) - **inter Fallback** weight normal (normal) - **interDisplay** weight 500 (normal) - **interDisplay** weight 600 (normal) - **interDisplay** weight 700 (normal) - **interDisplay Fallback** weight normal (normal) - **tiemposText** weight 400 (normal) - **tiemposText Fallback** weight normal (normal) ### Typography Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |------|------|------|--------|-------------|----------------|-------| | Display Hero | interDisplay | 64px | 600 | 1 | -1.28px | Main headline (h1) | | Sub-heading | interDisplay | 32px | 600 | 1.19 | -0.32px | Third-level heading (h3) | | Card Title | inter | 16px | 500 | 1.38 | -0.16px | Card headings | | Button | inter | 15px | 500 | 1.47 | -0.16px | Button label (15px) | | Button | inter | 14px | 500 | 1.43 | -0.07px | Button label (14px) | | Eyebrow / Overline | interDisplay | 12px | 600 | 1.17 | 0.72px | Label above heading, uppercase tag | ### Font Weight Scale CSS custom properties define 15 explicit weight steps: - `--font-weight-normal`: `400` — Regular - `--text-sm--font-weight`: `500` — Medium - `--text-2xl--font-weight`: `500` — Medium - `--text-xl--font-weight`: `500` — Medium - `--text-xs--font-weight`: `500` — Medium - `--text-base--font-weight`: `500` — Medium - `--text-lg--font-weight`: `500` — Medium - `--font-weight-medium`: `500` — Medium - `--text-heading-sm--font-weight`: `600` — SemiBold - `--text-heading-lg--font-weight`: `600` — SemiBold - `--text-heading-md--font-weight`: `600` — SemiBold - `--text-heading-xl--font-weight`: `600` — SemiBold - `--font-weight-semibold`: `600` — SemiBold - `--text-heading-xs--font-weight`: `600` — SemiBold - `--font-weight-bold`: `700` — Bold ### Full Font Size Scale Sizes detected in the design (descending): `64px`, `56px`, `32px`, `20px`, `16px`, `15px`, `14px`, `13px`, `12px`, `11.30px`, `11px`, `10px` > 6 size(s) detected outside the sampled hierarchy (56px, 20px, 13px, 11.3px, 11px, 10px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles. ### OpenType & Variable Font Features The typography uses these OpenType features intentionally — this is a sophisticated type system, not a default fallback: - **stylistic sets** (`ss0X`) — alternate letterforms enabled (often for brand-specific glyph variants) - **contextual alternates** (`calt`) — connections between letters refined contextually **Clone instruction:** Enable these in your CSS: ```css body { font-feature-settings: "ss03", "calt"; } ``` ## 4. Component Stylings ### Buttons **Ghost** - Background: `transparent` - Text: `#eceff3` - Padding: 0px - Radius: 10px - Border: 1px solid rgba(0, 0, 0, 0) - Font: 16px weight 500 - Use: Subtle action, toolbar, nav button **Ghost** - Background: `transparent` - Text: `#1c1d1f` `{colors.ink-muted}` - Padding: 8px 4px - Radius: 12px - Font: 16px weight 500 - Use: Subtle action, toolbar, nav button **Light / Invert** - Background: `#ffffff` `{colors.on-primary}` - Text: `#2d3238` - Padding: 0px 12px - Radius: 10px - Border: 1px solid lab(83.208 -0.844151 -5.26234) - Font: 14px weight 500 - Use: Bright CTA on dark sections **Secondary** - Background: `#202124` `{colors.primary}` - Text: `#f3f4f6` - Padding: 0px 12px - Radius: 10px - Border: 1px solid lab(37.426 -1.09151 -9.33263) - Font: 14px weight 500 - Use: Secondary action **Light / Invert** - Background: `#ffffff` `{colors.on-primary}` - Text: `#6d7988` - Padding: 0px 16px - Radius: 0px - Font: 15px weight 500 - Use: Bright CTA on dark sections **Light / Invert** - Background: `#fafafb` - Text: `#222529` - Padding: 0px 16px - Radius: 0px - Font: 15px weight 500 - Use: Bright CTA on dark sections **Light / Invert** - Background: `#f3f4f6` - Text: `#4e5967` `{colors.ink-subtle}` - Padding: 0px 10px - Radius: 10px - Border: 1px solid lab(91.5182 -0.365466 -2.84777) - Font: 14px weight 500 - Use: Bright CTA on dark sections ### Inputs & Forms **Text Input** - Background: `#ffffff` `{colors.on-primary}` - Text: `#222529` - Padding: 10px 13px - Radius: 10px - Border: 1px solid lab(86.0989 -0.77799 -4.0961) - Font: 16px weight 500 - Use: Text fields, search inputs ## 4b. Component Behaviors (State Matrix) ### Interaction State Narrative - **Card**: - **hover:** opacity 0.995904 *State transitions extracted via Playwright simulation — exact values in the YAML matrix below.* ```yaml component-behaviors: button: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(94.3726 -0.157326 -2.23036)" border: "1px solid rgba(0, 0, 0, 0)" input: default: bg: "lab(99.9987 0.0337958 0.000309944)" fg: "lab(14.599 -0.159428 -2.99254)" border: "1px solid lab(86.0989 -0.77799 -4.0961)" link: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(99.9987 0.0337958 0.000309944)" card: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(10.7201 -0.0959039 -1.54182)" hover: bg: "transparent" fg: "inherit" navLink: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(99.9987 0.0337958 0.000309944)" badge: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(10.7201 -0.0959039 -1.54182)" shadow: "rgb(128, 128, 128) 0px 0px 5px 0px" footerLink: default: bg: "rgba(0, 0, 0, 0)" fg: "lab(10.7201 -0.0959039 -1.54182)" ``` **Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand. ## 4c. Component Vocabulary (Closed System) *This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.* ### Buttons - **3 shape(s)** in this system: `Ghost`, `Light / Invert`, `Secondary` - **DO NOT introduce new buttons variants** without justification ### Inputs & Forms - **1 shape(s)** in this system: `Text Input` - **DO NOT introduce new inputs & forms variants** without justification ## 5. Layout Principles ### Layout Type **top-nav + content** ### Grid Single column, centered content ### Max Width 1200px ### Spacing System Compact spacing — information density prioritized | Token | Value | |-------|-------| | xxs | 2px | | xs | 6px | | sm | 10px | | md | 13px | | base | 16px | | lg | 24px | | xl | 30px | | 2xl | 40px | | 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 | 13px | Cards, containers | | Lg | 16px | Large rounded elements, pill segments | | Xl | 32px | Category strips, featured containers | | Full | 9999px | Pills, avatars, circular elements | ### Shape Language | Component | Border Radius | |-----------|---------------| | Buttons | `10px` | | Inputs & Forms | `10px` | | Page Body | `0px` | | Navigation | `0px` | | Primary Input | `10px` | **Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill. **Full Radius Spectrum**: 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px (from `allBorderRadii` scan) ## 5b. Spacing Rhythm Names **Measured section padding**: bands use ~64px internal vertical padding (up to 92px) — **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** | `30px` | Between major bands (color change, content shift) | | **subsection** | `24px` | Within a section, between content groups | | **card** | `13px` | Card padding, list-item spacing | | **compact** | `10px` | Form fields, tight clusters, badge padding | | **micro** | `6px` | 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:** 478px tall (not full-viewport) - **Heading:** "The revenue platform engineered for scale." — 64px center-aligned - **Subheading:** "Attio is the AI CRM that builds pipeline, accelerates every deal, and compounds revenue around the clock." - **CTAs:** 2 (primary: "Start for free") - **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:** 67px - **Logo:** ✓ present - **Nav links:** 0 primary items - **CTAs in nav:** 4 - **Clone instruction:** Build a static unknown navigation. Reserve 4 slots for primary CTAs. ### Card Grid Pattern - **Card count:** 5 cards detected - **Columns (desktop):** 1-up grid - **Card dimensions:** 1392×600px (aspect 2.32:1) - **Gap:** 0px between cards - **Content:** ✗ no image - **Clone instruction:** Build a 1-column grid (desktop) with cards at ~2.32:1 aspect ratio. Text/icon-only cards (no photography). ### Pricing Table Pattern - **Tier count:** 2 pricing tiers - **Layout:** vertical stacked - **Columns (desktop):** 2-up - **Clone instruction:** Build a 2-column vertical-stack pricing comparison. ### Testimonial Pattern - **Count:** 1 testimonial blocks - **Layout:** single-feature - **Avg quote length:** 167 chars (medium quote) - **Includes:** ✗ no avatars | ✗ no logos | ✗ no ratings - **Clone instruction:** Build a single-feature of 1 testimonials. ### Footer Pattern - **Columns:** 1 - **Links:** 43 total - **Height:** 657px - **Includes:** ✗ no newsletter | ✓ social icons | ✓ copyright - **Clone instruction:** Build a 1-column footer with ~43 links per column, social media links, and a copyright line. ## 6. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | Flat (Level 0) | No shadow | Page background, content blocks | | Layered (Level 1) |
`oklch(0 0 0 / 0.01) 0px 1px 2px 0px`,
`oklch(0 0 0 / 0.02) 0px 2px 4px -1px`,
`oklch(0 0 0 / 0.03) 0px 4px 8px -2px` | Cards, elevated surfaces | | Layered (Level 2) |
`rgba(28, 29, 31, 0.1) 0px 0px 0px 1px`,
`rgba(28, 29, 31, 0.05) 0px 1px 2px 0px`,
`rgba(28, 29, 31, 0.02) 0px 2px 4px -1px`,
`rgba(28, 29, 31, 0.03) 0px 4px 8px -2px`,
`rgba(28, 29, 31, 0.04) 0px 8px 16px -4px`,
`rgba(28, 29, 31, 0.05) 0px 16px 32px -8px`,
`rgba(28, 29, 31, 0.06) 0px 32px 64px -8px` | Cards, elevated surfaces | | Layered (Level 3) |
`rgba(28, 40, 64, 0.06) 0px 2px 6px 0px`,
`rgba(28, 40, 64, 0.08) 0px 6px 20px -2px` | Cards, elevated surfaces | | Layered (Level 4) |
`rgba(28, 40, 64, 0.18) 0px 0px 2px 0px`,
`rgba(0, 0, 0, 0.04) 0px 1px 3px 0px` | 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-in` | `cubic-bezier(.3, 0, 1, 1)` | Custom Ease — Balanced | | `--ease-in-out-cubic` | `cubic-bezier(.65, 0, .35, 1)` | Ease Out — Decelerating | | `--default-transition-timing-function` | `cubic-bezier(.4, 0, .2, 1)` | Ease Out — Decelerating | | `--ease-in-out-expo` | `cubic-bezier(1, 0, 0, 1)` | Expo In-Out — Mechanical Snap | | `--ease-out` | `cubic-bezier(0, 0, 0, 1)` | Ease Out — Decelerating | | `--ease-linear` | `cubic-bezier(0, 0, 1, 1)` | Custom Ease — Balanced | | `--ease-emphasized-in-out` | `cubic-bezier(.2, 0, 0, 1)` | Ease Out — Decelerating | | `--ease-in-out` | `cubic-bezier(.2, 0, 0, 1)` | Ease Out — Decelerating | | `--ease-out-cubic` | `cubic-bezier(.33, 1, .68, 1)` | Custom Ease — Balanced | | `--ease-in-out-quad` | `cubic-bezier(.45, .05, .55, .95)` | Custom Ease — Balanced | | `--ease-in-cubic` | `cubic-bezier(.32, 0, .67, 0)` | Custom Ease — Balanced | ### Duration Scale | CSS Variable | Value | Tier | |--------------|-------|------| | `--default-transition-duration` | `.15s` | Fast | | `--tw-duration` | `.25s` | Normal | ### Copy-Paste Transition Snippets **Color / Background** ```css transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cub...; ``` **All Props** ```css transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1); ``` **All Props** ```css transition: translate 0.4s cubic-bezier(0.2, 0, 0, 1); ``` **Color / Background** ```css transition: color 0.3s cubic-bezier(0.2, 0, 0, 1), background-color 0.3s cubic-bezier(0.2, 0, 0, 1), border-color 0.3s cubic-bezi...; ``` ### Keyframe Animation Catalog | Animation Name | Type | Animated Props | Use Hint | |----------------|------|----------------|----------| | `ai-hero-box-gradient-spin` | Custom | --ai-hero-box-gradient-angle | Loading indicator | | `rotate-reporting` | Custom | --reporting-hero-card-reports-gradient-angle | Loading indicator | | `pricing-cards-grid-line-appear` | Custom | --pricing-cards-grid-line-position-start, --pricing-cards-grid-line-position-end | UI transition | | `rotate` | Custom | --workflows-card-gradient-angle | Loading indicator | | `connection` | Fade | opacity | UI transition | | `running` | Fade | opacity, top | UI transition | | `completed` | Fade | opacity, top | UI transition | | `spin` | Rotate / Spin | transform | Loading indicator | | `pulse` | Fade | opacity | Attention / status | | `enter` | Fade + Move | opacity, transform | Element entrance | | `exit` | Fade + Move | opacity, transform | Element exit | | `navigation-enter-from-right` | Fade + Move | opacity, filter, transform | Element entrance | | `navigation-enter-from-left` | Fade + Move | opacity, filter, transform | Element entrance | | `navigation-exit-to-right` | Fade + Move | opacity, filter, transform | Element exit | | `navigation-exit-to-left` | Fade + Move | opacity, filter, transform | Element exit | | `dialog-scale-in` | Fade + Move | opacity, transform | Focus / emphasis | | `dialog-scale-out` | Fade + Move | opacity, transform | Focus / emphasis | | `search-shine` | Slide | transform | UI transition | | `productivity-intro-width` | Fade | opacity, width | UI transition | | `productivity-intro-height` | Fade | opacity, height | UI transition | > *30 additional animations omitted (repetitive variants). See raw keyframes in `raw-css.json`.* ### Motion Fingerprint - **Speed Character**: Deliberate & Calm (median duration: `300ms`) - **Dominant Easing**: custom cubic-bezier curves - **Animation Library**: 50 unique animations (50 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 Near-Black (`#1c1d1f`) for text — not pure black, it's warmer and more readable - Use inter as the primary typeface — it defines the brand personality - Use negative letter-spacing (-1.28px) at display sizes for compressed, editorial headlines - Use the extracted shadow patterns for elevation — they are tuned to match the brand palette - Use Near-Black (`#202124`) as the primary accent — it's the brand's signature interactive color - Use 12px border-radius on buttons — the standard corner rounding for interactive elements - Style form inputs with a `1px solid lab(86.0989 -0.77799 -4.0961)` border — use border-based inputs, not floating labels or underline-only - Maintain nav height at 67px — consistent vertical space for the navigation bar - Include exactly 2 CTAs in the hero (primary + secondary) — this design pattern is multi-action, not single-purpose ### Don't - 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 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 introduce additional saturated accent colors — the palette is intentionally controlled - Don't remove the input border — the border is the primary affordance indicator for form fields - Don't 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 ## 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 `lab(99.9987 0.0337958 0.000309944)` as the base canvas" why: "Every component is designed to composit against this exact tone" test: "document.body.style.backgroundColor === 'lab(99.9987 0.0337958 0.000309944)'" - id: brand-accent-001 type: do rule: "Reserve `rgb(32, 33, 36)` for primary CTAs and brand-mark signals only" why: "Single chromatic assertion device — overuse dilutes meaning" test: "querySelectorAll('[style*=\"rgb(32, 33, 36)\"]').length <= 3 per fold" ``` ## 9. Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | 375px | Single column, compact spacing | | Mobile | 450px | Single column, compact spacing | | Mobile Large | 576px | Expanded mobile layout | | Tablet | 768px | Multi-column grids begin | | Tablet | 992px | Multi-column grids begin | | Desktop | 1078px | Full feature layout | ### Token Diff — Desktop vs Mobile | Element | Property | Desktop | Mobile | |---------|----------|---------|--------| | heading | font-size | `64px` | `40px` | | heading | line-height | `64px` | `44px` | | heading | letter-spacing | `-1.28px` | `-0.4px` | | nav | padding | `16px 0px 15px` | `8px 0px 7px` | | nav | height | `67px` | `51px` | | card | width | `1390px` | `390px` | ### Collapsing Strategy - Headlines: 64px → 40px on mobile - Navigation: horizontal links → hamburger menu on mobile - Cards: multi-column → stacked vertical on mobile - Footer: multi-column → stacked single column on mobile ### Touch Targets - Buttons: 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): - **Nav CTAs reduced** on mobile (4 → 0) — the design prioritizes content over conversion buttons at small sizes. ## 7c. Visual Effects & Dynamic Behavior *The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.* - **Canvas / 2D rendering** — animated/interactive canvas (charts, graphs, particle fields). Reproduce as live data-viz (e.g. an animated SVG/Canvas line chart), NOT a static image. - **Glassmorphism** — 2 frosted/blur layer(s) (e.g. `blur(12px)`). - **Mesh gradients** — 2 multi-stop organic color field(s) as background atmosphere. - **Clip-path shapes** — 8 non-rectangular cut(s). - **Blend modes** — 8 mix-blend layer(s). - **CSS-variable animations** (5) — animated custom properties. > **Motion fingerprint**: Canvas 2D, glassmorphism (2 layers), mesh gradients, non-rectangular shapes (10), blend modes ## 9b. Visual Tone & Photography **Tone:** Illustration-driven The site relies primarily on illustrations, vector art, and decorative SVG elements rather than photography. Use commissioned illustrations, icon sets, or generated graphics for clones — stock photos will feel off-brand. **Canonical Brand Image (OG):** - https://a.storyblok.com/f/234930/1200x630/df480627b4/attio-og-image.jpg *This is the image shown when the site is shared on social media — represents the brand visual essence.* **Aspect Ratio Distribution:** - Landscape (1.15–2.3): 0 (0%) - Portrait (<0.87): 0 (0%) - Square (0.87–1.15): 3 (33%) - Ultra-wide (>2.3): 6 (67%) **Media Format Mix:** - SVG: 20 (icons, illustrations, decorative geometry) **Average rendered image size:** 173×108px **Above-fold image count:** 0 / 9 **Decorative Patterns Detected:** - 30 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth - 3 radial gradients — circular color blooms used for spotlight/glow effects - 14 large decorative SVG shapes (≥200×200px, non-icon) — likely blob/illustration accents - **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic **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:** - Use vector illustration as the primary visual language — photos will read as off-brand. - Maintain consistent illustration style (line weight, color palette) across the site. ## 10. Agent Prompt Guide ### Quick Reference - Background: Pure White (`#ffffff`) - Primary text: Near-Black (`#1c1d1f`) - Accent: Near-Black (`#202124`) - Border: Silver (`#cad0d9`) - Font: inter - Body: 16px weight 500 ### Example Component Prompts - "Create a hero section on Pure White background (#ffffff). Headline at 64px inter weight 600, line-height 1, letter-spacing -1.28px, color #1c1d1f." - "Create the primary CTA button: `#202124` background, `#eceff3` text, 10px border-radius, 12px 24px padding, 500 weight, inter font." - "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px." - "Build navigation: static on `#ffffff`. inter 16px weight 500 for links." ### Iteration Guide 1. **Canvas**: Set the light canvas to Pure White (`#ffffff`) — every component is composited against this exact base. 2. **Typography**: All type in inter, weight range 400–700. Never exceed 700 — heavier weights break the brand's tonal restraint. 3. **Accent**: Near-Black (`#202124`) is the sole interactive color. On hover → Royal Blue (`#266df0`). Use CSS transitions, not opacity/brightness filters. 4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 250ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality. 5. **Shape**: CTAs at `12px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values. 6. **Spacing**: Use the `--ca-space-*` token scale (6px–30px). 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: #eeeff1; --ca-surface-2: #e6e7ea; --ca-ink-muted: #1c1d1f; --ca-ink-subtle: #4e5967; --ca-primary: #202124; --ca-primary-hover: #266df0; --ca-hairline: #cad0d9; } /* Typography */ :root { --ca-font-primary: "interDisplay", system-ui, sans-serif; --ca-text-display: 64px; --ca-text-body: 12px; --ca-text-button: 15px; } /* Spacing & Radius */ :root { --ca-space-xxs: 2px; --ca-space-xs: 6px; --ca-space-sm: 10px; --ca-space-md: 13px; --ca-space-base: 16px; --ca-space-lg: 24px; --ca-space-xl: 30px; --ca-space-2xl: 40px; --ca-space-3xl: 64px; --ca-radius-none: 0px; --ca-radius-xs: 4px; --ca-radius-sm: 8px; --ca-radius-md: 13px; --ca-radius-lg: 16px; --ca-radius-xl: 32px; --ca-radius-full: 9999px; } /* Motion */ :root { --ca-ease-in: cubic-bezier(.3, 0, 1, 1); --ca-ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1); --ca-ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ca-ease-out: cubic-bezier(0, 0, 0, 1); --ca-ease-linear: cubic-bezier(0, 0, 1, 1); --ca-ease-emphasized-in-out: cubic-bezier(.2, 0, 0, 1); --ca-ease-in-out: cubic-bezier(.2, 0, 0, 1); --ca-ease-out-cubic: cubic-bezier(.33, 1, .68, 1); --ca-ease-in-out-quad: cubic-bezier(.45, .05, .55, .95); --ca-ease-in-cubic: cubic-bezier(.32, 0, .67, 0); } ``` ## 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: ["flex", "flex-col", "justify-between", "overflow-x-clip"] height: 12802px width: full-bleed layout: flex-column justify=space-between children: 3 contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: feature-section tag: div classes: ["absolute", "inset-x-0", "top-0", "border-subtle-stroke"] height: 1472px width: full-bleed layout: block children: 2 bg: "lab(99.9987 0.0337958 0.000309944)" - section: header tag: div classes: ["sticky", "top-[var(--site-header-height)]", "grid", "h-[calc(100vh-var(--site-header-height))]"] height: 832px width: 1390px layout: grid: 1-col gap=52px children: 3 vertical-padding: ~36px padding: "72px 24px 0px" - section: feature-section tag: main classes: ["bg-primary-background"] height: 12077px width: full-bleed layout: block children: 16 bg: "lab(99.9987 0.0337958 0.000309944)" contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: section tag: section classes: ["flex", "w-full", "flex-col", "items-center"] height: 3478px width: full-bleed layout: flex-column justify=center children: 1 bg-treatment: linear-gradient - section: unknown tag: div classes: ["container"] height: 3478px width: full-bleed layout: block children: 2 padding: "0px 24px" - section: feature-section tag: div classes: ["container"] height: 478px width: full-bleed layout: block children: 1 padding: "0px 24px" - section: content-section tag: div classes: ["container", "grid", "grid-cols-12"] height: 740px width: full-bleed layout: grid: 12-col gap=normal children: 2 padding: "0px 24px" - section: unknown tag: div classes: ["pointer-events-none", "fixed", "right-4", "bottom-4"] height: 154px width: 1408px layout: flex-row justify=flex-start children: 1 - section: unknown tag: div classes: ["container"] height: 252px width: full-bleed layout: block children: 1 padding: "0px 24px" - section: unknown tag: div classes: ["hidden", "lg:block", "pt-[60px]"] height: 95px width: 1392px layout: block children: 2 vertical-padding: ~30px padding: "60px 0px 0px" - section: feature-section tag: section classes: ["flex", "w-full", "flex-col", "items-center"] height: 3078px width: full-bleed layout: flex-column justify=center children: 1 contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: feature-section tag: div classes: ["container", "relative", "w-full", "lg:grid"] height: 298px width: 1392px layout: grid: 12-col gap=normal 24px children: 1 vertical-padding: ~92px (generous) - section: content-section tag: div classes: ["container", "px-0"] height: 2685px width: 1392px layout: block children: 6 contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: gallery-grid tag: div classes: ["container", "w-full", "lg:grid", "lg:grid-cols-12"] height: 626px width: 1392px layout: grid: 12-col gap=normal 24px children: 2 - section: pricing tag: div classes: ["container", "w-full", "lg:grid", "lg:grid-cols-12"] height: 626px width: 1392px layout: grid: 12-col gap=normal 24px children: 2 contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: gallery-grid tag: div classes: ["container", "w-full", "lg:grid", "lg:grid-cols-12"] height: 626px width: 1392px layout: grid: 12-col gap=normal 24px children: 2 - section: pricing tag: div classes: ["container", "w-full", "lg:grid", "lg:grid-cols-12"] height: 627px width: 1392px layout: grid: 12-col gap=normal 24px children: 3 - section: unknown tag: div classes: ["container", "relative", "w-full", "lg:grid"] height: 160px width: 1392px layout: grid: 12-col gap=normal 24px children: 1 - section: feature-section tag: div classes: ["bg-[#FAFAFB]"] height: 404px width: full-bleed layout: block children: 1 bg: "rgb(250, 250, 251)" - section: feature-section tag: div classes: ["container"] height: 404px width: full-bleed layout: block children: 1 padding: "0px 24px" - section: feature-section tag: div height: 1318px width: full-bleed layout: block children: 2 contains: chart/canvas (reproduce as live data-viz, not a flat image) - section: feature-section tag: div classes: ["container"] height: 433px width: full-bleed layout: block children: 2 vertical-padding: ~60px (generous) padding: "0px 24px" - section: content-section tag: div classes: ["lg:container"] height: 885px width: full-bleed layout: block children: 1 contains: chart/canvas (reproduce as live data-viz, not a flat image) padding: "0px 24px" - section: content-section tag: div classes: ["data-model-cards-mobile-connection-container", "relative"] height: 729px width: 1390px layout: block children: 4 contains: chart/canvas (reproduce as live data-viz, not a flat image) ``` **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: - "[01] POWERFUL PLATFORM" - "Start with 14 days of Pro, for free." - "Enterprise-ready, out of the box." - "The next era of revenue runs on Attio." - "Platform" sub-headings: - "The intelligent system that never sleeps." - "Revenue agents at your command." - "The only CRM with Universal Context ™ ." ctas: - "Platform" - "Customers" - "Sign in" - "Start for free" - "Ask Attio" - "Data model" - "Explore agents" - "Scale-ups" navigation: - "Customers" - "Pricing" - "Sign in" - "Start for free" footer-links: - "Refer a team New" - "Services Agreement" ``` **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: 5 avg-ratio: 2.88 common-aspect: "~16:6 banner" thumbnail: count: 17 avg-ratio: 1.00 common-aspect: "~1:1 square" sample-alts: - "Basepoint" ``` **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 ``` _Source pattern detected: padding `8px 4px` · radius `12px` · weight `500`_ ### Generic Card ```html
``` _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** 2 · **auth** 1 · **product** 2 · **pricing** 4 · **docs** 8 · **blog** 2 · **project** 4 · **social** 4 · **legal** 3 · **footer** 22 · **other** 2 **Primary actions (conversion path):** - Account access — "Sign in" (login/signup) → `https://app.attio.com/` **Projects / case studies detected** (clustered by URL + featured image): *Platform* — medium confidence, 3 items: | Title | Featured image | Link | |---|---|---| | Explore AI | — | https://attio.com/platform/ai | | Explore data | — | https://attio.com/platform/data | | Explore reporting | — | https://attio.com/platform/reporting | **Signals:** 15/54 links carry a featured image · dominant link roles: footer-link (42), content-card (6), inline-link (4). --- ## Extraction Completeness: 78/100 (B) | Category | Score | Max | Detail | |----------|-------|-----|--------| | Colors & Palette | 25 | 25 | 21 named colors | | Typography | 15 | 20 | 6 roles defined | | Components | 8 | 20 | 2 specs extracted | | Motion & Interaction | 15 | 15 | Keyframes, easing vars | | CSS Custom Properties | 10 | 10 | 340 vars | | Responsive Breakpoints | 5 | 5 | 6 breakpoints | | Variable Fonts | 0 | 5 | None detected | ## 12. Known Gaps & Confidence Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback. *Auto-detected extraction limitations — understand before building:* - **Licensed web fonts (JetBrains Mono, inter, interDisplay)** — 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 | |----------|----------------|-------------------| | **Hero imagery** | No dominant hero image detected above the fold | Use the canonical brand visual from §9b (OG image) for hero composition | ### Per-section confidence | Section | Confidence | Reason | |---------|------------|--------| | §1 Visual Theme | High | Body bg extracted via getComputedStyle() | | §2 Colors | High | 340 CSS vars (semantic naming requires ≥20 for high) | | §3 Typography | High | 6 typography roles inferred | | §4 Components | Low | 2 component variants captured | | §7 Motion | High | Keyframes + transitions | | §8 Do's/Don'ts | High | 17 rules generated; design-decisions.json has evidence per rule | | §9 Responsive | High | 6 breakpoints detected | | §9b Photography | Medium | 9 images, hero not detected | ## 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 `