Laurel

Overview

Laurel is an enterprise AI platform that transforms time tracking from administrative burden into strategic business intelligence. Serving legal and accounting firms, the design system embodies "Precision Minimalism"—a philosophy that combines clean, professional aesthetics with purposeful data visualization. The interface prioritizes clarity and efficiency: every pixel serves the user's need to understand time allocation, revenue impact, and operational patterns. The emotional response is one of control and insight—users feel empowered to make data-driven decisions about resource allocation and profitability. The brand voice is authoritative yet approachable, speaking the language of firm leadership: precise, outcome-focused, and grounded in measurable business value. Example sentence: "Your team's 847 billable hours this month generated $156,000 in revenue—here's where to optimize."

Colors

The color palette is anchored by a deep navy primary (#1c0b7a) that conveys trust, professionalism, and enterprise-grade reliability. This primary is deployed on all call-to-action buttons (REQUEST DEMO, primary navigation actions) and interactive focus states. The secondary accent is a warm, energetic orange (#f86a0c) used sparingly for highlights, success states, and secondary CTAs to inject urgency and approachability into the otherwise formal palette. A supporting lavender tertiary (#c7befa) provides a softer accent for tertiary interactions and container highlights. The surface stack is anchored in pure white (#ffffff) for maximum clarity and accessibility, with carefully calibrated grays (#eaeaea, #ececec, #d5d5d5) for borders, dividers, and container backgrounds. Text is rendered in

Typography

The type system is built on two distinct families: Featuredeck web for display and headline scales (56px, 40px) to establish visual hierarchy and brand personality, and Inter for body, label, and utility text (18px, 16px, 12px) to ensure legibility and professional polish. The pairing creates a clear distinction between marketing/hero content (Featuredeck's distinctive serif-like character) and functional UI (Inter's neutral efficiency). Display text (56px, 400 weight) is used exclusively for hero headlines and major section titles; headline-lg (40px) for subsection headers; headline-md (28px, 600 weight) for card titles and modal headers. Body-lg (18px, 400 weight) is the default for paragraph text and long-form content; body-md (16px) for UI labels and secondary content. Label-md (16px,

Layout

The layout system uses a 12-column fluid grid with a fixed container max-width of 1280px, centered on viewport. Page rhythm is established through consistent spacing: lg (40px) separates major sections (hero, features, testimonials); md (24px) separates cards and component groups within sections; sm (12px) separates inline elements and list items. The gutter (24px) is applied as left/right padding on all containers to maintain breathing room on smaller viewports. Header padding is 72px horizontal to establish premium positioning and visual weight. White space is treated as a first-class design element: the hero section uses 64px (xl spacing) above and below the headline to create visual isolation and focus. Container max-width of 1280px ensures text lines never exceed 80 characters, mainta

Elevation & Depth

Depth in Laurel's design is achieved through subtle, restrained shadows that suggest layering without visual heaviness. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.04)) for cards and subtle containers, creating a barely-perceptible lift; md (0 4px 12px rgba(0, 0, 0, 0.08)) for modals, dropdowns, and elevated cards on hover; lg (0 16px 24px rgba(0, 0, 0, 0.08)) for full-screen overlays and critical modals. Shadows are always soft and diffuse (no hard edges) to maintain the professional, approachable aesthetic. Interactive elements (buttons, inputs) do not use shadows in

Shapes

The shape philosophy is "Technical Precision"—rounded corners are used strategically to soften the formality of enterprise software without sacrificing clarity or professionalism. Buttons use lg (1rem / 16px) border-radius to create a friendly, approachable feel while maintaining clear clickability; this is the most-used radius on the page. Cards and containers use xl (1.5rem / 24px) for a more generous, breathing quality; this is applied to product showcase cards and major content blocks. Input fields use DEFAULT (0.5rem / 8px) for a more technical, form-like appearance that signals data entr

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #1c0b7a background with white text, 16px Approach font weight 600, 18px vertical padding and 32px horizontal padding, and 1rem border-radius. On hover, the background transitions to primary-container (#3d2ba3) with a 200ms cubic-bezier(0.4, 0, 0.2, 1) ease. On active/pressed state, the background darkens to primary-fixed-dim (#2d1f7a) and gains a subtle inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal depression. The button-secondary variant uses a transparent background with a 2px solid primary border, maintaining the same text styling; on hover, the background fills with surface-container-high (#e0e0e0) while the border remains. Button-ghost is used for tertiary actions ("Learn

Do's and Don'ts

**Do**

• Do use primary (#1c0b7a) exclusively for CTAs, focus states, and primary navigation—it is the brand's signature accent and must remain visually distinct.
• Do apply lg spacing (40px) between major page sections to create breathing room and visual hierarchy; never compress sections below md (24px).
• Do use Featuredeck web for display and headline scales (56px, 40px) to establish brand personality; reserve Inter for all body and utility text.
• Do maintain WCAG AAA contrast ratios: near-black text (#020203) on white (#ffffff) achieves 19.5:1; always test text-color pairs before deployment.
• Do apply subtle shadows (sm elevation) to cards by default and upgrade to md on hover to signal interactivity without visual heaviness.
• Do use 1rem border-radius on buttons and lg spacing for section separation to create a cohesive, professional aesthetic.

**Don't**

• Don't use secondary orange (#f86a0c) on primary CTAs—it is reserved for highlights and secondary actions; primary buttons must always use #1c0b7a.
• Don't apply shadows larger than lg (0 16px 24px rgba(0, 0, 0, 0.08))—the design favors restraint and subtlety over dramatic depth.
• Don't mix Featuredeck web and Inter within the same headline or body paragraph; maintain clear typographic hierarchy by using one family per scale.
• Don't compress spacing below sm (12px) between inline elements or below md (24px) between component groups—white space is essential to the professional aesthetic.
• Don't use full border-radius (9999px) on buttons or cards; reserve it exclusively for badges and pill-shaped elements.
• Don't apply text-shadow to body text or labels on white backgrounds—it reduces legibility; use text-shadow only on small labels over colored or busy backgrounds.