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 bright yellow 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 entire palette is built from four core colors, Navy, Purple, Gold, and Yellow, plus a 10-step opacity scale derived from the navy base. Click any swatch to copy its hex value.
All text is #1A1A2E 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 = YELLOW bg + BLUE 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 (#F3F2FF) 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: "#1A1A2E", // Deep navy ink
purple: "#543AFC", // Vibrant accent
gold: "#7D722C", // Muted warmth
yellow: "#FCDD0F", // Action & energy
},
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.
initial: { opacity: 0, y: 24 }
animate: { opacity: 1, y: 0 }
duration: 0.6s
easing: easeOut
trigger: useInView, -60px offset
fires: once (never re-triggers)
stagger: +0.1s per siblingThe standard entrance for all content. A gentle 24px upward slide with opacity fade. Triggers 60px before the element enters the viewport.
transition-colors150mstransition-all duration-200200mstransition-all duration-300300mstransition-opacity150mstransition-transform150msHover states use CSS transitions for instant feedback. Framer Motion is reserved for scroll-triggered entrances and complex sequences.
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 #1A1A2E at varying opacities. One color family, infinite nuance.
All primary CTAs are #FCDD0F with dark text. No exceptions.
#7D722C for metric labels, data highlights, and monospaced decorative text.
#543AFC for active states, code syntax, and subtle section tints. Used sparingly.
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 #F9F8FF with warm gray borders.
24px upward slide, 0.6s, easeOut. Stagger siblings by 0.1s.
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.