---
version: alpha
name: MetaLab
description: "Cinema black, a violet hairline, and a serif that fills the frame."
colors:
  on-surface-variant: "#CAC5CA"
  on-surface: "#FFFFFF"
  surface: "#000000"
  outline: "#313033"
  primary: "#584DFF"
  subtle-ink: "#79767A"
  media-well: "#171717"
  progress-grey: "#C7C7C7"
  control-fog: "rgba(186, 186, 186, 0.2)"
  nav-scrim: "rgba(186, 186, 186, 0.6)"
  footer-rule: "rgba(255, 255, 255, 0.3)"
  video-scrim: "rgba(0, 0, 0, 0.45)"
typography:
  caption-time-code:
    fontFamily: Basis Grotesque Pro
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: -0.12px
  caption-tall:
    fontFamily: Basis Grotesque Pro
    fontSize: 12px
    fontWeight: 400
    lineHeight: 21.12px
    letterSpacing: -0.12px
  body:
    fontFamily: Basis Grotesque Pro
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: -0.16px
  button-label:
    fontFamily: Basis Grotesque Pro
    fontSize: 16px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.16px
  subheading:
    fontFamily: Basis Grotesque Pro
    fontSize: 20px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: -0.2px
  subheading-serif:
    fontFamily: Basis Grotesque Pro
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  heading-sans:
    fontFamily: Basis Grotesque Pro
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -1.2px
  heading-serif:
    fontFamily: Basis Grotesque Pro
    fontSize: 40px
    fontWeight: 400
    lineHeight: 52px
    letterSpacing: -0.4px
  display-s:
    fontFamily: PP Eiko
    fontSize: 64px
    fontWeight: 400
    lineHeight: 76.8px
    letterSpacing: -1.28px
  display-m:
    fontFamily: PP Eiko
    fontSize: 88px
    fontWeight: 400
    lineHeight: 114.4px
    letterSpacing: -1.76px
  display-l:
    fontFamily: PP Eiko
    fontSize: 140px
    fontWeight: 400
    lineHeight: 168px
    letterSpacing: -2.1px
  ticker:
    fontFamily: Basis Grotesque Pro
    fontSize: 220px
    fontWeight: 400
    lineHeight: 220px
    letterSpacing: -6.6px
rounded:
  card-media-tile-row-divider: 0px
  button-chip-icon-control: 50px
  nav-header: 1000px
spacing:
  tight: 8px
  chip: 12px
  base: 24px
  stat: 36px
  media: 43px
  row: 50px
  hero-band: 150px
  section: 180px
  scroller: 540px
---
# MetaLab — Style Reference

> Cinema black, a violet hairline, and a serif that fills the frame.

**Theme:** dark

The canvas is `#000000` and it does not lift; what changes down the page is what floats on it, not the ground. Hierarchy is carried by scale — PP Eiko at weight 240, tracked to `-2.1px`, does the shouting, while Basis Grotesque Pro sits at 16px and refuses to compete. The signature move is the pill: controls fill with `rgba(186, 186, 186, 0.2)` at a 50px radius so they read as fogged glass rather than painted chips, and the nav header takes the same idea to 1000px. Rounding is a property of controls; boxes stay square, and separation is a 1px `#313033` hairline instead of a card. Colour is held back: `#584DFF` mostly arrives as a thin vertical rule beside a statistic, which lets the eye read it as measurement, and the warmth comes from full-colour photography and a chrome-and-violet render laid under the type.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#000000` | `--bg` | The ground, painted on `.Layout_scrollContainer__rz8aV` and `.PageTransition_page__XMrW8`, four elements each, across all four pages walked. |
| Ink | `#FFFFFF` | `--fg` | Display and body type — 1052 of its 1077 observations are text. It also fills the `.PageTransitionPortal_rectangleBg___8HqX` wipe panels and carries `.CaseStudies_activeButtonPosition__in8zx`, which brightens the selected client pill. |
| Muted ink | `#CAC5CA` | `--text-regular` | Second-rank type: list items, attributions, stat labels, the blog author line. 136 observations, all of them text, on `.ListColumns_columnItem__B622Y` and "UX/UI Design". |
| Subtle ink | `#79767A` | `--text-subtle` | Third-rank type — row descriptions, column copy, `.EmailSignup_title__01Dl3`. The quietest legible step. |
| Hairline | `#313033` | `--border-subtle` | The structural line: 1px border on `.ArticleCard_ArticleCard__s2zMI` and `.DescriptionRows_rowList__item__E_5fk`, 1px fill on `.InfoDrawersItem_divider__7AfNe` and `.JobPostings_line__uDVkF`. |
| Media well | `#171717` | `--bg-subtle` | The single luminance step above canvas, under images and video on `.ParallaxGrid_imagesList__imageContainer__x3HBp.ParallaxGrid_item`. A loading floor, not a card. |
| Signal violet | `#584DFF` | `--bg-highlight` | The accent, almost always a rule: `.VerticalStats_line__XYRUO` and `.HoverableColumns_item__line__XzDzo`. The control it fills is `.Button_Button__qQTgU.JobPostings_filterButton__w3zay.JobPostings`. |
| Progress grey | `#C7C7C7` | `--mid-grey` | One fill in the walk — `.PaginationNavigation_progress__GO2DT`. A meter, not a surface. |
| Control fog | `rgba(186, 186, 186, 0.2)` | `--button-bg` | The button fill: client pills, filter chips, the small menu button. Its transparency is the point — it borrows the render behind it. |
| Nav scrim | `rgba(186, 186, 186, 0.6)` | `--nav-scrim` | `.Navigation_bgColor__8Pq8g`. Three times the control fog's opacity, because the header must stay legible over photography. |
| Footer rule | `rgba(255, 255, 255, 0.3)` | `--border-footer` | The 1px border on `.Footer_topContainer__topLink__yS1YB`, brighter than the `#313033` hairline because the footer's ground is busier. |
| Video scrim | `rgba(0, 0, 0, 0.45)` | `--scrim-video` | `.VideoScroller_videoLoopOverlay__Z3DJ9`. Darkens looping footage so white type keeps contrast. |

## Tokens — Typography

### PP Eiko — the display voice: every hero, every statistic, every editorial pull-quote, run at weight 240 so the high-contrast serif thins rather than thickens as it scales · `--font-display`

- **Substitute:** PP Editorial New, Canela, Noe Display
- **Weights:** 240, 300, 400
- **Sizes:** 20px, 24px, 40px, 64px, 88px, 140px
- **Line height:** 24px at 20px, 33.6px at 24px, 52px at 40px, 76.8px at 64px, 88–114.4px at 88px, 119–168px at 140px
- **Letter spacing:** tightens with size — `normal` at 20px, `-0.24px` at 24px, `-0.4px` at 40px, `-1.28px` at 64px, `-1.76px` at 88px, `-2.1px` at 140px
- **Role:** the display voice; 240 covers `.HomepageHero_title__Bct53`, `.VideoScrollerHero_title__kYOZ2`, `.ParallaxGrid_title__Ct3RC` and `.VerticalStats_number__ipiGh`, with `.InlineImageTextHero_title__1_PUT` the exception at 300, and 400 reserved for the smaller serif steps such as `.DescriptionRows_rowList__itemTitle__LgwQA`.

### Basis Grotesque Pro — everything that is not a hero: body, labels, buttons, blog headlines, the 220px ticker · `--font-sans`

- **Substitute:** Suisse Int'l, Founders Grotesk, Neue Haas Grotesk
- **Weights:** 350, 400, 500
- **Sizes:** 12px, 16px, 20px, 40px, 220px
- **Line height:** 14.4px and 21.12px at 12px, 16–32px at 16px, 24–26px at 20px, 48px at 40px, 220px at 220px
- **Letter spacing:** `-0.12px` at 12px, `-0.16px` at 16px, `-0.2px` at 20px, `-1.2px` at 40px, `-6.6px` at 220px
- **Role:** the working face — 350 on button and menu labels (`.Button_label__YUlJz`, `.MenuButton_menuText__uaHpR`), 400 for body and for blog headlines at 40px, 500 for attribution and column titles (`.DraggableReviewGridItem_author__6qYGB.DraggableReviewGridItem_si`, `.ListColumns_columnTitle__OK2eZ`).

### Arial — recorded by the walk at a single weight, with no heading or text row naming a carrier · `--font-fallback-sans`

- **Substitute:** Helvetica, Liberation Sans, system-ui
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** read as the sans fallback stack resolving behind Basis Grotesque Pro, not as a chosen face — no census row assigns it text.

### Times — recorded by the walk at a single weight, with no heading or text row naming a carrier · `--font-fallback-serif`

- **Substitute:** Times New Roman, Liberation Serif, Georgia
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** the serif fallback behind PP Eiko. Include it in the stack; do not design to it.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / time code | 12px | 14.4px | -0.12px | `--text-caption` |
| Caption, tall | 12px | 21.12px | -0.12px | `--text-caption-tall` |
| Body | 16px | 22.4px | -0.16px | `--text-body` |
| Button label | 16px | 32px | -0.16px | `--text-label` |
| Subheading | 20px | 24–26px | -0.2px | `--text-subheading` |
| Subheading, serif | 20px | 24px | normal | `--text-subheading-serif` |
| Heading, sans | 40px | 48px | -1.2px | `--text-heading` |
| Heading, serif | 40px | 52px | -0.4px | `--text-heading-serif` |
| Display S | 64px | 76.8px | -1.28px | `--text-display-sm` |
| Display M | 88px | 88–114.4px | -1.76px | `--text-display-md` |
| Display L | 140px | 119–168px | -2.1px | `--text-display-lg` |
| Ticker | 220px | 220px | -6.6px | `--text-ticker` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

The common gaps — 8px, 12px, 24px, 36px — are multiples of four, and 24px carries far more elements than any other gap in the walk. Two measured values break the grid: the 43px between a description row's text and its media, and the 50px vertical padding of the footer's bottom columns.

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Tight | 8px | `--spacing-tight` |
| Chip | 12px | `--spacing-chip` |
| Base | 24px | `--spacing-base` |
| Stat | 36px | `--spacing-stat` |
| Media | 43px | `--spacing-media` |
| Row | 50px | `--spacing-row` |
| Hero band | 150px | `--spacing-hero` |
| Section | 180px | `--spacing-section` |
| Scroller | 540px | `--spacing-scroller` |

### Border Radius

| Element | Value |
|---------|-------|
| Card, media tile, row, divider | 0px |
| Button, chip, icon control | 50px |
| Nav header | 1000px |
| `--border-radius` 0.8rem | *(declared, not painted)* |
| `--border-radius-lg` 1.6rem | *(declared, not painted)* |

Every box the component census measures reads `radius 0px` — `.ArticleCard_ArticleCard__s2zMI`, `.DescriptionRows_rowList__item__E_5fk`, `.ParallaxGrid_imagesList__imageContainer__x3HBp.ParallaxGrid_item`, `.Footer_topContainer__topLink__yS1YB`. The two rounded values in the radii census belong to controls and to the nav header; the 0.8rem and 1.6rem radii declared on `:root` are painted by no walked element.

### Layout

- **Page max-width:** not measured. Gutter is declared as `--gutter: 1.6rem`, matching the 24px horizontal padding on `.Navigation_header__aRDSU` and `.ArticleCard_ArticleCard__s2zMI`.
- **Section gap:** 180px is the dominant rhythm, carried by `.SectionContainer_SectionContainer__fvVvT.undefined` and `.PaginationNavigation_hasResults__zngv7`; the video hero band takes 150px and the cities scroller 540px.
- **Card padding:** not measured — the box census records no card, panel or section with a painted fill. The nearest painted paddings are the article row's `0px 24px` and the description row's `50px 0px`.
- **Element gap:** 24px is the workhorse across all pages (`.HomepageHero_descriptionContainer___jyPv`, `.ParallaxGrid_imagesList__0WQxO`); 8px binds the nav and footer lists; 12px sets the filter row; 36px the stat list; `40px 24px` the two-axis `.ListColumns_columnList__7zbdB`; 259.008px separates the panning image pair on the about page.

## Components

### Floating Nav Bar
**Role:** The persistent header — wordmark, menu, local time, theme, contact — riding above whatever the page is playing underneath.

`.Navigation_header__aRDSU` is a header with `fill none`, `padding 0px 24px`, `radius 1000px`, no border and no shadow, three times across the interior pages. The fill lives on a sibling, `.Navigation_bgColor__8Pq8g`: `rgba(186, 186, 186, 0.6)` at `radius 0px`, clipped by the header's 1000px corner. That split is why the bar reads as a light-grey capsule — the scrim is a rectangle, the mask is the pill. Right-hand controls sit on the 8px gap of `.Navigation_uiRight__8K_ZG`; the time code is `.TimeComponent_time__item__code__dcawl` at 12px/350/14.4px/-0.12px in `#FFFFFF`.

### Menu Button
**Role:** The left-hand entry to full-site navigation, small enough to disappear into the header capsule.

`.Button_Button__qQTgU.MenuButton_menuButton__RZ5bI.Button_isSmall` measures two ways: `fill none` on the interior pages (3 buttons), `fill rgba(186, 186, 186, 0.2)` on the home page (1 button), where no nav scrim sits behind it and the button supplies its own. Both share 16px/400/22.4px/-0.16px, `padding 0px 16px`, `radius 50px`, `border none`, `shadow none`. The label is `.MenuButton_menuText__uaHpR` at 12px/350/21.12px/-0.12px in `#FFFFFF` — the tall 21.12px leading centres 12px type inside the pill without vertical padding.

### Client Pill
**Role:** The stacked roster of shipped work on the home page, each name a switch for the render behind it.

`.Button_Button__qQTgU.CaseStudies_itemList__itemButton__9sm2h` — button, `fill rgba(186, 186, 186, 0.2)`, 16px/350/32px/-0.16px, `padding 0px 16px`, `radius 50px`, `border none`, `shadow none`, 10 buttons on the home page. Ink is not measured on this row; the label class `.Button_label__YUlJz` paints `#FFFFFF` at 16px/350/32px/-0.16px across all pages. Horizontal padding is 16px with no vertical padding — height comes from the 32px line box, which is the system's button-height mechanism.

### Filter Chip
**Role:** Category filters above the blog index — Research, Meta, Engineering, People, Design, Product.

`.Button_Button__qQTgU.ArticleFilters_filter__tYGzr` — button, `fill rgba(186, 186, 186, 0.2)`, ink `#FFFFFF`, 16px/350/32px/-0.16px, `padding 0px 16px`, `radius 50px`, `border none`, `shadow none`, 6 chips on the blog page, sample text "Research". Identical geometry to the client pill: one button shape, two jobs. The row runs on a 12px gap (`.ArticleFilters_filters__NdLqS`), tighter than the 24px base, so the chips group as one strip.

### Accent Filter Button
**Role:** The selected state of a job-listing filter, and the one place the accent takes a whole control.

`.Button_Button__qQTgU.JobPostings_filterButton__w3zay.JobPostings` — button, `fill #584DFF`, text `#FFFFFF`, 16px/400, `padding 0px 16px`, `radius 50px`, `border 1px #584DFF`, `shadow none`, one element on the about page. The border matches the fill exactly, buying a hairline of optical weight with no change of hue. Its rarity is the signal: the violet is otherwise a 1px rule, so a solid violet pill reads as "this one is on".

### Contact Button
**Role:** The mail glyph at the far right of the header — the standing invitation to get in touch.

`.Button_Button__qQTgU.ContactButton_ContactButton__HQ0dy` is a span, and like the menu button it measures twice: `fill none` on the interior pages (3), `fill rgba(186, 186, 186, 0.2)` on the home page (1). Both carry 16px/350/32px/-0.16px, `padding 0px 0px`, `radius 50px`, `border none`, `shadow none`. Zero padding with a 50px radius makes it a circle rather than a capsule — the glyph sets the box and the radius rounds it past the corner.

### Theme Toggle
**Role:** The crescent control beside the clock, offering the inverse of everything the walk actually painted.

`.ThemeToggle_ThemeToggle__V0TAa` — button, `fill none`, ink not measured, `padding 0px 0px`, `radius 50px`, `border none`, `shadow none`, three instances on the interior pages. Build it as a bare icon button on the contact button's circular geometry. The light mode it implies exists in the site's variables — `--bg-invert`, `--text-bold-invert`, `--border-subtle-invert: #c7c7c7` — but the captured pages paint the dark side of those pairs, so treat the inverse palette as declared, not observed.

### Article Row
**Role:** One post on the blog index: author, headline, category, date — a full-width line, not a card.

`.ArticleCard_ArticleCard__s2zMI` is an anchor with `fill none`, `padding 0px 24px`, `radius 0px`, `border 1px #313033`, `shadow none`, 10 links on the blog page. The author sits in the 40px/400/48px/-1.2px `#CAC5CA` row ("Paul Straw"); the headline takes the same step in `#FFFFFF`; category and date drop to 16px/400/22.4px/-0.16px in `#79767A`. Three inks, one size for the two lines that matter — the row separates by luminance, not scale.

### Description Row
**Role:** A capability laid out as a numbered row — serif title, grey paragraph, media alongside.

`.DescriptionRows_rowList__item__E_5fk` — li, `fill none`, `padding 50px 0px`, `radius 0px`, `border 1px #313033`, `shadow none`, four items on the what-we-do page. The 50px padding on both sides of a 1px line is this system's card idiom: air instead of a container. The title is `.DescriptionRows_rowList__itemTitle__LgwQA` in PP Eiko 40px/400/52px/-0.4px `#FFFFFF` ("Define a clear vision for the future"); the copy is `.DescriptionRows_rowList__description__rEPzd` in `#79767A`. Text and media sit 43px apart via `.DescriptionRows_rowList__textMediaContainer__aQsBN`.

### Vertical Stat
**Role:** A proof number — users reached, products shipped — anchored to a violet rule.

`.VerticalStats_line__XYRUO` — div, `fill #584DFF`, `padding 0px 0px`, `radius 0px`, `border none`, `shadow none`, eight rules across the what-we-do and about pages. The number is `.VerticalStats_number__ipiGh` in PP Eiko 140px/240/119px/-2.1px `#FFFFFF` — a 119px line box under a 140px glyph, negative leading that crops the block to the digits so the rule reads as a measuring edge. The label is `.VerticalStats_title__rZEeS` at 20px/400/24px/-0.2px `#FFFFFF`, with a `#CAC5CA` twin at the same step; the group sits on the 36px gap of `.VerticalStats_list__FOwpt`.

### Media Tile
**Role:** The frame every image and looping video sits in, across the work strip and the review grid.

`.ParallaxGrid_imagesList__imageContainer__x3HBp.ParallaxGrid_item` — div, `fill #171717`, `padding 0px 0px`, `radius 0px`, `border none`, `shadow none`, six tiles on the what-we-do page; `.DraggableReviewGridItem_imageContainerInner__VWkPH` repeats the recipe fourteen times across what-we-do and about. `#171717` holds the space before the asset arrives — square corners, no border, no shadow, so the photograph's own edge is the edge. Tiles run on the 24px gap of `.ParallaxGrid_imagesList__0WQxO`.

### Footer Contact Link
**Role:** The three closing invitations — work together, join our team, just say hello — each a full-width line with an arrow.

`.Footer_topContainer__topLink__yS1YB` — div, `fill none`, `padding 0px 0px`, `radius 0px`, `border 1px rgba(255, 255, 255, 0.3)`, `shadow none`, six on the what-we-do and about pages. The border is brighter than the `#313033` hairline used in content because it sits over the footer's violet-black render, where a darker line would vanish. Below it, `.Footer_bottomColumns__sGxdf` takes 50px of vertical padding and the link lists (`.Footer_list1__fK967`, `.Footer_list2__Y3wP_`) run on 8px gaps.

## Do's and Don'ts

### Do

- Set the ground to `#000000` and leave it there. `.Layout_scrollContainer__rz8aV` and `.PageTransition_page__XMrW8` paint it on every page walked; the composition changes, the canvas does not.
- Reach for a 1px `#313033` line before you reach for a container. `.ArticleCard_ArticleCard__s2zMI` and `.DescriptionRows_rowList__item__E_5fk` are rows with a border and generous padding, and that is what a "card" means here.
- Let scale carry the hierarchy: PP Eiko at 240 from 64px to 140px, Basis Grotesque Pro at 400 for everything from 16px body to 40px blog headlines.
- Tighten tracking as type grows — `-0.16px` at 16px, `-1.2px` at 40px, `-1.76px` at 88px, `-2.1px` at 140px. The negative space closes as the glyphs get larger.
- Build every button on `padding 0px 16px`, `radius 50px`, and a 32px line box. `.Button_Button__qQTgU.CaseStudies_itemList__itemButton__9sm2h` and `.Button_Button__qQTgU.ArticleFilters_filter__tYGzr` share that geometry exactly.
- Use `rgba(186, 186, 186, 0.2)` for control fills so what is behind the button still shows through, and step to `rgba(186, 186, 186, 0.6)` when a surface has to stay legible over motion, as `.Navigation_bgColor__8Pq8g` does.
- Keep `#584DFF` as a line. `.VerticalStats_line__XYRUO` and `.HoverableColumns_item__line__XzDzo` are its home; a filled violet control should mean a selected state.

### Don't

- Don't add a box-shadow. `.ArticleCard_ArticleCard__s2zMI`, `.DescriptionRows_rowList__item__E_5fk` and `.Button_Button__qQTgU.CaseStudies_itemList__itemButton__9sm2h` each measure `shadow none`, and the walk's shadow block records no box-shadow on the captured pages — depth here is luminance and hairline.
- Don't round a box. `.ArticleCard_ArticleCard__s2zMI`, `.DescriptionRows_rowList__item__E_5fk` and `.ParallaxGrid_imagesList__imageContainer__x3HBp.ParallaxGrid_item` all measure `radius 0px`; the 50px and 1000px radii belong to controls and the header.
- Don't give a card a fill. The box census — cards, panels and sections with a painted fill — is empty; `#171717` under media is a well, not a surface to decorate.
- Don't invent greys between `#79767A` and `#313033`. The `:root` ramp declares `--neutral-70` through `--neutral-25`, and the steps the walk actually paints are `#CAC5CA` on "UX/UI Design", `#79767A` on `.DescriptionRows_rowList__description__rEPzd` and `#313033` on `.ListColumns_line__1CSqo`; treat the rest as declared.
- Don't reach for `#CAC5CA` or `#79767A` as a fill or a border. `#CAC5CA` measures 136 observations and `#79767A` 66, and in both the role count is text — carried by `.ListColumns_columnItem__B622Y` and `.HoverableColumns_item__description__gW05j`.
- Don't set PP Eiko heavy. The census gives it 240, 300 and 400 — the display face gets thinner as it gets bigger, and a bold serif breaks the whole tone.
- Don't put vertical padding on a button. Height comes from the 32px line box; adding padding throws the pill off its 50px radius.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | The ground on `.Layout_scrollContainer__rz8aV`, `main` on every page walked. |
| 1 | Media well | `#171717` | Behind images and looping video; the one luminance step up from canvas. |
| 1t | Control fog | `rgba(186, 186, 186, 0.2)` | Button and chip fills — a translucent surface, not an opaque one. |
| 2t | Nav scrim | `rgba(186, 186, 186, 0.6)` | `.Navigation_bgColor__8Pq8g`, the only surface bright enough to sit over photography. |
| — | Hairline | `#313033` | Content separation: 1px borders and 1px divider fills. |
| — | Inverse | `#FFFFFF` | `.PageTransitionPortal_rectangleBg___8HqX` wipe panels — a moment of full inversion between routes. |

## Elevation

There is none in the conventional sense. Every element the component census measured reports `shadow none`, and the box census records no filled card, so nothing here is lifted off the page. Depth is done three ways instead. Luminance: `#000000` to `#171717` is a single small step, used under media so an unloaded asset reads as a hole rather than a panel. Hairlines: `#313033` at 1px in content, `rgba(255, 255, 255, 0.3)` at 1px in the footer. Translucency: the control fog and the nav scrim let the render behind them bleed through, which is what makes the nav capsule feel floating rather than stacked.

## Imagery

Three registers that do not mix. An abstract 3D render — chromed, ribbon-like forms lit violet and white against near-black — floods the home hero and returns behind the footer's contact block; it supplies the warmth the tokens withhold. Full-colour documentary photography runs at full saturation: client work shots, an office interior, team portraits, some cropped into the display type so photographs sit between words in a headline. Client logotypes appear in flat grey over black in the video scroller. Icons are monoline — an envelope, a crescent moon, a diagonal arrow on each footer link. All of it sits on `#171717` while it loads, square-cornered, with no border and no overlay except `rgba(0, 0, 0, 0.45)` on looping video.

## Layout

Full-bleed by default. The home page is a single viewport of render with type and controls over it: a stack of client pills flush left, a short paragraph column upper right, the display headline centred low. Interior pages become true-black sequences — one idea per band, 180px of section padding between them, with the 150px video hero band and the 540px cities scroller as exceptions. The grid is loose and asymmetric rather than columnar: a headline set left with a media strip running off the right edge, a stat row of three anchored by violet rules, a portrait bleeding past the text column. The nav is a fixed capsule centred at the top — transparent on the home page, backed by the `rgba(186, 186, 186, 0.6)` scrim on the interior pages — wordmark centred, menu left, time-code, theme and contact right on 8px gaps. Content rows separate by 1px `#313033` lines and 50px of padding rather than by cards. The footer repeats: an oversized serif question left, three bordered link rows right, then link columns at 50px vertical padding.

## Typography Voice

Two modes, and the distance between them is the personality. PP Eiko is a high-contrast serif run at weight 240 — thinner than a book weight — and pushed to 88px and 140px, where the thin strokes become hairlines and the face reads engraved rather than typed. Basis Grotesque Pro mostly sits at 16px/22.4px with `-0.16px` tracking; its largest editorial step is 40px/48px, under a third of the serif's display size. The signature move is negative leading at scale: `.VerticalStats_number__ipiGh` runs 140px type in a 119px line box, and `.LargeTicker_tickerText__Vrk6s` sets 220px on a 220px line at `-6.6px`. Both crop the block to the glyphs so type behaves as a graphic element. The small end goes the other way — `.MenuButton_menuText__uaHpR` sets 12px on 21.12px, loose enough to centre inside a pill. Tight where it is huge, airy where it is tiny.

## Agent Prompt Guide

## Quick Color Reference

- background: `#000000`
- text: `#FFFFFF`
- surface: `#171717`
- border: `#313033`
- accent: `#584DFF`
- primary action: `rgba(186, 186, 186, 0.2)` — translucent grey fill; `#584DFF` fills the selected state of `.Button_Button__qQTgU.JobPostings_filterButton__w3zay.JobPostings`

## Example Component Prompts

1. **Client Pill**: Build a pill button on `#000000`. Fill `rgba(186, 186, 186, 0.2)`, radius 50px, padding `0px 16px`, no border, no shadow. Label in Basis Grotesque Pro 16px, weight 350, line-height 32px, letter-spacing `-0.16px`, colour `#FFFFFF`. No vertical padding — the 32px line box sets the height. Stack ten of them flush left with 8px between.
2. **Floating Nav Bar**: A fixed centred header, `padding 0px 24px`, `radius 1000px`, no border, no shadow, over a sibling scrim filled `rgba(186, 186, 186, 0.6)` and clipped by the header radius. Wordmark centred in Basis Grotesque Pro; "Menu" at left in 12px/350/21.12px/`-0.12px` `#FFFFFF`; time code, crescent theme toggle and envelope contact button at right on an 8px gap, each a circle at `radius 50px` with `padding 0px 0px`.
3. **Article Row**: A full-width anchor, no fill, `padding 0px 24px`, `radius 0px`, `border 1px #313033`, no shadow. Author line in Basis Grotesque Pro 40px/400/48px/`-1.2px` `#CAC5CA`; headline beneath at the same size in `#FFFFFF`; category and date in 16px/400/22.4px/`-0.16px` `#79767A`. Repeat ten rows on `#000000` with no gap — the borders are the rhythm.
4. **Vertical Stat**: Three columns on a 36px gap. Each: a 1px vertical rule filled `#584DFF` on the left edge, a 20px/400/24px/`-0.2px` `#CAC5CA` label at top, and the number in PP Eiko 140px, weight 240, line-height 119px, letter-spacing `-2.1px`, colour `#FFFFFF`, cropped tight by the negative leading.
5. **Description Row**: A list item with no fill, `padding 50px 0px`, `radius 0px`, `border 1px #313033`. Serif title in PP Eiko 40px/400/52px/`-0.4px` `#FFFFFF`; body paragraph in Basis Grotesque Pro 16px/400/22.4px/`-0.16px` `#79767A`; media block held 43px from the text. Square corners, no shadow.

## Similar Brands

- **Instrument** — the same conviction that a black canvas plus one oversized editorial serif is enough of a brand system, with photography carrying all the colour.
- **Locomotive** — smooth-scroll dark portfolios built on hairline dividers and translucent floating controls rather than cards and shadows.
- **Active Theory** — kindred in using an abstract 3D render as the ground layer and keeping the entire UI as thin type and pill controls floating over it.
- **Area 17** — shares the discipline of separating content with 1px lines and generous vertical padding instead of containers, and of one restrained accent used structurally.
- **Bureau Borsche** — the high-contrast serif at extreme scale with negative leading, treated as image rather than as text.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --bg: #000000;
  --fg: #ffffff;
  --text-regular: #cac5ca;
  --text-subtle: #79767a;
  --border-subtle: #313033;
  --bg-subtle: #171717;
  --bg-highlight: #584dff;
  --border-highlight: #584dff;
  --mid-grey: #c7c7c7;
  --button-bg: rgba(186, 186, 186, 0.2);
  --nav-scrim: rgba(186, 186, 186, 0.6);
  --border-footer: rgba(255, 255, 255, 0.3);
  --scrim-video: rgba(0, 0, 0, 0.45);

  /* Typography — Families */
  --font-display: 'PP Eiko', 'PP Editorial New', Canela, Times, serif;
  --font-sans: 'Basis Grotesque Pro', 'Suisse Int\'l', 'Founders Grotesk', Arial, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 14.4px;
  --text-caption-tall: 12px;
  --leading-caption-tall: 21.12px;
  --text-body: 16px;
  --leading-body: 22.4px;
  --text-label: 16px;
  --leading-label: 32px;
  --text-subheading: 20px;
  --leading-subheading: 26px;
  --text-subheading-serif: 20px;
  --leading-subheading-serif: 24px;
  --text-heading: 40px;
  --leading-heading: 48px;
  --text-heading-serif: 40px;
  --leading-heading-serif: 52px;
  --text-display-sm: 64px;
  --leading-display-sm: 76.8px;
  --text-display-md: 88px;
  --leading-display-md: 103.84px;
  --text-display-lg: 140px;
  --leading-display-lg: 168px;
  --text-ticker: 220px;
  --leading-ticker: 220px;
  --tracking-caption: -0.12px;
  --tracking-body: -0.16px;
  --tracking-subheading: -0.2px;
  --tracking-heading: -1.2px;
  --tracking-heading-serif: -0.4px;
  --tracking-display-sm: -1.28px;
  --tracking-display-md: -1.76px;
  --tracking-display-lg: -2.1px;
  --tracking-ticker: -6.6px;

  /* Spacing */
  --spacing-tight: 8px;
  --spacing-chip: 12px;
  --spacing-base: 24px;
  --spacing-stat: 36px;
  --spacing-media: 43px;
  --spacing-row: 50px;
  --spacing-hero: 150px;
  --spacing-section: 180px;
  --spacing-scroller: 540px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-pill: 50px;
  --radius-header: 1000px;
}
```

### Tailwind v4

```css
@theme {
  --color-bg: #000000;
  --color-fg: #ffffff;
  --color-text-regular: #cac5ca;
  --color-text-subtle: #79767a;
  --color-border-subtle: #313033;
  --color-bg-subtle: #171717;
  --color-bg-highlight: #584dff;
  --color-border-highlight: #584dff;
  --color-mid-grey: #c7c7c7;
  --color-button-bg: rgba(186, 186, 186, 0.2);
  --color-nav-scrim: rgba(186, 186, 186, 0.6);
  --color-border-footer: rgba(255, 255, 255, 0.3);
  --color-scrim-video: rgba(0, 0, 0, 0.45);

  --font-display: 'PP Eiko', 'PP Editorial New', Canela, Times, serif;
  --font-sans: 'Basis Grotesque Pro', 'Suisse Int\'l', 'Founders Grotesk', Arial, sans-serif;

  --text-caption: 12px;
  --text-caption--line-height: 14.4px;
  --text-caption--letter-spacing: -0.12px;
  --text-caption-tall: 12px;
  --text-caption-tall--line-height: 21.12px;
  --text-body: 16px;
  --text-body--line-height: 22.4px;
  --text-body--letter-spacing: -0.16px;
  --text-label: 16px;
  --text-label--line-height: 32px;
  --text-label--letter-spacing: -0.16px;
  --text-subheading: 20px;
  --text-subheading--line-height: 26px;
  --text-subheading--letter-spacing: -0.2px;
  --text-subheading-serif: 20px;
  --text-subheading-serif--line-height: 24px;
  --text-heading: 40px;
  --text-heading--line-height: 48px;
  --text-heading--letter-spacing: -1.2px;
  --text-heading-serif: 40px;
  --text-heading-serif--line-height: 52px;
  --text-heading-serif--letter-spacing: -0.4px;
  --text-display-sm: 64px;
  --text-display-sm--line-height: 76.8px;
  --text-display-sm--letter-spacing: -1.28px;
  --text-display-md: 88px;
  --text-display-md--line-height: 103.84px;
  --text-display-md--letter-spacing: -1.76px;
  --text-display-lg: 140px;
  --text-display-lg--line-height: 168px;
  --text-display-lg--letter-spacing: -2.1px;
  --text-ticker: 220px;
  --text-ticker--line-height: 220px;
  --text-ticker--letter-spacing: -6.6px;

  --spacing-tight: 8px;
  --spacing-chip: 12px;
  --spacing-base: 24px;
  --spacing-stat: 36px;
  --spacing-media: 43px;
  --spacing-row: 50px;
  --spacing-hero: 150px;
  --spacing-section: 180px;
  --spacing-scroller: 540px;

  --radius-none: 0px;
  --radius-pill: 50px;
  --radius-header: 1000px;
}
```