Sabio

Overview

Sabio is an enterprise AI-powered customer experience platform that bridges the gap between algorithmic efficiency and human empathy. The brand serves Fortune 500 enterprises and mid-market organizations seeking to transform customer interactions through intelligent automation. The design aesthetic is "Intelligent Minimalism"—a sophisticated fusion of deep, purposeful color (navy #0f096b, vibrant purple #6518bb) with clean, geometric typography (AtypBLText and AtypDisplay families) that conveys both technical precision and human-centered design thinking. The UI evokes a sense of clarity and forward momentum: users feel they're working with cutting-edge technology that respects their intelligence and time.

Sabio's voice is authoritative yet approachable, data-driven yet empathetic. The brand avoids hype-speak and instead uses concrete, outcome-focused language. Vocabulary patterns emphasize transformation, efficiency, and human insight—never buzzwords like "synergy" or "leverage." Example sentence in Sabio's voice: "Reduce operational costs by 40% while your agents spend more time solving complex problems that matter."

Colors

The Sabio color system is built on a triadic foundation anchored by deep navy (#0f096b) as the dominant surface and text color, vibrant purple (#6518bb) as the primary accent for interactive elements and CTAs, and golden yellow (#f7d501) as the secondary accent for highlights and supporting actions. Primary (#6518bb) is used exclusively on call-to-action buttons, active states, and brand-critical interactive elements—it commands attention without overwhelming. Secondary (#f7d501) appears on secondary CTAs, badges, and emphasis elements, creating visual rhythm and guiding users through progressive disclosure. Tertiary (#96cafb) is reserved for informational overlays, data visualization accents, and supporting UI elements. The surface stack progresses from near-white (#f8f7f4) for the main c

Typography

The type system employs a two-family strategy: AtypDisplay (bold, geometric, 700 weight) for hero headlines and display-scale messaging, and AtypBLText (regular, semibold, medium weights) for body copy, labels, and interface text. Display-scale text (100px, 110px line-height, -0.04em letter-spacing) commands attention in hero sections and major section headers, while headline-lg (48px, 56px line-height) provides visual hierarchy for subsections. Body text (16px–20px) maintains 24–32px line-height for comfortable reading at typical viewing distances. The semibold weight (600) is reserved for labels, CTAs, and emphasis—never applied to body paragraphs, which remain at 400 weight for legibility. On small labels over busy backgrounds (e.g., badges on gradient hero sections), apply text-shadow:

Layout

Sabio employs a 12-column fluid grid with a maximum container width of 1320px, centered on the viewport. The layout rhythm is governed by the spacing scale: section separation uses lg spacing (40px), component internal padding uses md spacing (24px), and micro-interactions use sm spacing (12px). The hero section spans full-width with a diagonal bottom edge (created via CSS clip-path or SVG mask) and contains a gradient background (135deg from #0f096b to #6518bb to #96cafb) with white text overlaid at 100px display scale. Below the fold, content sections alternate between full-width colored backgrounds and white containers with md padding and lg rounded corners. The gutter (24px) is applied consistently between grid columns and between major sections. Container max-width of 1320px ensures r

Elevation & Depth

Depth in Sabio is achieved through a subtle shadow and border system rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, using only a 1px solid border at {colors.outline-variant} (#ccc7bd) to define edges. Level 2 (Cards & Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border, creating a gentle lift from the background. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment. Hover states on interactive elements transition to Level 3 shadows over 200ms using cubic-bezier(0.4, 0, 0.2, 1). The her

Shapes

The shape philosophy is "Technical Precision with Approachability"—rounded corners are used strategically to soften the geometric rigor of the grid without sacrificing clarity. Buttons and inputs use sm (3px) or DEFAULT (5px) border-radius, creating a subtle softness that feels modern without appearing playful. Cards and larger containers use lg (10px) border-radius, balancing visual warmth with professional restraint. Full-width hero sections and modal backdrops use no border-radius (0px) to anchor the layout and create visual weight. The xl (19px) radius is reserved for special emphasis elem

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (solid purple #6518bb on white text), secondary (solid yellow #f7d501 on dark text), and ghost (transparent with purple border). All buttons use label-md typography (16px, 600 weight, 0.02em letter-spacing) and a fixed height of 48px with 14px vertical and 30px horizontal padding. On hover, primary buttons transition to #4a2a7f over 200ms; secondary buttons shift to #ffe08c. Ghost buttons gain a light purple background (#d4c9fb) on hover. No button uses uppercase text-transform; sentence case is preferred for accessibility and modern UX conventions.

Containers & Surfaces Cards use a white background (#ffffff) with a 1px border at #ccc7bd, lg rounded corners (10px), and md padding (24p

Do's and Don'ts

**Do**

• Do use primary purple (#6518bb) exclusively on CTAs and interactive elements—never on passive surfaces or body text.
• Do maintain the 24px gutter between grid columns and 40px spacing between major sections to ensure visual breathing room.
• Do apply the AtypBLText family to all body copy and interface text; reserve AtypDisplay only for hero headlines and display-scale messaging.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for a consistent, professional feel.
• Do use the full color stack (surface, surface-container, on-surface variants) to create hierarchy without introducing new colors outside the defined palette.

**Don't**

• Don't use secondary yellow (#f7d501) on primary CTAs—it's reserved for secondary actions and highlights only.
• Don't apply text-transform: uppercase to body copy or button labels; sentence case is the standard for accessibility and modern UX.
• Don't use system fonts (system-ui, -apple-system, sans-serif) as fallbacks; always specify AtypBLText or AtypDisplay with a serif fallback (Georgia, serif) only.
• Don't add shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12)—excessive depth contradicts the clean, minimalist aesthetic.
• Don't mix rounded corner radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.