---
version: alpha
name: Sequel
description: "Film on true black, with headlines that slip into italic serif mid-sentence."
colors:
  on-surface-variant: "rgba(255, 255, 255, 0.69)"
  surface: "#000000"
  outline: "#9A9A9A"
  on-surface: "#FFFFFF"
  primary: "#86948F"
  bone: "#F5F5F0"
  footer-ink: "#0D0D0D"
  graphite-tile: "#202020"
  cheque-grey: "#191919"
  bento-grey: "#282828"
  message-grey: "#181818"
  glass-fill: "rgba(200, 200, 200, 0.1)"
  glass-edge: "rgba(255, 255, 255, 0.2)"
  card-edge: "rgba(255, 255, 255, 0.1)"
  hairline: "rgba(255, 255, 255, 0.15)"
  scrim: "rgba(0, 0, 0, 0.4)"
typography:
  sign-off-display:
    fontFamily: VisueltPro
    fontSize: 128px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: -3.2px
  home-hero:
    fontFamily: VisueltPro
    fontSize: 76.8px
    fontWeight: 400
    lineHeight: 76.8px
    letterSpacing: -3.84px
  stories-hero:
    fontFamily: VisueltPro
    fontSize: 59.52px
    fontWeight: 400
    lineHeight: 71.424px
    letterSpacing: -1.7856px
  founders-membership-hero:
    fontFamily: VisueltPro
    fontSize: 56px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -1.68px
  stat-numeral:
    fontFamily: VisueltPro
    fontSize: 54.08px
    fontWeight: 400
    lineHeight: 64.896px
    letterSpacing: 0em
  section-heading:
    fontFamily: VisueltPro
    fontSize: 51.84px
    fontWeight: 400
    lineHeight: 51.84px
    letterSpacing: -1.5552px
  home-section-subtitle:
    fontFamily: VisueltPro
    fontSize: 42.24px
    fontWeight: 400
    lineHeight: 42.24px
    letterSpacing: -1.2672px
  office-city:
    fontFamily: VisueltPro
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.75px
  perk-copy:
    fontFamily: VisueltPro
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.3px
    letterSpacing: 0em
  body-link:
    fontFamily: VisueltPro
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  button:
    fontFamily: VisueltPro
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  badge:
    fontFamily: VisueltPro
    fontSize: 11.2px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0.56px
  micro-label:
    fontFamily: VisueltPro
    fontSize: 10px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0.8px
rounded:
  pills-badges-tabs: 9999px
  perk-tiles-collage-cards-inline-headline: 8px
  home-cards-video-and-quote-tiles: 10px
  cheque-and-service-cards: 12px
  bento-cards: 15px
  message-cards: 18px
  diagram-pills: 21.65px
  deal-cards-invest-button: 30px
  bento-chart-bars: 6px
  stat-columns-footer: 0px
spacing:
  icon-gap: 7px
  xs: 8px
  sm: 12px
  md: 16px
  tile-pad: 20px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  gutter: 96px
  section-sm: 120px
  footer-gap: 160px
  section: 240px
  section-home: 360px
---
# Sequel — Style Reference
> Film on true black, with headlines that slip into italic serif mid-sentence.

**Theme:** dark

Sequel builds its pages like a private screening room: a true black canvas, white type, and colour arriving almost entirely through the footage. The signature move is the mid-sentence swap: a VisueltPro headline hands a word or phrase to Bradford italic ("legacy," "bend reality," "defy"), so each claim reads half manifesto, half handwritten signature. Chrome stays sparse and soft-edged, with a bone-white pill for the ask, a frosted glass pill for everything secondary, and small-radius cards that frame film rather than decorate it. Hierarchy comes from scale and tight tracking, not weight: display lines hold a medium weight and sit nearly solid. Deep slabs of black part the sections instead of rules, and the pages settle onto a near-black footer that signs off with the brand line at poster scale.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Black | `#000000` | `--color-bg` | Page ground on `.lenis` (html) and the label ink of the bone pills ("Build the future" `.btn-title`). The rest of the system is built up from this black. |
| White | `#FFFFFF` | `--color-text` | The type colour for headings, body and links. As a fill the inventory paints it once, which the tiles show as the selected "SOCIALS" tab *(inferred binding)*. |
| Bone | `#F5F5F0` | `--color-bone` | Fill of `.btn-component.btn-default` pills, both control rows in the census. A warm off-white reserved for the primary ask. |
| Footer Ink | `#0D0D0D` | `--color-footer` | The footer fill and the label ink of `.glass.tab.is-selected`. One step off black, so the footer reads as a floor. |
| Graphite Tile | `#202020` | `--color-tile` | Fill of `.videoTile`, `.quoteTile` and `.service`: the testimonial surface. |
| Cheque Grey | `#191919` | `--color-cheque` | `.cheque` fill on the founders page. Sits just below the tile grey. |
| Bento Grey | `#282828` | `--color-bento` | `.bentoCard2`, `.bentoCard4.bentoCard`, `.sigmaCard.sigmaCard1` on the membership page; no captured tile shows these carriers. |
| Message Grey | `#181818` | `--color-message` | `.messageCard` and `.messageAvatarRing` fills, membership page; not in a tile. |
| Ring Grey | `#9A9A9A` | `--color-ring` | 1px border on `.messageAvatarRing` and `.diagramAvatarRing`, membership page; not in a tile. |
| Sage Stops | `#86948F` → `#9B9E86` | `--color-sage-from` / `--color-sage-to` | The inventory's chromatic gradient, on `.bentoCard1`, `.bentoCard4Dot`, `.bentoCard4Bar` (membership). The controls census carries none of it; not visible in a tile. |
| Glass Fill | `rgba(200, 200, 200, 0.1)` | `--color-glass` | Frosted fill of `.glass.btn-wrapper` and the `.glass.badge` family. |
| Glass Edge | `rgba(255, 255, 255, 0.2)` | `--color-glass-edge` | 1px edge on glass pills and badges; also the fill of the `.w-full.h-px.bg-white/20` footer rules. |
| Card Edge | `rgba(255, 255, 255, 0.1)` | `--color-card-edge` | 1px border on `.homeCardContent`. |
| Hairline | `rgba(255, 255, 255, 0.15)` | `--color-hairline` | Border of `.stat` and the frame of `.w-full.h-full.section3Video`. |
| Muted Text | `rgba(255, 255, 255, 0.69)` | `--color-text-muted` | `.videoTileSubtitle` and `.quoteTileSubtitle`. It is the site's declared muted token, and the census shows it painted. |
| Scrim | `rgba(0, 0, 0, 0.4)` | `--color-scrim` | `.perkOverlay` over membership perk photography. |

## Tokens — Typography
### VisueltPro — the sans voice, from uppercase micro-labels to the poster sign-off; display at 500, stat numerals at 300, tracked tight · `--font-display`
- **Substitute:** Circular Std, Graphik, Inter
- **Weights:** 300, 400, 500, 700 (700 is in the weight census but sits below the text census's top rows)
- **Sizes:** 10px, 11.2px, 14px, 15px, 16px, 18px, 21px, 30px, 42.24px, 44px, 51.84px, 54.08px, 56px, 59.52px, 76.8px, 128px
- **Line height:** 1.0 on the home and founders display rows (76.8/76.8px, 56/56px, 42.24/42.24px, 128/128px); 1.2 on membership and stories titles (56/67.2px, 59.52/71.424px); 1.5 on 16px body (24px); 1.35 on 18px perk copy (24.3px)
- **Letter spacing:** −0.03em on most display rows (−1.68px at 56px, −1.5552px at 51.84px, −1.2672px at 42.24px); −0.05em on the home hero (−3.84px at 76.8px); −0.025em at 128px (−3.2px) and 30px (−0.75px); +0.05em on badges (0.56px at 11.2px); +0.08em on micro-labels (0.8px at 10px)
- **Role:** The sans voice, from uppercase micro-labels to the poster sign-off; display at 500, stat numerals at 300, tracked tight.

### Bradford — the italic serif that takes over a word or phrase inside a VisueltPro line · `--font-serif`
- **Substitute:** Tiempos Text Italic, GT Sectra Fine Italic, Newsreader Italic
- **Weights:** 400, 500
- **Sizes:** 18px, 21px, 48px, 51.84px, 56px, 59.52px, 76.8px, 128px
- **Line height:** Matches the host line: 76.8px at 76.8px, 62.208px at 51.84px, 71.424px at 59.52px, 24.3px at 18px
- **Letter spacing:** −0.05em against the sans's −0.03em (−2.8px at 56px, −2.976px at 59.52px, −2.592px at 51.84px); equal to the sans at 76.8px (−3.84px) and 128px (−3.2px)
- **Role:** The italic serif that takes over a word or phrase inside a VisueltPro line: "legacy," (`.italic`), "storytelling," (`.titleItalic.header1TitleItalic`), "world-wide" (`.perkTextItalic`).

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Sign-off display (500) | 128px | 128px | −3.2px | `--text-display-xl` |
| Home hero (500) | 76.8px | 76.8px | −3.84px | `--text-display` |
| Stories hero (500) | 59.52px | 71.424px | −1.7856px | `--text-hero-lg` |
| Founders / membership hero (500) | 56px | 56px / 67.2px | −1.68px | `--text-hero` |
| Stat numeral (300) | 54.08px | 64.896px | normal | `--text-stat` |
| Section heading (500) | 51.84px | 51.84px / 62.208px | −1.5552px | `--text-heading-lg` |
| Home section subtitle (500) | 42.24px | 42.24px | −1.2672px | `--text-heading` |
| Office city (300) | 30px | 36px | −0.75px | `--text-title` |
| Perk copy (400) | 18px | 24.3px | normal | `--text-body-lg` |
| Body / link (400) | 16px | 24px | normal | `--text-body` |
| Button (500) | 15px | not measured | normal | `--text-button` |
| Badge (500, uppercase) | 11.2px | 16.8px | 0.56px | `--text-badge` |
| Micro-label (400, uppercase) | 10px | 15px | 0.8px | `--text-micro` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Icon gap | 7px | `--spacing-icon` |
| XS | 8px | `--spacing-xs` |
| SM | 12px | `--spacing-sm` |
| MD | 16px | `--spacing-md` |
| Tile pad | 20px | `--spacing-tile` |
| LG | 24px | `--spacing-lg` |
| XL | 32px | `--spacing-xl` |
| 2XL | 48px | `--spacing-2xl` |
| 3XL | 64px | `--spacing-3xl` |
| Gutter | 96px | `--spacing-gutter` |
| Section SM | 120px | `--spacing-section-sm` |
| Footer gap | 160px | `--spacing-footer` |
| Section | 240px | `--spacing-section` |
| Section home | 360px | `--spacing-section-home` |

### Border Radius
| Element | Value |
|---------|-------|
| Pills, badges, tabs | 9999px |
| Avatars, play buttons | 50% |
| Perk tiles, collage cards, inline headline video | 8px |
| Home cards, video and quote tiles | 10px |
| Cheque and service cards | 12px |
| Bento cards (membership, not in a tile) | 15px |
| Message cards | 18px |
| Diagram pills | 21.65px |
| Deal cards, invest button | 30px |
| Bento chart bars | 6px 6px 0px 0px |
| Stat columns, footer | 0px |
| `--tile-radius` 1rem | *(declared, not painted)* |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Glass | `rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset` | `--shadow-glass` |
| Pill lift | `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px` | `--shadow-pill` |
| Service card | `rgba(0, 0, 0, 0.3) 0px 10px 30px 0px, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` | `--shadow-card` |
| Footer edge | `rgb(44, 44, 44) 0px 2px 0px 0px inset` | `--shadow-footer-edge` |

### Layout
- **Page max-width:** not measured. Content sits inside the census's 96px horizontal inset and film bands run edge to edge.
- **Section gap:** 360px vertical padding on home sections (`.section.section2`); 240px (`.section.section1`) and 120px (`.section.section3`) on founders and membership; 264px on the stories hero; 180px on `.invitationSection`; 96px in the footer.
- **Card padding:** 20px (`.quoteTile`), 16px (`.homeCardContent`), 19.2px (`.stat`), 8px 16px (glass badges).
- **Element gap:** 16px (`.foundersColumn`), 24px (`.header.section1Header`), 12px (`.quoteTile`), 32px (`.section2Cards`), 8px (`.statContent`).

## Components

### Navigation Bar
**Role:** The floating header that carries the wordmark, the Founders, Membership and Stories links, and the standing invitation to "Build the future".
Fixed and transparent (`.fixed.top-0.left-0.right-0`, a carrier of #FFFFFF ink), with no fill, border or shadow of its own, so it lies directly on the hero film and later on black. Links are the 16px/500/24px row in rgba(255, 255, 255, 0.9) (`.text-white/90.hover:text-white.transition-colors.duration-200`, "Founders"), brightening to white on hover, grouped at the 32px gap (`.hidden.lg:flex.lg:flex-1.items-center`). The lowercase "sequel" wordmark with its barcode of vertical bars sits left (not measured); the Primary Pill Button sits right. The film is the header's background, so keep it chrome-free.

### Primary Pill Button
**Role:** The solid ask: "Build the future" in the header, "For founders" and "For members" on the home cards.
`.btn-component.btn-default.button-md.pointer-events-auto`: #F5F5F0 fill, #000000 label at 15px/500, padding 0px 24px, radius 9999px, no border, shadow rgba(0, 0, 0, 0.15) 0px 4px 20px 0px, box 173×45px, and a 7px gap to the trailing → arrow. The small variant `.btn-component.btn-default.button-sm.homeCardButton` drops to 14px/500 and 0px 20px padding with the same fill, radius and shadow. Bone rather than pure white keeps the pill warm against footage. The soft lift separates it from bright video without reading as a drop shadow.

### Glass Pill Button
**Role:** The secondary action over film: "Watch the film", "Read our manifesto".
Built from `.glass.btn-wrapper` (and `.glass.btn-wrapper.section3Button` for the manifesto link). The colour, radius and shadow rows that name the class give it a rgba(200, 200, 200, 0.1) fill, a 1px rgba(255, 255, 255, 0.2) edge, 9999px radius and the glass shadow rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset. Padding and label type are not measured. `.btn-component.btn-glass.button-md` carries the same 7px icon gap as the bone pill. The frosted body takes on the colour of the video behind it, with a circled play glyph on "Watch the film". It sits one register below the bone pill.

### Glass Badge
**Role:** Uppercase stage and category tags, such as "Series A", "Seed", "Founders" and "Clients".
`.glass.badge.stageBadge` ("Series A", founders page): fill rgba(200, 200, 200, 0.1), 1px border rgba(255, 255, 255, 0.2), padding 8px 16px, radius 9999px, the glass shadow, box 64–85×35px; label 11.2px/500/16.8px with 0.56px tracking (the `.badgeText` row, "Founders", matches). `.glass.badge.homeCardBadge`, `.glass.badge.statBadge` ("Clients", 66–153×35px) and `.glass.badge.serviceBadge` share the fill, edge and shadow. This is the system's metadata voice: small, tracked, uppercase and frosted, pinned to a card's top corner.

### Manifesto Film Band
**Role:** The "We believe in" block, a looping film that cycles one belief at a time above a link to the manifesto.
The frame is `.w-full.h-full.section3Video` with a 1px rgba(255, 255, 255, 0.15) border; the text block is `.section3Text` with 60px vertical padding; the action is `.glass.btn-wrapper.section3Button`. Across the tiles the frame starts inset at the page gutter, grows to full bleed under the fixed nav, then shrinks back as the next section arrives. Copy is centred: an uppercase tracked "WE BELIEVE IN" label, then one belief ("Backing founders who bend reality.", "Longevity over hype.") with its Bradford swap and the next line blurring in. Label and belief sizes are not measured.

### Home Pathway Card
**Role:** The two doors on the home page: "Not just another VC" for founders and "Invest with the best" for members.
`.homeCard`: 550×550px, radius 10px, no fill, no shadow. `.homeCardContent` inside it fills the same box with padding 16px 16px and a 1px rgba(255, 255, 255, 0.1) border at 10px. Full-bleed photography runs under `.homeCardOverlay`, a gradient of rgba(0, 0, 0, 0.1) → rgba(0, 0, 0, 0.3) → rgba(0, 0, 0, 0.7) that darkens toward the copy. A glass badge pins top-right ("Founders", "Athletes, Artists & Entrepreneurs"). The title size is not measured. Body copy is `.homeCardAbout` in rgba(255, 255, 255, 0.85), and a small bone pill closes the card. The pair sits at the 32px gap (`.section2Cards`).

### Founder Testimonial Tiles
**Role:** Founder proof, with talking-head video tiles and pull-quote tiles stacked in a masonry grid.
Video: `.videoTile`, #202020, radius 10px, no shadow, 400×457–500px, holding `.w-full.h-full.videoTileVideo` (mux-video, radius 10px) under `.videoTileOverlay`, a gradient of rgba(0, 0, 0, 0.3) → rgba(0, 0, 0, 0.6). The name sits bottom-left (size not measured) over `.videoTileSubtitle` ("CEO & Co-Founder of Howbout") in rgba(255, 255, 255, 0.69). Quote: `.quoteTile`, #202020, padding 20px 20px, radius 10px, 12px internal gap, 400×140–183px, with the quote in white above `.quoteTileSubtitle` ("Founder") in the same muted white. Both types carry a glass stage badge top-left. Columns stack at 16px (`.foundersColumn`).

### Cheque Card
**Role:** The cheque-size statement: "$100k-$200k" for Pre-seed & Seed, "$500k-$3m" for Series A to Series C.
`.cheque`: #191919 fill with a 12px radius (the 12px radius row names the class); padding and box are not measured. Everything is centred: a glass badge ("Pre-seed/Seed") at the top, the range in a light numeral (size not measured), then `.chequeDescription` ("Our average cheque size for Pre-seed & Seed.") at 16px/400/22.4px. The card sits a step darker than the testimonial tiles, so the surface recedes and the number carries the card.

### Perk Tile
**Role:** The membership benefits marquee, with tiles such as "Access the best deal flow", "Advisor access" and "Automated portfolio management".
`.perkCard`: 409×306px, radius 8px, no fill. `.perkOverlay` covers it with rgba(0, 0, 0, 0.4) at the same 8px radius. The copy is centred: `.perkText` in VisueltPro 18px/400/24.3px, with the key word in `.perkTextItalic`, Bradford 18px/400 ("world-wide"). In the tile, two offset rows run edge to edge and bleed off the viewport. The photography is warm, low-key interiors, and the 40% black scrim keeps 18px white copy legible on any frame.

### Stat Column
**Role:** The membership proof numbers: Clients "300+", Followers "220m+", World Champions "25", Exits "$20bn".
`.stat`: 283×283px, padding 19.2px 19.2px, radius 0px, no fill, 1px border rgba(255, 255, 255, 0.15). The tile reads that border as vertical rules between the columns. A `.glass.badge.statBadge` sits top-left. The figure anchors bottom-left in `.statValue` (VisueltPro 54.08px at weight 300, line-height 64.896px, normal tracking), and the light weight lets a large number stay calm. The inner gap is 8px (`.statContent`). The square corners are deliberate: the stats are ruled like a ledger rather than set in cards.

### Story Collage
**Role:** The stories wall, a grid of vertical social-video thumbnails beneath a "Socials / Newsroom" switch.
`.collageCard` (an anchor): 370×493px, radius 8px, no fill, in staggered columns inside `.instagramCollage.featuredInstagram` (#000000 fill, padding 0px 12px). Captions are burned into the frames as large sans with one word in a white pill; they are video, not page type. Above the wall, the selected `.glass.tab.is-selected` paints #0D0D0D label ink on a white pill ("Socials") beside the glass "Newsroom" tab. Tab sizes and the grey social glyph row are not measured.

### Footer
**Role:** The closing floor, holding the brand sign-off, navigation, offices, contact and the regulatory line.
The footer row (contains "Your legacy, made. Navigation Company San Franci") is #0D0D0D, padding 96px 0px, 1905–1920×957px, radius 0px, with shadow rgb(44, 44, 44) 0px 2px 0px 0px inset, a 2px top edge in place of a border. It opens on "Your legacy, made." at 128px/500/128px, −3.2px (`.text-white.text-5xl.md:text-7xl.lg:text-9xl`), with "legacy," in Bradford (`.italic`). Offices set "San Francisco" at 30px/300/36px, −0.75px, over "United States" at 10px/400/15px, 0.8px, in rgba(255, 255, 255, 0.6). A `.w-full.h-px.bg-white/20` rule (188×1px) closes each office. Column heads use rgba(255, 255, 255, 0.7) and 0.8 (size not measured), and the disclaimer uses rgba(255, 255, 255, 0.4). The layout gaps are 160px, 64px (`.flex.flex-wrap.justify-between.gap-x-16`) and 32px 192px.

## Do's and Don'ts
### Do
- Set display lines in VisueltPro 500 at −0.03em and hand the key word to Bradford at −0.05em (`.title.header1Title` with `.titleItalic.header1TitleItalic`).
- Make the primary ask a #F5F5F0 pill with a #000000 15px/500 label, 0px 24px padding, 9999px radius and the rgba(0, 0, 0, 0.15) 0px 4px 20px lift.
- Put secondary actions and metadata in glass: rgba(200, 200, 200, 0.1) fill, 1px rgba(255, 255, 255, 0.2) edge, glass shadow.
- Scrim footage before placing white type on it: rgba(0, 0, 0, 0.3) → rgba(0, 0, 0, 0.6) on `.videoTileOverlay`, rgba(0, 0, 0, 0.4) on `.perkOverlay`.
- Part sections with black padding: 360px on home, 240px and 120px on interior pages.
- Set metadata as uppercase tracked micro-type: 11.2px at 0.56px for badges, 10px at 0.8px for footer labels.

### Don't
- Don't bold display type. The heading census paints display at 500 or 300 ("Your legacy, made.", "San Francisco"); keep the drama in size and tracking.
- Don't colour the controls. Both control rows (`.btn-component.btn-default.button-md.pointer-events-auto`, `.btn-component.btn-default.button-sm.homeCardButton`) paint #F5F5F0.
- Don't set the Bradford word upright or as running copy. In the tiles it appears as an italic word inside a sans line (`.italic` "legacy,", `.perkTextItalic` "world-wide").
- Don't shadow content cards. The `.videoTile`, `.quoteTile` and `.homeCard` rows paint shadow none; `.service` is the named exception.
- Don't draw rules between sections. The census paints its rules inside the footer offices (`.w-full.h-px.bg-white/20`) and on the stat ledger (`.stat`).
- Don't push card radii past 12px on the home or founders pages. Their radius rows top out at 12px (`.cheque`, `.service`) short of the pills.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | Page ground behind film and type |
| 1 | Footer | `#0D0D0D` | The closing floor |
| 2 | Message | `#181818` | Membership message cards (not in a tile) |
| 3 | Cheque | `#191919` | Cheque-size cards |
| 4 | Tile | `#202020` | Testimonial video and quote tiles |
| 5 | Bento | `#282828` | Membership bento cards (not in a tile) |
| — | Glass | `rgba(200, 200, 200, 0.1)` | Pills and badges floating over film |

## Elevation
Depth comes from luminance steps and photography, and shadows play a small part. Cards climb a ladder of greys from #000000 to #282828 and stay flat. The `.videoTile`, `.quoteTile` and `.homeCard` rows paint shadow none, and `.service` alone among the card rows carries a two-layer drop. Shadow does most of its work on small floating chrome: the glass shadow's 30px blur plus a 1px white inset highlight gives badges and glass pills a lit top edge, and the bone pill gets a soft 20px lift. The footer marks its boundary with a 2px inset top edge rather than a border.

## Imagery
Imagery is cinematic live-action film and the page's main source of colour. It shows warm, low-key interiors, hands at work (a pianist, a pencil sketch), a climber over the sea, and founders on webcam. It arrives as looping mux-video in the hero, the manifesto band and the testimonial tiles, and as vertical social clips on the stories wall. Footage is darkened before type touches it by gradient scrims and flat 40% overlays, so white copy stays legible. Partner logos run as a white wordmark marquee. Illustration is rare in the tiles; the clearest case is the small hand-drawn strokes above each footer city.

## Layout
The home hero is full-bleed film under the transparent fixed nav. It pins "Your legacy, made." bottom-left at 76.8px, with a glass "Watch the film" pill and a description in rgba(255, 255, 255, 0.94) (`.description.section1Description`) bottom-right. Interior heroes centre a 56–59.52px headline on black. Below that, content sits inside the 96px inset and centred section heads introduce contained grids: two 550px pathway cards, a three-column masonry of 400px testimonial tiles, and a staggered wall of 370px story cards. Marquees (perks, partner logos) break the inset and run edge to edge. The vertical rhythm is extreme, with 360px of black around home sections, and headings reveal word by word through a blur.

## Typography Voice
The system runs in two modes inside one line. VisueltPro does the declaring at weight 500, tracked −0.03em and set solid, so headlines read as dense, confident blocks. Bradford italic takes the word that carries feeling ("legacy," "courage," "defy"), tracked tighter still at −0.05em so it tucks into the sans rather than floating. The effect is a signature on a contract. Below display, the type drops to quiet 16px body and uppercase micro-labels tracked open at +0.05–0.08em, and weight 300 turns up on numerals and city names (`.statValue`, "San Francisco"), where size carries the emphasis.

## Agent Prompt Guide
Build on #000000 with white VisueltPro. Use Bradford italic for one word or phrase per headline, a #F5F5F0 pill for the ask, glass for everything secondary, and film for colour.

## Quick Color Reference
- background: #000000
- text: #FFFFFF
- surface: #202020
- border: rgba(255, 255, 255, 0.2)
- accent: #F5F5F0 (Bone; the chrome carries no chromatic accent in the tiles)
- primary action: #F5F5F0 fill with #000000 label

## Example Component Prompts
1. **Hero headline**: Full-bleed looping video on #000000. Bottom-left headline "Your *legacy,* made." in VisueltPro 500, 76.8px, line-height 76.8px, letter-spacing −3.84px, white; "legacy," in Bradford italic 500 at the same size. Bottom-right: a glass pill "Watch the film" (rgba(200, 200, 200, 0.1) fill, 1px rgba(255, 255, 255, 0.2) border, 9999px radius, shadow rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset) above a short description in rgba(255, 255, 255, 0.94).
2. **Primary pill**: "Build the future →" button, #F5F5F0 fill, #000000 label VisueltPro 15px/500, padding 0px 24px, height 45px, radius 9999px, shadow rgba(0, 0, 0, 0.15) 0px 4px 20px 0px, 7px gap before the arrow.
3. **Testimonial tile**: 400×500px, #202020, radius 10px, no shadow; full-bleed webcam video under a gradient rgba(0, 0, 0, 0.3) → rgba(0, 0, 0, 0.6); top-left glass badge "SERIES A" (11.2px/500, 0.56px tracking, padding 8px 16px, 9999px radius); bottom-left name in white and uppercase role in rgba(255, 255, 255, 0.69).
4. **Stat ledger**: Four 283×283px columns, padding 19.2px, 1px rgba(255, 255, 255, 0.15) border, 0px radius, no fill; glass badge "CLIENTS" top-left; numeral "300+" bottom-left in VisueltPro 300, 54.08px, line-height 64.896px.
5. **Footer**: #0D0D0D band, padding 96px 0, inset shadow rgb(44, 44, 44) 0px 2px 0px 0px; "Your legacy, made." at 128px/500, −3.2px, "legacy," in Bradford italic; office cities at 30px/300 over 10px uppercase countries in rgba(255, 255, 255, 0.6) with a 1px rgba(255, 255, 255, 0.2) rule beneath.

## Similar Brands
- **A24** — Black-first film-house pages where footage supplies the colour and the type stays white and quiet.
- **MUBI** — Cinematic tiles on a dark ground, with editorial headlines that mix a sans and a serif.
- **MasterClass** — Talent-led video portraits, dark surfaces and restrained pill actions that let faces sell the promise.
- **Apple TV+** — Full-bleed looping video heroes under minimal white chrome, with frosted glass controls over footage.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-bg: #000000;
  --color-text: #FFFFFF;
  --color-bone: #F5F5F0;
  --color-footer: #0D0D0D;
  --color-tile: #202020;
  --color-cheque: #191919;
  --color-bento: #282828;
  --color-message: #181818;
  --color-ring: #9A9A9A;
  --color-sage-from: #86948F;
  --color-sage-to: #9B9E86;
  --color-glass: rgba(200, 200, 200, 0.1);
  --color-glass-edge: rgba(255, 255, 255, 0.2);
  --color-card-edge: rgba(255, 255, 255, 0.1);
  --color-hairline: rgba(255, 255, 255, 0.15);
  --color-text-muted: rgba(255, 255, 255, 0.69);
  --color-scrim: rgba(0, 0, 0, 0.4);

  /* Typography — Families */
  --font-display: 'VisueltPro', 'Circular Std', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Bradford', 'Tiempos Text', ui-serif, Georgia, serif;

  /* Typography — Scale */
  --text-display-xl: 128px;   --leading-display-xl: 128px;   --tracking-display-xl: -3.2px;
  --text-display: 76.8px;     --leading-display: 76.8px;     --tracking-display: -3.84px;
  --text-hero-lg: 59.52px;    --leading-hero-lg: 71.424px;   --tracking-hero-lg: -1.7856px;
  --text-hero: 56px;          --leading-hero: 67.2px;        --tracking-hero: -1.68px;
  --text-stat: 54.08px;       --leading-stat: 64.896px;
  --text-heading-lg: 51.84px; --leading-heading-lg: 62.208px; --tracking-heading-lg: -1.5552px;
  --text-heading: 42.24px;    --leading-heading: 42.24px;    --tracking-heading: -1.2672px;
  --text-title: 30px;         --leading-title: 36px;         --tracking-title: -0.75px;
  --text-body-lg: 18px;       --leading-body-lg: 24.3px;
  --text-body: 16px;          --leading-body: 24px;
  --text-button: 15px;
  --text-badge: 11.2px;       --leading-badge: 16.8px;       --tracking-badge: 0.56px;
  --text-micro: 10px;         --leading-micro: 15px;         --tracking-micro: 0.8px;

  /* Spacing */
  --spacing-icon: 7px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-tile: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-gutter: 96px;
  --spacing-section-sm: 120px;
  --spacing-footer: 160px;
  --spacing-section: 240px;
  --spacing-section-home: 360px;

  /* Border Radius */
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-bento: 15px;
  --radius-message: 18px;
  --radius-diagram: 21.65px;
  --radius-deal: 30px;
  --radius-none: 0px;

  /* Shadows */
  --shadow-glass: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-pill: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
  --shadow-card: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
  --shadow-footer-edge: rgb(44, 44, 44) 0px 2px 0px 0px inset;
}
```

### Tailwind v4
```css
@theme {
  --color-bg: #000000;
  --color-text: #FFFFFF;
  --color-bone: #F5F5F0;
  --color-footer: #0D0D0D;
  --color-tile: #202020;
  --color-cheque: #191919;
  --color-bento: #282828;
  --color-message: #181818;
  --color-ring: #9A9A9A;
  --color-sage-from: #86948F;
  --color-sage-to: #9B9E86;
  --color-glass: rgba(200, 200, 200, 0.1);
  --color-glass-edge: rgba(255, 255, 255, 0.2);
  --color-card-edge: rgba(255, 255, 255, 0.1);
  --color-hairline: rgba(255, 255, 255, 0.15);
  --color-text-muted: rgba(255, 255, 255, 0.69);
  --color-scrim: rgba(0, 0, 0, 0.4);

  --font-display: 'VisueltPro', 'Circular Std', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Bradford', 'Tiempos Text', ui-serif, Georgia, serif;

  --text-display-xl: 128px;
  --text-display-xl--line-height: 128px;
  --text-display-xl--letter-spacing: -3.2px;
  --text-display: 76.8px;
  --text-display--line-height: 76.8px;
  --text-display--letter-spacing: -3.84px;
  --text-hero-lg: 59.52px;
  --text-hero-lg--line-height: 71.424px;
  --text-hero-lg--letter-spacing: -1.7856px;
  --text-hero: 56px;
  --text-hero--line-height: 67.2px;
  --text-hero--letter-spacing: -1.68px;
  --text-stat: 54.08px;
  --text-stat--line-height: 64.896px;
  --text-heading-lg: 51.84px;
  --text-heading-lg--line-height: 62.208px;
  --text-heading-lg--letter-spacing: -1.5552px;
  --text-heading: 42.24px;
  --text-heading--line-height: 42.24px;
  --text-heading--letter-spacing: -1.2672px;
  --text-title: 30px;
  --text-title--line-height: 36px;
  --text-title--letter-spacing: -0.75px;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 24.3px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-button: 15px;
  --text-badge: 11.2px;
  --text-badge--line-height: 16.8px;
  --text-badge--letter-spacing: 0.56px;
  --text-micro: 10px;
  --text-micro--line-height: 15px;
  --text-micro--letter-spacing: 0.8px;

  --spacing-icon: 7px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-tile: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-gutter: 96px;
  --spacing-section-sm: 120px;
  --spacing-footer: 160px;
  --spacing-section: 240px;
  --spacing-section-home: 360px;

  --radius-pill: 9999px;
  --radius-circle: 50%;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-bento: 15px;
  --radius-message: 18px;
  --radius-diagram: 21.65px;
  --radius-deal: 30px;
  --radius-none: 0px;

  --shadow-glass: rgba(0, 0, 0, 0.35) 0px 10px 30px 0px, rgba(255, 255, 255, 0.08) 0px 1px 0px 0px inset;
  --shadow-pill: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
  --shadow-card: rgba(0, 0, 0, 0.3) 0px 10px 30px 0px, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
  --shadow-footer-edge: rgb(44, 44, 44) 0px 2px 0px 0px inset;
}
```