---
version: alpha
name: Rejouice
description: "One typeface, two inks, and type set large enough to become architecture."
colors:
  on-surface-variant: "#8F8F8F"
  on-surface: "#000000"
  surface: "#FFFFFF"
  primary: "#000000"
  menu-black: "#101010"
  widget-paper: "#F7F7F7"
  ink-50: "rgba(255, 255, 255, 0.5)"
  ink-50-2: "rgba(0, 0, 0, 0.5)"
typography:
  display-xl:
    fontFamily: SuisseIntl
    fontSize: 546.662px
    fontWeight: 400
    lineHeight: 604.523px
    letterSpacing: -24.6px
  display:
    fontFamily: SuisseIntl
    fontSize: 82.6667px
    fontWeight: 400
    lineHeight: 89.3333px
    letterSpacing: -1.248px
  headline:
    fontFamily: SuisseIntl
    fontSize: 62px
    fontWeight: 400
    lineHeight: 66.938px
    letterSpacing: -0.93px
  headline-tight:
    fontFamily: SuisseIntl
    fontSize: 62px
    fontWeight: 400
    lineHeight: 61px
    letterSpacing: -0.93px
  menu-link:
    fontFamily: SuisseIntl
    fontSize: 60px
    fontWeight: 400
    lineHeight: 57px
    letterSpacing: -1.5px
  title:
    fontFamily: SuisseIntl
    fontSize: 40px
    fontWeight: 400
    lineHeight: 45.6px
    letterSpacing: -0.6px
  body:
    fontFamily: SuisseIntl
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.2px
  body-small:
    fontFamily: SuisseIntl
    fontSize: 16px
    fontWeight: 400
    lineHeight: 17.5px
    letterSpacing: -0.16px
  label:
    fontFamily: SuisseIntl
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  index:
    fontFamily: SuisseIntl
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18.24px
    letterSpacing: -0.24px
  caption:
    fontFamily: SuisseIntl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 15.96px
    letterSpacing: -0.14px
  field:
    fontFamily: SuisseIntl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 15.96px
    letterSpacing: 0em
  caption-tight:
    fontFamily: SuisseIntl
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.14px
rounded:
  glance-widget-widget-wrapper: 6px
  footer-layout-footer: 0px
  menu-panel-mobile-menu: 0px
  work-slide-text-slide: 0px
  split-panel-split-show: 0px
  contact-section-contact-wrapper: 0px
  page-sections-home-video-about-wrapper-p: 0px
spacing:
  hairline: 2px
  arrow: 5px
  menu: 6px
  list: 7px
  cluster: 8px
  stack: 10px
  layout: 20px
  block: 40px
  page-gutter: 40px
---
# Rejouice — Style Reference

> One typeface, two inks, and type set large enough to become architecture.

**Theme:** mixed

Rejouice runs on a single face at a single display weight — SuisseIntl 300 — traded between white-on-black and black-on-white band by band as you scroll. It is one system inverted, not two: the same header, the same type scale, the same shadowless, borderless boxes sit on either ground, and the ink simply swaps. Colour beyond that pair stays thin — a mid-grey on the office lines, an off-white on the light widget cards, a near-black behind the menu panel — three quiet neutrals doing the job an accent would do elsewhere. Hierarchy is carried by scale far more than by weight: the same 300 carries a 546px word and a 20px paragraph, with tracking tightening from −0.01em to −0.045em as the type grows. The rhythm is extravagant — sections that clear 270px of vertical padding, and full-bleed film with the type laid straight over it.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#FFFFFF` | `--color-canvas` | The light canvas and the dominant ink. Fills `.background-color__wrapper`, `.home-video`, `.contact__wrapper`, `.about__wrapper`; also the white ink of every inverted band. |
| Ink | `#000000` | `--color-ink` | The dark canvas and the dominant ink — text on 886 elements, fill on 31. Fills `.layout-footer`, `.--text.slide`, `.widget__wrapper.small.dark`; also the black type on every light page. Never softened toward `#101010`, which the census hands to `.mobile-menu`. |
| Menu Black | `#101010` | `--color-menu` | Fill only, on `.mobile-menu` and nothing else the census measures — a single step off pure black so the overlay panel separates from the page behind it. |
| Widget Paper | `#F7F7F7` | `--color-surface-light` | Fill on `.widget__wrapper.small.light` and `.widget__wrapper.full.light` — 8 observations, all of them fill. The raised light surface, and it rises by luminance alone; never ink, on `.widget__wrapper` or anywhere the census measures. |
| Office Grey | `#8F8F8F` | `--color-ink-muted` | Text on `.office__wrapper` ("San Diego, USA") — 12 observations, all of them text. The palette's mid-grey, spent on locations and secondary labels; never a fill on `.office__wrapper` or any other measured row. |
| Ink 50 (light) | `rgba(255, 255, 255, 0.5)` | `--color-ink-inverse-50` | Text on `.paragraph.will-animate` / `.extra-split-word` ("We" `.--word`) — the de-emphasised half of a split paragraph on the dark ground, so a sentence can dim word by word without a second grey entering the palette. |
| Ink 50 (dark) | `rgba(0, 0, 0, 0.5)` | `--color-ink-50` | Text only — role titles under a name (`.description-title`) on the light ground. The same 50% trick, mirrored. |

## Tokens — Typography

### SuisseIntl — the whole system: display, headline, body, nav, field. Weight 300 everywhere from 20px up; weight 400 at caption and label sizes. · `--font-sans`
- **Substitute:** Helvetica Now Display, Neue Haas Grotesk Display, Inter
- **Weights:** 300, 400
- **Sizes:** 14px, 16px, 20px, 40px, 60px, 62px, 82.6667px, 546.662px
- **Line height:** 14px at 14px (1.0) through 604.523px at 546.662px (1.106); the tightest is 57px at 60px (0.95), the loosest 24px at 16px (1.5)
- **Letter spacing:** two bands — −0.01em on the 14/16/20px rows (−0.14px, −0.16px, −0.2px), −0.015em from 40px up (−0.6px, −0.93px, −1.248px); the 60px menu link goes to −0.025em (−1.5px) and the 546.662px `.title` to −0.045em (−24.6px). `normal` appears on the label row `.content` ("Let's talk") and on the 14px `input`/`button` field row.
- **Role:** the whole system: display, headline, body, nav, field. Weight 300 everywhere from 20px up; weight 400 at caption and label sizes.

### ui-sans-serif — the generic fallback the stack resolves to when SuisseIntl has not loaded · `--font-fallback`
- **Substitute:** system-ui, -apple-system, sans-serif
- **Weights:** 400
- **Sizes:** not measured — the census attributes every sized row to SuisseIntl
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** the generic fallback the stack resolves to when SuisseIntl has not loaded.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 546.662px | 604.523px | −24.6px | `--text-display-xl` |
| Display | 82.6667px | 89.3333px | −1.248px | `--text-display` |
| Headline | 62px | 66.938px | −0.93px | `--text-headline` |
| Headline Tight | 62px | 61px | −0.93px | `--text-headline-tight` |
| Menu Link | 60px | 57px | −1.5px | `--text-menu-link` |
| Title | 40px | 45.6px | −0.6px | `--text-title` |
| Body | 20px | 24px | −0.2px | `--text-body` |
| Body Small | 16px | 17.5px | −0.16px | `--text-body-sm` |
| Label | 16px | 24px | normal | `--text-label` |
| Index | 16px | 18.24px | −0.24px | `--text-index` |
| Caption | 14px | 15.96px | −0.14px | `--text-caption` |
| Field | 14px | 15.96px | normal | `--text-field` |
| Caption Tight | 14px | 14px | −0.14px | `--text-caption-tight` |

## Tokens — Spacing & Shapes

**Base unit:** 20px (the layout gap, 24 observations) with a sub-20 cluster set beneath it   **Density:** comfortable — tight inside a cluster, extravagant between sections

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hairline | 2px | `--spacing-2xs` |
| Arrow | 5px | `--spacing-xs` |
| Menu | 6px | `--spacing-sm` |
| List | 7px | `--spacing-list` |
| Cluster | 8px | `--spacing-md` |
| Stack | 10px | `--spacing-lg` |
| Layout | 20px | `--spacing-xl` |
| Block | 40px | `--spacing-2xl` |
| Page gutter | 40px | `--spacing-gutter` |

### Border Radius

| Element | Value |
|---------|-------|
| Glance widget — `.widget__wrapper` (small, medium, full; light and dark) | 6px |
| Footer — `.layout-footer` | 0px |
| Menu panel — `.mobile-menu` | 0px |
| Work slide — `.--text.slide` | 0px |
| Split panel — `.split.show` | 0px |
| Contact section — `.contact__wrapper` | 0px |
| Page sections — `.home-video`, `.about__wrapper`, `.page-contact` | 0px |

### Shadows

None. The `<shadows>` block reads "none — the walk records box-shadow and the captured pages paint none", and every row in the component census carries `shadow none`. Any shadow added here would be an invention.

### Layout
- **Page max-width:** not measured — no max-width row in the census; sections run full-bleed to the viewport
- **Section gap:** 52px (footer) · 70px (`.inner`) · 100px (`.text-wrapper`) · 270px (`.contact__wrapper`) · 320px · 337px (`.founder__wrapper`) · 540px
- **Card padding:** 0px top / 0px left on every `.widget__wrapper` variant — the card holds media and type positioned inside it, not padded copy
- **Element gap:** 20px is the layout default; 5px binds a link to its arrow; 40px separates blocks
- **Header height:** 4.7rem *(declared, not painted)* — the site's own `--header-height`

## Components

### Header Nav Bar
**Role:** The persistent wayfinder — brand at left, page list centred, one contact link at right — held at the same size on both grounds.
Built from the caption row `.router-link-active.router-link-exact-active` ("Home"): SuisseIntl 14px / 400 / 15.96px line-height / −0.14px tracking, ink `#FFFFFF` on the dark bands and `#000000` on the light ones, carried by 48 anchors across all four pages. The `ul` list gap is 6px (`.menu`); the header reserves 4.7rem *(declared, not painted)*. There is no bar, no fill, no rule and no shadow behind it — the nav floats on whatever the section is painting, and the current page is signalled by dropping its link to a dimmer ink, not by a pill or an underline. Padding and background are `not measured`.

### "Let's Talk" CTA
**Role:** The single conversion affordance, parked at the far right of the header on every page.
Built from the label row `.content` ("Let's talk"): SuisseIntl 16px / 400 / 24px line-height / `normal` tracking, ink `#FFFFFF`, on 8 anchors, 8 spans and 3 paragraphs across all pages. It sits in a 5px flex gap (`.b-arrow.link-active.cta`) with its ↗ glyph. The controls census — buttons and links with a fill — returns `(none)`, so this CTA has no background, border, radius or shadow: one line of 16px text and an arrow, made prominent by position and by being the only thing on its side of the header. Padding is `not measured`.

### Inline Arrow Link
**Role:** The system's read-more — a phrase plus a diagonal arrow, dropped at the end of a paragraph or the corner of a section.
Built from the `.b-arrow` gap row: a 5px flex gap on 23 anchors across all four pages, in the variants `.b-arrow`, `.b-arrow.link-active.cta` and `.b-arrow.underlined.link-active-full-small`. The `.underlined` variant carries a rule under the word; the plain variant does not. Colour is the band's ink, size follows whatever row it sits in, and no fill, border, radius or shadow is measured on it. Keep the 5px gap exact — it is what makes the arrow read as part of the word rather than an icon beside it.

### Oversized Statement
**Role:** The page's argument, set at a size that leaves no room for anything else in the viewport.
Built from the 82.6667px rows: SuisseIntl 300 / 89.3333px line-height / −1.248px tracking, painted `#FFFFFF` on 35 spans and `#000000` on 65 spans, split word by word into `.--word` elements. Two to three lines, ranged left, running the full measure of the page with a first-line indent that pulls the opening word inward. The word-level split exists so each word can animate in on its own; hold the split even when nothing is animating, because the ragged right it produces is part of the look. No fill, border, radius or shadow.

### Display Title
**Role:** A single word blown up until its counters and terminals become the composition.
Built from the heading row `.title`: SuisseIntl 546.662px / 300 / 604.523px line-height / −24.6px tracking, ink `#000000`, on 6 divs and one `h2`, with each letter its own `.--char` at the same metrics. At −0.045em the tracking is three times tighter than anything else in the scale, which is what stops a half-metre word from falling apart. It is set on the paper canvas with a small annotation parked at its shoulder in body type. Padding, radius and border are `not measured` — it is type on the canvas, not a box.

### Glance Widget — Dark
**Role:** A stat card in the horizontal glance rail: a claim in large type at the top, a client mark at the bottom.
Built from `.widget__wrapper.small.dark`: fill `#000000`, radius **6px**, `border none`, `shadow none`, base type 16px / 400 / 24px / `normal`, padding 0px top and 0px left, on 4 divs. The `.medium.dark` and `.full.dark` variants carry identical fill, radius, border, shadow and type at counts of 2 and 4. Content is positioned inside rather than padded, so the mark can sit hard in a corner. That 6px is the whole radius vocabulary of the system — it exists to say "card", quietly, and it is the only softness anywhere.

### Glance Widget — Light
**Role:** The same card, inverted, so the rail alternates instead of banding.
Built from `.widget__wrapper.small.light`: fill `#F7F7F7`, radius **6px**, `border none`, `shadow none`, 16px / 400 / 24px / `normal`, padding 0px / 0px, on 6 divs; `.widget__wrapper.full.light` repeats it on 2. `#F7F7F7` is the only fill in the inventory between white and black, and it does the entire job of elevation — an 8-step luminance drop from the canvas, no border, no shadow. Use it where a card must read as a card on paper; never as an ink, which the census never paints it as.

### Full-Bleed Media Widget
**Role:** The wide member of the glance rail — a photograph or render that fills the card and carries its label over the image.
Built from `.widget__wrapper.full.dark` (fill `#000000`, 4 divs) and `.widget__wrapper.full.light` (fill `#F7F7F7`, 2 divs), both radius **6px**, `border none`, `shadow none`, base type 16px / 400 / 24px / `normal`, padding 0px / 0px. The fill shows before and around the media, so the dark variant lets a night render bleed into its own frame and the light variant does the same for a studio shot. Label text sits on the image with no scrim; the images are graded dark enough to carry white type unaided.

### Work Slide & Reel Label
**Role:** One project per full viewport — media edge to edge, the project name centred over it, the index in the corner.
Built from three rows. The stage is `.--text.slide`: fill `#000000`, radius 0px, `border none`, `shadow none`, base type 16px / 400 / 24px / `normal`, on 4 divs. The name is `.reel-label.link-active` ("Showreel"): SuisseIntl 62px / 300 / 66.938px / −0.93px, ink `#FFFFFF`, on 20 `h2`, 3 spans and one `h3`. The counter is `.index` ("01"): 16px / 400 / 18.24px / −0.24px, `#FFFFFF`, on 19 divs. The name is underlined; the underline is the only affordance, since nothing here is a button. Keep the label optically centred and the index hard to the bottom-right corner.

### Tagline Band
**Role:** The sign-off line that opens the footer — the studio's motto at title size, on black.
Built from the heading row `.tagline` ("Do it once. Do it right."): SuisseIntl 40px / 300 / 45.6px line-height / −0.6px tracking, ink `#FFFFFF`, on 4 `h2` elements across all four pages, with 60px of vertical padding on its own block. At −0.015em it takes the display tracking rather than the body tracking, which is what keeps it reading as a statement and not as a large paragraph. It is the same weight as the 546px title — the system changes size, not weight, to change register.

### Newsletter Field
**Role:** The one input in the capture: an email line with a submit arrow, sitting in the footer.
Built from the field row: SuisseIntl 14px / 400 / 15.96px line-height / `normal` tracking, ink `#FFFFFF`, on 4 `input` and 4 `button` elements across all pages, in a 10px stack gap (`.newsletter`). Fill, padding, radius and border are `not measured` — the controls census records no filled control in the capture. Treat it as an underlined baseline with a placeholder in the same 14px and the arrow at the right end of the rule; the submit is a bare glyph, because nothing in this system is a filled button.

### Footer
**Role:** The closing block on every page — contact, newsletter, sitemap, offices, legal — then the wordmark at full width.
Built from `.layout-footer`: `footer` element, fill `#000000`, base type 14px / 400 / 15.96px / −0.14px, padding 52px top and 0px left, radius 0px, `border none`, `shadow none`, on 4 footers across all four pages. Every page ends dark, including the two that spend most of their length on paper. Inside, the office lines are `.office__wrapper` at 20px / 300 / 24px / −0.2px in `#8F8F8F`, the navigation column repeats the header's caption row, and the wordmark below runs the full page width with no padding under it.

## Do's and Don'ts

### Do
- Set every display, headline and body line in SuisseIntl **300**, and reserve **400** for 14px and 16px labels, captions, indices and fields — that inversion of the usual weight logic is the system.
- Tighten tracking as size grows: −0.01em at 14–20px, −0.015em from 40px to 82.6667px, −0.045em at 546.662px.
- Invert the whole band — canvas, ink, nav, arrows — rather than tinting. `#FFFFFF` and `#000000` carry 1170 and 917 observations between them; the other three hexes carry 24.
- Keep `6px` for `.widget__wrapper` cards and `0px` for everything else the census measures.
- Elevate with luminance: `#F7F7F7` on paper, `#101010` on black. No shadow, no border.
- Let imagery run to the edge of its section and set type directly on it — the `.reel-label` sits on the film with no scrim.
- Range every statement left and keep the word-level `.--word` split; the ragged right it produces is the composition.

### Don't
- Don't add an accent colour. The painted hexes are `#FFFFFF`, `#000000`, `#8F8F8F` on `.office__wrapper`, `#F7F7F7` on `.widget__wrapper.small.light` and `#101010` on `.mobile-menu`; not one is a hue, and the CTA `.content` ("Let's talk") is text and an arrow.
- Don't paint a filled button. The controls census returns `(none)`; a solid CTA would be the loudest object on the page and this system has no loud objects.
- Don't add a shadow. The shadow block reads `none`, and every component row carries `shadow none`.
- Don't reach for a bolder weight to make something important — the heaviest SuisseIntl the census paints is the 400 of `.router-link-active.router-link-exact-active` ("Home") at 14px, while the 546.662px `.title` and the 20px body both sit at 300. Go bigger instead.
- Don't put `#F7F7F7` or `#101010` on type; the census paints the first as fill on `.widget__wrapper.small.light` and the second as fill on `.mobile-menu`, and gives neither a text row.
- Don't round anything but the glance widgets. Footer, menu panel, work slide, split panel and every section measure `0px`.
- Don't compress the vertical rhythm. Sections that clear 270px, 320px and 540px of padding are the reason the type can be this large without feeling crowded.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas — light | `#FFFFFF` | Paper ground for the approach, work-intro and about sections; ink is `#000000`. |
| 0 | Canvas — dark | `#000000` | The inverted ground: hero, contact page, work slides, footer; ink is `#FFFFFF`. |
| 1 | Card on paper | `#F7F7F7` | `.widget__wrapper.small.light` / `.full.light` — the only raised light surface. |
| 1 | Card on black | `#000000` | `.widget__wrapper.small.dark` / `.medium.dark` / `.full.dark` — same level, separated by its 6px radius and its content, not by luminance. |
| 2 | Overlay panel | `#101010` | `.mobile-menu` — one step off the canvas so the panel reads as above the page. |

## Elevation

There is no elevation in the shadow sense: `<shadows>` records none across all four pages, and every component row carries `border none` alongside `shadow none`. Depth comes three ways. Luminance — `#F7F7F7` lifts a card off paper, `#101010` lifts the menu panel off black; the steps are small on purpose. The 6px radius on `.widget__wrapper`, the only radius in the system, which reads as "this is an object" without any drop. And mostly full-bleed imagery: a photograph filling a section is a plane in front of the canvas, and the type on it a plane in front of that. Hairline rules do appear between blocks in the captured pages, but the census measures `border none` on every box, so their colour and weight are `not measured`.

## Imagery

Photography and film do the emotional work the palette refuses to. Every hero is motion — a van under the Sierra, a truck at speed, a ring turning on a plinth — bled to the full width of the section with the type laid straight over it and no scrim or overlay between them. Client work appears as its own art direction rather than as screenshots: product macro, 3D render, architectural dusk, editorial fashion. Client marks are flat white or black lockups in a single row, optically sized to the same weight, so the logo wall reads as typography rather than badges. Icons are effectively absent — the only recurring glyph is the ↗ that sits 5px after a link, plus a down arrow closing the first viewport.

## Layout

Full-bleed, always: sections run to the viewport edge, and the only horizontal padding the census measures is 40px (`.home-video`, and the dark 320px section). No max-width row exists, so the measure is set by the type, not a container. Vertical rhythm is the loudest layout signal — 52px inside the footer, 70px on `.inner`, 100px on `.text-wrapper` repeated 23 times, then 270px on `.contact__wrapper`, 320px, 337px on `.founder__wrapper` and 540px on the largest section. Inside a block, gaps stay small: 20px is the default across all pages, 40px separates blocks, 2–10px binds inline clusters. The two-column split — a short left label against a right-hand paragraph — recurs on the approach, principles and awards blocks. Grounds alternate: black hero, paper approach, black work rail, paper glance, black footer. `.split.show` is the mechanism, measuring `#FFFFFF` fill on 3 divs and `#000000` fill on 3 more at identical 20px / 300 / 24px / −0.2px type — the same panel, both inks. The nav does not change with the ground; it swaps ink.

## Typography Voice

Two modes, one family. The display mode is SuisseIntl 300 from 40px to 546.662px, with line-height between 0.95 and 1.14 of the size — at 60px / 57px and 62px / 61px the leading is shorter than the type, which is what makes a stacked statement read as a single mass. The utility mode is 400 at 14px and 16px, and it never grows: the nav caption is the same 14px on a hero or in a footer. The signature move is that the weight goes *up* as the size goes *down* — every census row at 20px and above paints 300, every 14px row paints 400, and 16px is the only size that paints both. With tracking tightening from −0.01em to −0.045em as type grows, scale alone carries every level of hierarchy. Nothing is bold, nothing is uppercase, nothing is coloured; a heading is simply large.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` (light bands) / `#000000` (dark bands)
- text: `#000000` on light / `#FFFFFF` on dark
- surface: `#F7F7F7` (card on paper) / `#101010` (overlay panel)
- border: none painted — every measured box records `border none`
- accent: none — the painted inventory contains no hue
- primary action: no distinct CTA color — the CTA is 16px text plus a ↗ at 5px

## Example Component Prompts
1. **Glance Widget — Light**: Build a card with background `#F7F7F7`, border-radius `6px`, no border, no shadow, no padding. Position a claim in SuisseIntl 20px / 300 / 24px line-height / −0.2px tracking, color `#000000`, at the top-left inset from the corner, and a small client mark at the bottom-right. Place it in a horizontal rail with 20px gaps, alternating with an identical card filled `#000000` and inked `#FFFFFF`.
2. **Oversized Statement**: Full-bleed section on `#000000`, no max-width, 40px horizontal padding, 270px vertical padding. Set two to three lines of SuisseIntl 82.6667px / 300 / 89.3333px line-height / −1.248px tracking in `#FFFFFF`, ranged left with the first word indented. Wrap every word in its own span so it can animate independently. No fill, border, radius or shadow on any element.
3. **Header Nav Bar**: Fixed header, 4.7rem tall, transparent — no fill, border or shadow. Brand wordmark at left, a centred `ul` of five links with a 6px gap, one CTA at far right. All links SuisseIntl 14px / 400 / 15.96px / −0.14px in `#FFFFFF`; the CTA is 16px / 400 / 24px / normal tracking with a ↗ glyph 5px after the text. Mark the active page by dimming its ink, not by adding a background.
4. **Work Slide**: Full-viewport section, background `#000000`, radius `0px`, no border or shadow. Media fills the frame edge to edge. Center the project name in SuisseIntl 62px / 300 / 66.938px / −0.93px, `#FFFFFF`, underlined. Place a two-digit index in 16px / 400 / 18.24px / −0.24px, `#FFFFFF`, hard against the bottom-right corner.
5. **Footer**: `footer`, background `#000000`, 52px top padding, 0px horizontal padding, radius `0px`, no border or shadow. Left column: contact email and a newsletter input in SuisseIntl 14px / 400 / 15.96px / normal, 10px stack gap, arrow submit on the rule. Right columns: sitemap and social links in 14px / 400 / 15.96px / −0.14px, `#FFFFFF`; office lines in 20px / 300 / 24px / −0.2px, `#8F8F8F`. Close with the wordmark at full page width.

## Similar Brands
- **Locomotive** — a studio site built on the same logic: oversized neutral grotesk, scroll-led full-bleed film, and almost no colour outside black and white.
- **Active Theory** — shares the dark canvas, the edge-to-edge motion and the refusal to put chrome around anything.
- **Obys Agency** — kindred monochrome extremity, with type scaled past the point of legibility as a compositional element.
- **Made Thought** — the same Swiss restraint on paper: light weights, enormous white space, and hierarchy carried by scale alone.
- **Base Design** — a brand studio whose system is likewise one grotesk, two inks and a strict grid, with imagery carrying all of the warmth.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-surface-light: #F7F7F7;
  --color-menu: #101010;
  --color-ink-muted: #8F8F8F;
  --color-ink-inverse-50: rgba(255, 255, 255, 0.5);
  --color-ink-50: rgba(0, 0, 0, 0.5);

  /* Typography — Families */
  --font-sans: 'SuisseIntl', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display-xl: 546.662px;  --leading-display-xl: 604.523px;  --tracking-display-xl: -24.6px;
  --text-display: 82.6667px;     --leading-display: 89.3333px;     --tracking-display: -1.248px;
  --text-headline: 62px;         --leading-headline: 66.938px;     --tracking-headline: -0.93px;
  --text-headline-tight: 62px;   --leading-headline-tight: 61px;   --tracking-headline-tight: -0.93px;
  --text-menu-link: 60px;        --leading-menu-link: 57px;        --tracking-menu-link: -1.5px;
  --text-title: 40px;            --leading-title: 45.6px;          --tracking-title: -0.6px;
  --text-body: 20px;             --leading-body: 24px;             --tracking-body: -0.2px;
  --text-body-sm: 16px;          --leading-body-sm: 17.5px;        --tracking-body-sm: -0.16px;
  --text-label: 16px;            --leading-label: 24px;            --tracking-label: normal;
  --text-index: 16px;            --leading-index: 18.24px;         --tracking-index: -0.24px;
  --text-caption: 14px;          --leading-caption: 15.96px;       --tracking-caption: -0.14px;
  --text-field: 14px;            --leading-field: 15.96px;         --tracking-field: normal;
  --text-caption-tight: 14px;    --leading-caption-tight: 14px;    --tracking-caption-tight: -0.14px;

  /* Typography — Weights */
  --weight-display: 300;
  --weight-label: 400;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 5px;
  --spacing-sm: 6px;
  --spacing-list: 7px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 20px;
  --spacing-2xl: 40px;
  --spacing-gutter: 40px;

  /* Section rhythm */
  --section-footer: 52px;
  --section-tagline: 60px;
  --section-flavor: 65px;
  --section-inner: 70px;
  --section-hero: 79px;
  --section-text: 100px;
  --section-contact: 270px;
  --section-dark: 320px;
  --section-founder: 337px;
  --section-max: 540px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-widget: 6px;

  /* Layout */
  --header-height: 4.7rem;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-surface-light: #F7F7F7;
  --color-menu: #101010;
  --color-ink-muted: #8F8F8F;
  --color-ink-inverse-50: rgba(255, 255, 255, 0.5);
  --color-ink-50: rgba(0, 0, 0, 0.5);

  --font-sans: 'SuisseIntl', ui-sans-serif, system-ui, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, sans-serif;

  --text-display-xl: 546.662px;
  --text-display-xl--line-height: 604.523px;
  --text-display-xl--letter-spacing: -24.6px;
  --text-display: 82.6667px;
  --text-display--line-height: 89.3333px;
  --text-display--letter-spacing: -1.248px;
  --text-headline: 62px;
  --text-headline--line-height: 66.938px;
  --text-headline--letter-spacing: -0.93px;
  --text-headline-tight: 62px;
  --text-headline-tight--line-height: 61px;
  --text-headline-tight--letter-spacing: -0.93px;
  --text-menu-link: 60px;
  --text-menu-link--line-height: 57px;
  --text-menu-link--letter-spacing: -1.5px;
  --text-title: 40px;
  --text-title--line-height: 45.6px;
  --text-title--letter-spacing: -0.6px;
  --text-body: 20px;
  --text-body--line-height: 24px;
  --text-body--letter-spacing: -0.2px;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 17.5px;
  --text-body-sm--letter-spacing: -0.16px;
  --text-label: 16px;
  --text-label--line-height: 24px;
  --text-label--letter-spacing: normal;
  --text-index: 16px;
  --text-index--line-height: 18.24px;
  --text-index--letter-spacing: -0.24px;
  --text-caption: 14px;
  --text-caption--line-height: 15.96px;
  --text-caption--letter-spacing: -0.14px;
  --text-field: 14px;
  --text-field--line-height: 15.96px;
  --text-field--letter-spacing: normal;
  --text-caption-tight: 14px;
  --text-caption-tight--line-height: 14px;
  --text-caption-tight--letter-spacing: -0.14px;

  --font-weight-display: 300;
  --font-weight-label: 400;

  --spacing-2xs: 2px;
  --spacing-xs: 5px;
  --spacing-sm: 6px;
  --spacing-list: 7px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 20px;
  --spacing-2xl: 40px;
  --spacing-gutter: 40px;

  --spacing-section-footer: 52px;
  --spacing-section-tagline: 60px;
  --spacing-section-flavor: 65px;
  --spacing-section-inner: 70px;
  --spacing-section-hero: 79px;
  --spacing-section-text: 100px;
  --spacing-section-contact: 270px;
  --spacing-section-dark: 320px;
  --spacing-section-founder: 337px;
  --spacing-section-max: 540px;

  --radius-none: 0px;
  --radius-widget: 6px;

  --spacing-header-height: 4.7rem;
}
```