KPI Tech

Overview

KPI Tech is a B2B SaaS platform delivering AI-driven automation for the automotive dealership industry. The design system embodies 'Sophisticated Minimalism'—a refined aesthetic that prioritizes clarity, trust, and operational efficiency through a dark canvas punctuated by premium gold accents. The brand serves dealership managers and automotive professionals who demand precision, speed, and intelligent automation without visual clutter. The emotional response is one of confidence and control: users feel they are operating a high-performance system designed specifically for their industry's complexity.

The voice is direct, professional, and outcome-focused. KPI Tech speaks in the language of business results: efficiency gains, process automation, and measurable ROI. Vocabulary favors concrete terms ('agents', 'automation', 'dealership operations') over abstract marketing language. The tone is calm and authoritative—never breathless or oversold. Example sentence in brand voice: 'Your AI agents handle lead qualification, service scheduling, and follow-up—24/7, without manual intervention.'

Colors

The color system centers on a dark, professional foundation (surface #131519, near-black #080c13) that conveys enterprise-grade sophistication and reduces cognitive load during extended work sessions. The primary accent is a warm, muted gold (#d4be7a, RGB 212, 190, 122)—a deliberate departure from tech-industry blues. This gold appears on all primary CTAs ('Let's Talk', 'Learn more'), focus states, and brand-critical interactive elements. It signals premium positioning and automotive heritage (evoking luxury and precision engineering) while remaining warm and approachable. Secondary accent is a tech-forward blue (#3a6dff) used for secondary actions, data highlights, and status indicators. The surface stack progresses from #080c13 (container-lowest, for recessed elements) through #131519 (b

Typography

The type system pairs Manrope (geometric, modern, high-legibility sans-serif) for headlines and display text with Inter (humanist, neutral, highly readable) for body and UI labels. This pairing communicates both innovation (Manrope's contemporary geometry) and reliability (Inter's proven clarity in dense interfaces). Display (72px, 700 weight, -0.04em tracking) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major sections; headline-md (28px, 600 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions; body-md (16px, 400 weight, 24px line-height) is the standard for form labels, list content, and body copy. Label-md (14px, 500 weight, 0.01em tracking) is applied to but

Layout

The layout follows a 12-column fluid grid with a max-width of 1400px, centered on viewport. The gutter is 32px, providing generous breathing room between sections while maintaining a professional, spacious feel. Container padding uses 24px (md spacing) on desktop, reducing to 16px on tablet and 12px on mobile. Hero sections and full-width cards use 96px vertical padding (lg spacing × 2.4) to create dramatic visual separation and emphasize key messaging. Feature cards and content blocks are arranged in 2–3 column layouts on desktop, collapsing to single column on mobile. White-space philosophy: every section is separated by at least lg spacing (40px); nested elements use md spacing (24px); inline elements use sm spacing (12px). The container-max-width of 1400px ensures that even on ultra-wi

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background layering rather than aggressive drop shadows. Level 1 (Base Surface): surface #131519 with no shadow, establishing the foundation. Level 2 (Cards & Containers): surface-container-high (#1a1c21) with a 1px border at #30363d and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), creating gentle separation from the base. Level 3 (Modals & Elevated Panels): surface-container-highest (#242730) with a 1px border at #444748 and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), signaling modal priority. Interactive hover states on cards el

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used strategically to soften rigid geometry without sacrificing the professional, engineered aesthetic. Buttons use rounded.md (0.75rem / 12px) for a modern, approachable feel that avoids both sharp rectangles and overly rounded pill shapes. Input fields and form controls use rounded.md (12px) for consistency with buttons, creating a cohesive interaction layer. Cards and container elements use rounded.lg (1rem / 16px) to provide slightly more visual softness while maintaining structural clarity. Modals and full-screen overla

Components

Action Elements Buttons are the primary interaction layer. Primary buttons (button-primary) use the gold accent (#d4be7a) with black text (#1a1c21), 8px vertical / 16px horizontal padding, 40px height, and rounded.md (12px). On hover, the background shifts to #e6d28c with a subtle gold-tinted shadow (0 4px 12px rgba(212, 190, 122, 0.2)) applied over 200ms ease. On active/click, the background darkens to #ccb86a and applies a 98% scale transform for tactile feedback. Secondary buttons use a transparent background with a 1px gold border and gold text; on hover, they receive a 10% gold background overlay (rgba(212, 190, 122, 0.1)). All buttons include a transition: all 200ms ease to ensure smooth state changes.

Containers & Surfaces Cards (card component) use surface-container-high (

Do's and Don'ts

**Do**

• Do use the gold accent (#d4be7a) exclusively on primary CTAs, focus states, and brand-critical interactive elements—never on passive text or backgrounds.
• Do maintain at least 24px (md spacing) between major content sections to prevent cognitive overload in a dark interface.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all Manrope headlines to enhance premium perception and tighten geometric letterforms.
• Do use the 12-column grid with 32px gutters and enforce the 1400px max-width to ensure content remains scannable on ultra-wide displays.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease to provide tactile, responsive feedback without jarring jumps.
• Do layer elevation through background color progression (surface → surface-container-high → surface-container-highest) before relying on shadows alone.

**Don't**

• Don't use pure white (#ffffff) for text on dark surfaces; use #f5f5f5 instead to reduce eye strain during extended work sessions.
• Don't apply the gold accent to secondary actions, passive elements, or decorative details—reserve it for moments of user intent.
• Don't use rounded corners smaller than 12px (rounded.md) on interactive elements; this erodes the architectural precision aesthetic.
• Don't exceed 16px line-height on body text; the dark background and generous padding already provide sufficient breathing room.
• Don't mix Manrope and Inter weights arbitrarily; use Manrope 600–700 for headlines only, and Inter 400–500 for body and labels.
• Don't apply box-shadows without corresponding border-color shifts; always update the outline-variant or outline color on hover to maintain visual coherence.