A Framer-built marketing stage for an AI backend builder, and one of the few node/graph-editor design languages in the library alongside tldraw and Excalidraw — except here the canvas is a workflow of connected nodes rather than a freeform sketch. The page is a PURE-BLACK #000000 ground lit by a single violet-to-blue aurora raster bleeding up from the lower-right, with a dimmed-then-bright cycling headline: a grey rgba(255,255,255,.3) “Imagine. Build. Ship.” in Brockmann SemiBold at 80/80 and -3.2px tracking hands off to a bright-white swapping word beneath it. Depth is refused — the entire page carries exactly ONE box-shadow, an inset rgba(0,0,0,.05) 0 0 0 1px hairline, and separation otherwise comes from a #18181b panel step over a #101013 floor plus a 10px backdrop blur, never a drop shadow. Colour is rationed hard to a sky blue #2c91ed and a hot pink #ff69f9 used strictly as TEXT and icon accents (they never once fill a button or panel; every CTA is a white or ghost 2px-#767676 pill at 32px radius). Eyebrows are JetBrains Mono uppercase checkmark rows, body is Inter at weight 500, and radii run large and friendly at a 20px dominant. The recognisable moment is the node-graph AI Builder canvas docked at the fold with Build / Connect / Preview tabs. Motion is entirely Framer Motion JS — the stylesheet ships essentially no CSS transitions and no reduced-motion block.
⚠ needs-dashboard
Browse BuildShip in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: buildship.com (live DOM, computed styles), 2026-07-28. Framer-built. Coverage: home. Gaps: §4 hover/active/disablednot 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'soutline: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.
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.
| 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).
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.