Sigil — AI agent control plane

# Gridded light-to-dark developer landing page with an orange pixel accent

Build a 1440px-wide technical landing page that looks like an engineering drawing. The whole page sits on a fixed three-column frame of 1px hairlines. Section numbers in mono run down the left gutter. The upper half of the page is off-white paper. The lower half switches to near-black, full bleed. The only colour is a signal orange, mostly set in a pixel/bitmap font, square pixel dithering and pale peach node fills. Every corner is square. There are no shadows and no rounded pills. Motion is restrained.

No motion report was supplied. Every motion value below is read from the still and marked (inferred). Section heights come from the still's proportions, with 1 image px ≈ 1.28 CSS px across the 1440 design width.

## Structure

**Frame (applies to every section):** full-bleed page, no outer margin. Three columns run the full height of the page and are separated by 1px vertical hairlines that never break:
- Left gutter: 184px. It holds the section index only.
- Main column: 1072px. All content goes here.
- Right gutter: 184px. It is always empty.

Every section boundary is a 1px horizontal hairline across the full 1440px width, gutters included. The hairlines keep going through the dark section in a dark grey.

The main column of section 03 is subdivided into a square cell grid: 14 columns × 5 rows of ≈76.5px cells.

Sections, top to bottom. The numbers match the gutter labels on the page:

- **00 Nav bar.** Unlabelled in the gutter. Contents, left to right inside the main column:
  - A logo mark (16px pixel glyph) and a wordmark.
  - A centred, boxed group of 5 mono uppercase links.
  - A boxed mono uppercase CTA on the right.
- **01 Announcement strip.** The main column cell only is pure white. It holds one centred mono uppercase line, about 5 words, containing a big number ("ROUTED 12M+ …" pattern). The gutter cells stay off-white.
- **02 Hero.** Left-aligned, never centred. Contents:
  - A tiny orange pixel "corner bracket" sits exactly on the top-left corner of the main column: a 16×16 orange square with an 8×8 notch cut out of its bottom-right, so it reads as an L.
  - Headline on two lines.
    - Line 1: a pixel asterisk glyph in #121212, about 0.45× the cap height and vertically centred on the line, then 2 words ending in a period.
    - Line 2: one sans word, then two words set in the orange pixel-mono face, then a black sans period.
  - Below the headline, a 2-column row:
    - Left, about 520px wide: a 3-line body paragraph of 30–35 words.
    - Right, starting about 690px into the main column:
      - A black primary button: orange pixel asterisk + 3-word label.
      - 24px to its right, a text link: 3 words + a ↗ arrow, with a 1px dashed underline.
      - 12px under the button, a mono install command line with a tiny copy icon.
- **03 Agent-flow diagram.** A 14×5 hairline cell grid filling the main column. Node tiles are placed on the grid. A procedural orange pixel-dither mound rises from the bottom edge. A mono run counter sits top right.
- **04 Logo wall.** 5 placeholder customer wordmarks in grey on one row, evenly distributed. Each has its own small icon and its own type style: pixel, wide mono, sans, thin rounded mono. They are vertically centred in the cell.
- **05 Problem / proof (dark).** The background flips to #121212 across the full 1440px. Content is inset 32px inside the main column. It contains three blocks:
  - **5a Header.**
    - A boxed eyebrow chip: a 6px orange square bullet + 2 mono uppercase words.
    - An H2 below it, 4 words, one line.
  - **5b Stats grid.** A bordered 2×2 grid with asymmetric splits.
    - Row 1 is split 59% / 41%.
    - Row 2 is mirrored, 41% / 59%.
    - Each cell holds a boxed big pixel numeral, a 3-word label and a 6-word grey caption.
    - The fourth stat, "0", is the only one whose numeral is orange.
  - **5c Feature callout row.** Same border system, split 53% / 47%.
    - Left cell:
      - An orange mono eyebrow, 2 words.
      - An H2 on two lines, 5–6 words, ending in a number + unit in orange sans.
      - A white button with black text, orange pixel asterisk and a 3-word label.
    - Right cell: an isometric wireframe illustration.
- **06 Continuation.** It is beyond the capture (inferred). Close the page in the same dark system:
  - One more bordered row, or a footer of 4 link columns of mono uppercase 12px items.
  - A bottom hairline.
  - The gutters keep going.

## Scroll map

Viewport is assumed to be 1440×900. All sections are static or entrance only. Nothing pins.

- 00 Nav: 68px / 0.08 vh. Consumes 68px. Static. It is not sticky in the still. A sticky version is optional; if you make it sticky, keep the off-white background and the bottom hairline.
- 01 Strip: 54px / 0.06 vh. Consumes 54px. Static.
- 02 Hero: 432px / 0.48 vh. Consumes 432px. Entrance.
- 03 Diagram: 384px / 0.43 vh. Consumes 384px. Entrance, then a looping ambient flicker (inferred).
- 04 Logo wall: 168px / 0.19 vh. Consumes 168px. Entrance (inferred).
- 05 Problem/proof: ≈1250px / 1.39 vh. Consumes ≈1250px. Entrance per block. The breakdown:
  - Header: 266px
  - Stats: 384px
  - Callout: ≈480px (inferred, cut off in the capture)
  - Bottom padding: 120px
- 06 Continuation: ≈320px / 0.36 vh (inferred). Static.
- **Total page height ≈ 2680px (≈2.98 viewports).** The capture itself ends at ≈2050px, partway through 5c.

## Spacing

- **Frame:** gutters 184px, main column 1072px. All dividers are 1px.
- **00 Nav:** height 68px.
  - Logo starts 20px inside the main column.
  - The link group box is 38px tall with 14px horizontal padding and 28px between links. It is centred on the main column.
  - The CTA box is 38px tall with 0 16px padding and sits 20px from the main column's right edge.
- **01 Strip:** height 54px, text vertically centred.
- **02 Hero:**
  - Padding: 72px top, 64px bottom, 16px left, 20px right.
  - Headline last baseline to paragraph top: 56px.
  - The paragraph and the CTA column are top-aligned.
  - Button is 210×52px with 0 22px padding and a 10px gap between icon and label.
  - Install line sits 12px below the button.
- **03 Diagram:**
  - 0 padding. The grid touches all four section edges.
  - Inside a cell: labels are vertically centred and the icon-to-label gap is 10px.
  - The latency number sits 6px from the bottom of its cell, aligned under the diagonal.
- **04 Logo wall:** height 168px. Logos are distributed across the main column with ≈70px side inset and auto gaps of ≈80px.
- **05 Dark section:**
  - Top padding 124px to the eyebrow chip.
  - Chip is 24px tall with 0 8px padding and a 6px gap between bullet and text.
  - Chip to H2: 32px. H2 to stats grid: 40px.
  - The grid is inset 32px from both main-column edges, which gives a 1008px grid width.
  - Stat cells are 192px tall with 30px horizontal padding and content vertically centred.
  - Numeral boxes are 124×74px for 2–3 glyphs, or 66×74px for 1 glyph.
  - Numeral box to label: 28px. Label to caption: 8px.
  - Callout left cell: 44px horizontal padding, 84px top padding to the eyebrow.
    - Eyebrow to H2: 24px.
    - H2 to button: 40px.
    - The white button is 210×52px.
- **Rhythm:** the light sections butt directly against each other with only a hairline between them. There are no margins between sections. The vertical rhythm comes from cell heights and padding, not from gaps.

## Type

Three families:
- **Grotesk sans** for headlines, body and labels. Use Inter Tight or Geist.
- **Mono** for UI chrome, labels and indices. Use Geist Mono or JetBrains Mono.
- **Pixel/bitmap mono** for the accent words and big numerals. Use Departure Mono (free, OFL). Pixelify Sans is a fallback.

The body anchor is **18px**.

| Level | Family | Size (× body) | Line-height | Tracking | Weight |
|---|---|---|---|---|---|
| H1 hero | grotesk | 5.0× = 90px | 0.98 | −0.045em | 500 |
| H1 accent words | pixel mono | same box, set at 0.95em so x-heights match | 0.98 | −0.01em | 400 |
| H2 (dark section, callout) | grotesk | 3.1× = 56px | 1.05 | −0.035em | 500 |
| Stat numeral | pixel mono | 2.6× = 46px | 1.0 | 0 | 400 |
| Stat label | grotesk | 1.1× = 20px | 1.3 | −0.01em | 500 |
| Body (hero paragraph) | grotesk | 1.0× = 18px | 1.6 | −0.005em | 400 |
| Stat caption | grotesk | 0.72× = 13px | 1.5 | 0 | 400 |
| Primary button | grotesk | 0.83× = 15px | 1 | 0 | 500 |
| Nav links, nav CTA | mono, uppercase | 0.78× = 14px | 1 | 0.04em | 400–500 |
| Strip text, node labels, eyebrows, chip | mono, uppercase | 0.67× = 12px | 1.2 | 0.08em | 500 |
| Latency values, run counter, install line | mono | 0.67× = 12px | 1.2 | 0.02em | 400 |
| Gutter section index ("01"…) | mono | 12px | 1 | 0.04em | 400 |
| Logo wordmarks | mixed (pixel / wide mono / sans) | ≈1.0–1.1× | 1 | varies | 400–500 |

Line lengths:
- Hero paragraph: about 520px, 55–60ch.
- H1: no more than about 14 characters per line.
- H2 on one line: about 25 characters.
- Callout H2: wraps to two lines at about 16 characters each, inside a 440px measure.

## Colour

| Hex | Role |
|---|---|
| #F6F6F2 | Paper. Covers every light section (00, 02, 03, 04) and all light gutter cells. This is about 45% of the page. |
| #FFFFFF | Used only in the main-column cell of the 01 strip. |
| #121212 | Ink. Light-mode text, the primary button fill, and the full dark-section background (05–06). This is about 50% of the page. |
| #FF6605 | **The single accent.** |
| #FD8A56 | Lighter orange. Used for the dither mound's sparse outer pixels and the lit top face of the cube. |
| #F4CBB7 | Peach. Fills active node tiles at 60% opacity over paper, which reads as about #F5D8CA. |

Neutrals, derived:
- Light hairlines: #E2E2DC. Fainter internal diagram grid: #EAEAE4.
- Boxed UI borders on light: #CFCFC8.
- Muted text on light: #55554F for the paragraph, #8A8A84 for logos, gutter indices and inactive latencies.
- Dark hairlines and grid borders: #262626.
- Dark muted text: #8C8C88. Dark-section white text: #F6F6F2, never pure #FFF.

**#FF6605 may appear only on:**
- the H1 pixel accent words
- the hero corner bracket
- the asterisk glyphs inside buttons
- the nav active-link dot
- active node labels and their latency values
- the dither mound
- the eyebrow chip bullet and the callout eyebrow
- the single "failure" stat numeral
- the callout's number + unit
- the central cube

Never use it as a section background, a large fill, a text-link colour or the hover colour of everything.

## Surface

- **Borders:** 1px hairlines everywhere. Boxed UI elements (nav link group, nav CTA, eyebrow chip, numeral boxes) get a 1px border:
  - #CFCFC8 on light
  - rgba(246,246,242,0.12) on dark
- **Radius:** 0 on everything: buttons, chips, boxes, tiles, images and the page itself.
- **Shadows:** none.
- **Glassmorphism:** restrained, dark section only. Numeral boxes get:
  - background rgba(255,255,255,0.035)
  - backdrop-filter: blur(8px)
  - the 1px translucent border above

  This is the only "glass" on the page. Do not frost cards or the nav.
- **Diagram tiles:** an active tile is a 3-cell × 1-row rectangle filled with #F4CBB7 at 60%. Grid lines are hidden inside the tile. There is no border beyond the grid itself.

## Imagery

All imagery is built in code (SVG, or canvas for the dither). There are no photos.

1. **Agent-flow diagram nodes (section 03).**
   - **Node anatomy:** a 3-cell-wide tile.
     - Cell 1: a 1px diagonal stroke from bottom-left to top-right, plus the latency value at the bottom edge.
     - Cells 2–3: a 16px pixel icon + an uppercase mono label.
   - **Placement:** 0-indexed column, row on the 14×5 grid.
     - Retrieve: diagonal at c4 r0, label at c5, inactive. Latency "2.31" in grey.
     - Router: tile c1–c3 r1, active. Diagonal inside c1, latency "0.349" in orange.
     - Verify: diagonal at c9 r1, label at c10, inactive. Latency "1.39".
     - Tool call: tile c6–c8 r2, active. Latency "1.778" in orange.
     - Respond: diagonal at c11 r3, label at c12, inactive. Latency "2.268".
   - **Colours:** inactive labels and icons are #121212. Active labels and icons are #FF6605.
   - **Run counter:** top-right in r0, right-aligned with 18px inset. It reads "RUNS" in grey followed by an 8-digit comma-grouped number in ink.
2. **Pixel dither mound (section 03).**
   - Bottom-anchored to the section's bottom hairline. It spans about 63% of the main column (≈680px), centred slightly right of the column centre, and rises about 130px.
   - Pixels are 9px squares on a 12px pitch.
   - Density follows a bell curve in x and a falloff in y: solid #FF6605 at the bottom centre, a checkerboard and ordered dither through the middle, and sparse lone pixels at the top and outer edges. Some outer pixels are #FD8A56.
   - Seed it so the pattern is deterministic.
3. **Logo wall (section 04).** 5 invented wordmarks, each with a 16–18px glyph to its left.
   - Each uses a different style: pixel, spaced uppercase mono, grotesk, thin rounded mono, slab.
   - All are flat #8A8A84.
4. **Isometric illustration (5c right cell).**
   - Fills the cell edge to edge, about 1:1 (inferred). The background is #121212 with a faint isometric grid of 1px #1E1E1E lines.
   - Four large wireframe cubes sit near the corners, partly cropped by the cell edges. They have 1px #CFCFC8 strokes and faces of #141414 / #181818.
   - A ring of 8 small clusters of dotted/pixel-outlined mini-cubes in #6A6A66 surrounds the centre.
   - At the centre is one solid cube: top face #FD8A56, left face #FF6605, right face #C94F04. A soft orange radial glow (≈60px, about 25% opacity) sits behind it. This is the page's only glow.
5. **Icons.** 16px pixel-grid glyphs, drawn as SVG rects:
   - asterisk/spark
   - stacked bars (retrieve)
   - plus (tool call)
   - boxed check/envelope (verify)
   - up-left arrow (respond)
   - copy squares (install line)

## Motion

No values were measured. Everything below is (inferred). Durations are "not measured, 400–700ms", and nothing scroll-jacks.

**00 Nav**
- kind: static
- what moves: nothing on scroll
- from → to: —
- range: —
- reduced motion: same

**01 Strip**
- kind: static
- what moves: nothing. A number tick-up is optional (inferred).
- from → to: —
- range: —
- reduced motion: static text

**02 Hero**
- kind: entrance
- what moves: H1 line 1, H1 line 2, paragraph, CTA column, corner bracket
- from → to:
  - Text: opacity 0 → 1, translateY 16px → 0.
  - Corner bracket: opacity 0 → 1, no translate.
  - The pixel accent words additionally reveal with a stepped clip-path `inset(0 100% 0 0)` → `inset(0 0 0 0)` in 8 steps (inferred).
- range: on page load, once. Duration not measured (500–700ms), ease-out (cubic-bezier(0.2,0.7,0.2,1)), 80ms stagger in the order listed.
- reduced motion: everything visible immediately, no transforms

**03 Agent-flow diagram**
- kind: entrance, then an ambient loop
- what moves:
  - node tiles and labels
  - diagonal strokes
  - latency numbers
  - dither pixels
  - run counter
- from → to:
  - Diagonals draw: stroke-dashoffset from full length → 0.
  - Tiles: opacity 0 → 1.
  - Latency values count up from 0.
  - Dither pixels appear bottom-up in rows, opacity 0 → 1.
  - After the entrance, about 3% of the outer dither pixels toggle on and off every 600–900ms. The run counter increments by 1–3 every 1–2s.
- range: once, when the section top reaches 80% of the viewport. Node sequence: router → retrieve → tool call → verify → respond, 120ms stagger, each 400–600ms (not measured), ease-out. The dither row cascade takes 600–900ms total.
- reduced motion: the final state is drawn immediately, with no flicker and a static counter

**04 Logo wall**
- kind: entrance (inferred)
- what moves: the 5 wordmarks
- from → to: opacity 0 → 1, translateY 8px → 0
- range: once, when the section top reaches 85% of the viewport. 400–500ms, ease-out, 60ms stagger left to right.
- reduced motion: visible, static

**05 Problem / proof**
- kind: entrance, per block
- what moves:
  - 5a: chip, H2
  - 5b: the 4 stat cells and their numerals
  - 5c: callout text, illustration
- from → to:
  - Chip and H2: opacity 0 → 1, translateY 16px → 0.
  - Stat cells: opacity 0 → 1. Numerals count up to their value in pixel font over 600–900ms; the "0" counts down from 9 to 0.
  - Callout text: opacity 0 → 1, translateY 16px → 0.
  - Illustration: opacity 0 → 1, and the central cube translates 12px up → 0. Afterwards its glow breathes between 20% and 30% opacity on a 3s loop.
- range: each block plays once when its top reaches 80% of the viewport. 500–700ms, ease-out, 80ms stagger across the 4 stat cells in reading order.
- reduced motion: final values shown, no count-up, no glow loop

**06 Continuation**
- kind: static
- what moves: nothing
- from → to: —
- range: —
- reduced motion: same

**Interaction transitions** (separate from scroll; all inferred, 150–200ms ease-out):
- **Nav links:** grey → #121212 on hover. The 4px orange active dot moves to the hovered link (transform only).
- **Nav CTA and boxed buttons:** the border darkens to #121212 and the background goes to #FFFFFF.
- **Primary black button:**
  - Hover: background #121212 → #262626, and the asterisk rotates 90°.
  - Press: translateY 1px.
- **White callout button:** hover background #F6F6F2 → #E9E9E4, asterisk rotates 90°.
- **Text link:** the dashed underline becomes solid and the arrow nudges 2px up-right.
- **Copy icon:** on click the icon swaps to a check for 1.2s.
- **Diagram tiles:** an inactive node on hover gets the 60% peach fill and an orange label. That is the only hover inside the diagram.

## Responsive (below 640px)

- **Gutters:** drop both gutters and their vertical hairlines. Move each section index into the top-left of its section as a 12px mono label with 16px inset. Horizontal section hairlines stay.
- **Nav:** logo plus a boxed square menu button. Links go into a full-width dropdown list of bordered rows. The nav CTA is hidden.
- **02 Hero:**
  - Padding 48px 16px.
  - H1 at 2.7× body = 48px, still two lines.
  - Body 17px.
  - CTA column stacks under the paragraph: the full-width button, then the docs link, then the install line.
- **03 Diagram:**
  - Re-grid to 6 columns × 8 rows of square cells.
  - Nodes stack in a zigzag down the grid, keeping their 3-cell anatomy.
  - The dither mound scales to 100% width at 90px tall.
  - The counter stays top right.
- **04 Logo wall:** wraps to rows of 3 + 2, centred, with 32px row gap.
- **05 Dark section:**
  - Inset 16px. H2 at 2.2× = 40px.
  - The stats grid becomes 1 column of 4 cells, each about 150px tall.
  - The callout stacks: text cell first, then the illustration at 1:1, full width.
- **Drop:** the dither flicker loop and the cube glow loop.

## Don'ts

- **Don't round anything.** No 8px buttons, no pill chips, no rounded tiles, and no rounded frame around the page. Square corners are the identity.
- **Don't drop the hairline frame.** The gutters with their section numbers and the full-width hairlines are the design. Without them it becomes a generic dark/light SaaS page. Don't give sections margins or gaps that break the lines.
- **Don't spread the orange.** No orange section backgrounds, no orange headings beyond the specified words, no orange text links, and no orange-to-pink gradients. In the light sections the accent works because 95% of the surface is paper and ink.
- **Don't set the accent words in the sans.** The pixel/bitmap mono is the only playful note. Likewise, don't set the stat numerals in the grotesk.
- **No purple, blue or teal "AI" gradients, no glowing orbs, no mesh blobs, no neon outlines.** The single glow is the small one behind the central cube.
- **No drop shadows, and no heavy frosted-glass cards.** The glass is a 3.5% white fill with a hairline on the numeral boxes, nothing more.
- **Don't centre the hero.** The headline, paragraph and CTAs sit on a left-aligned asymmetric 2-column row.
- **Don't make the dark section an inset card.** It runs edge to edge at 1440px, and the gutter hairlines keep going through it in #262626.
- **Don't use pure #000 or #FFF for the dark sections or their text.** Use #121212 and #F6F6F2. Pure white is reserved for the 01 strip cell and the callout button.
- **Don't make the stats grid four equal cards.** The rows split 59/41 and then 41/59, and the cells share borders instead of floating with gaps.
- **Don't use an illustration library, emoji or Heroicons-style line icons.** Icons are drawn on a pixel grid. The diagram is cells, diagonals and labels, not a node graph with curved bezier edges.
- **Don't add bouncy, springy or parallax motion, scroll pinning or scroll-jacking.** Everything is a short fade with a 16px rise, once, plus two tiny ambient loops.
- **Don't let mono uppercase labels go below 12px or lose their 0.08em tracking.** Don't set the H1 at default tracking; it needs −0.045em to look engineered.