---
version: alpha
name: GSAP
description: "Near-black studio walls, cream type the size of a door, candy-gradient shapes drifting through."
colors:
  surface: "#0E100F"
  outline: "#42433D"
  primary: "#FEC5FB"
  on-surface: "#F3FFEE"
  surface-white: "#FFFCE1"
  surface-50: "#7C7C6F"
  code-panel: "#2C2C32"
  shockingly-green: "#0AE448"
  light-green: "#ABFF84"
  orangey: "#FF8709"
  blue: "#00BAE2"
  lilac: "#9D95FF"
  core-green: "#DFFFD1"
  scroll-pink: "#FFD7FD"
  scroll-pink-light: "#FFE9FE"
  svg-tangerine: "#FFE3C7"
  svg-tangerine-light: "#FFF0E0"
typography:
  hero-display:
    fontFamily: Mori
    fontSize: 287.999px
    fontWeight: 400
    lineHeight: 259.199px
    letterSpacing: -5.75999px
  display:
    fontFamily: Mori
    fontSize: 128px
    fontWeight: 400
    lineHeight: 128px
    letterSpacing: -1.28px
  headline:
    fontFamily: Mori
    fontSize: 82px
    fontWeight: 400
    lineHeight: 82px
    letterSpacing: -0.82px
  lead:
    fontFamily: Mori
    fontSize: 80.9999px
    fontWeight: 400
    lineHeight: 97.1999px
    letterSpacing: -0.809999px
  section-head:
    fontFamily: Mori
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -0.72px
  subhead:
    fontFamily: Mori
    fontSize: 48px
    fontWeight: 400
    lineHeight: 62.4px
    letterSpacing: -0.48px
  body-large:
    fontFamily: Mori
    fontSize: 24px
    fontWeight: 400
    lineHeight: 33.12px
    letterSpacing: -0.24px
  button-label:
    fontFamily: Mori
    fontSize: 22px
    fontWeight: 400
    lineHeight: 22.9999px
    letterSpacing: -0.22px
  footer-link:
    fontFamily: Mori
    fontSize: 21px
    fontWeight: 400
    lineHeight: 24.15px
    letterSpacing: 0em
  small-subtitle:
    fontFamily: Mori
    fontSize: 18.72px
    fontWeight: 400
    lineHeight: 21.528px
    letterSpacing: 0em
  nav-link:
    fontFamily: Mori
    fontSize: 18px
    fontWeight: 400
    lineHeight: 18.9px
    letterSpacing: -0.18px
  code:
    fontFamily: Mori
    fontSize: 18px
    fontWeight: 400
    lineHeight: 20.7px
    letterSpacing: 0em
  label:
    fontFamily: Mori
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: -0.16px
  caption:
    fontFamily: Mori
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: -0.14px
rounded:
  pills-button-stroke-button-fill-get-gsap: 100px
  cards-and-code-panels-plugins-item-code: 16px
  word-tags-and-media-frames-home-animate-: 8px
  scroll-orb-scroll-smooth-effects-circle-: 80px
  device-frame-scroll-trigger-size-device: 40px
  testimonial-image-testimonials-image: 12px
  author-flair-testimonials-author-flair: 2px
  logo-underscore-header-logo-text-line: 1px
spacing:
  button-inner-gap: 7.99999px
  card-header-gap: 12px
  grid-gap: 16px
  card-padding-plugin-grid-gap: 24px
  wide-container-inset: 48px
  block-padding: 64px
  header-inner-gap: 71px
  section-padding-page-gutter: 128px
  hero-content-padding: 229.999px
---
# GSAP — Style Reference

> Near-black studio walls, cream type the size of a door, candy-gradient shapes drifting through.

**Theme:** dark

GSAP keeps to a single dark canvas — #0E100F under almost every band, #FFFCE1 as the ink — and hangs a set of saturated tool colours on it that tend to arrive as gradients rather than as flat paint. The split that matters is not between pages but inside them: each tool landing page opens dark, inverts into a band of its own pastel (#F3FFEE for the core pages, #FFE9FE for the scroll pages, #FFF0E0 for the SVG pages) where the demos and code live, and then every page in the capture lands on the same cream #FFFCE1 footer. The signature move is raw scale: Mori at 287.999px with -5.75999px of tracking, the glyphs clipped to a gradient so the word *is* the illustration. Everything around that word goes quiet — navigation at 18px in the muted #7C7C6F, one hairline of #42433D under the header, no shadow anywhere. The geometry is a two-word vocabulary, fully round for anything you click and 16px for anything that holds content, set on a 128px gutter with 128px of vertical air between bands.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Just Black | `#0E100F` | `--color-just-black` | The canvas, and the header and footer fill on every page; flips to become the ink on the inverted pastel bands. It borders almost nothing — the `2px` ring on `.button__icon` is where it does. |
| Surface White | `#FFFCE1` | `--color-surface-white` | Display and body ink on the dark canvas — warm cream, not white. Also the fill of the newsletter footer, where the roles swap. |
| Surface 50 | `#7C7C6F` | `--color-surface50` | The quiet ink of `.header__menu-link` and "Watch Previous Showreels" — 70 of its 74 observations are text. Use it for anything that shouldn't be read first. |
| Surface 25 | `#42433D` | `--color-surface25` | The structural hairline under the header: all four of its observations are the `1px` border on `.header__inner`, none a fill or a text ink. |
| Code Panel | `#2C2C32` | `--color-code-panel` | The warm-grey panel fill on `.code`, three observations of it, so a snippet reads as a plane above the canvas. |
| Shockingly Green | `#0AE448` | `--color-shockingly-green` | Announcement bar, code strings, the accessibility check. The signal green — editorial, not a CTA fill. |
| Light Green | `#ABFF84` | `--color-lt-green` | The second stop of `--gradient-macha` on `.banner` and of the rim on `.get-gsap-btn__button.button.button--stroke` — it makes green a gradient rather than a block. |
| Pink | `#FEC5FB` | `--color-pink` | Filled buttons on the scroll pages and the home page's pink word-tag; the closest thing the system has to a primary action colour. |
| Orangey | `#FF8709` | `--color-orangey` | The SVG identity ink — heading gradients, the orange word-tag, one border. Editorial credit, not an alert. |
| Blue | `#00BAE2` | `--color-blue` | The UI-interactions label and its footer heading; mostly a gradient stop rather than painted text. |
| Lilac | `#9D95FF` | `--color-lilac` | The Text-plugin label on `.footer__label.footer__label` and "Text" `.heading-r`; all nine of its observations are text. The scarcest identity ink, and its scarcity is the point. |
| Core Green | `#DFFFD1` | `--color-core-green` | The `.plugins__item` fill on the core pages — a tinted card rather than a page ground. |
| Core Green Light | `#F3FFEE` | `--color-core-green-lt` | The core pages' inverted band and the hero heading's clip fill. |
| Scroll Pink | `#FFD7FD` | `--color-scroll-pink` | Plugin card fill on the scroll pages — same card, different theme. |
| Scroll Pink Light | `#FFE9FE` | `--color-scroll-pink-lt` | The scroll pages' inverted band — the census records `fill 3`, two of them sections on p3 — plus the top stop of the scroll heading gradient and the centred subtitle ink. |
| SVG Tangerine | `#FFE3C7` | `--color-svg-tangerine` | Plugin card fill and the filled button on the SVG pages; also its subtitle brace. |
| SVG Tangerine Light | `#FFF0E0` | `--color-svg-tangerine-lt` | The SVG pages' inverted band — the warm counterpart to the core pages' green. |
| Macha | `linear-gradient(114.41deg, #0AE448 20.74%, #ABFF84 65.5%)` | `--gradient-macha` | The announcement bar across the top of every page, and the tail of the home page's Get GSAP ring. |

## Tokens — Typography

### Mori — the whole voice: hero display, section heads, body, navigation and button labels, in exactly two weights · `--font-display`
- **Substitute:** Inter Tight, Suisse Int'l, Helvetica Now Display
- **Weights:** 400, 600
- **Sizes:** 14px, 16px, 18px, 18.72px, 21px, 22px, 24px, 48px, 72px, 80.9999px, 82px, 96px, 110px, 128px, 200px, 287.999px
- **Line height:** 0.9 at hero scale (259.199px on 287.999px) up to 1.4 at caption scale (19.6px on 14px)
- **Letter spacing:** −0.01em holds from `.body-s` at 14px (−0.14px) through `.heading-l` at 128px (−1.28px), and doubles to −0.02em on `.heading-xl.core-hero__heading` at 287.999px (−5.75999px); the 200px `"Any"` row goes further still, to −0.03em (−6px); `.footer__menu-link` and the animated home words ("Add", "Nice and") sit at `normal`
- **Role:** one family does display, interface and body — 600 for anything structural, 400 for lead and body copy.

### Menlo — the code face: `.language-js` source and the `.token` spans, at the single weight and size the census measures · `--font-mono`
- **Substitute:** SF Mono, JetBrains Mono, ui-monospace
- **Weights:** 400
- **Sizes:** 18px
- **Line height:** 20.7px (1.15)
- **Letter spacing:** normal on every Menlo row, from "." `.token.punctuation` to the `.language-js` source — no negative tracking is measured for it
- **Role:** every code sample inside `.code`, each token type given its own ink.

### Times — present in the font list, placed by no census row · `--font-serif`
- **Substitute:** Times New Roman, Liberation Serif, serif
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** no heading or text row measures it, so treat it as an inherited fallback inside embedded showcase content, not a brand face.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Hero display (`.heading-xl`) | 287.999px | 259.199px | -5.75999px | `--text-hero` |
| Display (`.heading-l`) | 128px | 128px | -1.28px | `--text-display` |
| Headline (`.heading-m`, dark ground) | 82px | 82px | -0.82px | `--text-headline` |
| Lead (`.body-xl`) | 80.9999px | 97.1999px | -0.809999px | `--text-lead` |
| Section head (`.heading-m`, light ground) | 72px | 72px | -0.72px | `--text-title` |
| Subhead (`.heading-r`) | 48px | 62.4px | -0.48px | `--text-subhead` |
| Body large (`.body-r`) | 24px | 33.12px | -0.24px | `--text-body-lg` |
| Button label (`.button__label`) | 22px | 22.9999px | -0.22px | `--text-button` |
| Footer link (`.footer__menu-link`) | 21px | 24.15px | normal | `--text-nav` |
| Small subtitle (`.subtitle--small`) | 18.72px | 21.528px | normal | `--text-subtitle` |
| Nav link (`.header__menu-link`) | 18px | 18.9px | -0.18px | `--text-link` |
| Code (`.language-js`) | 18px | 20.7px | normal | `--text-code` |
| Label (`.subtitle__label`) | 16px | 19.2px | -0.16px | `--text-label` |
| Caption (`.body-s`) | 14px | 19.6px | -0.14px | `--text-caption` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable — 24px inside cards, 128px between bands

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Button inner gap | 7.99999px, 5.81818px on the compact pill | `--spacing-2` |
| Card header gap | 12px | `--spacing-3` |
| Grid gap | 16px | `--spacing-4` |
| Card padding / plugin grid gap | 24px | `--spacing-6` |
| Wide-container inset | 48px | `--spacing-12` |
| Block padding | 64px | `--spacing-16` |
| Header inner gap | 71px | `--spacing-header` |
| Section padding / page gutter | 128px | `--spacing-32` |
| Hero content padding | 229.999px | `--spacing-hero` |

### Border Radius

| Element | Value |
|---------|-------|
| Pills — `.button--stroke`, `.button--fill`, `.get-gsap-btn__button` | 100px |
| Circular controls — `.button__icon`, `.button--stroke.prev`, `.button--stroke.next` | 50% |
| Cards and code panels — `.plugins__item`, `.code` | 16px |
| Word tags and media frames — `.home-animate__intro-heading--pink`, `.video--cover`, `.tools-morelinks__media` | 8px |
| Scroll orb — `.scroll-smooth-effects__circle-inner` | 80px |
| Device frame — `.scroll-trigger-size__device` | 40px |
| Testimonial image — `.testimonials__image` | 12px |
| Author flair — `.testimonials__author--flair` | 2px |
| Logo underscore — `.header__logo-text-line` | 1px |

### Layout
- **Page max-width:** none — `.header` (1920×127px), `.footer` (1920×848px) and `.hero.core-hero` (1920×1200px) all run the full viewport width; `.header__inner` is the inner rail at 1824px.
- **Section gap:** 128px vertical padding is the dominant rhythm, 64px the secondary step, 229.999px reserved for hero content.
- **Card padding:** 24px on all four sides of `.plugins__item` and `.code`.
- **Element gap:** 16px in `.grid`, 24px between header menu items, 7.99999px between a button's label and its icon, dropping to 5.81818px on the compact 104×34px `.button.button--stroke` in the header.

## Components

### Global Header Bar
**Role:** The fixed identity rail — wordmark, six section links, account link and a compact Get GSAP pill — that rides every page.
`.header` is a `header` filled `#0E100F` at 1920×127px with padding 0 and radius 0, containing "GSAP is now free for everyone , thanks to Webflo". Inside it, `.header__inner` is 1824×77px with `padding 12px 0px`, a 71px gap between logo block and menu, and the system's structural line: `border 1px #42433D`, no radius, no shadow. Menu links are `.header__menu-link` at Mori 18px/600, line-height 18.9px, tracking -0.18px, ink `#7C7C6F` — dimmer than the cream body ink so the header recedes under the hero.

### Announcement Banner
**Role:** The full-width strip above the header carrying the one piece of news the site wants read first.
`.banner` is a `section` painting the macha gradient `#0AE448 → #ABFF84` left to right, the brightest band in the capture and the only place green covers area rather than a word. Its copy is the `.body-s` row: Mori 14px/400, line-height 19.6px, tracking -0.14px, ink `#0E100F` — "GSAP is now free for everyone, thanks to Webflow". Padding, radius and height are `not measured`. Keep the ink black; the green is bright enough that cream would fail on it.

### Pill Button — Stroke
**Role:** The standard navigational action — "Explore Scroll", "Explore All Showcases" — everywhere a section hands off to another page.
`.button.button--stroke` is an `a` with `fill none`, radius 100px, `padding 15px 24px`, label Mori 22px/600 at line-height 22.9999px and tracking -0.22px, box 100–282×53–54px, shadow none. The row records `border none`: the hairline ring the tiles show around the label is painted by something else, and its width and colour are `not measured`. Label and trailing icon sit 7.99999px apart; width is content-driven — the pill stretches, it never wraps.

### Compact Header CTA
**Role:** The persistent Get GSAP pill in the top-right corner — the same control, shrunk to the header rail.
The second `.button.button--stroke` variant is an `a` at 104×34px with `padding 9px 14px`, radius 100px, label Mori 16px/600, line-height 16.7272px, tracking -0.16px, `fill none`, `border none`, shadow none, and 5.81818px between its label and icon. Against the 127px header it reads as a token rather than a button — always there, never shouting. Scale the label before the padding; the 100px radius is fixed, so a shorter pill becomes rounder.

### Get GSAP — Hero Action
**Role:** The one download action, with its own component and footprint at the bottom of every hero.
`.get-gsap-btn__button.button.button--stroke` is an `a` filled `#0E100F` at 274×58px, `padding 15px 24px`, radius 100px, label Mori 22px/600 at 22.9999px line-height and -0.22px tracking, border none, shadow none. On the home page the same class paints a gradient from the canvas into the green: `#0E100F → #0E100F → #0AE448 → #ABFF84`, so the ring lights up from the right. A dark fill with a bright rim is the system's whole idea of emphasis — luminance at the edge, not area.

### Filled Pill Button
**Role:** The documentation action — on the scroll and SVG pages the filled pill holds the `"Docs"` `.button__label`; on the core pages the `fill none` variant holds `"Showcase"`. Filled rather than outlined, and tinted to whichever tool page it sits on.
`.button.button--fill` is an `a` at radius 100px with `padding 15px 24px` and a Mori 22px/600 label (line-height 22.9999px, tracking -0.22px), border none, shadow none, and it measures three ways: filled `#FEC5FB` at 100×54px on the scroll pages, filled `#FFE3C7` at 100×54px on the SVG pages, and `fill none` at 154×53px on the core pages, where it paints the core radial gradient `#FBFEFA → #C9F6B4 → #ABFF84 → #2FEE65` instead. Same padding and radius, three identities — but the core variant runs 154×53px against the other two's 100×54px, so the fill is not the only thing that changes.

### Circular Arrow Control
**Role:** The previous/next pair that drives the showcase carousel.
`.button.button--stroke.prev` and `.button.button--stroke.next` are `button` elements at 52×52px, `fill none`, `padding 0px 0px`, `radius 50%`, border none, shadow none, carrying no text of their own. Inside each, `.button__icon.button__icon--circle-arrow-left` / `--circle-arrow-right` is a `span` at 26×26px filled `#FFFCE1` with radius 0. The 26px glyph in a 52px circle is an exact half, so the ring reads generous. On dark grounds the pair is the only navigation offered — no dots, no counter.

### Plugin Card
**Role:** The grid tile for a single plugin — name, one-line description, link — repeated down every tool page.
`.plugins__item` is an `li` at 314×374–375px with `padding 24px 24px`, radius 16px, border none, shadow none, and its fill is the page's theme colour: `#DFFFD1` on the core pages, `#FFD7FD` on the scroll pages, `#FFE3C7` on the SVG pages. Inside, `.plugins__item--header` sets a 12px gap, the tile name is `.subtitle__label` at Mori 16px/400, line-height 19.2px, tracking −0.16px, in `#0E100F` (`"Flip"`), and `.plugins__items` spaces the grid 23px 24px. The card is the one place the system inverts to a pastel plane and keeps black text.

### Code Block
**Role:** The syntax-highlighted snippet that proves the claim the heading just made.
`.code` is a `div` with `padding 24px 24px`, radius 16px, border none, shadow none, measured two ways: filled `#0E100F` at 684–824×214–462px on the core pages, and filled `#2C2C32` at 610×110–338px on the scroll pages. The panel always steps away from its ground: black on the pastel band, warm grey on the black canvas. Type is Menlo 18px/400 at 20.7px line-height, `#FFFCE1` for plain source, with punctuation `#C792EA`, operators `#89DDFF` and functions `#82AAFF`; numbers and strings are themed to the page: `#F78C6C` and `#0AE448` in the `#0E100F` panel on the core pages, `#2ABBE5` and `#FF96F9` in the `#2C2C32` panel on the scroll pages. Booleans `#A77AFE`; comments `#9C9C9C`, measured on the core pages only.

### Word Tag
**Role:** The highlighter block that lands on a phrase of the home page's running headline as it animates through — `.home-animate__intro-heading--pink` holds "Animate Anything", `--orange` holds "That's right, Anything".
`.home-animate__intro-heading--pink` is a `div` filled `#FEC5FB` at 385×68px, and `.home-animate__intro-heading--orange` a `div` filled `#FF8709` at 531×76px; both take `padding 16px 22px`, radius 8px, border none, shadow none. Their type is black on the tint. The tag is the smallest radius in the interactive vocabulary and one of a family of blocks that put a saturated identity colour behind live copy — the census carries `#FEC5FB` at `fill 12` and eight `span` elements at the same 8px radius, among them `"Plug"` and `"Nice and"`. Never let two of the same colour sit in one line.

### Product Hero
**Role:** The opening screen of a tool page: one enormous word, a gradient form beneath it, a braced subtitle.
`.hero.core-hero` is a `section` filled `#0E100F` at 1920×1200px with padding 0 and radius 0, holding "Core One library, unlimited inspiration". Its heading, `.heading-xl.core-hero__heading`, is an `h1` at 649×259px set in Mori 287.999px/600, line-height 259.199px, tracking -5.75999px, ink `#FFFCE1` and fill `#F3FFEE` — the fill is what the gradient clips through the letterforms. `.core-hero__content` pads 229.999px vertically, nearly twice the standard band, so the word sits in a full screen of black.

### Footer
**Role:** The two-part close on every page — a dark plugin directory, then a cream newsletter and copyright plane.
`.footer` is a `footer` filled `#0E100F` at 1920×848px, padding 0, radius 0, no border, no shadow, containing the plugin index and "©2026 GSAP - A Webflow Product". Its links are `.footer__menu-link` at Mori 21px/400, line-height 24.15px, tracking normal, in `#FFFCE1`; column labels use `.footer__label` at Mori 16px/600, line-height 18.4px, tinted per family — `#00BAE2` for UI, `#9D95FF` for Text. Below it `.footer-global` (1920×413px) and `.footer-copy` (1920×152px) both fill `#FFFCE1`, flipping the link weight to 600 and the ink to `#0E100F`.

## Do's and Don'ts

### Do
- Set the canvas to `#0E100F` and the ink to `#FFFCE1` — the pairing `.header` and `.footer` carry on every page in the capture.
- Give every clickable pill radius 100px: `.button.button--stroke`, `.button.button--fill` and `.get-gsap-btn__button.button.button--stroke` all paint it, at every size.
- Keep content containers at radius 16px — `.plugins__item` and `.code` share it — and media frames at 8px (`.video.video--cover`, `.tools-morelinks__media`).
- Pad cards 24px, as `.plugins__item` and `.code` do, and bands 128px vertically, as `.home-tools`, `.brands` and `.showcase` do; 229.999px is hero padding, carried by `.core-hero__content`, `.scroll-hero__inner` and `.svg-hero__content`.
- Let the tool colour choose the card fill and leave everything else alone: `#DFFFD1`, `#FFD7FD`, `#FFE3C7` on the same `.plugins__item` geometry.
- Set display line-height at or below the size: `.heading-l` sets 128px on 128px, `.heading-xl` 259.199px on 287.999px. Track to −0.01em up to `.heading-l` (−1.28px on 128px) and −0.02em at hero scale (−5.75999px on 287.999px).

### Don't
- Don't add a shadow. Every row that reports the property reports `shadow none` — `.header`, `.footer`, `.plugins__item`, `.code`, `.button.button--stroke`, `.button.button--fill` — so depth here is colour, not blur.
- Don't invent greys. The neutral set is `#7C7C6F`, `#42433D`, `#2C2C32` and the comment grey `#9C9C9C`; steps between them are not part of the system.
- Don't fill a large surface with `#0AE448` beyond the `.banner` gradient — everywhere else the green marks a word, a check or a string.
- Don't set `.heading-l` or `.heading-m` in 400; the display census paints them at 600, with 400 reserved for lead copy such as `.body-xl` and the animated home lockups.
- Don't put cream text on a pastel band. Every inverted ground — `.plugins__item`, `.footer-global`, the light sections — takes `#0E100F` ink.
- Don't soften the header rule: it is a single `1px #42433D` line on `.header__inner`, the only place that hex is painted.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#0E100F` | Every page ground, plus `.header` and `.footer` |
| 1 | Code panel (dark ground) | `#2C2C32` | `.code` lifting off the canvas by going lighter |
| 1 | Code panel (light ground) | `#0E100F` | `.code` on the pastel bands, separating by going darker |
| 2 | Card | `#DFFFD1` / `#FFD7FD` / `#FFE3C7` | `.plugins__item`, tinted to the page's tool colour |
| 3 | Inverted band | `#F3FFEE` / `#FFE9FE` / `#FFF0E0` | Full-width demo sections that flip the whole page to light |
| 4 | Newsletter plane | `#FFFCE1` | `.footer-global` and `.footer-copy` — the brightest surface in the system |

## Elevation

No elevation in the conventional sense: the walk records box-shadow on four pages and the pages paint none — nothing floats, hovers or casts. Depth is done three ways instead. A panel steps away from its ground by luminance — `.code` goes to `#2C2C32` on the black canvas and to `#0E100F` on the pastel bands. Structure is drawn with a single hairline, `1px #42433D` on `.header__inner`. And the largest depth cue is wholesale inversion: a band flips to `#F3FFEE`, `#FFE9FE` or `#FFF0E0` and takes black ink with it. If you need a raised object, change its colour, not its shadow.

## Imagery

Grainy gradient 3D primitives, flat-lit, with a visible noise texture: hemispheres, clover and petal forms, rounded bars, a torus, a scatter of squares. Each carries its page's gradient — the scroll orbs run `#00BAE2 → #FFA9FA → #FEC5FB → #00BAE2` on `.scroll-smooth-effects__circle-inner` at radius 80px, the SVG headings `#FFD9B0 → #FD9F3B → #FF8709`. They sit loose on the canvas with no frame or caption, more like props on a stage than illustrations — and at very different scales: `.scroll-smooth-effects__circle-inner` measures 2–37px square, a scatter of dots rather than an object. Photography appears only inside showcase captures — `.video.video--cover` at 1167–1300×656–731px and `.tools-morelinks__media` at 544×306px, both radius 8px — so the only photographic content is other people's work.

## Layout

Bands run edge to edge: `.header`, `.footer` and `.hero.core-hero` all measure 1920px wide against a 1920px viewport, content is held in from the edge, not boxed in the middle. `.container` sets a 128px horizontal inset on 52 blocks across the four pages; `.container.container--wide` relaxes it to 48px for the widest carousels. Vertically the rhythm is 128px between bands with 64px inside copy blocks, and hero content padded to 229.999px. Grids use a 16px gap, the plugin grid 23px 24px, and card headers 12px. The nav pattern is constant: wordmark left, six links, account and compact pill right, inside the 1824px `.header__inner` rail with its 71px first gap.

## Typography Voice

Two modes, one family. Structural type is Mori 600 and it hugs itself — `.heading-l` sets 128px on a 128px line, `.heading-xl` 259.199px on 287.999px, so lines interlock and a two-line headline reads as one block of texture. Reading type is Mori 400 and it opens up: `.body-r` at 24px runs a 33.12px line (1.38), `.body-s` at 14px a 19.6px line (1.4). Tracking is proportional rather than optical — −0.01em from caption to display, tightening to −0.02em at hero scale and −0.03em on the 200px `"Any"` row — which keeps the huge words tight without hollowing out the small ones. The recurring `{ }` motif of `.subtitle__brace` frames nearly every subtitle, tinted to the page theme — the closest the system comes to a decorative device.

## Agent Prompt Guide

## Quick Color Reference
- background: `#0E100F`
- text: `#FFFCE1`
- surface: `#2C2C32`
- border: `#42433D`
- accent: `#0AE448`
- primary action: `#FEC5FB` (tool-themed — `#FFE3C7` on SVG pages)

## Example Component Prompts
1. **Hero section**: Full-bleed `section` filled `#0E100F`, 1200px tall, content padded 229.999px top and bottom, 128px side gutter. One `h1` in Mori 600 at 287.999px, line-height 259.199px, letter-spacing -5.75999px, ink `#FFFCE1` with a `#F3FFEE` gradient clipped through the glyphs. Below it a braced subtitle — its size and line-height are `not measured`; the census carries only its ink, `#DFFFD1` on the core page (`"One library, unlimited inspiration" .subtitle__label`) — and a dark pill button.
2. **Pill button pair**: Two `a` elements, radius 100px, padding 15px 24px, label Mori 600 at 22px / 22.9999px / -0.22px, 7.99999px gap to a 24px trailing icon, no border and no shadow. First filled `#FEC5FB`, second filled `#0E100F` at 274×58px with a `#0E100F → #0AE448 → #ABFF84` rim.
3. **Plugin card grid**: `ul` with a 23px 24px gap; each `li` 314×375px, radius 16px, padding 24px, filled `#FFD7FD`, no shadow. Inside: a 12px-gap header row, plugin name in Mori 400 at 16px / 19.2px / −0.16px in `#0E100F`, description in Mori 400 at 18px / 25.2px / −0.18px in `#0E100F`, all black on the tint.
4. **Code panel**: `div` filled `#2C2C32`, radius 16px, padding 24px, 610px wide, no border or shadow. Menlo 18px/400 at 20.7px, plain source `#FFFCE1`, punctuation `#C792EA`, operators `#89DDFF`, functions `#82AAFF`, and — this being the scroll panel — numbers `#2ABBE5`, strings `#FF96F9`, comments `#9C9C9C`.
5. **Header rail**: 1920×127px `header` filled `#0E100F`; inner rail 1824×77px, padding 12px 0, bottom border `1px #42433D`, 71px gap after the wordmark, then a 24px-gap link row in Mori 18px/600 at 18.9px / -0.18px in `#7C7C6F`, and a 104×34px pill with padding 9px 14px, radius 100px, label Mori 16px/600.

## Similar Brands
- **Linear** — a near-black canvas where gradient artwork carries the emotion and the type stays quiet.
- **Framer** — candy-bright gradient objects loose on a dark stage, one grotesque carrying every level.
- **Rive** — an animation tool leaning on playful 3D primitives and high-chroma accents on a dark ground.
- **Pangram Pangram** — cream-on-black, display type pushed to the viewport edge, colour as punctuation not decoration.
- **Locomotive** — full-bleed dark bands, oversized headlines, motion as the primary layout device.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-just-black: #0e100f;
  --color-surface-white: #fffce1;
  --color-surface50: #7c7c6f;
  --color-surface25: #42433d;
  --color-code-panel: #2c2c32;
  --color-shockingly-green: #0ae448;
  --color-lt-green: #abff84;
  --color-pink: #fec5fb;
  --color-orangey: #ff8709;
  --color-blue: #00bae2;
  --color-lilac: #9d95ff;
  --color-core-green: #dfffd1;
  --color-core-green-lt: #f3ffee;
  --color-scroll-pink: #ffd7fd;
  --color-scroll-pink-lt: #ffe9fe;
  --color-svg-tangerine: #ffe3c7;
  --color-svg-tangerine-lt: #fff0e0;
  --code-punctuation: #c792ea;
  --code-operator: #89ddff;
  --code-function: #82aaff;
  --code-number: #f78c6c;
  --code-number-scroll: #2abbe5;
  --code-boolean: #a77afe;
  --code-comment: #9c9c9c;
  --code-string: #0ae448;
  --code-string-scroll: #ff96f9;
  --gradient-macha: linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%);
  --gradient-scroll: linear-gradient(317.42deg, #ffe9fe 10.4%, #ff96f9 83.03%);
  --gradient-svg: radial-gradient(70.77% 70.77% at 0% 70.77%, #ffd9b0 0%, #fd9f3b 80.73%, #ff8709 100%);
  --gradient-core: radial-gradient(89.08% 84.62% at 16.54% 78.46%, #fbfefa 0%, #c9f6b4 39.58%, #abff84 77.6%, #2fee65 100%);

  /* Typography — Families */
  --font-display: 'Mori', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Menlo', 'SF Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;

  /* Typography — Scale */
  --text-hero: 287.999px;      --leading-hero: 259.199px;
  --text-display: 128px;       --leading-display: 128px;
  --text-headline: 82px;       --leading-headline: 82px;
  --text-lead: 80.9999px;      --leading-lead: 97.1999px;
  --text-title: 72px;          --leading-title: 72px;
  --text-subhead: 48px;        --leading-subhead: 62.4px;
  --text-body-lg: 24px;        --leading-body-lg: 33.12px;
  --text-button: 22px;         --leading-button: 22.9999px;
  --text-nav: 21px;            --leading-nav: 24.15px;
  --text-subtitle: 18.72px;    --leading-subtitle: 21.528px;
  --text-link: 18px;           --leading-link: 18.9px;
  --text-code: 18px;           --leading-code: 20.7px;
  --text-label: 16px;          --leading-label: 19.2px;
  --text-caption: 14px;        --leading-caption: 19.6px;

  /* Spacing */
  --spacing-2: 7.99999px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-header: 71px;
  --spacing-32: 128px;
  --spacing-hero: 229.999px;

  /* Border Radius */
  --radius-logo: 1px;
  --radius-flair: 2px;
  --radius-tag: 8px;
  --radius-image: 12px;
  --radius-card: 16px;
  --radius-device: 40px;
  --radius-orb: 80px;
  --radius-pill: 100px;
  --radius-circle: 50%;
}
```

### Tailwind v4
```css
@theme {
  --color-just-black: #0e100f;
  --color-surface-white: #fffce1;
  --color-surface50: #7c7c6f;
  --color-surface25: #42433d;
  --color-code-panel: #2c2c32;
  --color-shockingly-green: #0ae448;
  --color-lt-green: #abff84;
  --color-pink: #fec5fb;
  --color-orangey: #ff8709;
  --color-blue: #00bae2;
  --color-lilac: #9d95ff;
  --color-core-green: #dfffd1;
  --color-core-green-lt: #f3ffee;
  --color-scroll-pink: #ffd7fd;
  --color-scroll-pink-lt: #ffe9fe;
  --color-svg-tangerine: #ffe3c7;
  --color-svg-tangerine-lt: #fff0e0;
  --color-code-punctuation: #c792ea;
  --color-code-operator: #89ddff;
  --color-code-function: #82aaff;
  --color-code-number: #f78c6c;
  --color-code-number-scroll: #2abbe5;
  --color-code-boolean: #a77afe;
  --color-code-comment: #9c9c9c;
  --color-code-string: #0ae448;
  --color-code-string-scroll: #ff96f9;

  --font-display: 'Mori', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Menlo', 'SF Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;

  --text-hero: 287.999px;
  --text-hero--line-height: 259.199px;
  --text-hero--letter-spacing: -5.75999px;
  --text-display: 128px;
  --text-display--line-height: 128px;
  --text-display--letter-spacing: -1.28px;
  --text-headline: 82px;
  --text-headline--line-height: 82px;
  --text-lead: 80.9999px;
  --text-lead--line-height: 97.1999px;
  --text-title: 72px;
  --text-title--line-height: 72px;
  --text-subhead: 48px;
  --text-subhead--line-height: 62.4px;
  --text-body-lg: 24px;
  --text-body-lg--line-height: 33.12px;
  --text-button: 22px;
  --text-button--line-height: 22.9999px;
  --text-nav: 21px;
  --text-nav--line-height: 24.15px;
  --text-subtitle: 18.72px;
  --text-subtitle--line-height: 21.528px;
  --text-link: 18px;
  --text-link--line-height: 18.9px;
  --text-code: 18px;
  --text-code--line-height: 20.7px;
  --text-label: 16px;
  --text-label--line-height: 19.2px;
  --text-caption: 14px;
  --text-caption--line-height: 19.6px;

  --spacing-2: 7.99999px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-header: 71px;
  --spacing-32: 128px;
  --spacing-hero: 229.999px;

  --radius-logo: 1px;
  --radius-flair: 2px;
  --radius-tag: 8px;
  --radius-image: 12px;
  --radius-card: 16px;
  --radius-device: 40px;
  --radius-orb: 80px;
  --radius-pill: 100px;
}
```