StratFlow

Overview

StratFlow is a professional enterprise SaaS platform designed for strategic workflow management and administrative billing operations. The design system embodies "Refined Minimalism"—a philosophy that prioritizes clarity, efficiency, and trustworthiness through a carefully calibrated blue-indigo accent palette paired with a neutral, light surface stack. The brand serves teams who demand precision and speed: project managers, billing administrators, and strategic planners who need to move fast without sacrificing visual hierarchy or cognitive load. The emotional response is one of calm competence—the interface feels organized, responsive, and in control, never cluttered or overwhelming.

The voice is professional yet approachable, direct without coldness. StratFlow speaks in active, outcome-focused language: "Manage your billing cycle in one view," "Track project spend in real time," "Approve invoices with confidence." The vocabulary avoids jargon when possible, but embraces domain-specific terms ("billing cycle," "invoice approval," "project allocation") when they serve clarity. Tone is confident but never arrogant; helpful but never patronizing. Example sentence in brand voice: "Your billing dashboard updates every 30 seconds—no manual refresh needed."

Colors

The StratFlow color system is anchored in a vibrant indigo primary (#4f46e5) that signals interactivity, trust, and forward momentum. This primary is used exclusively on call-to-action buttons (Sign In, Submit, Approve), active navigation states, and focus indicators. The supporting palette includes a neutral secondary (#64748b) for supporting text and disabled states, and a cyan tertiary (#0891b2) for status indicators and secondary actions. The surface stack is deliberately light and airy: surface (#ffffff) for cards and containers, surface-container-low (#f1f5f9) for subtle backgrounds, and surface-container-highest (#94a3b8) for disabled or recessive elements. On-surface text is a deep slate (#0f172a) at 100% opacity for primary content, dropping to #475569 (on-surface-variant) for sec

Typography

The StratFlow typography system uses Inter as the primary typeface, a geometric sans-serif that conveys modernity and clarity at all sizes. The hierarchy spans eight levels: display (60px, 700 weight) for hero statements, headline-lg (40px, 700) for page titles, headline-md (28px, 700) for section headers, title-lg (20px, 600) for card titles and form labels, body-lg (18px, 400) for long-form content, body-md (16px, 400) for standard UI text and form inputs, label-md (14px, 600) for button text and badges, and label-sm (12px, 500) for helper text and metadata. Letter-spacing is tightened on display and headline levels (-0.04em and -0.02em respectively) to create visual weight and sophistication, while body and label levels use neutral or slightly positive tracking (0em to 0.05em) for reada

Layout

StratFlow uses a 12-column fluid grid with a fixed max-width of 1200px, centered on the viewport. The container padding is 24px on desktop (gutter spacing), scaling to 16px on tablets and 12px on mobile to preserve content breathing room. Page sections are separated by 40px (lg spacing) vertically, creating a clear rhythm that guides the eye down the page. The sidebar (260px on desktop, collapsing to 60px when minimized) is fixed on the left, with the main content area (app-main) offsetting by margin-left: 260px to accommodate. Cards and form containers use 24px internal padding (md spacing), with 12px (sm spacing) between form fields to create visual grouping without excessive whitespace. The auth card on the login page is centered and constrained to 420px max-width to focus attention. Wh

Elevation & Depth

Depth in StratFlow is conveyed through a subtle shadow system that respects the light, airy aesthetic. The base elevation uses no shadow (flat surfaces on the background). Level 1 (standard cards, input fields) applies box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), creating a barely perceptible lift that separates the element from the background without drawing attention. Level 2 (hovered cards, modals) escalates to box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1), providing clear visual separation and inviting interaction. Level 3 (dropdowns, tooltips, full-screen

Shapes

StratFlow employs a "Soft-Technical" shape philosophy that balances approachability with precision. Buttons and primary interactive elements use 8px border-radius (lg in the token system, or 1rem), creating rounded corners that feel modern and inviting without sacrificing the professional aesthetic. Form inputs use 8px radius as well, maintaining visual consistency with buttons and creating a cohesive interaction zone. Cards and containers use 12px border-radius (xl, or 1.5rem) to provide slightly more softness at larger scales, making them feel like distinct, contained regions. The sidebar an

Components

Action Elements Buttons in StratFlow come in two primary variants: button-primary and button-secondary. The primary button uses background-color: #4f46e5 (primary), text-color: #ffffff (on-primary), padding: 8px 18px, height: 48px, border-radius: 8px, and font-weight: 600. On hover, the background shifts to #6366f1 (primary-hover) with a 150ms transition. On active/press, it darkens to #4338ca (primary-dark). The secondary button uses a transparent background with a 1px border in #64748b (secondary), text-color: #4f46e5 (primary), and the same padding and height. On hover, the background becomes #f1f5f9 (surface-container-low) and the border shifts to primary. Both buttons use cursor: pointer and apply transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth feedback.

Do's and Don'ts

**Do**

• Do use the primary indigo (#4f46e5) exclusively on CTAs, active states, and focus indicators—never on backgrounds or body text.
• Do apply the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) for consistent, responsive feedback.
• Do maintain the 8px unit spacing grid rigorously: use multiples of 8px (4px, 12px, 24px, 40px, 64px) for padding, margins, and gaps to preserve visual rhythm.
• Do use Inter at 600 weight for all labels, buttons, and headers; 400 weight for body text and inputs to create clear typographic hierarchy.
• Do apply the three-level shadow system (sm, md, lg) based on elevation: cards at sm, hovered elements at md, modals and dropdowns at lg.

**Don't**

• Don't use primary color on backgrounds, disabled states, or non-interactive elements—reserve it for actions and focus states only.
• Don't apply border-radius greater than 12px on cards or containers; use 8px for inputs and buttons, 12px for cards, 9999px only for badges and pills.
• Don't mix font families within a single component; Inter is the system typeface—use it for all UI text, never system-ui or serif fonts.
• Don't apply shadows to the sidebar or fixed navigation elements; use background color and borders instead to maintain visual separation.
• Don't use color alone to convey status; always pair color with an icon, text label, or badge to ensure accessibility for color-blind users.