A living reference for the visual language behind Maven Cost Segregation. Every color, every typeface, every interaction, documented, demonstrated, and ready to use.
Maven exists at the intersection of engineering precision and financial strategy. Our design language reflects that duality, it's built with the rigor of a technical schematic but presented with the confidence of a premium brand. We don't do "corporate generic." We don't do "startup playful." We do something rarer: authoritative elegance.
The visual system draws from the world of architectural blueprints and engineering documentation, monospaced labels, precise grid structures, and a palette that feels like ink on vellum. But it's never cold. The emerald CTAs, the animated code blocks, the subtle hover states, these are the moments of warmth that make the experience feel alive.
And then there's the Tax Hack Runner. Because a brand that takes its work seriously doesn't have to take itself seriously. The game is a deliberate contrast, a moment of genuine fun embedded in a professional context. It says: "We're experts, and we're also human."
Every visual element serves a purpose. Decorative flourishes are replaced by structural motifs: grid lines, section labels, code chrome: that reinforce the engineering narrative.
A single color family (deep navy) at varying opacities creates the entire tonal range. This constraint produces harmony: nothing fights for attention, everything belongs.
Cards and containers have zero border-radius. Buttons get a modest rounded-md. This tension between sharp structure and soft interaction points creates visual interest.
The Tax Hack Runner game, animated code blocks, and scroll-triggered visualizations aren't gimmicks: they're strategic differentiators that make Maven memorable in a sea of identical financial services sites.
The final palette is built from seven curated colors: Deep Space Blue, Light Linen, Linen, Dark Goldenrod, Dark Slate Grey, Emerald, and Pale Slate, with White as the primary canvas. White remains dominant; Light Linen is the default non-white surface; Linen is reserved for warmer, smaller moments. Click any swatch to copy its hex value.
This color is held in reserve for potential future use — alert badges, sale tags, or urgent callouts. It is NOT part of the active palette.
All text is #0C2D4C at varying opacities. One color family, ten levels of emphasis. This is the secret to tonal harmony.
DM Sans carries the conversation. JetBrains Mono adds the engineering edge. Playfair Display brings editorial gravitas. Space Grotesk stands by for geometric precision.
Primary · Body & Headings · Weights 300–900
Maven's licensed professional engineers conduct forensic-level cost segregation studies that reclassify building components for accelerated depreciation, delivering six-figure tax savings within 30 days.
Monospaced · Code & Labels · Weights 400–500
// section_labels use this font
const savings = calculateDepreciation({
propertyValue: 2_500_000,
buildingType: "commercial",
studyYear: 2026
});
console.log(savings.yearOneDeduction);
// → $412,000Serif · Editorial & Blog · Weights 400–900
"The IRS allows property owners to reclassify building components into shorter depreciation schedules, a strategy that can unlock hundreds of thousands in tax savings during the first year of ownership."
Geometric Sans · Display & Technical · Weights 300–700
Live renders of the core UI patterns. These aren't mockups, they're the actual components used across the site.
Rules: rounded-md (6px) · Primary = EMERALD bg + WHITE text · Secondary = DIVIDER border + BLUE text · Always include ArrowRight icon · px-7 py-3.5 standard padding
No border-radius. Border color is DIVIDER. White background. Sharp corners reinforce the blueprint aesthetic.
BLOCKS background (#F7F7F5) for subtle emphasis. Same sharp corners and border treatment.
BLUE background for high-contrast sections. White text at varying opacities. Yellow accents.
Rules: No border-radius · DIVIDER border · px-4 py-3 padding · text-sm (14px) · No box-shadow · Sharp corners match card aesthetic
// Maven Design System, Token Architecture
const theme = {
colors: {
blue: "#0C2D4C", // Deep Space Blue ink
emerald: "#00A878", // Accent & CTAs
gold: "#AE9142", // Dark Goldenrod
slate: "#285858", // CTA hover / secondary
},
fonts: {
body: "DM Sans",
code: "JetBrains Mono",
serif: "Playfair Display",
},
radius: {
cards: "0px", // Sharp. Always.
buttons: "6px", // rounded-md
avatars: "50%", // rounded-full
}
};The signature motif. JetBrains Mono at 12px, TEXT_GHOST color (25% opacity), snake_case naming, preceded by "//". Appears above every section heading.
Consistent spacing creates rhythm. The entire site uses a predictable vertical cadence of 96px section padding, 48–64px content gaps, and a 1280px max-width container.
py-2496pxSection vertical paddinggap-1664pxHero grid guttergap-1248pxContent grid guttermb-1664pxHeader to contentmb-1248pxHeading to gridmb-624pxHeading to paragraphmb-416pxLabel to headinggap-624pxCard grid gapgap-416pxButton group gapgap-312pxIcon + text inlineEvery animation serves the narrative. Content fades in as you scroll, reinforcing the feeling of discovery. Nothing bounces, nothing spins, nothing distracts.
opacity: 0 → 1 transform: translateY(16px) → none duration: 0.45s (0.28s on mobile) easing: ease-out trigger: shared IntersectionObserver fires: once (unobserve after reveal) stagger: --fade-delay per sibling
The standard entrance for all content. A 16px upward slide with opacity fade, one shared observer for the whole page. Honors reduced-motion and no-JS.
transition-colors150mstransition-all duration-200200mstransition-all duration-300300mstransition-opacity150mstransition-transform150msHover states use CSS transitions for instant feedback. Scroll reveals use the shared FadeIn island in `app/components/FadeIn.tsx`.
Subtle code motifs appear throughout the site, monospaced labels, syntax-colored blocks, file-name chrome bars, and blinking cursors. These aren't decorative afterthoughts. They're the visual signature that says "this was built by engineers, for people who value precision."
The Tax Hack Runner is an endless-runner game embedded directly into the Maven website. You play as a property owner dodging IRS audit obstacles while collecting depreciation deductions. It's built with HTML5 Canvas, runs at 60fps, and features a global leaderboard.
Why put a game on a tax advisory website? Because Maven isn't just another financial services firm. The game is a deliberate brand statement, it says we're confident enough in our expertise to have fun with it. It makes the site memorable, shareable, and genuinely enjoyable to visit.
The game uses the same design tokens as the rest of the site. The scrolling background text, the color palette, the typography, it all belongs. It's not a foreign element bolted on; it's an integrated part of the Maven experience.
The game isn't a distraction, it's a conversion tool. Players who engage with the game spend 3x longer on the site. The game-over screen includes a CTA to schedule a free consultation. Fun drives engagement, engagement drives leads.
A brand that takes its work seriously doesn't have to take itself seriously. The Tax Hack Runner is the proof. It lives at the intersection of professionalism and personality, the exact space Maven occupies.
Built with the same tokens, the same grid, the same attention to detail as every other page on the site. The only difference? This one makes you smile.
Every text shade is #0C2D4C at varying opacities. One color family, infinite nuance.
All primary CTAs are #00A878 with white text. No exceptions.
#AE9142 for metric labels, data highlights, and monospaced decorative text.
#00A878 for active states, badges, and accents. Dark Slate #285858 is the hover.
Cards, inputs, and containers have zero border-radius. Only buttons and avatars get rounding.
All UI text. JetBrains Mono for code. Playfair Display for editorial moments.
Monospaced, snake_case, 25% opacity. Above every section heading.
Sections alternate between #FFFFFF and #F7F7F5. Linen #F5EEE4 is a small warm accent only.
16px upward slide, 0.45s, ease-out. Shared IntersectionObserver. Stagger siblings with delay.
Depth comes from color layering, not shadows. The only shadow is on nav dropdowns.
This design system powers every page, every component, and every interaction on the Maven site. It's engineered for consistency and built for scale.