Design system · v3 spec sheet
Summary
The Jacaranda Labs design system, version 3.1. Geist as the display typeface, Inter Tight for body, JetBrains Mono for eyebrows and signature numerals. Forest green and cream as the locked palette across light and dark modes. The J Labs brand mark system has four pieces: a wordmark plus three avatar variants (filled forest circle, cream outline circle, forest squircle). Seven signature visual moves distinguish the brand from generic SaaS aesthetics: procedural grain, signature mono numerals, horizontal score line replacing the five-up grid, mono ticker below hero, editorial asymmetry on case studies, sticky-scroll how-it-works numerals, and the stats numerals strip. Performance budget: Lighthouse 100 across Performance, Accessibility, Best Practices, and SEO on every page in production.
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.