Carmen

Overview

Carmen is an intelligent automotive service scheduling and workshop capacity management platform designed for dealership service managers, fixed operations directors, and OEM partners. The brand embodies a 'Technical Clarity' aesthetic—combining a vibrant cyan accent (#0bcaf9) with a sophisticated dark-to-light interface that transforms complex operational data into intuitive, actionable workflows. The UI conveys precision, automation, and customer-centricity: every interaction is designed to reduce friction, maximize workshop utilization, and increase appointment value. The emotional response is one of confidence and control—users feel empowered to manage their dealership's most critical operations with minimal manual effort.

Carmen's voice is direct, data-driven, and solution-focused. The brand speaks in concrete business outcomes rather than abstract features: "increase appointment value by 32.5%" rather than "optimize scheduling." Vocabulary emphasizes automation, intelligence, and efficiency—words like "streamline," "maximize," "intelligent," and "seamless" appear frequently. The tone is professional yet approachable, avoiding jargon while maintaining technical credibility. Example sentence in Carmen's voice: "Carmen's automated capacity management increases staff productivity by over 30%, turning your workshop into a revenue-generating engine."

Colors

Carmen's color system centers on a vibrant cyan primary (#0bcaf9) that signals action, trust, and technological sophistication. This accent appears on all primary CTAs ("Request a demo" buttons), interactive states, and key data highlights—it's the visual anchor that guides users through critical workflows. The secondary color, a deeper navy blue (#0050bd), provides a supporting accent for secondary actions and emphasis states, creating a cohesive blue-family palette that reinforces the tech-forward brand identity.

The surface stack uses a clean white-to-light-gray progression: surface (#ffffff) for primary content areas, surface-container-low (#f3f3f3) for input fields and secondary containers, and surface-container-highest (#dedee0) for tertiary elements and disabled states. The inverse

Typography

Carmen's type system uses Lato as the primary typeface, a humanist sans-serif that balances technical precision with approachability. The hierarchy spans eight levels: display (60px, 700 weight) for hero statements and major announcements; headline-lg (40px, 700) for section titles and key metrics; headline-md (32px, 700) for subsection headers; title-lg (24px, 700) for card titles and feature names; body-lg (18px, 400) for primary content and longer-form text; body-md (16px, 400) for standard UI copy and descriptions; label-md (14px, 700) for button text and form labels; and label-sm (12px, 600) for helper text, badges, and metadata. Letter-spacing is applied strategically: -0.04em on display for visual tightness, -0.02em on headline-lg for authority, and 0.01em on label-md for clarity in

Layout

Carmen uses a 12-column fluid grid with a maximum container width of 1280px, allowing content to breathe on desktop while remaining responsive on tablet and mobile. The gutter spacing is consistently 24px (md spacing unit), creating a predictable rhythm across all breakpoints. Section separation uses the lg spacing token (40px) between major content blocks, while internal card padding uses md spacing (24px) to balance density with whitespace. The layout philosophy prioritizes information hierarchy through vertical rhythm: hero sections occupy 60-70% of viewport height on desktop, fact cards are arranged in a 2×2 grid on desktop (collapsing to 1×4 on mobile), and form inputs maintain a minimum height of 38px with 12px internal padding for touch-friendly interaction. Container max-width is e

Elevation & Depth

Elevation in Carmen is achieved through a layered shadow system that creates clear visual hierarchy without relying on color shifts. Level 1 (Base/Flat): no shadow, used for primary content areas and the main background. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to fact cards, input fields, and secondary containers—this shadow creates subtle depth that separates interactive elements from the background. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for modals, dropdowns, and hover states on cards—the larger blur radius (24px) and v

Shapes

Carmen employs a 'Technical Precision' shape philosophy: rounded corners are minimal and purposeful, never organic or overly soft. The rounded scale progresses from sm (2px) for subtle refinement on small UI elements like badges and helper text, to DEFAULT (4px) for buttons, inputs, and standard cards—this is the workhorse radius used across 80% of components. Medium (5px) is used sparingly on larger cards and modals for a slightly softer appearance without sacrificing technical credibility. Large (8px) appears on hero section containers and prominent feature cards, signaling importance throug

Components

Action Elements Buttons are the primary interaction mechanism in Carmen. The button-primary component uses a solid cyan background (#0bcaf9) with white text, 9px vertical padding, 24px horizontal padding, and a 4px border-radius—creating a compact, clickable target that measures 40px in height. The button-primary-hover state transitions the background to #3898ec (primary-container) over 200ms, providing immediate visual feedback. Button-secondary uses a transparent background with a 1px outline in #cccccc (outline color) and dark text (#2e3042), allowing secondary actions to coexist without visual dominance. Button-tertiary is similar to secondary but uses a lighter outline (#dddddd) for tertiary actions like "Service Manager" role selectors. All buttons use label-md typography (14px,

Do's and Don'ts

**Do**

• Do use the primary cyan (#0bcaf9) exclusively for CTAs, focus states, and key interactive elements—never use it for passive content or backgrounds.
• Do maintain the 24px gutter spacing consistently across all breakpoints to preserve the visual rhythm and predictability of the layout.
• Do apply the md-level shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and secondary containers to create clear visual separation without excessive depth.
• Do use Lato 700 weight for all headlines and button text to reinforce the technical, authoritative brand voice.
• Do apply 200ms ease transitions on all hover and focus state changes to provide smooth, predictable feedback without feeling sluggish.

**Don't**

• Don't use rounded corners larger than 10px on standard components—excessive rounding undermines the technical precision of the brand.
• Don't apply shadows to input fields or form elements; keep them flat with a 1px border to maintain clarity and focus.
• Don't use the secondary navy (#0050bd) as a primary accent; reserve it for supporting actions and secondary emphasis only.
• Don't exceed 80 characters per line in body text; enforce the 1280px container max-width and use appropriate font sizes to maintain readability.
• Don't mix Lato with other typefaces in the UI; maintain typographic consistency by using only Lato across all text elements.