figma-Xrr9fec3DB8hC0t86GKpaF

DESIGN.md

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

---
version: alpha
name: figma-Xrr9fec3DB8hC0t86GKpaF
description: "Dark-canvas product system built on #ffffff with #fc4ff6 as the single brand accent. Type anchored in Clash Grotesk at 80px / weight 500. Extracted from the Figma file via the Figma REST API — exact fills, type styles, effects, and auto-layout spacing read straight from the design source of truth (not a rendered approximation)."
narrative: |
  figma-Xrr9fec3DB8hC0t86GKpaF is built on a near-black canvas (rgb(0, 0, 0)).
  The system uses rgb(252, 79, 246) as the high-saturation accent for primary actions.
  Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside Clash Grotesk as the primary typeface.
  Clash Grotesk is paired with Space Grotesk for secondary roles.
  Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model.

colors:
  ink-muted: "#ffffff"
  primary: "#fc4ff6"
  on-primary: "#111111"
  primary-hover: "#899aff"
  hairline: "rgba(255,255,255,0.08)"

typography:
  display-xl:
    fontFamily: "Clash Grotesk, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 80px
    fontWeight: 500
    lineHeight: 1.23
    letterSpacing: 1.60px
  display-md:
    fontFamily: "Chillax, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0
  button:
    fontFamily: "Space Grotesk, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.28
    letterSpacing: 0

rounded:
  none: 0px
  xs: 8px
  sm: 25px
  md: 33px
  lg: 41px
  xl: 49px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 10px
  sm: 22px
  md: 32px
  lg: 48px
  xl: 56px
  xxl: 72px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
    padding: 22px 32px 22px 32px

extracted_at: "2026-06-11T05:00:47.841Z"
completeness: 25
scoreVersion: "v2"

---

# Design System — figma-Xrr9fec3DB8hC0t86GKpaF
> Extracted automatically by Prism from https://www.figma.com/design/Xrr9fec3DB8hC0t86GKpaF/Serendale.ai---AI-based-Blockchain-Hero-Exploration-(Community)
> Date: 2026-06-11
> Viewport: Desktop 1728x1117 + Mobile 390x844
> Values are extracted from the Figma REST API, not hand-written: exact fills, text styles, effects, and auto-layout spacing read straight from the design file (the source of truth, not a rendered approximation).


## 0. Design DNA

**Density**: sparse  |  **Motion**: still  |  **Weight**: light  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#000000` |
| Type posture | sans-led (Clash Grotesk) | "A Fast Blockchain." |
| Color assertion | dual-accent | #fc4ff6 |
| Whitespace | sparse | section rhythm 64px |
| Interaction | still | 0 keyframes, 0 transitions |
| Radius language | soft-pill | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · soft-pill · still-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(0, 0, 0)` is the page background. Every component composits against this.
> - **Accent**: `rgb(252, 79, 246)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 64px between major bands. Card padding: 48px.
> - **Default radius**: 25px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
> - **Forbidden**: Do NOT introduce heavy box-shadows — this system relies on borders for separation
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

figma-Xrr9fec3DB8hC0t86GKpaF commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is a near-pure-black surface (`#000000`) where surfaces are layered through stepped luminance — each elevated level is slightly less dark than the one beneath it, creating depth without color shifts. 

Typography is anchored in **Clash Grotesk**. 

Body text reads in Pure Black (`#000000`) — slightly under-bright, preventing eye strain on the dark surface. **Magenta** (`#fc4ff6`) is the single high-saturation color in the system — it earns its presence only on interactive elements, making CTAs and links the unmistakable focal points against the otherwise neutral palette. Shadow is absent by design — depth is conveyed through borders, spacing, and color differentiation rather than light simulation. 


**Key Characteristics:**
- Background: Pure Black (`#000000`)
- Primary typeface: Clash Grotesk
- Primary text: Pure White (`#ffffff`)
- Accent: Magenta (`#fc4ff6`)
- Display: 80px weight 500, letter-spacing 1.60px
- Custom fonts loaded: Clash Grotesk, Space Grotesk, Chillax, Cabinet Grotesk

## 2. Color Palette & Roles

### Background & Surface
- **Pure Black** (`#000000`): Page background (primary)

### Text & Content
- **Pure Black** (`#000000`): Primary body text
- **Magenta** (`#fc4ff6`): Secondary text
- **#899aff** (`#899aff`): Secondary text

### Accent & Interactive
- **Brand Indigo** (`#485dff`): Interactive / accent

### Full Extracted Palette
**5 colors rendered on the page**. (4 categorized above + 1 additional below.)
Colors are read straight from the Figma file via the REST API (exact fills, text styles, effects, auto-layout spacing); design-token variables are preserved alongside them. Third-party logo colors are filtered out.

- `#ffffff` — Pure White

### Gradients & Decorative Fills

- `linear-gradient(131deg, rgb(255, 28, 247) 0%, rgb(0, 240, 255) 100%)` — (heading)
- `linear-gradient(180deg, rgb(73, 124, 255) 0%, rgb(0, 22, 100) 100%)` — (button)

## 3. Typography Rules

### Font Families
- **Primary**: `Clash Grotesk`
- **Secondary**: `Space Grotesk`
- **Font 3**: `Chillax`
- **Font 4**: `Cabinet Grotesk`

### Custom Fonts Loaded
- **Clash Grotesk** weight undefined (undefined)
- **Space Grotesk** weight undefined (undefined)
- **Chillax** weight undefined (undefined)
- **Cabinet Grotesk** weight undefined (undefined)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | Clash Grotesk | 80px | 500 | 1.23 | 1.60px | Main headline (heading) |
| Sub-heading | Chillax | 24px | 500 | 1.40 | normal | Section titles (subheading) |
| Button Large | Space Grotesk | 20px | 400 | 1.28 | normal | Button label (20px) |

### Full Font Size Scale

Sizes detected in the design (descending): `80px`, `24px`, `20px`, `18px`

> 1 size(s) detected outside the sampled hierarchy (18px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#ffffff` `{colors.hairline}`
- Padding: 22px 32px 22px 32px
- Radius: 8px
- Font: 20px weight 400
- Use: Subtle action, toolbar, nav button


## 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
- **1 shape(s)** in this system: `Ghost`
- **DO NOT introduce new buttons variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Generous spacing — editorial breathing room

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 10px |
| sm | 22px |
| md | 32px |
| base | 40px |
| lg | 48px |
| xl | 56px |
| 2xl | 64px |
| 3xl | 72px |

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

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `8px` |
| Page Body | `0px` |

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

**Full Radius Spectrum**: 0px, 8px, 25px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `72px` | Top/bottom of full-bleed hero sections |
| **section** | `56px` | Between major bands (color change, content shift) |
| **subsection** | `48px` | Within a section, between content groups |
| **card** | `32px` | Card padding, list-item spacing |
| **compact** | `22px` | Form fields, tight clusters, badge padding |
| **micro** | `10px` | 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).

**1/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:** 1116px tall (not full-viewport)
- **Heading:** "A Fast Blockchain." — 80px center-aligned
- **Subheading:** "Serendale"
- **Media:** present, positioned right
- **CTAs:** 1 (primary: "Get started")
- **Clone instruction:** Reproduce the **centered** layout. Use the heading font-size token at the documented size. Place media right of text.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |

**Shadow Philosophy**: Flat design — no shadows used. Borders and spacing define structure.

## 8. Do's and Don'ts

### Do
- Use dark background (`#000000`) as the foundation — this is a dark-mode-native design
- Use Clash Grotesk 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 Magenta (`#fc4ff6`) as the primary accent — it's the brand's signature interactive color
- Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- Don't introduce additional saturated accent colors — the palette is intentionally controlled


## 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(0, 0, 0)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(0, 0, 0)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(252, 79, 246)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(252, 79, 246)\"]').length <= 3 per fold"
  - id: brand-depth-001
    type: dont
    rule: "Do NOT introduce drop shadows on cards or sections"
    why: "Containment is achieved via borders, not elevation — adding shadows breaks the depth contract"
    test: "getComputedStyle(card).boxShadow === 'none'"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 640px | Single column layout |
| Tablet | 768px | 2-column grids |
| Desktop | 1024px | Full layout |
| Large Desktop | 1280px | Maximum width |

### Collapsing Strategy
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 22px 32px 22px 32px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

*No major structural differences detected between desktop and mobile widgets. The same blueprints scale rather than collapse — verify by inspecting actual mobile render.*

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

**Media Format Mix:**
- WebP: 1 (optimized photo/illustration hybrid)
- SVG: 88 (icons, illustrations, decorative geometry)

**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 Black (`#000000`)
- Primary text: Pure Black (`#000000`)
- Accent: Magenta (`#fc4ff6`)
- Border: Translucent Pure White (8%) (`rgba(255, 255, 255, 0.08)`)
- Font: Clash Grotesk
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Pure Black background (#000000). Headline at 80px Clash Grotesk weight 500, line-height 1.23, letter-spacing 1.60px, color #000000."
- "Create the primary CTA button: `#fc4ff6` background, `#ffffff` text, 8px border-radius, 22px 32px 22px 32px padding, 500 weight, Clash Grotesk font."
- "Build navigation: sticky on `#000000`. Clash Grotesk 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Pure Black (`#000000`) — every component is composited against this exact base.
2. **Typography**: All type in Clash Grotesk, weight range 400–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: Magenta (`#fc4ff6`) — one accent, applied consistently to CTAs, active states, and links. Never introduce a second saturated color.
4. **Spacing**: Use the `--ca-space-*` token scale (10px–56px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
5. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-hairline: #ffffff;
  --ca-primary: #fc4ff6;
  --ca-on-primary: #111111;
  --ca-primary-hover: #899aff;
}

/* Typography */
:root {
  --ca-font-primary: "Clash Grotesk", system-ui, sans-serif;
  --ca-text-display: 80px;
  --ca-text-button: 20px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 10px;
  --ca-space-sm: 22px;
  --ca-space-md: 32px;
  --ca-space-base: 40px;
  --ca-space-lg: 48px;
  --ca-space-xl: 56px;
  --ca-space-2xl: 64px;
  --ca-space-3xl: 72px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 8px;
  --ca-radius-sm: 25px;
  --ca-radius-md: 33px;
  --ca-radius-lg: 41px;
  --ca-radius-xl: 49px;
  --ca-radius-full: 9999px;
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: section
    tag: div
    classes: ["Group 4"]
    height: 651px
    width: 1612px
    layout: block
    children: 3
  - section: hero
    tag: div
    classes: ["Group 3"]
    height: 1116px
    width: 1700px
    layout: block
    children: 11
  - section: section
    tag: div
    classes: ["Looper BG"]
    height: 1933px
    width: full-bleed
    layout: block
    children: 70
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


---
## Extraction Completeness: 25/100 (D)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 7 | 25 | 5 named colors |
| Typography | 8 | 20 | 3 roles defined |
| Components | 4 | 20 | 1 specs extracted |
| Motion & Interaction | — | N/A | Not applicable — a static Figma file has no animation |
| CSS Custom Properties | 0 | 10 | 0 vars (enable token scope file_variables:read to capture Figma Variables) |
| Responsive Breakpoints | — | N/A | Not applicable — single design frame, no media queries |
| Variable Fonts | — | N/A | Figma does not expose variable-font 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:*

- **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 |
| **Motion / Animation** | No @keyframes or transitions detected | Either keep clones strictly static, or apply a single 150ms ease-out on hover/focus universally |
| **Component states** | Hover / focus / active states not captured | Darken background ~10% on hover, add 2px focus ring matching accent token, +50% opacity for disabled |
| **Dark mode** | Dark surface is the canonical medium; no separate light-mode variables detected | The dark canvas IS the design — reproduce it as the default. Do not generate a light-mode variant unless explicitly requested |
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |
| **Design tokens** | Only 0 CSS custom properties (low signal for semantic naming) | Color names are nearest-neighbor approximations; verify against brand guidelines if available |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg read from Figma frame fill |
| §2 Colors | Low | 0 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | Medium | 3 typography roles inferred |
| §4 Components | Low | 1 component variants captured |
| §7 Motion | Low | No motion data |
| §8 Do's/Don'ts | High | 9 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 4 breakpoints detected |
| §9b Photography | Medium | 89 images, hero not detected |

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://www.figma.com/design/Xrr9fec3DB8hC0t86GKpaF/Serendale.ai---AI-based-Blockchain-Hero-Exploration-(Community) | 2026-06-11T05:00:47.844Z*
*Values read straight from the Figma file via the REST API (exact fills, text styles, effects, auto-layout spacing). Cross-check against the live build before shipping.*