Design System

Color tokens

Dual-mode tokens. Light mode keeps the warm-neutral palette; dark mode swaps to the blueprint near-black. Universal tokens (yellow accent, gradient palette, status colours) sit on :root — only their backgrounds change between modes.

Typography

Display set in Space Grotesk (geometric grotesque sans, weight 500); product-UI contexts use Poppins. Two display weights primarily — 500 for headings, 300 for the softer pull-quote voice. Mono uppercase labels stay as a typographic-drafting ornament — they signal section, decision, status — not weight.

Editorial scale (preserved)

Product-UI scale (new)

22 / 18 / 16 px sizes from the blueprint refactor. Use inside Bento card bodies, dashboards, design-system showcase — never for hero or cover headings.

Spacing scale

Base unit: 4 px. Every spacing value is a 4-multiple. Body line-height is 1.7×, so paragraph gaps of 24 px tie text together (≈0.9 line) while section breaks of 64–96 pxread as “new chapter” (≈2.4–3.6 lines).

Bento layout

Cells share borders rather than sit in a gap. Sharp corners (border-radius: 0) on every grid container — only buttons, badges, and icon boxes carry radius. Plus markers sit at every stroke intersection as a typographic-drafting ornament; they auto-generate for uniform grids and accept an explicit array for asymmetric layouts.

Plus marker

12 × 12 absolute span, two pseudo-element strokes painted in --plus-color. Adapts to theme automatically.

3-column uniform grid

Auto plus-marker generation: 8 markers at 4 corners + 4 column-edge midpoints.

Asymmetric 2:1 grid

Pass a templateoverride. Each cell stamps its own corner markers, so asymmetric widths still land “+” marks on every actual stroke intersection.

Conventions

Rules every Bento-style surface must obey. Verified against the case-study hero audit on 2026-05-16; any new cell or frame inherits these.

Cell sizing

Every cell is box-sizing: border-box — padding and border are inside the declared width. Content growth never inflates the outer footprint. Frames with a fixed max-w-* stay at that width at every viewport above the breakpoint; below it they fluid-shrink within the page gutter.

Text overflow

Text containers carry overflow-wrap: anywhere so a rogue long token (URL, email, compound title) breaks inside the cell instead of piercing the right border. Set it on the content wrapper — it inherits to all descendants in one line.

Padding rhythm

Cells use p-card (24 px × 36 px from --space-card-x/y). Hero-class frames step up to px-6 md:px-12 lg:px-16 × py-12 md:py-16 lg:py-20. Always symmetric L/R and T/B at every breakpoint — never asymmetric padding on a Bento surface.

Borders

All strokes 1 px, --border-default for cell-and-frame edges, --border-divider for internal blueprint grids (HeroFrame stubs, hairlines). Adjacent cells share borders rather than sit in a gap. Border colour is intentionally subtle (~1.4:1 against page bg) — lines read as architecture, never compete with text.

Plus markers

12×12 glyph painted in --plus-color. Each cell stamps its own four corners; adjacent cells stamp coincident markers that collapse visually into one. This anchors markers to actual cell strokes at every breakpoint — never compute marker positions as percentages of the grid container (those drift on column reflow).

Responsive caps

Every page sits inside BlueprintFrame max-w-[1440px]. Ultrawide / 4K viewers see intentional --bg-page margins on either side — the grid never stretches to viewport width. Below md (768 px) every BentoGrid collapses to a single column via the .bento-grid rule in globals.css.

Hover

Only cells passed interactive light up on hover — informational cells must stay quiet. The hover gradient repaints the border colour but never changes border thickness or position, so adjacent cells don't jitter.

Hero subsystems

Two deliberately separate frames: HeroFrame (Homepage, horizontal hairlines at 25 % / 75 % — denser internal grid) and CaseStudyHeroFrame (case study + background mini-case heros, hairlines at 15 % / 85 % — taller content band). Keep them separate; do not parameterise into one.

Hover gradient

Site-wide hover language for cards. Hover any cell below — a static blue → cyan → orange gradient paints the four borders, and the background shifts from --bg-page to --bg-elevated. No shadow. The same palette drives the Intel hover on text labels (Section Anchors, NavBar tabs, body links).

Primitives

Cards

CaseCard

One card type for every project — single example below. Hierarchy on the homepage comes from grid placement, not card-level distinction. The card has two internal cover modes (default static mockup, with-videoautoplay loop used only by uPALMS) that swap cover content but keep the same frame, padding, heading scale, and metric pill — so they don't need separate demonstrations.

Mock case study

A demonstration card. Same shape, padding, and hover as every other card site-wide.

100K+ users

FragmentCard

Mock case / system mapping

Mock case / decision callout

Mock case / token system

Content components

BeforeAfter

Before

After

Effects

<PulseRibbon className?: string />

// Size + spacing controlled by the wrapper. Recommended footprint:
// height 28 → 40 (mobile → desktop), full container width, paddings
// of py-16/20/24 around it so the strip clears neighbouring borders.

Placeholders

CaseImage

Frontmatter-driven placeholder with detailed content description for asset delivery. Expand the spec below each placeholder to see what artwork is needed.

ASCII art animations

Ambient animated backgrounds rendered to a `<canvas>` using the same character ramp and warm-fire palette as the global ASCII cursor. Tuning constants live in `lib/ascii-art.ts` so cursor and backgrounds share one source of truth.

Placement rules

• Negative-space only — never behind text, links, buttons, or any content.
• Inside truly empty bento cells (existing placeholder cells or newly added empty cells).
• Inside dedicated decorative panels — <HeroFlankingCells> outside the centered hero, <TitleFlankingCell> to the right of a narrow title.
• Inside side-rail bands where the existing `HeroBackground` already places non-text shape clusters (HomePhilosophy).
• Touch / reduced-motion users still see one static frame so layout never shifts; the animation just stops.

Motifs

The site ships with five motifs. shootingStar is the production motif used in every Home + case-study empty zone — the other four are reserved for future spots. Each preview runs at density="present" inside a 240×120 frame with horizontal grid hairlines at 120 px pitch, so the preview mirrors the production placement.

Density tiers

Three tiers control opacity and base particle / star count. Most empty zones use whisper; the hero flanking rails use present for a deliberate visual hook. prominent is reserved for the single largest empty area on the page.

Breakpoint multipliers

The base config in ASCII_MOTIFS is the desktop ceiling. Smaller viewports scale particle / cell counts down automatically inside <AsciiBackground> via getViewportDensityMultiplier(width).

Wrapper components

Two pre-built layers mount the grid + animation into the standard negative-space locations. Both render only at xl:(≥ 1280 px); below that they collapse cleanly. Neither carries its own box border — the visual frame comes from the surrounding section, so the new layer reads as part of the page's grid instead of as a floating tile.

Horizontal grid lines

<HorizontalGridLines> draws hairlines every pitch CSS pixels (default 120 px) across its host using a single CSS repeating-linear-gradient — zero per-line DOM nodes, no JS, theme-aware via the shared --border-default token. Lay these into any negative-space zone so the empty area reads as a continuation of the blueprint grid instead of as a void.

API

<AsciiBackground
  mode="shootingStar" | "flowField" | "pulseGrid" | "emberField" | "contour"
  density="whisper" | "present" | "prominent"
  className?: string
/>

All canvases pause via IntersectionObserver when scrolled out of view, honor prefers-reduced-motion: reduce (single static frame, no rAF), and run inside a pointer-events-none wrapper so clicks pass straight through to the page beneath.