Neon — Postgres Homepage

# Build prompt: dark developer-platform landing page with a muted mint accent

You are building a long, quiet, high-contrast landing page for a developer database product. The page is near-black, set in a tight grotesk, and almost every section opens with the same move: one statement in two tones (first sentence near-white, the rest grey) indented one column from the left. The pictures are drawn as product UI and data graphics (an IDE, charts, a branch diagram, a timeline), never photographs. There is one muted mint accent and one pale-mint section in the page. Motion is restrained: content enters once on arrival, and two streak fields loop gently. Nothing pins and nothing is scroll-jacked.

Reference viewport: 1440 × 900. All numbers are CSS px at 1440 wide. Heights were measured from the full-page still (1 CSS px ≈ 0.83 image px). No motion report or motion strips were supplied, so every motion value below is marked (inferred).

## Structure

**Frames**
- **Wide frame:** full width with 32px side padding (1376px of content). Used by the nav, the footer, the final display headline, the agents status strip, full-bleed charts and timelines.
- **Content container:** max-width 1280px, centred (80px margins at 1440), 12 columns, 24px gutter. One column plus its gutter is about 108px.
- **Statement headings** start at **column 2** (about 108px in from the container edge) and span about 7 columns (max 760px). A small section glyph or stat sits at **column 1**, level with or above the heading. This offset is the signature of the page's layout.

**Sections, top to bottom**

1. **Announcement bar**: 32px, full-bleed, page background, 1px #262727 bottom rule. One centred line: an announcement of 8–12 words in 14px grey, followed by a 2–3 word link in the accent with a → arrow.
2. **Nav**: 56px, wide frame, sticky.
   - Left: a placeholder wordmark (20px square glyph plus a word, near-white). 40px after it come 5 links (14px/500, grey). Four of them have 10px chevrons. Links are 28px apart.
   - Right, 16px gaps: a small "repo stars" chip (icon plus "NNk", 14px grey), a "log in" text link, and a primary button (32px tall, near-white fill, black text).
3. **Hero**: 628px.
   - The top ~280px is a **streak field** (see Imagery). It covers the right three-quarters of the width, brightest around 45–70% across, and fades into the background at the left and bottom.
   - Below it, all at column 1 and left-aligned:
     - Eyebrow: a 12px glyph plus 2–3 words, mono uppercase.
     - 20px gap, then the H1: 2 lines of 3–4 words each, with a forced break, max 640px.
     - 72px gap (inferred), then the button row:
       - Primary: "start"-role, 40px tall, padding 0 18px, near-white fill.
       - Secondary: "docs"-role, 40px, #1A1B1B fill, 1px #262727 border.
       - 12px between the buttons.
   - Nothing else: no subtitle paragraph and no product shot.
4. **Logo wall**: 134px. One row of 7 monochrome placeholder wordmarks across the container, spaced with `space-between`, 24–28px tall, grey at about 70% opacity.
5. **AI-workflow showcase**: 1200px.
   - **Statement heading** (column 2, 3 lines): a white sentence of 5–6 words, then a grey continuation of 10–12 words.
   - **Callout labels**, 80px below: two mono pill labels of 4–6 words each. Each has a 1px vertical connector line dropping into the mockup below. The left one points at the editor, the right one at the assistant pane.
   - **IDE mockup**, 16px below: 1120 × 660, centred over columns 2–11.
     - **Main window** (about 760px wide):
       - A 32px title bar with three grey dots.
       - A 180px file tree.
       - About 14 lines of syntax-coloured mono code.
       - A bottom terminal panel: a tab row of 5 mono labels, the active one underlined, and about 6 output lines with accent ✓ glyphs.
     - **Assistant pane** (about 400 × 520): overlaps the right side of the main window, 24px lower, with its own border and a higher z-index. It holds:
       - A 3–4 word header.
       - A 2-line instruction.
       - A 4–5 item checklist with accent ticks.
       - A code chip.
       - An input field at the bottom with an accent send icon.
   - **CTA row**, 48px below: centred. A grey sentence of 7–9 words, then a **command pill**: 40px tall, #0B0C0C fill, 1px #262727 border, mono 14px, an accent "$", a 3-word command, and a copy icon.
6. **Compatible-clients row**: 164px, with a hairline on top.
   - Column 1: a 2-line label of 4–5 words, 14px grey.
   - Columns 3–12: 6 grey client wordmarks, evenly spread.
7. **Autoscaling: the only light section**: 1031px, full-bleed #E5F2EB, with all colours inverted.
   - A 24px dark line icon at column 1, 44px from the top.
   - The statement heading at column 2, 110px from the top, 3 lines, in dark plus muted grey-green.
   - 30px below: two **tab chips**, 28px tall, 13px.
     - Active: white fill, 1px rgba(2,3,3,.15) border.
     - Inactive: transparent.
   - 40px below: the **chart band**, 546px tall, edge to edge, split at 47%.
     - Left panel ("fixed capacity"):
       - A grey load area chart with a dashed horizontal capacity line.
       - One red spike breaking through the capacity line.
       - A small white tooltip card anchored to the spike: red dot, 2 short lines.
     - Right panel ("autoscaled"):
       - A slightly lighter fill with a 1px border.
       - A stepped accent-green area that hugs the load line.
   - Directly below: a 36px full-width band of accent diagonal hatching at about 25%, carrying a mono uppercase caption of 5–8 words.
   - 24px below that, a final row:
     - Columns 1–6: a legend of 3 items (8px swatches: accent, grey, dashed), 13px.
     - Columns 8–11: a 15px paragraph of about 3 lines.
8. **Branching**: 1365px.
   - **Stat** at column 1, about 30px from the top: a number of 6–7 characters plus a 12px mono caption of 1–3 words.
   - **Dotted guide lines** behind the upper ~1000px, across the wide frame:
     - Vertical lines every 48px, made of 1px #262727 dots at a 6px pitch.
     - Masked so they fade out at top and bottom.
   - **Statement heading** at column 2, about 395px from the top, 3 lines.
   - **Branch diagram**, 90px below: 370px tall, wide frame.
     - The primary line runs across the lower third in the accent at 60%, with a "main"-role pill at column 1: mono 12px, accent text, 1px accent border, radius 4, 24px tall.
     - 3–4 child branches leave the primary line through rounded 90° elbows (radius 8), rise 40–120px, then run right.
     - Child lines are grey at 40%. Each has a mono branch-name chip (2–3 words) and a muted timestamp.
     - 6px node dots mark each fork.
   - **Three feature columns**, 90px below (columns 1–4 / 5–8 / 9–12), with a hairline above the row (inferred). Each column has, top to bottom:
     - A 20px accent line icon.
     - 16px gap, then a title (16px/500, white).
     - 8px gap, then a description: 15px grey, 2–3 lines, max 34ch.
9. **Auth**: 850px.
   - **Statement heading** at column 2, 60px from the top.
   - **Blurred user table**, 96px below: 1280 × 516.
     - About 11 rows at a 44px pitch.
     - Each row is a set of rounded placeholder bars in #1A1B1B–#262727: a 20px avatar circle, then bars of 120, 200, 80 and 60px.
     - The panel is masked by a radial gradient (solid in the centre, transparent at the edges) and blurred 1–2px, so it reads as data but cannot be read.
   - **Frosted pill**, centred on the table: 44px tall, padding 0 20px, fully rounded.
     - Fill rgba(229,242,235,.10), `backdrop-filter: blur(12px)`, 1px rgba(229,242,235,.25) border.
     - A 16px icon plus a 2-word "enable"-role label, 14px/500 near-white.
     - Outer glow `0 0 40px rgba(109,183,153,.25)`.
10. **Fees feature grid**: 1060px.
    - A 24px dotted-ring glyph at column 1, 150px from the top.
    - The statement heading at column 2, 290px from the top, 3 lines.
    - 150px below: a **2 × 3 grid** (columns 1–4 / 5–8 / 9–12) with a 56px row gap. Each item, top to bottom:
      - A 20px accent icon.
      - 12px gap, then a 16px/500 title of 2–4 words.
      - 6px gap, then a 15px grey description, 2–3 lines.
    - No cards and no borders.
11. **Agents**: 2155px.
    - **Status strip** at the top: 48px, wide frame, hairlines top and bottom, 5 cells divided by vertical hairlines. Each cell holds a mono 12px uppercase label (the first with an accent dot), and some cells carry short counters (inferred).
    - 200px below, at column 1:
      - Eyebrow: accent dot plus 2 words, mono.
      - 16px gap, then the **display-2 headline**: 2 lines (4 words, then 3), max 800px.
      - 24px gap, then a sub line: 2 lines, 17px grey, max 520px.
      - 24px gap, then an outline button: 40px, 1px #262727, accent dot, 3–4 words.
    - **Row 1**, 90px below:
      - Text at columns 2–5, vertically centred: a two-tone H4 (5–7 white words plus 10–14 grey words, about 5 lines, max 380px), then 24px, then a "learn more →" link (14px/500 white).
      - **Panel 1** at columns 7–12 (698 × 534), a fleet dashboard: a mono title, 2 region chips, a field of about 60 tiny vertical activity bars (active ones in the accent, idle ones #262727) and a mono legend.
    - **Row 2**, 240px below, mirrored:
      - **Panel 2** at columns 1–6 (516 × 365), an API console: an accent "$" prompt with a 2-line command, then JSON response lines in grey and near-white.
      - Text at columns 8–11.
12. **Checkpoints**: 697px.
    - **H3 statement**: a 720px block centred on the page, text left-aligned, 3 lines, about 130px from the top.
    - 100px below: a **full-bleed timeline**, 180px tall.
      - A hairline across the middle, with 8px ticks every 16px (#262727) and 16px ticks every 5th.
      - Small mono timestamps under some ticks.
      - 4–6 accent checkpoint dots, each with a mono chip of 1–2 words.
13. **Proof and stats band**: 668px.
    - A container hairline, with two mono eyebrows (accent dot plus 2–3 words) just under it, at columns 1 and 7.
    - **Left (columns 1–6)**:
      - 40px below the eyebrows: a two-tone H3 of 4 lines (a 5-word white sentence plus 20–25 grey words), max 600px.
      - 64px below: two stats, 64px apart. Each is a number in white plus a 14px grey caption of 2 lines, max 200px.
    - **Right (columns 7–12)**:
      - A mono pull quote of 5–6 lines in near-white. Two phrases are highlighted with an accent background at 22%, padded 0 4px.
      - 40px below: the attribution, name in 14px/500 white and role in 14px grey.
14. **Final CTA band**: 503px, with a top hairline.
    - The **display headline** at the wide frame's left edge: 2 lines (4 words, then 3), near-white.
    - A 200px **streak field** behind the second line, continuing below it.
    - 24px below the headline, a bottom row:
      - Left: an 18px two-line lede. The first line is white (5–6 words), the second grey (7–9 words).
      - Right-aligned, 12px gaps: primary button, secondary button, command pill.
15. **Footer**: 1587px, wide frame, with a top hairline.
    - **Top block** (about 550px), starting 40px from the top:
      - A logo column (about 300px): wordmark plus a 2-word mono sub-label.
      - 5 link columns of about 180px each:
        - 3 plain columns: a mono 12px uppercase title in #5E6361, then 8–10 links at 14px #8C918F with 12px row gaps.
        - 1 social column: 16px icon plus label per row.
        - 1 compliance column: 16px badge plus label per row.
    - About **770px of empty #020303**. Keep it empty.
    - **Bottom row**:
      - An 8px accent dot plus a 3-word "systems status"-role line, 13px grey.
      - A copyright line beneath it, 12px #5E6361.
      - 40px bottom padding.

## Scroll map

| # | Section | Height | Viewports | Scroll consumed | Kind |
|---|---|---|---|---|---|
| 1 | Announcement bar | 32px | 0.04 vp | 32px | static |
| 2 | Nav | 56px | 0.06 vp | 56px | static (sticky; no extra scroll) |
| 3 | Hero | 628px | 0.70 vp | 628px | entrance, plus an ambient loop |
| 4 | Logo wall | 134px | 0.15 vp | 134px | static |
| 5 | AI showcase | 1200px | 1.33 vp | 1200px | entrance |
| 6 | Clients row | 164px | 0.18 vp | 164px | static |
| 7 | Autoscaling (light) | 1031px | 1.15 vp | 1031px | entrance |
| 8 | Branching | 1365px | 1.52 vp | 1365px | entrance |
| 9 | Auth | 850px | 0.94 vp | 850px | entrance |
| 10 | Fees grid | 1060px | 1.18 vp | 1060px | entrance |
| 11 | Agents | 2155px | 2.39 vp | 2155px | entrance |
| 12 | Checkpoints | 697px | 0.77 vp | 697px | entrance |
| 13 | Proof and stats | 668px | 0.74 vp | 668px | entrance |
| 14 | Final CTA | 503px | 0.56 vp | 503px | entrance, plus an ambient loop |
| 15 | Footer | 1587px | 1.76 vp | 1587px | static |

**Total page height: about 12,130px (about 13.5 viewports).** Nothing pins or stacks, so scroll consumed always equals height. All kinds are inferred.

## Spacing

- **Base unit** is 8. The gaps that recur are 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 72, 80, 90, 96 and 150px.
- **Section rhythm**:
  - Dark sections sit about 120px apart (bottom content of one to the top content of the next).
  - Within a section, a statement heading sits **80–100px above its visual**, and a visual sits **about 90px above its feature row**.
  - The two sections that open with a glyph (10 and 7) leave **about 140–150px** between the glyph and the heading or grid.
  - The page breathes. Do not compress it.
- **Text groups**:
  - Eyebrow to headline: 16–20px.
  - Headline to sub line: 24px.
  - Sub line to button: 24px.
  - Button to button: 12px.
- **Feature items**: icon to title 12–16px, title to description 6–8px. Grid column gap 24px (spans of 4 columns), row gap 56px.
- **Agents rows**: 240px between the zig-zag rows.
- **Panels**: inner padding 16–20px, header rows 40px, table and terminal rows at a 24–28px pitch.
- **Footer**: 48px between columns, 12px between links.

## Type

- **Sans:** a neutral grotesk with tight tracking. Use **Inter** (free).
- **Mono:** **Geist Mono** or **JetBrains Mono** (free). Mono is for eyebrows, chips, code, the pull quote and footer titles, and nothing else.
- **Body anchor:** 17px.

| Level | × body | px | Line-height | Letter-spacing | Weight |
|---|---|---|---|---|---|
| Display (section 14) | 6.3× | 107 | 1.0 | −0.045em | 500 |
| Display-2 (agents headline) | 4.7× | 80 | 1.0 | −0.04em | 500 |
| H1 (hero) | 3.0× | 51 | 1.02 | −0.035em | 500 |
| Stat number | 3.0× | 51 | 1.0 | −0.03em | 500, tabular numerals |
| H2 statement (two-tone) | 2.35× | 40 | 1.15 | −0.025em | 500, both tones |
| H3 statement (sections 12, 13) | 2.0× | 34 | 1.2 | −0.02em | 500 |
| H4 row heading (agents rows) | 1.65× | 28 | 1.25 | −0.02em | 500 |
| Pull quote (mono) | 1.4× | 24 | 1.5 | −0.02em | 400 |
| Lede | 1.06× | 18 | 1.45 | −0.01em | 400 |
| Body | 1.0× | 17 | 1.55 | −0.005em | 400 |
| Feature title | 0.94× | 16 | 1.4 | −0.01em | 500 |
| Feature description | 0.88× | 15 | 1.5 | 0 | 400 |
| Nav, buttons, links | 0.82× | 14 | 1.0 | −0.005em | 500 |
| Code in mockups (mono) | 0.76× | 13 | 1.6 | 0 | 400 |
| Eyebrow, chip, footer title (mono, uppercase) | 0.72× | 12 | 1.2 | +0.08em | 500 |

**Max line length**
- H1: about 23 characters per line, max 640px.
- H2: max 760px, about 40 characters per line, 3 lines.
- H3: max 720px.
- H4: max 380px.
- Feature descriptions: 34ch.
- Ledes and sub lines: 520px.

**Two-tone rule:** a statement is **one paragraph**. The lead sentence is set in the primary colour, and the rest runs on in secondary grey at the **same size and weight**.

## Colour

| Hex | Role | Where it may appear |
|---|---|---|
| #020303 | Page background, about 85% of the surface | Everywhere; also the text colour on the light section |
| #F5F7F6 (inferred) | Primary text, primary button fill | Headlines, lead sentences, button fills |
| #8C918F (inferred) | Secondary text | Statement continuations, descriptions, nav and footer links, logo walls |
| #5E6361 (inferred) | Tertiary and meta text | Footer titles, timestamps, comments |
| #262727 | Hairlines, borders, dots | Dotted guide lines, idle bars, placeholder rows |
| #0B0C0C, #1A1B1B (inferred) | Raised surfaces | Panels, mockups, secondary buttons, command pill |
| #E5F2EB | Light surface | Section 7's full-bleed background only. Its own secondary text is #66736C (inferred) and its borders rgba(2,3,3,.12) |
| #6DB799 | **The single accent**, muted mint | See the list below |

**The accent is allowed in exactly these places:** eyebrow and status dots, the "$" prompts and ✓ glyphs, feature icons, the main branch line and pill, checkpoint dots, chart fills, the hatched band, quote highlights, the streak fields, and the auth pill glow.

**The accent is never allowed on:** button fills, headline text, or any panel surface.

**Data-only red** (about #E5484D, inferred) appears once: the incident spike and its tooltip dot in section 7.

## Surface

- **Borders:** 1px #262727 on dark, 1px rgba(2,3,3,.12) on light. No thicker strokes.
- **Radii:**
  - Buttons, chips, tabs and the command pill: 6px.
  - The "main" pill and tooltips: 4–6px.
  - Mockup windows and panels: 8px.
  - The auth pill: fully rounded.
  - Feature items: no container at all.
- **Shadows:** none. Depth comes from a lighter fill plus a hairline, and from the overlap of the assistant pane.
- **Glow:** only the auth pill glow, and an optional accent radial wash of 6% or less behind the IDE.
- **Glass:** only two places:
  - The sticky nav after scrolling: rgba(2,3,3,.72) with `blur(12px)`.
  - The auth pill.

## Imagery

There are no photographs, people or illustrations. Every picture is drawn UI or data, built in HTML/SVG/canvas.

- **Streak fields** (sections 3 and 14):
  - Size: 1440 × about 280 (hero) and 1440 × about 200 (final CTA).
  - Columns of vertical bars, 4–6px wide with 2px gaps. Each bar is built from 4px segments, which gives it a pixel-stepped look.
  - Heights vary from 40 to 280px. Colour runs from #0E2A20 through #2F6E55 to #6DB799, and a few columns are tipped in #E5F2EB.
  - The field is densest and brightest at 45–70% across. It falls to almost nothing in the left 20%, and a linear mask fades its bottom 40% into the background.
- **Logo walls** (sections 4 and 6): flat grey placeholder wordmarks, all at the same height.
- **IDE mockup** (section 5): about 17:10, centred. Its contents are described in Structure.
- **Autoscaling charts** (section 7): about 2.5:1 overall, edge to edge.
- **Branch diagram** (section 8): about 3.7:1 over the dotted grid.
- **Blurred user table** (section 9): about 2.5:1, with a radial mask.
- **Fleet dashboard** (section 11, about 1.3:1) and **API console** (section 11, about 1.4:1).
- **Checkpoint timeline** (section 12): about 8:1, full-bleed.

## Motion

None of these values were measured; everything is inferred from the still and the restrained character of the page. Defaults for every entrance:
- Trigger: once, when the element's top reaches about 80% of the viewport.
- Duration: not measured, 400–700ms.
- Easing: ease-out (inferred).

**1 · Announcement bar**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same

**2 · Nav**
- **kind:** static (sticky; consumes no scroll)
- **what moves:** the background state only
- **from → to:** transparent → glass after about 8px of scroll (inferred)
- **range:** a state change at the threshold, not scroll-linked
- **reduced motion:** the state is applied without a fade

**3 · Hero**
- **kind:** entrance, plus an ambient loop
- **what moves:** the eyebrow, H1 and button row; the streak columns
- **from → to:**
  - Text: opacity 0→1, translateY 16→0px (inferred).
  - Streak bars: an independent loop on each bar, with opacity and height flickering between about 30% and 100% and segments drifting downward. This runs on a timer, not on scroll.
- **range:**
  - Text plays once on load, 500–800ms, with a 60–100ms stagger from eyebrow to H1 to buttons (not measured).
  - The streak loop is continuous.
- **reduced motion:** text appears in place; the streak field renders as a single still frame

**4 · Logo wall**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same

**5 · AI showcase**
- **kind:** entrance
- **what moves:** the heading, callout labels and connectors, the IDE windows, and the terminal and checklist lines
- **from → to:**
  - Heading: opacity 0→1, y 16→0.
  - Connectors: scaleY 0→1 from the top.
  - Main window: opacity 0→1, y 24→0.
  - Assistant pane: the same, 120–200ms later.
  - Lines: opacity 0→1 one by one (inferred).
- **range:** the default trigger, 500–700ms per element; lines staggered 80–150ms
- **reduced motion:** everything is shown at its final state

**6 · Clients row**
- **kind:** static
- **what moves:** nothing
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same

**7 · Autoscaling**
- **kind:** entrance
- **what moves:** the heading, the chart lines and areas, the spike tooltip, and the legend
- **from → to:**
  - Charts: clip-path inset(0 100% 0 0) → inset(0 0 0 0), drawn left to right.
  - Tooltip: opacity 0→1, scale 0.96→1 once the draw passes the spike.
  - Heading and legend: fade up 12px (inferred).
- **range:** triggers when the chart band's top reaches 75% of the viewport; draw 800–1200ms (not measured); tooltip 200–300ms after the draw
- **reduced motion:** charts are fully drawn and the tooltip is visible

**8 · Branching**
- **kind:** entrance
- **what moves:** the stat number, the branch lines, the chips, and the feature columns
- **from → to:**
  - Stat: counts up 0 → final value.
  - Primary line, then each child line: stroke-dashoffset 100% → 0.
  - Chips and node dots: opacity 0→1.
  - Feature columns: y 12→0 with opacity (inferred).
- **range:** the default trigger; count-up and line draws 600–1000ms each; children staggered 120–200ms; columns staggered 80ms
- **reduced motion:** final numbers and fully drawn lines

**9 · Auth**
- **kind:** entrance
- **what moves:** the heading, the placeholder rows, and the frosted pill
- **from → to:**
  - Rows: opacity 0→1, staggered from the centre outward.
  - Pill: opacity 0→1, scale 0.96→1 (inferred).
  - No pulsing loop.
- **range:** the default trigger, 400–600ms; rows staggered 30–50ms
- **reduced motion:** static panel

**10 · Fees grid**
- **kind:** entrance
- **what moves:** the glyph, the heading, and the 6 items
- **from → to:** opacity 0→1, y 12→0 (inferred)
- **range:** the default trigger; items staggered 60ms, row by row
- **reduced motion:** shown in place

**11 · Agents**
- **kind:** entrance
- **what moves:** the headline group, both panels, the activity bars, and the console lines. The status strip stays still.
- **from → to:**
  - Headline group: y 16→0 with opacity.
  - Panels: y 24→0 with opacity.
  - Bars: scaleY 0→1 from the bottom.
  - Console lines: typed in.
- **range:** the default trigger for each row; bars staggered 10–20ms; console lines 100–150ms apart (not measured)
- **reduced motion:** final state

**12 · Checkpoints**
- **kind:** entrance
- **what moves:** the timeline hairline, the ticks, and the checkpoint markers
- **from → to:** the line draws left to right (scaleX 0→1 from the left); markers go opacity 0→1, scale 0.8→1 in sequence (inferred)
- **range:** triggers when the timeline's top reaches 80% of the viewport; draw 800–1200ms; markers staggered 150ms
- **reduced motion:** fully drawn

**13 · Proof and stats**
- **kind:** entrance
- **what moves:** the stat numbers and the quote highlights
- **from → to:**
  - Stats: count up to their values.
  - Highlights: background-size 0% → 100%, sweeping left to right.
  - Text: fades up 12px (inferred).
- **range:** the default trigger; 600–900ms; highlights staggered 150ms
- **reduced motion:** final values with the highlights already filled

**14 · Final CTA**
- **kind:** entrance, plus an ambient loop
- **what moves:** the display headline, the bottom row, and the streak field
- **from → to:** headline opacity 0→1, y 20→0; bottom row follows; streaks run the same timer loop as the hero (inferred)
- **range:** the default trigger, 600–800ms; 100ms stagger
- **reduced motion:** static frame

**15 · Footer**
- **kind:** static
- **what moves:** nothing; the status dot does not pulse
- **from → to:** n/a
- **range:** n/a
- **reduced motion:** same

**Interaction transitions** (all inferred, not part of the scroll choreography)
- Primary button hover: fill #F5F7F6 → #E5F2EB, 150–200ms. Press: scale 0.98.
- Secondary button and command pill hover: border #262727 → #3A3C3B, fill #1A1B1B → #222323.
- Nav and footer links: #8C918F → #F5F7F6, 150ms.
- Nav dropdown open: opacity 0→1, y −4→0, 150–200ms. Close: reversed, faster.
- "Learn more →" hover: the arrow moves translateX 0→3px.
- Copy icon click: swaps to an accent ✓ for about 1.5s.
- Autoscaling tab change: the active chip swaps and the charts crossfade, 200–300ms.
- Auth pill hover: the border brightens to 40% and the glow strengthens slightly.
- Logo hover: opacity 0.7 → 1.

## Responsive (below 640px)

- **Layout:** wide-frame and container padding drop to 20px. The column-2 heading indent goes to 0, and every block is left-aligned at the edge.
- **Type:**
  - Display: 3.1× (52px). Display-2: 2.8× (48px).
  - H1: 2.1× (36px). H2: 1.65× (28px). H3: 1.4× (24px). H4: 1.25× (21px).
  - Stats: 2.3× (40px). Pull quote: 1.1× (18px).
  - Body stays 17px; descriptions 15px.
- **Nav:** collapses to wordmark plus a menu button (from 1024px down). The announcement bar truncates to one line.
- **Logo walls:** become a 3 × 2 grid; extra logos are dropped.
- **IDE mockup:** drop the file tree and the callouts. The assistant pane stacks under the editor at full width. The CTA row stacks, with the command pill at full width.
- **Section 7:** the charts stack (fixed, then autoscaled, each about 280px tall). The legend wraps, and the paragraph moves below it.
- **Branch diagram and timeline:** cropped with `overflow: hidden` to show the left 600px.
- **Feature grids:** 1 column with 40px gaps.
- **Auth table:** 360px tall.
- **Agents rows:** stack text first, then the panel, with 96px between rows.
- **Section 13:** stacks heading, stats (still 2 across), then quote.
- **Final CTA:** the bottom row stacks and the buttons go full width.
- **Footer:** link columns become a 2-column grid. The empty runway shrinks to about 160px.

## Don'ts

- Don't use the saturated "neon" greens (#00E599-type), gradients on text, purple or blue glows, or a second accent. The accent is the muted #6DB799 and it never fills a button.
- Don't centre the statement headings. Don't split a two-tone statement into a big heading plus a smaller paragraph: it is one paragraph, one size, two colours.
- Don't drop the column-2 indent. Glyph at column 1, heading at column 2 is the system.
- Don't add a hero subtitle, a product screenshot or a 3D object to the hero. It is eyebrow, H1, two small buttons and the streak field.
- Don't put feature items in cards. No background tiles, no `rounded-2xl`, no drop shadows, no hover lift.
- Don't use big pill CTAs or 48–56px buttons. Buttons are 40px tall (32px in the nav) with 14px text and a 6px radius.
- Don't use stock photos, people, blobs, isometric illustrations or emoji icons. All visuals are drawn UI and data in greys plus the one accent.
- Don't give section 7 its own look. It is the same grid and type, only with the colours inverted.
- Don't use pure #000 or pure #FFF, and don't add colour to the logos.
- Don't use a geometric or rounded sans (Poppins, Montserrat, Nunito). It must be a neutral grotesk with negative tracking. Mono never sets a headline.
- Don't add parallax, pinning, scroll-jacking, spring bounces, endless pulses or scroll-linked scrubbing. Entrances play once and are short, and only the two streak fields loop.
- Don't spread glass around. It belongs only to the scrolled nav and the auth pill.
- Don't tighten section spacing, and don't fill the footer's empty runway with extra content. The quiet ending is intentional.