doola

Overview

doola embodies **Optimistic Pragmatism**—a design philosophy that merges the energy of a startup with the clarity of enterprise software. The brand serves founders and small business operators who need compliance and financial management without the complexity. The UI evokes confidence through warmth: a golden-yellow primary accent (#fad333) radiates approachability, while deep navy secondary elements (#276ef1) anchor trust and professionalism. The emotional response is one of relief—users feel that business administration is finally within reach, not a burden.

The voice is conversational yet authoritative: direct, encouraging, and free of jargon. doola speaks to founders as peers, not subordinates. Vocabulary favors action words ("Get Started," "Explore," "Book") and concrete outcomes ("Faster, Cheaper, Easier") over abstract features. Example sentence in brand voice: "Your compliance checklist just got simpler—file your W-2 by Jan 31, and we'll handle the rest."

Colors

The color system is built on **Warm Minimalism**: a light, neutral canvas (#ffffff surface) punctuated by two distinct accent roles. Primary (#fad333) is the signature brand color—deployed on all CTAs, key interactions, and hero highlights. It conveys optimism and forward momentum without aggression. Secondary (#276ef1) is the trust anchor, used for links, secondary buttons, and data-driven UI elements (charts, badges). Tertiary (#0d792c) reinforces positive outcomes and compliance success states. The surface stack ranges from pure white (#ffffff) to warm off-whites (#faf9f7 for containers), with a deliberate absence of cool grays—every neutral leans toward warm beige tones (#e8e4dd, #ddd9d0) to maintain the approachable aesthetic. On-surface text is deep charcoal (#1f1f1f), never pure bla

Typography

The type system uses **Inter exclusively** across all scales, chosen for its geometric clarity and superior readability at small sizes (critical for compliance forms and data tables). The hierarchy is built on a 4px baseline grid: display (60px, 700 weight) for hero headlines; headline-lg (40px, 700 weight) for section titles; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight) for card headers; body-lg (18px, 400 weight) for long-form copy; body-md (16px, 400 weight) for standard UI text; label-md (14px, 500 weight) for buttons and form labels; label-sm (12px, 500 weight) for captions and metadata. Letter-spacing is tightened on display and headlines (-0.04em to -0.01em) to increase visual impact and reduce perceived size; body text uses 0.01em spacing for legibili

Layout

The layout uses a **12-column fluid grid** with a max-width of 1224px, centered on viewport. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing; sm (12px) for tight component padding; md (24px) for standard section gutter and card padding; lg (40px) for major section separation; xl (64px) for hero spacing and full-width section breaks. White space is generous but purposeful—sections are separated by lg (40px) gaps to create visual breathing room, while internal card content uses md (24px) padding to balance density with scannability. The container max-width of 1224px ensures text lines stay below 80 characters for optimal readability. Hero sections use asymmetric layouts (text on left, imagery on right) with lg spacing between columns. Form fields and input gro

Elevation & Depth

Depth is conveyed through **subtle layering and soft shadows**, never through darkness or harsh contrast. The elevation system uses three levels: Level 1 (Base, no shadow) for the white background and primary surfaces; Level 2 (Standard Cards, md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) for content cards, input fields, and modals—this shadow creates gentle separation without visual heaviness; Level 3 (Elevated/Floating, lg shadow: 0px 0px 12px rgba(0, 0, 0, 0.18)) for floating action buttons, tooltips, and dropdown menus. Hover states increase shadow depth by one level (Level 1 → Level 2, Level

Shapes

The shape language follows **Soft Modernism**: rounded corners are generous but not organic, signaling friendliness without sacrificing professionalism. Buttons and primary CTAs use full (9999px) border-radius to create pill-shaped buttons (48px height, 16px 24px padding) that feel inviting and clickable. Cards and containers use xl (32px) radius for hero sections and featured content, creating a distinctive rounded-rectangle silhouette that is instantly recognizable as doola. Standard cards and input fields use lg (20px) radius for a softer, more approachable feel than sharp corners. Form inp

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** (backgroundColor: #fad333, textColor: #645000, height: 48px, padding: 16px 24px, rounded: full, fontWeight: 500) is used for all primary CTAs: "Book a Free Consultation," "Get Started for Free," form submissions. On hover, shift backgroundColor to #f5c700 with a 200ms ease transition—no shadow change, only color shift to maintain visual weight. **button-secondary** (backgroundColor: #2b2f3e, textColor: #ffffff, same dimensions) is used for secondary actions like "Sign In" or "Learn More." **button-ghost** (transparent background, 1px border in secondary color #276ef1, textColor: #276ef1) is used for tertiary actions and navigation links within cards. All buttons use Inter 500 weight (label-md) and include a

Do's and Don'ts

**Do**

• Do use primary (#fad333) exclusively on CTAs and hero accents—it's the signature brand color and should feel special, not ubiquitous.
• Do maintain lg (40px) spacing between major sections to create visual breathing room and reduce cognitive load on compliance-heavy pages.
• Do apply Inter 500 weight (label-md) to all button text and form labels for consistent, scannable UI hierarchy.
• Do use card-accent (primary-container #fef4cc) for featured compliance checklists and success states to reinforce positive outcomes.
• Do transition all interactive properties (color, shadow, background) over 200ms with ease timing to signal responsiveness without jarring motion.

**Don't**

• Don't use primary (#fad333) on body text or backgrounds—it's an accent color, not a surface. Reserve it for interactive elements only.
• Don't mix rounded radii arbitrarily; stick to the scale (sm 4px, md 12px, lg 20px, xl 32px, full 9999px) to maintain visual consistency.
• Don't add borders to cards; use shadow (md: 0 3px 8px rgba(0, 0, 0, 0.15)) and background color shifts instead to preserve the soft, approachable aesthetic.
• Don't use pure black (#000000) for text; always use on-surface (#1f1f1f) or on-surface-variant (#4d566c) to reduce eye strain and maintain warmth.
• Don't apply more than one shadow level at a time; elevation is binary (Level 1, 2, or 3), not cumulative. Avoid stacking shadows or using multiple box-shadow values.