# BuildShip — Marketing site Design Spec

> Source: buildship.com (live DOM, computed styles), 2026-07-28. Framer-built.
> Coverage: home. Gaps: §4 hover/active/disabled `not captured` — the site is a
> Framer export, so hover/press are driven by Framer Motion JS, not CSS rules
> (the only CSS state found is the form input's `outline:none`, an anti-pattern).
> 0 stylesheets blocked. Vivid blue/pink are TEXT/icon colours, never fills
> (blueBg=0, pinkBg=0). `#0000ee`×687 is Framer default-link leakage, excluded.
> Reality check: hint ("Visual backend — node-graph canvas UI") is accurate — the
> product is an AI-workflow node/graph builder shown live at the fold — but adds:
> the marketing chrome is a PURE-BLACK #000000 stage lit by one violet/blue aurora
> raster, a dimmed-then-bright cycling headline, JetBrains-Mono uppercase eyebrows,
> and white pill CTAs; the only chromatic accents are a sky blue and a hot pink.

## 1. Visual Theme & Atmosphere

A pure-black backend-builder stage. The page opens on #000000 with a single
violet-to-blue aurora glow bleeding up from the lower-right, over which a dimmed
grey "Imagine. Build. Ship." headline hands off to a bright-white cycling word
("Backend APIs"). Depth is refused: one inset hairline does all elevation, radii
are large and friendly (20px dominant, 32px pills), and colour is rationed to a
sky blue and a hot pink used only as text/icon accents. The recognisable moment
is the node-graph "AI Builder" canvas docked at the fold (Build / Connect /
Preview tabs). Feels: dark, technical, confident, product-forward.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| canvas | #000000 | page background (body) |
| panel | #18181b | cards, docked builder chrome (rgb 24 24 27) |
| panel-deep | #101013 | gradient floor of panels (rgb 16 16 19) |
| text | #ffffff | headings, bright cycling word, CTA label region |
| muted | #7c7c87 | body / secondary nav text |
| faint | #999999 | input placeholder |
| border | #767676 | 2px control / announcement-pill outline |
| accent-blue | #2c91ed | "AI Agents" word, links, node/graph accents |
| accent-pink | #ff69f9 | second accent (highlights, node dots) |

Rules: colour is a TEXT accent, never a surface — blue and pink never fill a
button or panel (every CTA is a white or ghost pill). The dimmed display grey is
`rgba(255,255,255,0.3)`; secondary washes are `rgba(255,255,255,.6/.4)`.

## 3. Typography Rules

Display **Brockmann SemiBold** (licensed geometric grotesque). Body/UI **Inter**.
Mono **JetBrains Mono** for eyebrow labels + code.
Specimen stand-ins: Space Grotesk for Brockmann, Inter, JetBrains Mono (all
Google Fonts) — the site ships Brockmann; note the swap.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display h1 (dimmed) | 80/80px | 600 | -3.2px |
| Section h2 | 48/52.8px | 600 | -0.96px |
| Sub h3 | 32/35.2px | 600 | -0.32px |
| Body p | 16/24px | 500 | normal |
| Nav link | 12px | 400 | normal |
| Eyebrow (mono) | ~13px UPPER | 500 | wide |

Patterns: display weight ceiling is 600; heavy NEGATIVE tracking at the 80px
hero (-3.2px), easing toward normal as size drops. Eyebrows are JetBrains Mono
UPPERCASE checkmark rows. Body sits at a 500 weight, not 400.

## 4. Component Stylings

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | #ffffff pill, dark label, 32px radius, 42px h, pad 8-18 | not captured (Framer JS) | not captured | not captured | not captured |
| Ghost CTA | transparent, 2px #767676 border, 32px radius, ~50px h | not captured (Framer JS) | not captured | — | — |
| Announcement pill | black, 2px #767676 border, 100px radius, pad 16-32 | — | — | — | — |
| Form input | transparent, 0 border, placeholder #999999 | — | `outline:none` (anti-pattern) | — | — |

States are `not captured`: the Framer export drives hover/press through Framer
Motion, so no CSS hover/active bodies exist. The one CSS focus rule strips the
outline — recommend `outline:2px solid #2c91ed; outline-offset:2px`.

## 5. Layout Principles

Centered single column on black; hero is vertically stacked (announcement pill →
dimmed+bright headline → mono checkmark row → CTA pair → docked builder canvas).
Framer 3-tier layout (mobile ≤809 / tablet ≤1199 / desktop). Generous vertical
rhythm; the builder canvas is a full-bleed 614px-tall docked frame at the fold.

## 6. Depth & Elevation

Radius scale (by frequency): 20px (dominant), 46px, 8px, 16px, 32px pills, 50%
circles, 40px, 24px. **Exactly one box-shadow on the page:**
`rgba(0,0,0,0.05) 0px 0px 0px 1px inset` — an inset hairline. Borders are a 2px
#767676 outline (11×). Elevation is refused: separation is the inset hairline,
the dark panel step (#18181b over #000000) and backdrop `blur(10px)`, never a
drop shadow.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| width | 0.03s | linear | progress / loader sliver |

Motion is **entirely Framer Motion (JS)** — the stylesheet declares essentially
no CSS transitions (the sole one is a 0.03s width sliver). Keyframes are Framer
built-ins only: `__framer-blink-input`, `__framer-loading-spin` (no authored
brand keyframes — a finding, not a gap). The hero cycles the display word
(dimmed grey → bright white). **No `prefers-reduced-motion` block** (anti-pattern).

## 8. Backgrounds, Effects & WebGL

Signature is a violet-to-blue **aurora** glow bleeding from the lower-right of
the black hero (a raster layer; 5 raster layers total). Dark functional
gradients only: `linear-gradient(#101013 0%, transparent)` and
`linear-gradient(#18181b 0%, #101013 100%)` for panel floors. `backdrop-filter:
blur(10px)` on floating chrome. 4 `<canvas>` elements (614×500, 2d) render the
node-graph builder animation. No Three.js/WebGL, no video, no grain.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure #000000; lift panels with #18181b, never a shadow.
- Ration colour to blue #2c91ed and pink #ff69f9 as TEXT/icon accents only.
- Use white or ghost (2px #767676) pills for every CTA at 32px radius.
- Set display at Brockmann 600 with heavy negative tracking (-3.2px @ 80px).
- Label eyebrows in JetBrains Mono UPPERCASE.

### Don't
- Don't fill a button or panel with the blue or pink.
- Don't add drop shadows — depth is one inset hairline + panel step.
- Don't exceed display weight 600.
- Don't strip focus outlines (the site's input does — do not copy it).

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| max 809px | mobile: single column, collapsed nav |
| min 810px | tablet/base layout |
| max 1199px | tablet tuning |

Framer's default 3-tier ladder (mobile ≤809.98 / min 810 / ≤1199.98). No
`prefers-color-scheme: dark` blocks (the site is natively dark), 0 container
queries, 0 reduced-motion blocks.

## 11. Agent Prompt Guide

- Canvas `#000000` · Text `#ffffff` · Muted `#7c7c87` · Border `#767676` · Accent `#2c91ed` (blue) / `#ff69f9` (pink)
- Font: Brockmann (display) / Inter (UI) / JetBrains Mono (eyebrow) · Body 16px/500 · Radius 20px card / 32px pill · Control height 42px
- Focus: none shipped — recommend `outline:2px solid #2c91ed; offset 2px` · Hover fill: white pills (JS-driven)

<buildship-marketing_design_language>
Pure-black #000000 backend-builder stage lit by one violet-to-blue aurora glow.
Panels lift to #18181b (over a #101013 floor) with a single inset hairline
(rgba(0,0,0,.05) 0 0 0 1px inset) and backdrop blur(10px) — never a drop shadow.
Display is Brockmann SemiBold (weight 600 ceiling) at 80/80 with heavy -3.2px
tracking, dimmed grey rgba(255,255,255,.3) handing off to bright white; body is
Inter 16/24 at weight 500 in #7c7c87; eyebrows are JetBrains Mono UPPERCASE.
Colour is rationed to sky blue #2c91ed and hot pink #ff69f9 as TEXT/icon accents
only, never a fill. Every CTA is a white or ghost (2px #767676) pill at 32px
radius, 42px tall. Radii run large and friendly (20px cards, 32px pills, 50%
dots). Motion is Framer Motion JS; the hero cycles a display word. Feels: dark,
technical, product-forward. Avoid: filling buttons/panels with the accents, drop
shadows, weights above 600, and stripping focus rings.
</buildship-marketing_design_language>