CFO Expertise

Overview

CFO Expertise is a fractional CFO services platform designed for ecommerce and D2C brands seeking financial clarity and growth optimization. The brand embodies "Professional Minimalism"—a design aesthetic that strips away unnecessary complexity to reveal clarity and confidence. The interface uses a neutral, high-contrast palette (near-black #111112 on clean white #ffffff) paired with strategic accent colors (sky blue #6ec1e4 and warm coral #f27474) to guide user attention toward key actions and insights. The emotional response is one of trust and competence: users feel they're working with seasoned financial experts, not a generic SaaS tool.

The brand voice is direct, knowledgeable, and human. CFO Expertise speaks to founders and operators in their language—practical, data-driven, yet approachable. The tone avoids jargon when possible and explains complex financial concepts with clarity. Example sentence in brand voice: "We've helped 25+ brands reach profitability by cutting through the noise and focusing on what actually moves the needle."

Colors

The color system is built on a foundation of professional neutrality with purposeful accent colors. Primary (#111112) is the near-black used for all body text, buttons, and primary interactive elements—it conveys authority and is the most-clicked color on the page (the "Get started" CTA). On-primary (#ffffff) ensures maximum contrast for accessibility and readability at 16px body text and 57px headlines.

Secondary (#6ec1e4), a soft sky blue, is reserved for supporting UI elements, highlights, and secondary CTAs like "Free consultation." It appears in badges, link states, and accent borders. Tertiary (#f27474), a warm coral-red, signals alerts, errors, and important status indicators. The surface stack progresses from pure white (#ffffff) for the main canvas through increasingly darker gra

Typography

The typography system uses DM Sans exclusively, a geometric sans-serif that balances warmth with professionalism. Display (60px, 700 weight, -0.02em tracking) anchors hero sections and major announcements. Headline-lg (40px, 600 weight) is used for page titles like "Scale smarter with an Expert Ecommerce CFO," while headline-md (28px, 600 weight) breaks up content sections. Body text is set at 16px (body-md) with 400 weight and 24px line-height, ensuring comfortable reading at typical viewing distances. Labels (14px, 500 weight, 0.01em tracking) are used for button text and form labels. The system enforces a 1.5x scale between sizes, creating a predictable rhythm. For small labels over busy backgrounds or in dense tables, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to maintain legibili

Layout

The layout uses a 12-column grid with a maximum container width of 1280px, maintaining readability on large screens while adapting fluidly on mobile. The hero section employs a 50/50 split: left column for headline and CTA, right column for imagery. Section spacing follows the lg token (40px) for major breaks and md token (24px) for subsection separation. The gutter (24px) is applied consistently to all horizontal padding, creating a breathing room that prevents content from feeling cramped. Cards and content blocks use md spacing (24px) for internal padding, with sm spacing (12px) for tighter groupings within cards. The design avoids centered text in body copy, preferring left-aligned paragraphs for scannability. Whitespace is treated as a design element—generous margins around CTAs and h

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards and containers) uses elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) combined with a 1px solid border in outline-variant (#b3b3b3), creating a crisp, defined edge. Level 3 (modals, dropdowns, and elevated cards on hover) applies elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) with the same border treatment. This restrained shadow approach keeps the interface feeling clean and modern, avoiding the heavy drop-shadows common in older de

Shapes

The shape philosophy is "Architectural Clarity"—minimal rounding that signals approachability without sacrificing professionalism. Buttons use rounded.DEFAULT (0.5rem / 8px), a subtle curve that feels modern and clickable without being playful. Cards and containers use rounded.lg (1rem / 16px) for a slightly more generous radius that softens the rectangular form. Input fields match buttons at rounded.DEFAULT (8px), creating visual consistency in the interaction layer. Badges and pills use rounded.full (9999px) for their circular appearance, reserved for status indicators and tags. The rational

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses a solid near-black background (#111112) with white text, 18px vertical padding, 30px horizontal padding, and 8px border-radius. On hover, the background shifts to primary-container (#2b2b2b), a 2-step darkening that signals interactivity. The transition should use a 150ms ease-out timing function for snappy feedback. Button-secondary uses a light background (surface-container-low, #f5f2f0) with primary text, ideal for secondary actions like "Learn more." Button-ghost is transparent with a 1px border in outline (#cccccc), used for tertiary actions; on hover, it gains the light background. All buttons use label-md typography (14px, 500 weight) and maintain a minimum height of 48px for touch tar

Do's and Don'ts

**Do**

• Do use primary (#111112) for all primary CTAs and interactive elements—it's the most-trusted color on the page and drives conversions.
• Do maintain 24px gutters and 40px section spacing to create breathing room that makes content feel intentional and scannable.
• Do apply 8px border-radius consistently to buttons and inputs; avoid mixing sharp corners with rounded elements in the same interface.
• Do use secondary (#6ec1e4) sparingly for accents and supporting UI; overuse dilutes its impact and confuses the visual hierarchy.
• Do apply elevation.sm (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and use 1px borders in outline-variant (#b3b3b3) for crisp, modern layering.
• Do set body text at 16px with 24px line-height and left-align paragraphs for maximum readability and scannability.

**Don't**

• Don't use tertiary (#f27474) for primary CTAs or positive actions—it's reserved for errors and alerts; using it elsewhere creates cognitive confusion.
• Don't apply shadows heavier than elevation.md (0 4px 12px rgba(0, 0, 0, 0.08))—the system is built on subtle layering, not dramatic depth.
• Don't center-align body copy or use justified text; it reduces scannability and contradicts the professional-minimalist aesthetic.
• Don't mix rounded-corner radii within the same component family (e.g., 8px buttons with 20px inputs); consistency signals intentionality.
• Don't use colors outside the defined palette for UI elements; the system is closed and intentional—custom colors break the visual contract.
• Don't apply text-shadow or text-stroke effects to body text; DM Sans is legible at 16px without embellishment.