---
version: alpha
name: "OFF+BRAND"
description: "Bone-grey paper, black type at architectural scale, one iridescent sphere behind it."
colors:
  on-surface: "#1D1D1D"
  surface: "#E5E4E0"
  outline: "rgba(111, 111, 111, 0.2)"
  primary: "#FACB0E"
  paper: "#F1F0EC"
  ring: "#BFBEBE"
  white: "#FFFFFF"
  true-black: "#000000"
  field-border: "#CCCCCC"
  field-ink: "#333333"
  ob-pink: "#F06BA8"
  ob-cyan: "#78BAE6"
  partner-blue: "#146EF5"
  form-blue: "#3898EC"
typography:
  display-xl:
    fontFamily: Ataero Retina OB Edition
    fontSize: 355.556px
    fontWeight: 400
    lineHeight: 284.444px
    letterSpacing: 0em
  display-l:
    fontFamily: Ataero Retina OB Edition
    fontSize: 253.968px
    fontWeight: 400
    lineHeight: 203.175px
    letterSpacing: 0em
  display-m:
    fontFamily: Ataero Retina OB Edition
    fontSize: 210.794px
    fontWeight: 400
    lineHeight: 168.635px
    letterSpacing: 0em
  display-s:
    fontFamily: Ataero Retina OB Edition
    fontSize: 137.143px
    fontWeight: 400
    lineHeight: 137.143px
    letterSpacing: 0em
  heading-xl:
    fontFamily: Ataero Retina OB Edition
    fontSize: 101.587px
    fontWeight: 400
    lineHeight: 101.587px
    letterSpacing: 0em
  wordmark:
    fontFamily: Ataero Retina OB Edition
    fontSize: 93.4603px
    fontWeight: 400
    lineHeight: 74.7683px
    letterSpacing: 0em
  heading-l:
    fontFamily: Ataero Retina OB Edition
    fontSize: 60.9524px
    fontWeight: 400
    lineHeight: 60.9524px
    letterSpacing: 0em
  heading-m:
    fontFamily: Ataero Retina OB Edition
    fontSize: 50.7937px
    fontWeight: 400
    lineHeight: 60.9524px
    letterSpacing: 0em
  heading-s:
    fontFamily: Ataero Retina OB Edition
    fontSize: 45.7143px
    fontWeight: 400
    lineHeight: 59.4286px
    letterSpacing: 0em
  subheading:
    fontFamily: Ataero Retina OB Edition
    fontSize: 40.6349px
    fontWeight: 400
    lineHeight: 48.7619px
    letterSpacing: 0em
  title:
    fontFamily: Ataero Retina OB Edition
    fontSize: 38.0952px
    fontWeight: 400
    lineHeight: 38.0952px
    letterSpacing: 0em
  button-l:
    fontFamily: Ataero Retina OB Edition
    fontSize: 32.5079px
    fontWeight: 400
    lineHeight: 32.5079px
    letterSpacing: 0em
  card-title:
    fontFamily: Ataero Retina OB Edition
    fontSize: 30.4762px
    fontWeight: 400
    lineHeight: 30.4762px
    letterSpacing: 0em
  counter:
    fontFamily: Ataero Retina OB Edition
    fontSize: 26.4127px
    fontWeight: 400
    lineHeight: 36.9778px
    letterSpacing: 0em
  body:
    fontFamily: Ataero Retina OB Edition
    fontSize: 20.3175px
    fontWeight: 400
    lineHeight: 28.4444px
    letterSpacing: 0.2px
  label:
    fontFamily: Ataero Retina OB Edition
    fontSize: 20.3175px
    fontWeight: 400
    lineHeight: 20.3175px
    letterSpacing: 0em
  eyebrow:
    fontFamily: Ataero Retina OB Edition
    fontSize: 20.3175px
    fontWeight: 400
    lineHeight: 20.3175px
    letterSpacing: 1.01587px
  caption:
    fontFamily: Ataero Retina OB Edition
    fontSize: 15.2381px
    fontWeight: 400
    lineHeight: 15.2381px
    letterSpacing: 0.2px
rounded:
  card-media-well-work-tile: 12.6984px
  enterprise-slide-hero-plate: 27.9365px
  form-input-textarea: 10.7937px
  eyebrow-outline-chip: 8.63492px
  why-card: 12.6984px
  case-study-section: 40.6349px
  pill-button-chip-radio: 126.984px
  large-pill-button: 203.175px
  drag-bar: 1920px
spacing:
  2xs: 8px
  xs: 10.1587px
  sm: 20.3175px
  md: 25.3968px
  lg: 32px
  xl: 40.6349px
  2xl: 60.9524px
---
# OFF+BRAND — Style Reference

> Bone-grey paper, black type at architectural scale, one iridescent sphere behind it.

**Theme:** light

The system is built on a single warm off-white canvas, `#E5E4E0`, and a single near-black ink, `#1D1D1D`, and it lets those two do almost all the work. The signature move is a rendered gradient sphere — yellow through pink into cyan and white — that floats behind the type from page to page, and it carries nearly all the saturated colour in the system. Typography is one proprietary grotesk, Ataero Retina OB Edition, set at weight 400 from 15.2381px captions to 355.556px display, with display line-height pulled below the size itself so headline caps lock into solid slabs; the brand trusts scale, not weight, for hierarchy. Structure is drawn with hairlines rather than fills — a translucent `rgba(111, 111, 111, 0.2)` rule that serves as border, divider and button outline in one — and the corner language is binary: 12.6984px on anything that holds media, a full pill on anything you can press. Everything resolves against a 20.3175px em: the radius steps are 0.625em, 1.375em and 6.25em, the grid gutter is 1.25em, card padding 2em, panel padding 3em.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Bone | `#E5E4E0` | `--color-canvas` | The canvas, and the ink on every dark plate. Also the fill of `.btn-w.w-inline-block` — the pill button borrows the page colour rather than inventing a brand fill. |
| Ink | `#1D1D1D` | `--color-ink` | Body and display type on bone; the fill of the page-transition blocks `.pagew-block.is--1` / `.is--2`, which are the dark planes between pages rather than a section you scroll through. |
| Paper | `#F1F0EC` | `--color-surface` | The single raised surface: the contact form panel and the enterprise slide cards. Twelve points brighter than the canvas on every channel — that is the whole elevation story. |
| Hairline | `rgba(111, 111, 111, 0.2)` | `--color-hairline` | Border, divider and button outline in one, on `.btn-w.w-inline-block`, `.form-line` and `.hg-img-w`. Base `#6F6F6F` at 20%; with 148 border observations against 149 fills, it reads as a pencil line about as often as a plane. |
| Ring | `#BFBEBE` | `--color-ring` | The 1px stroke on `.orb-outline` — the faint concentric circles behind the type. All 16 of its observations are borders, and all sit on `.orb-outline` / `.orb-outline.is-2`: decoration rather than a content border. |
| White | `#FFFFFF` | `--color-white` | Label ink over dark work tiles (`.hcs-titles-w`) and the plus glyph (`.hcs-cross-w`); one white plate, `.c.is-hsc`. Reserved for type sitting on imagery. |
| True Black | `#000000` | `--color-black` | Root-level ink on `html` and the active enterprise slide. Distinct from `#1D1D1D` and used far more sparingly. |
| Field Border | `#CCCCCC` | `--color-field-border` | Webflow's default input stroke, painted on `.w-input` in the contact form only — the lightest structural line in the system. |
| Field Ink | `#333333` | `--color-field-ink` | Input value text on `.w-input`. A hair softer than the page ink so typed answers sit below the labels. |
| OB Yellow | `#FACB0E` | `--color-ob-yellow` | First stop of the sphere gradient. Its three observations are all fills on `.hs-track-ul` and `.abt-block-w.is-1` / `.is-4` — editorial colour, not a card or button fill. |
| OB Pink | `#F06BA8` | `--color-ob-pink` | Second stop of the same gradient, same carriers. The warm middle of the sphere. |
| OB Cyan | `#78BAE6` | `--color-ob-cyan` | Third stop, same carriers — the cool edge where the sphere resolves into white. |
| Partner Blue | `#146EF5` | `--color-partner-blue` | The co-brand plate in the enterprise hero, `._wf-ent-hero__item--w.is--2`. A partner's colour set inside the system, not a system colour. |
| Form Blue | `#3898EC` | `--color-form-blue` | Fill of the hidden reCAPTCHA control `.visually-hidden.g-recaptcha.w-button`. Framework residue: its single observation is that hidden control — table it rather than design with it. |
| Prism | `linear-gradient(#FACB0E, #F06BA8, #78BAE6, #FFFFFF)` | `--gradient-prism` | The four-stop ramp painted on `.hs-track-ul` and `.abt-block-w.is-1` / `.is-4` — three observations, and the system's largest saturated gesture. |

## Tokens — Typography

### Ataero Retina OB Edition — one proprietary grotesk covering display, heading, body, label and caption; 400 everywhere the type census reports, with 700 held back for controls · `--font-display`

- **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, Inter (tightened tracking)
- **Weights:** 400, 700
- **Sizes:** 15.2381px, 20.3175px, 26.4127px, 30.4762px, 32.5079px, 38.0952px, 40.6349px, 45.7143px, 50.7937px, 60.9524px, 93.4603px, 101.587px, 137.143px, 210.794px, 253.968px, 355.556px
- **Line height:** 0.8× at display (284.444px on 355.556px; 203.175px on 253.968px; 168.635px on 210.794px), 1.0× at heading (101.587px on 101.587px), 1.2–1.3× at subheading, 1.4× at body (28.4444px on 20.3175px)
- **Letter spacing:** `normal` on every display and heading row; 0.2px on running body ("We are a founder-led Scottish born, global digit…"); 1.01587px on the eyebrow row `.h-eyebrow` ("Trusted by")
- **Role:** One proprietary grotesk covering display, heading, body, label and caption; 400 everywhere the type census reports, with 700 held back for controls.

### sans-serif — the generic fallback the stack resolves to · `--font-fallback`

- **Substitute:** system-ui, Helvetica Neue, Arial
- **Weights:** 400
- **Sizes:** inherits the scale above
- **Line height:** inherits
- **Letter spacing:** inherits
- **Role:** The generic tail of the font stack, not a second voice; the system reads as one face.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 355.556px | 284.444px | normal | `--text-display-xl` |
| Display L | 253.968px | 203.175px | normal | `--text-display-l` |
| Display M | 210.794px | 168.635px | normal | `--text-display-m` |
| Display S | 137.143px | 137.143px | normal | `--text-display-s` |
| Heading XL | 101.587px | 101.587px | normal | `--text-heading-xl` |
| Wordmark | 93.4603px | 74.7683px | normal | `--text-wordmark` |
| Heading L | 60.9524px | 60.9524px | normal | `--text-heading-l` |
| Heading M | 50.7937px | 60.9524px | normal | `--text-heading-m` |
| Heading S | 45.7143px | 59.4286px | normal | `--text-heading-s` |
| Subheading | 40.6349px | 48.7619px | normal | `--text-subheading` |
| Title | 38.0952px | 38.0952px | normal | `--text-title` |
| Button L | 32.5079px | 32.5079px | normal | `--text-button-lg` |
| Card title | 30.4762px | 30.4762px | normal | `--text-card-title` |
| Counter | 26.4127px | 36.9778px | normal | `--text-counter` |
| Body | 20.3175px | 28.4444px | 0.2px | `--text-body` |
| Label | 20.3175px | 20.3175px | normal | `--text-label` |
| Eyebrow | 20.3175px | 20.3175px | 1.01587px | `--text-eyebrow` |
| Caption | 15.2381px | 15.2381px | 0.2px | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 20.3175px (the em everything resolves against; 0.5em = 10.1587px)   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 8px | `--spacing-2xs` |
| xs | 10.1587px | `--spacing-xs` |
| sm | 20.3175px | `--spacing-sm` |
| md | 25.3968px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| xl | 40.6349px | `--spacing-xl` |
| 2xl | 60.9524px | `--spacing-2xl` |

### Border Radius

| Element | Value |
|---------|-------|
| Card, media well, work tile | 12.6984px |
| Enterprise slide, hero plate | 27.9365px |
| Form input, textarea | 10.7937px |
| Eyebrow outline chip | 8.63492px |
| Why card (top corners only) | 12.6984px 12.6984px 0px 0px |
| Case-study section | 40.6349px |
| Pill button, chip, radio | 126.984px |
| Large pill button | 203.175px |
| Drag bar | 1920px |
| Orb, avatar | 100% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Section outline (fully transparent) | `rgba(0, 0, 0, 0) 0px 0px 0px 1px` | `--shadow-none` |

### Layout

- **Page max-width:** `not measured`
- **Section gap:** 60.9524px vertical padding — the only section-padding value the census reports at 48px or above, on `.cp-form-w` and `.team-info-trans`
- **Card padding:** 40.6349px on `.team-item-w` and `.hcs-item-w.w-inline-block`; 60.9524px on the form panel `.cp-form-w`; 20.3175px on `._wf-ent__why--card`
- **Element gap:** 25.3968px grid gutter (`.grid-main`, `.grid-main.is-home-hero`), 20.3175px between stacked fields and footer links (`.form-field-w`, `.ft-nav-link-w`), 10.1587px inside tight label groups (`.abt-sticky-menu-row`, `.team-titles`), 8px inside a nav link (`.page-link-w.w-inline-block`)

## Components

### Header Bar

**Role:** The persistent top rail — wordmark, two secondary destinations, one pressable pill.

Left is the wordmark "OFF+BRAND." at 40.6349px/400 with a 56.8889px line-height in `#1D1D1D`. Right are two text links whose underline is `.link-track`, a 20.3175px/700 div filled `rgba(111, 111, 111, 0.2)` at radius 0px, and then the contact pill: `.btn-w.w-inline-block`, an `a` filled `#E5E4E0` with `#1D1D1D` text at 20.3175px/700, radius 126.984px, border 1px `rgba(111, 111, 111, 0.2)`, no shadow. The bar has no fill of its own — it sits directly on the canvas, so the pill's hairline is the only edge in the whole rail.

### Pill Button

**Role:** The standard call to action, everywhere from the nav to the footer.

`.btn-w.w-inline-block` is an `a` filled `#E5E4E0` with `#1D1D1D` text, 20.3175px/700, padding `0px 0px`, radius 126.984px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none. Its own padding measures zero because the inner row `.btn-inner` carries the rhythm at a 20.3175px gap. The button fills with the page colour and separates from it by one translucent hairline — that is the entire visual argument, and it is why the system reads as quiet even when a button spans a third of the viewport.

### Large Pill Button

**Role:** The hero-scale action, used where a headline hands off to a next step.

`.btn-w.is-large.w-inline-block` is an `a` filled `#E5E4E0` with `#1D1D1D` text at 32.5079px/700 — a 1.6× jump on the standard pill — padding `0px 0px`, radius 203.175px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none. The radius scales with the type so the silhouette stays a true capsule rather than a rounded rectangle. Use it in pairs beneath a hero paragraph, never inside a card, and never more than one pairing per screen: at this scale two capsules already carry the section.

### Outline Pill Button

**Role:** The action that lives on top of imagery, inside a work card.

`.btn-w.is--outline.w-inline-block` measures two ways. The common variant is an `a` filled `#E5E4E0`, text 20.3175px/700, radius 126.984px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none — this is the one riding the bottom-left of the client cards. The second variant is the same `a` with fill none and a 1px `#E5E4E0` border, for placement over dark artwork where a solid capsule would punch a hole. Both share the pill radius; only the fill decides whether the button reads as an object or an outline.

### Underlined Link

**Role:** A secondary destination — nav item, footer link, inline "About Us".

`.link-track` is a div filled `rgba(111, 111, 111, 0.2)`, radius 0px, border none, shadow none, type 20.3175px/700. A second variant of the same class carries the 400 weight instead. It is a track, not a text-decoration: a translucent bar the width of the label, which lets a hover animation slide a solid rule across it. Set the label in caps at 20.3175px with a trailing arrow glyph, and let the track sit flush under the baseline — 8px of gap inside `.page-link-w.w-inline-block` is the whole spacing budget.

### Eyebrow Label

**Role:** The small caps line that names a section above its headline.

`.h-eyebrow` is 20.3175px/400 in `#1D1D1D` with a 20.3175px line-height and 1.01587px of tracking — the only tracked step in the system, and the reason a four-word label at 20px holds its own beneath a 137px headline. Its outline variant `.h-eyebrow.is--outline.is--clients` adds an 8.63492px radius, the smallest corner the pages paint, boxing a single word into a chip. Keep eyebrows uppercase, one line, and always paired: label above, display below.

### Orbit Ring

**Role:** The ambient geometry behind every page — concentric circles that give the canvas depth without a fill.

`.orb-outline` is a div with fill none, radius 100%, and a 1px `#BFBEBE` border; `.orb` is its unstroked sibling, also fill none at radius 100%, holding the rendered sphere. Neither paints a background, so the rings read as drafting marks over the bone canvas rather than as shapes. Scale them far past the viewport — in the captures they arc off two edges at once — and keep the stroke at exactly 1px: at 2px the same circle becomes a graphic element and competes with the headline.

### Featured Work Tile

**Role:** One case study in the home grid — artwork, a label, a plus.

`.hcs-item-w.w-inline-block` is an `a` with fill none, padding `40.6349px 40.6349px`, radius 12.6984px, no border, no shadow, type 20.3175px/700 at a 28.4444px line-height. Its media child `.hcs-img-w.is-component` repeats the 12.6984px radius so the artwork clips to the same corner. The label ink is `#FFFFFF` on `.hcs-titles-w` and the expand glyph is `#FFFFFF` on `.hcs-cross-w`: white type sits directly on the image, bottom-left, with the plus opposite it. No scrim, no caption bar — the artwork is trusted to carry the contrast.

### Client Slide Card

**Role:** A horizontally dragged card in the enterprise client rail.

`.swiper-slide.is-slider-main.w-dyn-item` is a div filled `#F1F0EC`, padding `0px 0px`, radius 27.9365px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none. The 27.9365px corner is the enterprise page's own radius — softer than the 12.6984px used on work tiles — and the paired media block `.ps__card--media` repeats it so the screenshot inside never shows a squarer corner than its frame. The card sits one luminance step above the canvas and separates by hairline alone; there is no lift, only a change of paper.

### Contact Form Panel

**Role:** The brief-submission surface — the largest single container in the system.

`.cp-form-w` is a div filled `#F1F0EC`, padding `60.9524px 60.9524px`, radius 12.6984px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none. Inside, rows are separated by `.form-line` — a div filled `rgba(111, 111, 111, 0.2)` at radius 0px, so the divider and the panel border are literally the same ink. Inputs carry a 10.7937px radius (`.form-input.w-input`, `.form-input.is-textarea.w-input`), a `#CCCCCC` border and `#333333` value text (`.w-input`), stacked at a 20.3175px gap (`.form-field-w`). The panel overlaps the display headline above it rather than clearing it.

### Choice Chip

**Role:** A multi-select answer in the brief — service, deadline, referral source.

`.w-checkbox-input.w-checkbox-input--inputType-custom.checkbox-tog` is a div filled `#E5E4E0` at 20.3175px/700, padding `0px 0px`, radius 126.984px, border 1px `rgba(111, 111, 111, 0.2)`, shadow none; its ink is `not measured`. Because the panel is `#F1F0EC` and the chip is `#E5E4E0`, the chip reads as a hole punched back to the canvas rather than as a raised token — an inversion of the usual chip logic, and the reason a grid of a dozen of them stays calm. The paired radio `.w-form-formradioinput…ch` shares the 126.984px radius with fill none.

### Team Portrait Card

**Role:** One person in the core-team grid — portrait, name, role.

`.team-item-w` is a div with fill none, padding `40.6349px 40.6349px`, radius 12.6984px, no border, no shadow, type 20.3175px/400 at a 28.4444px line-height; `.team-img-w` repeats the 12.6984px radius on the image itself. Name and role are set in `.text-small.caps` — 20.3175px/400, 20.3175px line-height, `#E5E4E0` — laid over the portrait's dark lower half, name left and role right on one baseline, with `.team-titles` holding a 10.1587px gap. Shoot every portrait the same way so the grid reads as one plate.

## Do's and Don'ts

### Do

- Set display type at weight 400 and let size carry hierarchy: 355.556px, 253.968px, 210.794px, 137.143px, 101.587px are all the same weight.
- Pull display line-height below the font size — 284.444px on 355.556px, 168.635px on 210.794px — so caps stack into a slab.
- Draw every structural edge with `rgba(111, 111, 111, 0.2)` at 1px: panel borders, dividers and button outlines share one ink.
- Keep the corner vocabulary binary: 12.6984px for anything holding media, 126.984px (or 203.175px at hero scale) for anything pressable.
- Reserve saturation for the gradient `#FACB0E` → `#F06BA8` → `#78BAE6` → `#FFFFFF`, whose carriers are `.hs-track-ul` and `.abt-block-w.is-1` / `.abt-block-w.is-4` — a ramp behind type, not a surface fill.
- Track the eyebrow at 1.01587px and the body at 0.2px; leave every display and heading row at `normal`.

### Don't

- Don't add elevation. The only box-shadow the captured pages paint is fully transparent — `rgba(0, 0, 0, 0) 0px 0px 0px 1px` on `.s.is-hsc` — so depth comes from the `#E5E4E0` → `#F1F0EC` step and a hairline, or it does not come.
- Don't bold a headline. Weight 700 belongs to controls — `.btn-w.w-inline-block`, `.link-track`, `.checkbox-tog` — and every heading and text row the census reports is 400.
- Don't give a button a brand fill. Both rows of the control census fill `#E5E4E0`, the page colour, and separate by hairline.
- Don't paint `#FACB0E`, `#F06BA8` or `#78BAE6` as a surface: their carriers are the gradient tracks `.hs-track-ul` and `.abt-block-w.is-1` / `.is-4`, nothing else.
- Don't mix corner families in one view: 27.9365px belongs to the enterprise slides, 12.6984px to everything else that holds media.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#E5E4E0` | Every page ground; also the fill of buttons and chips, so objects and background share one colour. |
| 1 | Paper | `#F1F0EC` | The raised plane: contact panel, client slides, page-wipe curtain. Twelve points brighter per channel. |
| 2 | Plate | `#FFFFFF` | One white band, `.c.is-hsc`, padding `0px 25.3968px` — the brightest surface in the system and the rarest. |
| — | Ink plane | `#1D1D1D` | The transition blocks `.pagew-block.is--1` / `.is--2` — a full-bleed dark plane that exists only between pages. |

## Elevation

There is no elevation, and that is a decision rather than an omission: the single box-shadow the pages paint is `rgba(0, 0, 0, 0) 0px 0px 0px 1px` on `.s.is-hsc` — a transparent shadow, which renders as nothing. Depth is done three other ways. First, a luminance step: `#F1F0EC` sits twelve points above `#E5E4E0` on each channel, enough to read as a separate plane and too little to read as a card floating over one. Second, a 1px `rgba(111, 111, 111, 0.2)` hairline, which appears on the form panel, the client slides and every pill. Third, overlap — the contact panel slides up over the bottom of the display headline, and the work tiles pass in front of the sphere, so occlusion carries the z-order that shadow would elsewhere.

## Imagery

Three registers, sharply separated. The first is the sphere: a soft-rendered gradient orb running `#FACB0E` → `#F06BA8` → `#78BAE6` → `#FFFFFF`, sitting behind display type, cropped by the viewport, occasionally with the headline knocking through it in a darker tint. The second is client work, shown at full colour inside 12.6984px corners — device shots, 3D renders, brand films — with no treatment applied, because the point of the page is that the work is the colour. The third is people: core-team portraits shot head-on against a neutral seamless in matching black tees, so the grid reads as a typology rather than a set of headshots. Line work — the 1px `#BFBEBE` circles of `.orb-outline` and the crosshair rules over the logo grid — is the connective tissue between all three. Icons are near-absent; the recurring plus glyph is the wordmark's own `+` reused as an expand affordance.

## Layout

Full-bleed by default: the canvas runs edge to edge and content sits on a grid with a 25.3968px gutter (`.grid-main`, `.grid-main.is-home-hero`), with the sphere and the orbit rings deliberately bleeding past both sides. Section rhythm is loose and driven by type size rather than padding — the section-padding census reports a single value at 48px or above, 60.9524px on `.cp-form-w` and `.team-info-trans` — so vertical space is bought by a 355.556px headline far more often than by margin. The header is a fixed rail with the wordmark left and links right; a hamburger sits pinned bottom-right of the viewport and a small dot bottom-left, both persistent across pages. Footers are a two-column split: a display-scale invitation on the left, three link columns (sitemap, connect, offices) on the right at label size, and the wordmark set enormous along the bottom edge. The enterprise landing page keeps the same canvas, face and nav, and differs mainly by adding a 27.9365px corner family (`.ps__slider--slide.dark`, `.swiper-slide.is-slider-main.w-dyn-item`) and a partner blue plate (`._wf-ent-hero__item--w.is--2`).

## Typography Voice

The system runs two type modes and nothing between them. Display mode is huge, weight 400, tracking `normal`, and line-height below 1: 284.444px on 355.556px, 203.175px on 253.968px, 168.635px on 210.794px — a 0.8 ratio that welds consecutive lines into a single mass and makes a three-word sentence behave like a photograph. Label mode is 20.3175px and 15.2381px, uppercase, line-height equal to the size, with 1.01587px of tracking on the eyebrow and 0.2px on the caption — deliberately unemphatic, so a section marker never argues with the display above it. Running body is the hinge: 20.3175px at a 28.4444px line-height with 0.2px tracking, the only comfortable-reading setting in the system, and it appears in short columns rather than long passages. What makes it work is that both modes are the same face at the same weight; the jump from 20.3175px to 355.556px is a 17.5× change with no change of voice.

## Agent Prompt Guide

## Quick Color Reference

- background: `#E5E4E0`
- text: `#1D1D1D`
- surface: `#F1F0EC`
- border: `rgba(111, 111, 111, 0.2)`
- accent: `#FACB0E` with `#F06BA8` and `#78BAE6` — gradient stops on `.hs-track-ul` and `.abt-block-w.is-1`
- primary action: no distinct CTA color — the pill fills `#E5E4E0` with `#1D1D1D` text

## Example Component Prompts

1. **Pill Button**: Build an inline-block anchor filled `#E5E4E0` with `#1D1D1D` text, Ataero Retina OB Edition (fallback Neue Haas Grotesk Display) at 20.3175px weight 700, uppercase, border-radius 126.984px, border 1px solid `rgba(111, 111, 111, 0.2)`, no box-shadow, zero padding on the anchor with an inner flex row at a 20.3175px gap holding the label and a trailing arrow glyph.
2. **Contact Form Panel**: Build a container filled `#F1F0EC`, padding 60.9524px, border-radius 12.6984px, border 1px solid `rgba(111, 111, 111, 0.2)`, no shadow. Stack question rows separated by 1px dividers filled `rgba(111, 111, 111, 0.2)`. Inputs get border-radius 10.7937px, a `#CCCCCC` border and `#333333` value text; fields stack at a 20.3175px gap. Labels are 20.3175px uppercase in `#1D1D1D`.
3. **Featured Work Tile**: Build an anchor with no fill, 40.6349px padding, border-radius 12.6984px, no border and no shadow. Clip full-colour artwork to the same 12.6984px radius, and overlay a `#FFFFFF` uppercase label at 20.3175px weight 700 / 28.4444px line-height bottom-left, with a `#FFFFFF` plus glyph bottom-right. No scrim.
4. **Display Hero**: Set a headline in Ataero Retina OB Edition at 355.556px weight 400, line-height 284.444px, letter-spacing normal, colour `#1D1D1D`, on an `#E5E4E0` canvas. Behind it place a circular element at border-radius 100% carrying a `#FACB0E` → `#F06BA8` → `#78BAE6` → `#FFFFFF` gradient, cropped by the viewport, plus two concentric circles at border-radius 100% with a 1px `#BFBEBE` border.
5. **Team Portrait Grid**: Build a grid at a 25.3968px gutter. Each cell is a container with no fill, 40.6349px padding and border-radius 12.6984px, holding a portrait clipped to the same radius. Overlay the name and role in `#E5E4E0` at 20.3175px / 20.3175px line-height, uppercase, name left and role right on one baseline, with a 10.1587px gap in the title group.

## Similar Brands

- **Made Thought** — bone-paper canvases, hairline rules and grotesk display type set far past comfortable reading size.
- **Bakken & Bæck** — warm off-white grounds, one sans across every level, and colour quarantined into rendered artwork.
- **Locomotive** — oversized 400-weight headlines with sub-1 line-height and scroll-driven objects passing behind the type.
- **Instrument** — a restrained neutral system that lets full-colour client work supply all the saturation.
- **Pentagram** — huge type on a near-white field, structural crosshairs and grids, and no elevation anywhere.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #E5E4E0;
  --color-ink: #1D1D1D;
  --color-surface: #F1F0EC;
  --color-hairline: rgba(111, 111, 111, 0.2);
  --color-ring: #BFBEBE;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-field-border: #CCCCCC;
  --color-field-ink: #333333;
  --color-ob-yellow: #FACB0E;
  --color-ob-pink: #F06BA8;
  --color-ob-cyan: #78BAE6;
  --color-partner-blue: #146EF5;
  --color-form-blue: #3898EC;
  --gradient-prism: linear-gradient(#FACB0E, #F06BA8, #78BAE6, #FFFFFF);

  /* Typography — Families */
  --font-display: 'Ataero Retina OB Edition', 'Neue Haas Grotesk Display', 'Helvetica Now Display', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-display-xl: 355.556px;  --leading-display-xl: 284.444px;
  --text-display-l: 253.968px;   --leading-display-l: 203.175px;
  --text-display-m: 210.794px;   --leading-display-m: 168.635px;
  --text-display-s: 137.143px;   --leading-display-s: 137.143px;
  --text-heading-xl: 101.587px;  --leading-heading-xl: 101.587px;
  --text-wordmark: 93.4603px;    --leading-wordmark: 74.7683px;
  --text-heading-l: 60.9524px;   --leading-heading-l: 60.9524px;
  --text-heading-m: 50.7937px;   --leading-heading-m: 60.9524px;
  --text-heading-s: 45.7143px;   --leading-heading-s: 59.4286px;
  --text-subheading: 40.6349px;  --leading-subheading: 48.7619px;
  --text-title: 38.0952px;       --leading-title: 38.0952px;
  --text-button-lg: 32.5079px;   --leading-button-lg: 32.5079px;
  --text-card-title: 30.4762px;  --leading-card-title: 30.4762px;
  --text-counter: 26.4127px;     --leading-counter: 36.9778px;
  --text-body: 20.3175px;        --leading-body: 28.4444px;
  --text-label: 20.3175px;       --leading-label: 20.3175px;
  --text-eyebrow: 20.3175px;     --leading-eyebrow: 20.3175px;
  --text-caption: 15.2381px;     --leading-caption: 15.2381px;
  --tracking-body: 0.2px;
  --tracking-eyebrow: 1.01587px;
  --weight-regular: 400;
  --weight-bold: 700;

  /* Spacing */
  --spacing-2xs: 8px;
  --spacing-xs: 10.1587px;
  --spacing-sm: 20.3175px;
  --spacing-md: 25.3968px;
  --spacing-lg: 32px;
  --spacing-xl: 40.6349px;
  --spacing-2xl: 60.9524px;

  /* Border Radius */
  --radius-chip: 8.63492px;
  --radius-input: 10.7937px;
  --radius-card: 12.6984px;
  --radius-card-top: 12.6984px 12.6984px 0px 0px;
  --radius-slide: 27.9365px;
  --radius-section: 40.6349px;
  --radius-pill: 126.984px;
  --radius-pill-lg: 203.175px;
  --radius-bar: 1920px;
  --radius-round: 100%;

  /* Shadow */
  --shadow-none: rgba(0, 0, 0, 0) 0px 0px 0px 1px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #E5E4E0;
  --color-ink: #1D1D1D;
  --color-surface: #F1F0EC;
  --color-hairline: rgba(111, 111, 111, 0.2);
  --color-ring: #BFBEBE;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-field-border: #CCCCCC;
  --color-field-ink: #333333;
  --color-ob-yellow: #FACB0E;
  --color-ob-pink: #F06BA8;
  --color-ob-cyan: #78BAE6;
  --color-partner-blue: #146EF5;
  --color-form-blue: #3898EC;

  --font-display: 'Ataero Retina OB Edition', 'Neue Haas Grotesk Display', 'Helvetica Now Display', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  --text-display-xl: 355.556px;
  --text-display-xl--line-height: 284.444px;
  --text-display-l: 253.968px;
  --text-display-l--line-height: 203.175px;
  --text-display-m: 210.794px;
  --text-display-m--line-height: 168.635px;
  --text-display-s: 137.143px;
  --text-display-s--line-height: 137.143px;
  --text-heading-xl: 101.587px;
  --text-heading-xl--line-height: 101.587px;
  --text-wordmark: 93.4603px;
  --text-wordmark--line-height: 74.7683px;
  --text-heading-l: 60.9524px;
  --text-heading-l--line-height: 60.9524px;
  --text-heading-m: 50.7937px;
  --text-heading-m--line-height: 60.9524px;
  --text-heading-s: 45.7143px;
  --text-heading-s--line-height: 59.4286px;
  --text-subheading: 40.6349px;
  --text-subheading--line-height: 48.7619px;
  --text-title: 38.0952px;
  --text-title--line-height: 38.0952px;
  --text-button-lg: 32.5079px;
  --text-button-lg--line-height: 32.5079px;
  --text-card-title: 30.4762px;
  --text-card-title--line-height: 30.4762px;
  --text-counter: 26.4127px;
  --text-counter--line-height: 36.9778px;
  --text-body: 20.3175px;
  --text-body--line-height: 28.4444px;
  --text-body--letter-spacing: 0.2px;
  --text-label: 20.3175px;
  --text-label--line-height: 20.3175px;
  --text-eyebrow: 20.3175px;
  --text-eyebrow--line-height: 20.3175px;
  --text-eyebrow--letter-spacing: 1.01587px;
  --text-caption: 15.2381px;
  --text-caption--line-height: 15.2381px;
  --text-caption--letter-spacing: 0.2px;

  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --spacing-2xs: 8px;
  --spacing-xs: 10.1587px;
  --spacing-sm: 20.3175px;
  --spacing-md: 25.3968px;
  --spacing-lg: 32px;
  --spacing-xl: 40.6349px;
  --spacing-2xl: 60.9524px;

  --radius-chip: 8.63492px;
  --radius-input: 10.7937px;
  --radius-card: 12.6984px;
  --radius-slide: 27.9365px;
  --radius-section: 40.6349px;
  --radius-pill: 126.984px;
  --radius-pill-lg: 203.175px;
  --radius-bar: 1920px;
  --radius-round: 100%;

  --shadow-none: rgba(0, 0, 0, 0) 0px 0px 0px 1px;
}
```