---
version: alpha
name: AgentQL
description: "Near-black glass on the marketing floor, printer-paper daylight in the docs."
colors:
  on-surface: "#C7C9D1"
  surface: "#0A0B0C"
  outline: "#E3E4E9"
  primary: "#0086E5"
  paper: "#FFFFFF"
  surface-2: "#121317"
  card-navy: "#101219"
  panel-navy: "#0E111B"
  docs-ink: "#060709"
  docs-body-ink: "#2E3038"
  docs-muted: "#5E616E"
  marketing-muted: "#ABAEBB"
  nav-ink: "#EEEFF1"
  code-hairline: "#172540"
  gradient-tail: "#999999"
  glow-periwinkle: "#D1D3FF"
  badge-teal: "rgba(48, 129, 134, 0.3)"
  feedback-orange: "#EE774B"
typography:
  display:
    fontFamily: Figtree
    fontSize: 64px
    fontWeight: 500
    lineHeight: 64px
    letterSpacing: -1.28px
  display-sm:
    fontFamily: Figtree
    fontSize: 48px
    fontWeight: 500
    lineHeight: 48px
    letterSpacing: -0.96px
  headline:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 400
    lineHeight: 49.5px
    letterSpacing: -0.88px
  headline-sm:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 40.5px
    letterSpacing: -0.72px
  price:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 45px
    letterSpacing: -1.6px
  docs-h1:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 45px
    letterSpacing: -1.44px
  section-heading:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 31.5px
    letterSpacing: -0.56px
  docs-h2:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 33px
    letterSpacing: -0.96px
  card-title:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: -0.4px
  docs-card-title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 22.5px
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.32px
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.28px
  footer-link:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.28px
  feature-line:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.25px
    letterSpacing: -0.28px
  chip:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: -0.28px
  code:
    fontFamily: IBM Plex Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  code-sm:
    fontFamily: IBM Plex Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 19.5px
    letterSpacing: 0em
rounded:
  pills-avatars-info-chips-glow-blobs: 9999px
  cards-panels-home-code-figures: 12px
  documentation-link-card: 10px
  primary-button-wide-plan-button: 8px
  compact-plan-button-docs-code-figure-sea: 6px
  copy-button-consent-button-form-label: 4px
  syntax-highlight-search-keys: 2px
  code-body: 0px
  code-caption-bar: 6px
  stepper-rail-button: 0px
spacing:
  inline: 6px
  list: 8px
  stack: 10px
  row: 12px
  card-stack: 14px
  control-inset: 16px
  card-padding: 20px
  button-inset: 26px
  nav-gap: 28px
  section: 60px
  gutter: 64px
  section-lg: 76px
  panel: 104px
---
# AgentQL — Style Reference
> Near-black glass on the marketing floor, printer-paper daylight in the docs.

**Theme:** mixed

AgentQL paints two systems from one component vocabulary. The home and pricing pages are the dark one — a #0A0B0C canvas, Figtree display type clipped to a white-to-grey gradient, navy code panels floating over bloom; the documentation and quick-start pages are the light one, white paper with #060709 headings and hairline-bordered link cards. The split falls at the sticky header, which keeps the same links and the same 28px rhythm and restains its ink from #EEEFF1 to #1C1D22. Tracking and weight hold the two together: negative letter-spacing runs through the Inter display and label rows, and hierarchy comes from size and luminance rather than bold. The recurring signature is the vertical gradient on display type, white at the top and #999999 at the foot, so every headline fades into the canvas it sits on. Colour is rationed hard — the CTA has no hue at all, and the saturated pixels belong to syntax tokens, orbit dots and blooms rather than to controls.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Black | `#0A0B0C` | `--color-canvas` | Body fill on home and pricing. Off-black by two points of luminance, so blooms have somewhere to go. |
| Paper | `#FFFFFF` | `--color-paper` | Documentation canvas, and the dominant ink on the dark pages — one value, two opposite jobs. |
| Surface | `#121317` | `--color-surface` | Title ink on the documentation link cards ("Quick Start Guide", `.font-medium.leading-tight.text-18.text-gray-8`) — 17 of its 25 observations — and, on the dark pages, the fill of the `.relative.rounded-xl.bg-gray-8.p-6` blocks. |
| Card Navy | `#101219` | `--color-card` | Fill of the home feature card `.relative.mx-auto.flex.h-[418px]`; cooler than Surface. |
| Panel Navy | `#0E111B` | `--color-panel` | The CTA panel `.relative.z-10.flex.overflow-hidden`, the fill that pairs with a 104px inset. |
| Docs Ink | `#060709` | `--color-ink-docs` | Heading ink on the documentation pages — nearly the marketing canvas, inverted. |
| Docs Body Ink | `#2E3038` | `--color-ink-docs-body` | Documentation body copy and the mono default; softer than the headings. |
| Docs Muted | `#5E616E` | `--color-ink-docs-muted` | Card descriptions, sidebar links and footer links on the documentation pages. |
| Marketing Muted | `#ABAEBB` | `--color-ink-muted` | Secondary copy on the dark pages, and the fill of `.check-icon.m-1.size-2.5.shrink-0`. |
| Soft Subcopy | `#C7C9D1` | `--color-ink-soft` | The 18px lead paragraphs under headlines, as on `.mt-2.5.text-pretty.pr-5.text-18`. |
| Nav Ink | `#EEEFF1` | `--color-ink-nav` | Header link ink on the dark pages; also one code caption bar's fill. |
| Hairline | `#E3E4E9` | `--color-border` | The 1px border under documentation cards, caption bars and the search field — 24 of its 40 observations. It also inks the dark header's utility labels ("Join our Discord", "#1 Product of the Day") and fills the 1px footer rule `.absolute.inset-x-0.top-0.h-px` on all four pages. |
| Code Hairline | `#172540` | `--color-border-code` | The 1px border on `.code-block.group.relative.flex`. An edge-lit rim, not a box. |
| Gradient Tail | `#999999` | `--color-gradient-tail` | Bottom stop of the display gradient on `.mt-5.bg-gradient-to-b.from-white.from-70%`. |
| Glow Periwinkle | `#D1D3FF` | `--color-glow` | Top stop of the bloom blobs on `.absolute.-top-32.left-[32%].h-[400px]`. |
| Link Blue | `#0086E5` | `--color-link` | Inline links inside documentation prose. Editorial, not a button colour. |
| Badge Teal | `rgba(48, 129, 134, 0.3)` | `--color-badge-teal` | Fill behind the plan badge, at 30% so the card's gradient shows through. |
| Feedback Orange | `#EE774B` | `--color-feedback` | Fill of the embedded feedback tab `.css-ct7kzv` — a third-party widget's colour, not an accent for AgentQL's controls. |

## Tokens — Typography

### Figtree — the display face; the heading census measures it at 64px down to 36px, in weights 500 and 600 · `--font-display`
- **Substitute:** Manrope, Satoshi, DM Sans
- **Weights:** 500, 600
- **Sizes:** 64px, 48px, 44px, 36px
- **Line height:** 1.0 at 64px and 48px; 1.125 at 44px (49.5px) and 36px (40.5px)
- **Letter spacing:** −0.02em at every size: −1.28px, −0.96px, −0.88px, −0.72px
- **Role:** Weight 500 carries "Make the web AI‑ready"; 600 carries "Plays well with others" and the "Get started" band.

### Inter — the working face, measured on documentation headings, body copy and control labels · `--font-sans`
- **Substitute:** Söhne, Helvetica Now, system-ui
- **Weights:** 300, 400, 500, 600
- **Sizes:** 40px, 36px, 28px, 24px, 20px, 18px, 16px, 14px, 12px
- **Line height:** 1.0 on chips (12px/12px) and footer links (14px/14px); 1.125 on titles (20px/22.5px); 1.5 on body (16px/24px, 14px/21px)
- **Letter spacing:** −1.6px at 40px, −1.44px at 36px, −0.96px at 24px, −0.4px at 20px, −0.32px at 16px, −0.28px at 14px; the 18px `.font-medium.leading-tight.text-18.text-gray-8` title stays at `normal`
- **Role:** Weight 300 appears on the 14px/19.25px line `.w-fit.whitespace-pre-wrap.text-pretty.text-14` and on the 18px lead `.mt-2.5.text-pretty.pr-5.text-18`; weight 600 on the button label "Sign up for free trial".

### IBM Plex Mono — code, at 13px on the dark pages and 14px on documentation · `--font-mono`
- **Substitute:** JetBrains Mono, SF Mono, ui-monospace
- **Weights:** 400, 500
- **Sizes:** 14px, 13px
- **Line height:** 21px at 14px; 19.5px and 16.25px at 13px — the tighter one is the XPath listing
- **Letter spacing:** normal on every mono row
- **Role:** It carries the syntax palette on rows like "search_button" and "export".

### Roboto, Arial, Ambit, -apple-system — faces the embedded widgets bring with them · `--font-embedded`
- **Substitute:** system-ui stack
- **Weights:** Roboto 400 and 500, Arial 400, Ambit 400, -apple-system 700
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The consent banner and the feedback tab `.css-ct7kzv`. The census records their weights and no size or line-height rows, so treat them as foreign to the brand.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 64px | 64px | −1.28px | `--text-display` |
| Display SM | 48px | 48px | −0.96px | `--text-display-sm` |
| Headline | 44px | 49.5px | −0.88px | `--text-headline` |
| Headline SM | 36px | 40.5px | −0.72px | `--text-headline-sm` |
| Price | 40px | 45px | −1.6px | `--text-price` |
| Docs H1 | 36px | 45px | −1.44px | `--text-h1` |
| Section Heading | 28px | 31.5px | −0.56px | `--text-h2` |
| Docs H2 | 24px | 33px | −0.96px | `--text-h3` |
| Card Title | 20px | 22.5px | −0.4px | `--text-title` |
| Docs Card Title | 18px | 22.5px | normal | `--text-title-sm` |
| Body | 16px | 24px | −0.32px | `--text-body` |
| Label | 14px | 21px | −0.28px | `--text-label` |
| Footer Link | 14px | 14px | −0.28px | `--text-label-tight` |
| Feature Line | 14px | 19.25px | −0.28px | `--text-feature` |
| Chip | 12px | 12px | −0.28px / −0.32px | `--text-chip` |
| Code | 14px | 21px | normal | `--text-code` |
| Code SM | 13px | 19.5px | normal | `--text-code-sm` |

## Tokens — Spacing & Shapes

**Base unit:** 2px — the census's most-used gaps run 6, 8, 10, 12, 14, 16, 20 and 28px, a ladder that steps by 2 in the small range. The census prints gaps by count and caps the list, so treat these as the common steps rather than the whole set.  **Density:** comfortable — 48px primary buttons, 20px documentation card padding, a 104px panel inset.

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Inline | 6px | `--spacing-1` |
| List | 8px | `--spacing-2` |
| Stack | 10px | `--spacing-3` |
| Row | 12px | `--spacing-4` |
| Card Stack | 14px | `--spacing-5` |
| Control Inset | 16px | `--spacing-6` |
| Card Padding | 20px | `--spacing-7` |
| Button Inset | 26px | `--spacing-8` |
| Nav Gap | 28px | `--spacing-9` |
| Section | 60px | `--spacing-section` |
| Gutter | 64px | `--spacing-gutter` |
| Section LG | 76px | `--spacing-section-lg` |
| Panel | 104px | `--spacing-panel` |

### Border Radius

| Element | Value |
|---------|-------|
| Pills, avatars, info chips, glow blobs | 9999px |
| Cards, panels, home code figures | 12px |
| Documentation link card | 10px |
| Primary button, wide plan button | 8px |
| Compact plan button, docs code figure, search field | 6px |
| Copy button, consent button, form label | 4px |
| Syntax highlight, search keys | 2px |
| Code body (bottom corners only) | 0px 0px 6px 6px |
| Code caption bar (top corners only) | 6px 6px 0px 0px |
| Bloom ellipse | 100% |
| Stepper rail button | 0px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Button lift | `rgba(0, 0, 0, 0.2) 0px 3px 16px 0px` | `--shadow-button` |
| Panel drop | `rgba(0, 0, 0, 0.5) 0px 4px 30px 0px` | `--shadow-panel` |
| Signup glow | `rgba(255, 255, 255, 0.35) 0px 2px 14px 0px` | `--shadow-glow` |
| Code lift | `rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px` | `--shadow-code` |
| Code tabs lift | `rgba(0, 0, 0, 0.35) 0px 20px 34px 0px` | `--shadow-code-tabs` |
| Docs header link lift | `rgba(0, 0, 0, 0.35) 0px 2px 10px 0px` | `--shadow-header-link` |
| Toggle inset | `rgba(0, 0, 0, 0.15) 0px 0px 2px 0px inset` | `--shadow-toggle-inset` |
| Toggle knob | `rgba(0, 0, 0, 0.15) 0px 0px 2px 0px` | `--shadow-toggle-knob` |
| Consent ring | `rgba(0, 0, 0, 0.15) 0px 0px 0px 1px` | `--shadow-ring` |

### Layout
- **Container max-width:** 1312px on home's `.container.max-w-[1312px].py-[76px].lg:max-w-5xl` — the census's only 76px section-padding row, one div on p1; the page gutter is `not measured`.
- **Section gap:** 60px hero top on home, 64px hero top on pricing, 76px container vertical, 104px inside the CTA panel
- **Card padding:** 20px on the documentation link card; 104px 64px on the home CTA panel
- **Element gap:** 8px from check mark to feature line, 6px inside button labels, 28px between header links, 20px between the links stacked in each footer column (`.mt-7.flex.flex-col.gap-y-5`) and inside the documentation table of contents (`.table-of-contents.mt-8.flex.flex-col`)

## Components

### Sticky Header
**Role:** The one element that spans both systems.
The header on home paints `rgba(6, 7, 9, 0.97)` on `.sticky.left-0.right-0.top-0`, a 97% wash of #060709 that lets the hero bloom smear through it. Links sit in `.transition-colors.duration-200.text-14.text-14` at Inter 14px weight 400, 21px line-height, −0.28px tracking, inked #EEEFF1 on home and pricing and #1C1D22 on documentation — the identical class, restained. Horizontal rhythm is 28px (`.flex.items-center.gap-7`). The "Get API key" pill on `.relative.z-20.inline-flex.items-center` takes the vertical gradient #191A1F → `rgba(25, 26, 31, 0.8)`; its label size is `not measured`.

### Primary Action Button
**Role:** The top-level "Get started" call.
`.transition-colors.duration-200.duration-300.group` paints a 48px-tall button 136–280px wide, radius 8px, 0px 26px padding, no border, Inter 16px/600 with 24px line-height and −0.32px tracking. Its fill is the gradient `rgba(255, 255, 255, 0.95)` → `rgba(255, 255, 255, 0.85)` — no hue of its own, so it reads as a lit plate rather than a branded shape — and it lifts on `rgba(0, 0, 0, 0.2) 0px 3px 16px 0px`. Two sheen layers, `.absolute.inset-0.z-10.rounded-[inherit]` and `.pointer-events-none.absolute.inset-0.z-10`, sit over it at radius 8px across a 136–176×48px box.

### Plan Signup Button
**Role:** The commit control inside a pricing card.
The same `.transition-colors.duration-200.duration-300.group` class measures two ways here. The wide variant is 296×40px at radius 8px, padding 0px 16px, Inter 14px/600, 21px line-height, −0.28px tracking, no border, no shadow, carrying "Sign up with Starter". The compact variant is 158–160×40px at radius 6px with the same type and padding, carrying "Sign up for free trial". Behind the wide one, `.absolute.inset-0.-z-10.rounded-[inherit]` paints a 296×40px underlay at radius 8px carrying `rgba(255, 255, 255, 0.35) 0px 2px 14px 0px` — a white halo rather than a drop shadow, which is how a light control gains presence on #0A0B0C. The label ink is `not measured`.

### Home Feature Card
**Role:** The product-capability tile on the marketing pages.
`.relative.mx-auto.flex.h-[418px]` measures 470×418px on four of the five elements that carry it; the fifth carrier the #101219 fill row counts is `not measured`. The class fills the card #101219, rounds it 12px, and paints no border and no shadow: it separates from the #0A0B0C canvas on a single step of luminance. Its own padding is 0px — the illustration bleeds to the rounded edge and the text block alone is inset. Titles use Inter 20px/500, 22.5px line-height, −0.4px tracking in #FFFFFF (`.text-20.font-medium.leading-dense.tracking-tight`); the paragraph under them is Inter 16px/400 at 24px line-height, tracking `normal`, in #ABAEBB (`.mt-2.text-pretty.text-gray-70.md:mt-1.5`). The fixed height is the point: the grid stays level whether the copy runs two lines or four.

### Documentation Link Card
**Role:** The navigation tile from a docs index page into a section.
`.transition-colors.duration-200.flex.w-full` is a 342px-wide card of 113–155px height, padding 20px, radius 10px, a 1px #E3E4E9 border, no fill and no shadow at rest. Inside, a 14px gap stacks the icon row, the title in Inter 18px/500 at 22.5px line-height with `normal` tracking in #121317 (`.font-medium.leading-tight.text-18.text-gray-8`), and the description in Inter 14px/400 at 21px line-height in #5E616E (`.mt-1.5.text-14.leading-normal.text-gray-40`). Radius 10px is carried by this class alone in the radius census, so the documentation grid gets a corner signature of its own.

### Plan Feature List
**Role:** The capability lines inside a pricing card.
The tick is `.check-icon.m-1.size-2.5.shrink-0`: a 10×10px span filled #ABAEBB at radius 0px, no border, no shadow — a glyph mass, not a circled badge. It sits 8px from its line (`.flex.items-start.gap-x-2.text-gray-70`). The line itself is Inter 14px/300 at 19.25px line-height and −0.28px tracking in #ABAEBB (`.w-fit.whitespace-pre-wrap.text-pretty.text-14`). Where a term needs defining, a 16×16px circular chip whose own text is "i" follows it at radius 9999px on `rgba(255, 255, 255, 0.07)`, set in Inter 12px/500 at 12px line-height; one row inks that glyph #ABAEBB at −0.28px tracking, the other #FFFFFF at −0.32px.

### Plan Badge
**Role:** The single marker that flags one pricing tier above its neighbours.
`.relative.flex.h-[26px].w-[103px]` fills `rgba(48, 129, 134, 0.3)` — teal at 30%, so the card's own gradient reads through. Its label, "Most Popular" on `.bg-clip-text.text-12.leading-none.tracking-tight`, is not a flat ink: two gradient stops, #5E9999 and #CBFFFF, clip to the 12px type — the display headline's technique, miniaturised. Radius is `not measured`. Use it once per plan grid; a second badge destroys the signal.

### Dark Code Panel
**Role:** The hero artefact on the marketing pages — a query and its JSON result, floating.
`.code-block.group.relative.flex` paints figures filled #0D172B and #131625, bordered 1px #172540 and 1px #1E2B48, at radius 12px, and stacks shadows: `rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px` on some, `rgba(0, 0, 0, 0.35) 0px 20px 34px 0px` on others — 20px offsets, so the panels hover well above the canvas. The tab strip `.code-block-tabs.group.relative.overflow-hidden` fills #10121E with a 1px #151E32 edge. Code sets in IBM Plex Mono 13px/400 at 19.5px line-height in #FFFFFF, dropping to 16.25px for the XPath listing. `.highlighted-word` marks a queried key with `rgba(57, 116, 233, 0.8)` behind #FFFFFF at radius 2px and 0px 1px padding on a 33–49×17px box. `.invisible.absolute.z-20.flex` supplies the copy affordance: 13px/400 in #8798C1 on a #0F1B34 fill, radius 4px, 1px #172541 border.

### Documentation Code Block
**Role:** A runnable snippet in the docs.
The caption bar is `.relative.m-0.flex.justify-between`, a 33px-tall figcaption at radius 6px 6px 0px 0px, 10px 14px padding, 12px/500 type at 12px line-height and −0.24px tracking, 16px gap. It measures three ways: #E7E8EC on a 1px #D5D6DC border at 704×33px, #EEEFF1 on 1px #E3E4E9 carrying "terminal" at 668–704×33px, and #F9FAFB on 1px #E3E4E9 carrying "example_script.js js" at 704×33px. Under it, `.language-AgentQL.not-prose.overflow-auto.rounded-b-md` fills `rgba(238, 239, 241, 0.75)` across 704×97–160px, closes at radius 0px 0px 6px 6px and repeats the 1px #D5D6DC border. `.shiki.css-variables` sets the code at 14px/400, 21px line-height, 16px 0px padding, no fill. The syntax palette is warm-on-white: #22863A for query names, #206CDF for keywords, #CF222E for constants, #078345 for strings, #B3B3B3 for comments, #2E3038 for the rest.

### Query Stepper Rail
**Role:** The vertical list of claims beside the home product visual.
`.flex.min-h-[50px].items-center.text-pretty` paints a 50px-tall button with 0px 16px padding, radius 0px, and a 2px rule, the one 2px border among the component census's rows. The active state runs Inter 20px/500 at 25px line-height, −0.4px tracking, ink and rule both #FFFFFF, on a 448px box ("Describe data naturally — no regex, XPath, or CS"). The resting state drops to weight 400 with ink and rule both #777A88 across 299–448px ("Structure data to fit your needs"). Selection is carried by luminance and one weight step.

### Category Filter Pill
**Role:** The row of example categories above the hero code panel.
`.relative.flex.whitespace-nowrap.rounded-full` sets a 13px/400 label at radius 9999px with 8px 12px padding and no border or shadow. One pill paints `rgba(120, 124, 145, 0.1)` behind #FFFFFF ink ("Social media"); #ABAEBB also lands on this class ("E-commerce"), the rest-state ink. A 10% grey-violet wash with no outline does the whole job of a selected state, keeping the control row from competing with the code panel it filters.

### Documentation Search Field
**Role:** The search entry at the top of the docs sidebar.
`.DocSearch.DocSearch-Button` fills #F9FAFB at radius 6px with a 1px #E3E4E9 border, 7px 32px padding and no shadow; the placeholder ink is #9194A1, and its 16px/400 type is *(inherited — describes no text on the page)*. The shortcut keys sit on `.DocSearch-Button-Keys` in #464853 at radius 2px, and the "⌘" key paints `rgba(0, 0, 0, 0) 0px 0px 0px 0px` three times over — a shadow declaration that renders nothing, the honest description of a flat key cap. Paired with it in the header is the theme switch `.group.relative.h-8.w-[62px]`: #EEEFF1 fill, radius 9999px, 0px 3px padding, `rgba(0, 0, 0, 0.15) 0px 0px 2px 0px inset`.

## Do's and Don'ts

### Do
- Set display headings in Figtree 500 at 64px/64px with −1.28px tracking and clip the #FFFFFF → #999999 gradient to the text, as "Make the web AI‑ready" does on `.mt-5.bg-gradient-to-b.from-white.from-70%`.
- Keep the primary CTA colourless: the `rgba(255, 255, 255, 0.95)` → `rgba(255, 255, 255, 0.85)` gradient at radius 8px, 48px tall, lifted on `rgba(0, 0, 0, 0.2) 0px 3px 16px 0px`.
- Drop plan-feature copy to Inter 300 at 14px/19.25px in #ABAEBB, 8px from a 10×10px #ABAEBB check (`.check-icon.m-1.size-2.5.shrink-0`).
- Frame documentation cards with a 1px #E3E4E9 hairline at radius 10px and 20px padding, no fill at rest (`.transition-colors.duration-200.flex.w-full`).
- Keep 9999px for pills, avatars and the 16×16px info chip; give cards and the home code figures 12px, and the documentation code figures 6px.
- Let the header restain rather than restructure: same links, same 28px gap, #EEEFF1 on dark and #1C1D22 on light.

### Don't
- Don't tint the call to action: a coloured CTA would be the loudest thing on either canvas.
- Don't let Figtree do interface work. The heading census measures it only on headings, 64px down to 36px (`.relative.z-10.max-w-[448px].text-pretty`); labels, nav items and controls are Inter.
- Don't reach past weight 600. The census's weights for Inter and Figtree stop there; the 700 it records belongs to -apple-system inside an embedded widget.
- Don't paint the canvas pure black. The body fill on home and pricing is #0A0B0C, and the blooms need those two points of headroom to be visible.
- Don't put the dark system's bloom, gradient text or 20px-offset shadows into the documentation pages; the shadows they paint sit on `.group.relative.h-8.w-[62px]`, on `.flex.h-[26px].w-[26px].items-center`, on the "⌘" key and on the header's "Get API key" link.
- Don't add a second border weight. The census's borders are 1px; the 2px rule on `.flex.min-h-[50px].items-center.text-pretty` is the exception and stays alone.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#0A0B0C` | Home and pricing body fill. |
| 0 | Paper | `#FFFFFF` | Documentation body fill. |
| 1 | Canvas Veil | `#0B0C0E` | The `-z-10` overlay a point above the canvas. |
| 1 | Card Navy | `#101219` | The 470×418px feature card. |
| 1 | Surface | `#121317` | The `rounded-xl` blocks on the dark pages. |
| 2 | Panel Navy | `#0E111B` | The 104px-inset CTA panel. |
| 2 | Code Navy | `#0D172B` | Home code figures; #131625 is the second variant. |
| 1 | Code Wash | `rgba(238, 239, 241, 0.75)` | Documentation code body. |
| 2 | Caption Bar | `#E7E8EC` | Head of a documentation code block. |

## Elevation

Depth is carried two ways, one per half of the system. On the dark pages shadow does the work and it is large: 20px offsets with 34–35px blur under the code figures, 30px blur under the CTA panel and the `rounded-xl` blocks, 16px under the primary button. One case inverts — `.absolute.inset-0.-z-10.rounded-[inherit]` glows outward in `rgba(255, 255, 255, 0.35)` instead of casting down, because a light control on near-black has nothing to darken. A subtler device runs along `.absolute.inset-x-0.top-0.h-px`: a 1px rule painted as a gradient through #1E2025, #2A2B34, #2A2C34 and #3A3C64, so a section edge brightens toward its middle. On the documentation pages elevation nearly disappears — a 2px inset, a 2px knob drop, a zero-value key shadow, a 10px lift on the header's link — and everything else separates on a 1px #E3E4E9 border.

## Imagery

No photography except the 42×42px circular author avatars in the testimonial row (`.h-[42px].w-[42px].shrink-0.rounded-full`). Everything else is rendered: glossy rounded-square 3D app icons — a theatre mask, JS and Python marks, a Chrome disc, a PDF sheet, a cloud — each inside its own coloured bloom. Behind the hero code panels sits an orbit diagram of ellipses at radius 100% and 9999px in the navy ramp #85A6E9, #1B346E and #12244F, 467–592px wide, plus #D1D3FF → `rgba(153, 157, 255, 0.1)` blobs at 137×243px and 236×398px. Browser chrome is simulated: a title bar reading url1.com or target.com over skeleton product cards. Product truth is shown as code and JSON.

## Layout

Full-bleed dark bands with contained content. Home's container is `max-w-[1312px]` with 76px of vertical padding. The census's only 64px horizontal insets are the CTA panel `.relative.z-10.flex.overflow-hidden` and the documentation sidebar `.relative.shrink-0.border-r.border-gray-94`. The marketing pages stack full-width bands: hero, integrations, a feature-card grid on `.relative.mx-auto.flex.h-[418px]`, four of them measured at 470×418px, a stepper-and-visual split, a pricing grid of three, a testimonial carousel with 9999px arrows on `rgba(29, 29, 33, 0.3)`, then the closing band. Documentation is a three-column frame — a sidebar link stack whose gap is `not measured`, a prose column of about 704px, a right table of contents — under the same sticky header, which carries the theme switch `.group.relative.h-8.w-[62px]`. The footer keeps its structure across both systems: logo, four link columns, and a 14px copyright line with leading-none, inked `rgba(255, 255, 255, 0.2)` on the dark pages and `rgba(94, 97, 110, 0.5)` on the light ones.

## Typography Voice

Two modes, one discipline. Display mode is Figtree at 36–64px, line-height at or near 1.0, tracking held at −0.02em regardless of size, then gradient-clipped white to #999999 — a headline that starts solid and dissolves toward its own baseline. Operational mode is Inter, tracking negative on the display, title and label rows from 40px down to 12px — the 16px body rows, the 18px documentation card title and every mono row stay at `normal` — so a 14px label reads as the same voice as a 64px headline at lower volume. The lightest weight here, Inter 300, carries both the 14px/19.25px pricing-feature lines and the 18px lead paragraphs under the headlines — where most sites reach for emphasis, this one reaches for air.

## Agent Prompt Guide

## Quick Color Reference
- background: `#0A0B0C` (marketing) / `#FFFFFF` (documentation)
- text: `#FFFFFF` (marketing) / `#2E3038` (documentation)
- surface: `#121317` / `#101219`
- border: `#172540` (marketing) / `#E3E4E9` (documentation)
- accent: `#D1D3FF` (hero bloom) / `#0086E5` (documentation link)
- primary action: `rgba(255, 255, 255, 0.95)` → `rgba(255, 255, 255, 0.85)` — white gradient, no distinct CTA hue

## Example Component Prompts
1. **Primary Button**: 48px tall, width 136–280px, radius 8px, padding 0 26px, no border. Fill with a vertical gradient from rgba(255, 255, 255, 0.95) to rgba(255, 255, 255, 0.85). Label in Inter 600 at 16px, 24px line-height, −0.32px tracking. Shadow rgba(0, 0, 0, 0.2) 0px 3px 16px 0px, on a #0A0B0C canvas.
2. **Home Feature Card**: Build a 470×418px card, fill #101219, radius 12px, no border, no shadow, zero padding so the illustration bleeds to the corner. Inset the text block: title in Inter 500 at 20px/22.5px, −0.4px tracking, #FFFFFF; body in Inter 400 at 16px/24px, tracking normal, #ABAEBB.
3. **Pricing Feature Row**: A flex row with an 8px gap. Left: a 10×10px check glyph filled #ABAEBB at radius 0. Right: Inter 300 at 14px/19.25px, −0.28px tracking, #ABAEBB, followed where needed by a 16×16px circle at radius 9999px filled rgba(255, 255, 255, 0.07) holding an "i" in Inter 500 at 12px/12px, −0.28px tracking, #ABAEBB.
4. **Documentation Link Card**: 342px wide, height 113–155px, padding 20px, radius 10px, 1px #E3E4E9 border, no fill. Stack contents with a 14px gap: icon, title in Inter 500 at 18px/22.5px, tracking normal, #121317, then description in Inter 400 at 14px/21px, #5E616E. No shadow at rest; no hover state was captured.
5. **Gradient Display Headline**: An h1 in Figtree 500 at 64px with 64px line-height and −1.28px tracking, filled with a vertical linear-gradient from #FFFFFF to #999999 clipped to the text. Below it, a lead paragraph in Inter 300 at 18px in #C7C9D1 (`.mt-2.5.text-pretty.pr-5.text-18`), then a 48px primary button and a 40px secondary button at a 12px gap.

## Similar Brands

- **Vercel** — the same near-black canvas, gradient-clipped white display type, and a colourless white CTA as the loudest control on the page.
- **Linear** — shares the negative-tracking-at-every-size discipline and builds hierarchy from luminance rather than weight.
- **Resend** — the same split personality: a dark, bloom-lit marketing surface handing off to bright, hairline-bordered documentation.
- **Mintlify** — kindred documentation half: white paper, 1px grey card borders, captioned code blocks, sidebar-plus-contents frame.
- **Railway** — matches the navy-tinted dark surfaces and lets rendered 3D artefacts, not photography, carry the visual weight.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #0A0B0C;
  --color-canvas-veil: #0B0C0E;
  --color-paper: #FFFFFF;
  --color-surface: #121317;
  --color-card: #101219;
  --color-panel: #0E111B;
  --color-code-surface: #0D172B;
  --color-code-surface-alt: #131625;
  --color-code-tabs: #10121E;
  --color-ink: #FFFFFF;
  --color-ink-docs: #060709;
  --color-ink-docs-body: #2E3038;
  --color-ink-docs-muted: #5E616E;
  --color-ink-muted: #ABAEBB;
  --color-ink-soft: #C7C9D1;
  --color-ink-nav: #EEEFF1;
  --color-ink-nav-docs: #1C1D22;
  --color-border: #E3E4E9;
  --color-border-code: #172540;
  --color-border-code-alt: #1E2B48;
  --color-border-tabs: #151E32;
  --color-border-caption: #D5D6DC;
  --color-gradient-tail: #999999;
  --color-glow: #D1D3FF;
  --color-link: #0086E5;
  --color-feedback: #EE774B;
  --color-badge-teal: rgba(48, 129, 134, 0.3);
  --color-chip-fill: rgba(255, 255, 255, 0.07);
  --color-header-fill: rgba(6, 7, 9, 0.97);
  --color-code-wash: rgba(238, 239, 241, 0.75);
  --color-caption-fill: #E7E8EC;
  --color-caption-fill-alt: #EEEFF1;
  --color-search-fill: #F9FAFB;
  --color-copy-fill: #0F1B34;
  --color-copy-ink: #8798C1;
  --color-copy-border: #172541;
  --color-rail-ink: #777A88;
  --color-highlight: rgba(57, 116, 233, 0.8);
  --color-syntax-name: #22863A;
  --color-syntax-keyword: #206CDF;
  --color-syntax-constant: #CF222E;
  --color-syntax-string: #078345;
  --color-syntax-comment: #B3B3B3;
  --gradient-display: linear-gradient(#FFFFFF, #999999);
  --gradient-cta: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
  --gradient-pill: linear-gradient(#191A1F, rgba(25, 26, 31, 0.8));
  --gradient-glow: linear-gradient(#D1D3FF, rgba(153, 157, 255, 0.1));
  /* Typography — Families */
  --font-display: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  /* Typography — Scale */
  --text-display: 64px;      --leading-display: 64px;
  --text-display-sm: 48px;   --leading-display-sm: 48px;
  --text-headline: 44px;     --leading-headline: 49.5px;
  --text-headline-sm: 36px;  --leading-headline-sm: 40.5px;
  --text-price: 40px;        --leading-price: 45px;
  --text-h1: 36px;           --leading-h1: 45px;
  --text-h2: 28px;           --leading-h2: 31.5px;
  --text-h3: 24px;           --leading-h3: 33px;
  --text-title: 20px;        --leading-title: 22.5px;
  --text-title-sm: 18px;     --leading-title-sm: 22.5px;
  --text-body: 16px;         --leading-body: 24px;
  --text-label: 14px;        --leading-label: 21px;
  --text-label-tight: 14px;  --leading-label-tight: 14px;
  --text-feature: 14px;      --leading-feature: 19.25px;
  --text-chip: 12px;         --leading-chip: 12px;
  --text-code: 14px;         --leading-code: 21px;
  --text-code-sm: 13px;      --leading-code-sm: 19.5px;
  --tracking-display: -1.28px;
  --tracking-price: -1.6px;
  --tracking-h1: -1.44px;
  --tracking-title: -0.4px;
  --tracking-body: -0.32px;
  --tracking-label: -0.28px;
  --tracking-caption: -0.24px;
  /* Spacing */
  --spacing-1: 6px;
  --spacing-2: 8px;
  --spacing-3: 10px;
  --spacing-4: 12px;
  --spacing-5: 14px;
  --spacing-6: 16px;
  --spacing-7: 20px;
  --spacing-8: 26px;
  --spacing-9: 28px;
  --spacing-section: 60px;
  --spacing-gutter: 64px;
  --spacing-section-lg: 76px;
  --spacing-panel: 104px;
  --max-width-page: 1312px;
  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card-docs: 10px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  /* Shadows */
  --shadow-button: rgba(0, 0, 0, 0.2) 0px 3px 16px 0px;
  --shadow-panel: rgba(0, 0, 0, 0.5) 0px 4px 30px 0px;
  --shadow-glow: rgba(255, 255, 255, 0.35) 0px 2px 14px 0px;
  --shadow-code: rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px;
  --shadow-code-tabs: rgba(0, 0, 0, 0.35) 0px 20px 34px 0px;
  --shadow-header-link: rgba(0, 0, 0, 0.35) 0px 2px 10px 0px;
  --shadow-toggle-inset: rgba(0, 0, 0, 0.15) 0px 0px 2px 0px inset;
  --shadow-toggle-knob: rgba(0, 0, 0, 0.15) 0px 0px 2px 0px;
  --shadow-ring: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #0A0B0C;
  --color-canvas-veil: #0B0C0E;
  --color-paper: #FFFFFF;
  --color-surface: #121317;
  --color-card: #101219;
  --color-panel: #0E111B;
  --color-code-surface: #0D172B;
  --color-code-surface-alt: #131625;
  --color-code-tabs: #10121E;
  --color-ink: #FFFFFF;
  --color-ink-docs: #060709;
  --color-ink-docs-body: #2E3038;
  --color-ink-docs-muted: #5E616E;
  --color-ink-muted: #ABAEBB;
  --color-ink-soft: #C7C9D1;
  --color-ink-nav: #EEEFF1;
  --color-ink-nav-docs: #1C1D22;
  --color-border: #E3E4E9;
  --color-border-code: #172540;
  --color-border-code-alt: #1E2B48;
  --color-border-tabs: #151E32;
  --color-border-caption: #D5D6DC;
  --color-gradient-tail: #999999;
  --color-glow: #D1D3FF;
  --color-link: #0086E5;
  --color-feedback: #EE774B;
  --color-badge-teal: rgba(48, 129, 134, 0.3);
  --color-chip-fill: rgba(255, 255, 255, 0.07);
  --color-header-fill: rgba(6, 7, 9, 0.97);
  --color-code-wash: rgba(238, 239, 241, 0.75);
  --color-caption-fill: #E7E8EC;
  --color-caption-fill-alt: #EEEFF1;
  --color-search-fill: #F9FAFB;
  --color-copy-fill: #0F1B34;
  --color-copy-ink: #8798C1;
  --color-copy-border: #172541;
  --color-rail-ink: #777A88;
  --color-highlight: rgba(57, 116, 233, 0.8);
  --color-syntax-name: #22863A;
  --color-syntax-keyword: #206CDF;
  --color-syntax-constant: #CF222E;
  --color-syntax-string: #078345;
  --color-syntax-comment: #B3B3B3;
  --font-display: 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --text-display: 64px;      --text-display--line-height: 64px;
  --text-display-sm: 48px;   --text-display-sm--line-height: 48px;
  --text-headline: 44px;     --text-headline--line-height: 49.5px;
  --text-headline-sm: 36px;  --text-headline-sm--line-height: 40.5px;
  --text-price: 40px;        --text-price--line-height: 45px;
  --text-h1: 36px;           --text-h1--line-height: 45px;
  --text-h2: 28px;           --text-h2--line-height: 31.5px;
  --text-h3: 24px;           --text-h3--line-height: 33px;
  --text-title: 20px;        --text-title--line-height: 22.5px;
  --text-title-sm: 18px;     --text-title-sm--line-height: 22.5px;
  --text-body: 16px;         --text-body--line-height: 24px;
  --text-label: 14px;        --text-label--line-height: 21px;
  --text-label-tight: 14px;  --text-label-tight--line-height: 14px;
  --text-feature: 14px;      --text-feature--line-height: 19.25px;
  --text-chip: 12px;         --text-chip--line-height: 12px;
  --text-code: 14px;         --text-code--line-height: 21px;
  --text-code-sm: 13px;      --text-code-sm--line-height: 19.5px;
  --tracking-display: -1.28px;
  --tracking-price: -1.6px;
  --tracking-h1: -1.44px;
  --tracking-title: -0.4px;
  --tracking-body: -0.32px;
  --tracking-label: -0.28px;
  --tracking-caption: -0.24px;
  --spacing-1: 6px;
  --spacing-2: 8px;
  --spacing-3: 10px;
  --spacing-4: 12px;
  --spacing-5: 14px;
  --spacing-6: 16px;
  --spacing-7: 20px;
  --spacing-8: 26px;
  --spacing-9: 28px;
  --spacing-section: 60px;
  --spacing-gutter: 64px;
  --spacing-section-lg: 76px;
  --spacing-panel: 104px;
  --container-page: 1312px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-card-docs: 10px;
  --radius-card: 12px;
  --radius-pill: 9999px;
  --shadow-button: rgba(0, 0, 0, 0.2) 0px 3px 16px 0px;
  --shadow-panel: rgba(0, 0, 0, 0.5) 0px 4px 30px 0px;
  --shadow-glow: rgba(255, 255, 255, 0.35) 0px 2px 14px 0px;
  --shadow-code: rgba(0, 0, 0, 0.34) 0px 20px 35px 0px, rgba(0, 0, 0, 0.25) 0px 4px 13px 0px;
  --shadow-code-tabs: rgba(0, 0, 0, 0.35) 0px 20px 34px 0px;
  --shadow-header-link: rgba(0, 0, 0, 0.35) 0px 2px 10px 0px;
  --shadow-toggle-inset: rgba(0, 0, 0, 0.15) 0px 0px 2px 0px inset;
  --shadow-toggle-knob: rgba(0, 0, 0, 0.15) 0px 0px 2px 0px;
  --shadow-ring: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px;
}
```