Hex

Overview

Hex is an AI-powered analytics platform that transforms data exploration into a conversational, trust-first experience. The design system embodies 'Precision Minimalism'—a philosophy that strips away visual noise while maintaining sophisticated depth through carefully orchestrated typography, color, and spatial rhythm. The brand serves data professionals, analysts, and business leaders who demand both rigor and speed; the interface evokes clarity without coldness, authority without intimidation. The emotional response is one of confidence: users feel grounded in facts, supported by intelligent defaults, and empowered to ask complex questions without friction.

Hex's voice is direct, precise, and conversational—never breathless or hyperbolic. The vocabulary favors concrete nouns (data, insights, context, trust) over abstract adjectives. Tone examples: 'Get data insights grounded in the facts of your business' (not 'unlock powerful analytics'). The brand personality is that of a knowledgeable colleague who respects your time and intelligence, speaks in specifics, and removes obstacles rather than creating them. Example sentence in brand voice: 'Your Q3 revenue by region is here—drill into any anomaly in seconds.'

Colors

The color palette is rooted in a sophisticated dark theme (surface #14141c, on-surface #e3b2b3) that reduces eye strain during extended data work while maintaining high contrast for accessibility (WCAG AA+). Primary accent is a warm rose (#e3b2b3), used exclusively for CTAs, focus states, and key interactive elements—it signals trust and approachability against the cool obsidian background. Secondary accent is a vibrant teal (#43d59d), reserved for positive states, success indicators, and data highlights; tertiary is a bright sky blue (#8abbff), used for informational elements and secondary CTAs. The surface stack uses precise increments (surface-container-low #131320, surface-container #1a1a24, surface-container-high #24242f) to create visual hierarchy without relying on shadows alone. Er

Typography

The type system uses a two-family approach: PP Formula SemiExtended (a geometric, semi-condensed sans-serif) for headlines and display text, conveying precision and modernity; IBM Plex Sans for UI labels and metadata, providing clarity at small sizes; and Cinetype for body copy, offering warmth and readability in longer passages. Display (64px, 700 weight, -0.03em letter-spacing) anchors hero sections with commanding presence; headline-lg (48px) and headline-md (36px) establish section hierarchy with consistent -0.02em to -0.01em tracking. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 24px line-height) are optimized for scanning data-rich content with generous line-height (1.5x) to reduce cognitive load. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 500

Layout

The layout system uses a 12-column grid with a max-width of 1260px, optimized for both desktop analytics dashboards and mobile exploration. The gutter is 24px (md spacing), maintaining consistent breathing room between sections. Container padding follows the spacing scale: 24px (md) for standard sections, 40px (lg) for hero and feature blocks, and 64px (xl) for major section separations. White-space is treated as a first-class design element—negative space around data cards and CTAs creates visual rest and directs attention. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently: use sm for internal component padding (buttons, inputs), md for card padding and section margins, lg for feature block separation, and xl for hero-to-content transitions. Fluid

Elevation & Depth

Depth is conveyed through a restrained shadow system and surface-container increments rather than aggressive layering. Level 1 (Base): surface #14141c with no shadow—the foundation. Level 2 (Standard Cards): surface-container #1a1a24 with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15)—used for data cards, modals, and interactive surfaces. Level 3 (Elevated/Overlays): surface-container-high #24242f with box-shadow 0 8px 24px rgba(0, 0, 0, 0.2)—reserved for dropdowns, tooltips, and floating panels. Borders (1px solid at outline-variant #5a4a4b) are used alongside shadows to define surface boundaries w

Shapes

The shape philosophy is 'Technical Warmth'—rounded corners are used strategically to soften the precision of data interfaces without introducing playfulness. Buttons and inputs use DEFAULT (0.5rem / 8px) border-radius, creating a subtle softness that feels approachable while maintaining a professional edge. Cards and containers use lg (1rem / 16px) for a more pronounced roundness that distinguishes them from the background and creates visual breathing room. Modals and floating panels use xl (1.5rem / 24px) to signal elevation and importance. The full (9999px) radius is reserved for badges and

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses rose (#e3b2b3) background with 1px border, 12px horizontal padding, 44px height, and label-md typography. On hover, the background shifts to primary-fixed-dim (#e3b2b3 at 90% opacity) with a 200ms ease-out transition. button-secondary uses a transparent background with outline-variant border (#5a4a4b), shifting to surface-container-high on hover. button-ghost has no border or background, used for tertiary actions; on hover, it gains a subtle rgba(227, 178, 179, 0.08) background. All buttons use DEFAULT (8px) border-radius and maintain 44px height for touch-friendly targets on mobile (minimum 44x44px per WCAG).

Containers & Surfaces Cards use surface-container (#1a1a24) background with 24px padding, lg

Do's and Don'ts

**Do**

• Do use the primary rose (#e3b2b3) exclusively for CTAs, focus states, and key interactive moments—it's the brand's signature accent and should never be diluted or overused.
• Do maintain consistent 24px gutters and use the spacing scale (sm/md/lg/xl) for all margins and padding to create predictable, scannable layouts.
• Do apply PP Formula SemiExtended for all headlines and display text to reinforce the brand's precision and modernity; reserve IBM Plex Sans for UI labels and Cinetype for body copy.
• Do use the surface-container stack (low/DEFAULT/high/highest) to create visual hierarchy without relying solely on shadows; pair with 1px borders at outline-variant for clarity.
• Do ensure all interactive elements (buttons, inputs, list items) have clear focus states using the primary ring (3px inset at rgba(227, 178, 179, 0.1)) for keyboard navigation accessibility.

**Don't**

• Don't use bright, saturated colors for backgrounds or large surfaces—the dark theme (#14141c) is the foundation; reserve vibrant accents (rose, teal, blue) for interactive elements only.
• Don't apply shadows without borders; the combination of a 1px outline-variant border + shadow creates clarity in dense layouts, while shadow alone can feel muddy.
• Don't mix typefaces within a single headline or body paragraph; PP Formula is for display, IBM Plex for labels, Cinetype for body—each has a specific role.
• Don't use rounded corners > xl (24px) on standard UI elements; full (9999px) is reserved for badges and pills. Excessive rounding dilutes the 'Technical Warmth' aesthetic.
• Don't create custom color values outside the token system; always reference {colors.x} in components. Hardcoding hexes breaks the design system's maintainability and brand consistency.