Design system · v3 spec sheet
Seven concrete moves that distinguish the Jacaranda Labs visual language from the cream-and-green Anthropic-template aesthetic. Each is implemented in the live mockup and documented here as a binding rule.
A noise field rendered on initial page load via Canvas 2D, sitting beneath the cream background at 2.5% opacity in light mode, 4% in dark mode. Mix-blend-mode: multiply (light) / screen (dark). Repaints once per resize. Signals the cream surface is intentional, not a default.
Every signature numeral on the site renders in JetBrains Mono with tabular figures and tight negative tracking. Numerals carry the engineered, terminal-native feel of the brand — mechanical anchors, not decorative ones. Used on the stats strip, score-line section labels (i. ii. iii.), how-it-works sticky column, footer year, ventures tile labels, and the final-CTA background numeral.
Replaces the standard five-up grid. Each department is a row in a single composition, separated by hairline rules. Numeral, name, outcome, icon — each in its own column. Icons stroke-draw in sequence as the user scrolls into view (1.2s with staggered 100ms delays). Refuses the obvious component layout in favour of a more confident composition.
A horizontally-scrolling strip of mono words — the things we build. workflows · pipelines · agents · dashboards · integrations · systems · automation · handoffs · orchestration · infrastructure. 80-second loop, paused on hover, respects prefers-reduced-motion. Subconscious reminder of the work, technical accent.
Three case-study cards laid out as a magazine spread, not a CMS template. First card large, top-left, padded to 48px, with the deepest body copy. Second card offsets right, slightly lower. Third card smaller, left, slightly raised. CSS Grid with explicit column spans and margin offsets — every position is intentional, not chaotic.
Two-column layout above 1024px. Left column is sticky and contains a single oversized mono numeral (7–12rem, JetBrains Mono). Right column is the three steps stacked. As the user scrolls, the numeral changes (1 → 2 → 3) with a 600ms fade-and-slide transition based on which step is in the viewport's central band. Below 1024px the layout collapses; numerals appear inline with each step.
Three large stat figures sit between the hero and the score line: 4 days · 95% · 8 weeks. JetBrains Mono, weight 500, tabular figures, divided by hairline vertical rules. Reads as substantive proof points before the buyer ever sees a feature claim.
One accent family. No secondary or tertiary accent colours.
Both modes maintain WCAG AA contrast: 4.5:1 for body text, 3:1 for large text.
Forest green carries across both modes — same brand identity, value-shifted for context.
Cream #FAFAF2 and dark green #0D1F0F are the brand's canonical neutrals.
Per DESIGN_SYSTEM.md § 7.2 — these patterns read as derivative in 2026 and must not appear anywhere on the site.
2.4s total runtime. Plays once per session. Reduced-motion users see the final state instantly.