Solidroad

Overview

Solidroad is a precision AI QA and coaching platform designed for customer experience (CX) teams who demand absolute control over quality standards. The brand embodies a philosophy of "Measured Clarity"—a design aesthetic that combines warm, earthy neutrals (#fbf7eb, #322f25) with vibrant accent colors (lime #b8cd00, purple #a181ff, sky blue #448fff) to create an interface that feels both grounded and energetic. The UI evokes a sense of professional confidence and technical sophistication, transforming complex agent performance data into intuitive, actionable insights. Every interaction is designed to feel deliberate and purposeful, never cluttered or overwhelming.

The brand voice is direct, precise, and human-centered. Solidroad speaks to practitioners—QA managers, coaching teams, and operations leaders—with clarity and respect for their expertise. The tone avoids corporate jargon; instead, it uses concrete language grounded in real customer interactions. Example: "Review 100% of interactions, not a sample. Train your agents on what actually matters." The vocabulary emphasizes agency ("your definition of quality"), measurement ("80% average quality score"), and continuous improvement ("lift CSAT"). Solidroad's personality is methodical yet approachable—a trusted partner who understands the complexity of managing both human and AI agents.

Colors

The Solidroad color system is anchored in a warm, sophisticated neutral palette (surface #fbf7eb, on-surface #322f25) that creates a calm, professional foundation. This earthy base is punctuated by three distinct accent colors that each serve a specific functional and emotional role. Primary (#b8cd00, a vibrant lime-green) is the signature brand accent used exclusively for call-to-action buttons, interactive highlights, and key performance indicators—it commands attention without aggression, evoking growth and optimization. Secondary (#a181ff, a soft purple) supports secondary actions, container backgrounds, and supportive UI elements, adding a layer of sophistication and visual depth. Tertiary (#448fff, a clear sky blue) is reserved for informational elements, data visualization, and tert

Typography

The Solidroad type system is built on a hierarchy of three distinct typeface families, each chosen for its specific communicative role. Headlines use ABC Arizona Mix Light (300 weight, 40–56px) for a refined, elegant presence that conveys authority without rigidity; the light weight creates breathing room and visual sophistication. Body copy and UI labels employ FT Regola Neue Regular (400 weight, 16–18px) for clarity and legibility in dense data contexts, with precise line-height of 24–28px to ensure comfortable reading. Accent labels and interactive elements use Matter Medium (500 weight, 12–14px) for emphasis and scannability. Letter-spacing is calibrated per context: headlines use -0.01em to -0.02em for tightness and impact, body text uses 0em for neutrality, and labels use 0.02em–0.03

Layout

Solidroad uses a 12-column fluid grid system with a maximum container width of 1440px, allowing the design to scale gracefully from mobile (single-column stacking) to desktop (full multi-column layouts). The spacing scale is semantic and hierarchical: unit (8px) serves as the baseline for all micro-spacing; sm (12px) is used for compact component padding; md (24px) is the standard gutter for section separation and card padding; lg (40px) separates major content blocks and hero sections; xl (64px) creates breathing room between full-width sections. The gutter (24px) is applied consistently to left/right margins on all container widths, ensuring content never touches viewport edges. White-space is treated as a design element—generous margins around key data visualizations (like the Support T

Elevation & Depth

Solidroad's elevation system is subtle and functional, using layered shadows and surface stratification rather than dramatic depth. The system defines three elevation levels: Level 1 (Base) is the flat surface (#fbf7eb) with no shadow, serving as the page background and lowest interactive layer. Level 2 (Standard Card) applies elevation.md (rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px) to create subtle lift and definition; this shadow is used on cards, input fields, and standard UI containers. Level 3 (Elevated/Modal) applie

Shapes

Solidroad employs a "Precision Geometry" shape philosophy—rounded corners are used strategically to soften technical interfaces while maintaining clarity and scannability. Buttons and primary interactive elements use full (9999px) border-radius to create pill-shaped affordances that feel modern and approachable; this is applied to the primary CTA ("Book a Demo") and secondary navigation buttons. Standard cards and containers use lg (1rem / 16px) border-radius for a balanced, professional appearance that avoids excessive roundness. Input fields and form elements use md (0.75rem / 12px) border-r

Components

Action Elements Buttons are the primary interaction mechanism and use the full (9999px) border-radius to create distinctive pill-shaped affordances. The primary button (button-primary) uses background {colors.primary} (#b8cd00) with text color {colors.on-primary} (#322f25), typography {typography.label-md}, padding 12px 28px, and height 44px. On hover, the background transitions to {colors.primary-fixed-dim} (#dbf400) over 200ms, creating a subtle brightening effect that signals interactivity. The button applies elevation.md shadow (rgba(0, 0, 0, 0.1) 0px 2px 4px 0px) to lift it from the surface. Secondary buttons (button-secondary) use a transparent background with a 1px border in {colors.outline} (#c3c2bf), text color {colors.primary}, and the same padding and height. On hover, the b

Do's and Don'ts

**Do**

• Do use the primary accent (#b8cd00) exclusively for CTAs, key performance indicators, and active/focus states—it is the signature brand color and should never be diluted or overused.
• Do maintain the warm neutral palette (#fbf7eb, #322f25) as the dominant visual foundation; accents should never exceed 15% of the visual real estate on any page.
• Do apply consistent spacing using the semantic scale (md for cards, lg for sections, xl for major breaks) to create predictable, scannable page rhythm and reduce cognitive load.
• Do use elevation.md shadow (rgba(0, 0, 0, 0.1) 0px 2px 4px 0px) on all interactive containers; reserve elevation.lg for modals and high-priority overlays only.
• Do apply 200ms ease-out transitions on all interactive state changes (hover, focus, active) to provide smooth, responsive feedback without feeling sluggish.
• Do use the full (9999px) border-radius exclusively on buttons and primary CTAs; use lg (1rem) on cards and standard containers to maintain visual hierarchy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors; always use the defined on-surface (#322f25) and surface (#fbf7eb) tokens to maintain brand consistency and accessibility.
• Don't apply shadows heavier than elevation.lg (0 3px 8px rgba(0, 0, 0, 0.15)) on any element; excessive shadows create visual clutter and reduce clarity in data-dense interfaces.
• Don't mix typeface families within a single component or section; use ABC Arizona Mix for headlines, FT Regola Neue for body, and Matter Medium for labels—never combine them arbitrarily.
• Don't use secondary (#a181ff) or tertiary (#448fff) accents for primary CTAs or key interactive elements; these colors are reserved for supporting actions and informational elements only.
• Don't apply border-radius smaller than DEFAULT (0.5rem / 8px) on interactive elements; insufficient rounding reduces visual affordance and makes small buttons harder to target on touch devices.
• Don't exceed 24px padding on standard cards or 40px on modals; excessive internal padding creates visual bloat and reduces content density in data-heavy contexts.