Alia

Overview

Alia is an agentic team coordination platform that embodies a philosophy of **Purposeful Minimalism with Computational Clarity**—a design language that treats the interface as a transparent lens through which complex AI-driven workflows become intuitive and actionable. The brand serves engineering and product teams who need continuous alignment without friction, evoking a sense of calm agency: the system works in the background while the human remains in control. The aesthetic combines a warm, paper-like cream background (#f3f1e5) with a signature purple accent (#b99df9) that signals intelligence and forward momentum, paired with geometric line illustrations that suggest data flow and interconnection without visual noise.

Alia's voice is direct, precise, and human-centered—never breathless or jargon-heavy. The tone favors active verbs and concrete outcomes: "Alia noticed the misalignment nobody else saw" rather than "Alia provides visibility." Typography is set in Switzer, a geometric sans-serif that balances warmth with technical credibility. The brand personality is that of a thoughtful colleague: observant, reliable, and focused on what actually matters—getting work done and keeping teams aligned toward shared goals.

Colors

The color system is anchored in a **warm, neutral foundation** that prioritizes legibility and reduces cognitive load. The primary surface (#f3f1e5, a soft cream) serves as the canvas—it is neither pure white nor beige, but a carefully calibrated warm tone that reduces eye strain during extended use while maintaining the perception of cleanliness and space. This surface is paired with a deep, intentional text color (#1d1d1d, near-black) that provides 15+ WCAG contrast ratio for accessibility.

**Primary accent (#b99df9, a soft purple)** is the signature brand color used exclusively for call-to-action buttons, interactive focus states, and key brand moments. It signals intelligence and forward motion without aggression. On hover, the primary shifts to the deeper secondary (#845ce0), creatin

Typography

The type system uses **Switzer as the primary typeface**, a geometric sans-serif that conveys both technical precision and human warmth. The hierarchy spans eight levels: display (60px, 700 weight) for hero statements, headline-lg (52px, 600 weight) for major section titles, headline-md (36px, 600 weight) for subsections, title-lg (24px, 600 weight) for card headers, body-lg (18px, 400 weight) for introductory copy, body-md (16px, 400 weight) for standard body text, label-md (14px, 500 weight) for button labels and UI controls, and label-sm (12px, 500 weight) for metadata and captions.

All headline levels use negative letter-spacing (-0.04em for display, -0.02em for headline-lg) to tighten the visual weight and create a sense of forward momentum. Body text uses 0em letter-spacing with lin

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1280px, centered with auto margins. The page gutter is 24px on mobile (scaling to 32px on tablet and 40px on desktop), applied via the section-container utility. Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (8px) for tight grouping, md (16px) for standard component padding, lg (24px) for section separation, xl (32px) for major block spacing, 2xl (40px) for hero sections, 3xl (60px) for section breaks, and 4xl (80px) for full-page rhythm.

The page rhythm emphasizes breathing room: hero sections use 3xl spacing (60px) above and below, card grids use lg spacing (24px) between items, and form fields use md spacing (16px) vertically. The container max-width of 1280px ensures that on ultr

Elevation & Depth

Depth is conveyed through a **subtle shadow system** that avoids heavy drop-shadows in favor of soft, diffused elevation. The system defines three elevation levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements like buttons, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. Cards at rest use md elevation; on hover, they transition to lg elevation with a 160ms cubic-bezier(0.4, 0, 0.2, 1) timing function.

Borders are used as a primary depth signal: all cards and inputs have

Shapes

The shape philosophy is **Geometric Precision with Approachability**—rounded corners are used strategically to soften technical interfaces without sacrificing clarity. The rounded scale uses six values: sm (0.25rem / 4px) for small UI elements like badges and inline buttons, DEFAULT (0.5rem / 8px) for standard buttons and inputs, md (0.75rem / 12px) for cards and panels, lg (1rem / 16px) for larger containers and modals, xl (1.5rem / 24px) for hero sections and full-width containers, and full (9999px) for pill-shaped elements like mention badges.

Buttons use DEFAULT (8px) radius to feel moder

Components

Action Elements

**Buttons** come in two primary variants: primary (background: #b99df9, color: #1d1d1d, padding: 12px 32px, height: 48px, border-radius: 8px) and secondary (background: transparent, border: 1px solid #ededed, color: #1d1d1d, padding: 12px 24px, height: 48px). Both use label-md typography (14px, 500 weight) and transition all properties over 160ms with cubic-bezier(0.4, 0, 0.2, 1) timing. On hover, primary buttons shift to background: #845ce0 (the secondary color), creating a tactile sense of engagement. Secondary buttons shift to background: #ede9d9 (surface-container-high) on hover. Active/pressed states use a 2px inset box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) to indicate depression.

Containers & Surfaces

**Cards** use background: #ffffff, border: 1px soli

Do's and Don'ts

**Do**

• Do use the primary purple (#b99df9) exclusively for CTAs, focus states, and brand moments—never for backgrounds or secondary UI.
• Do apply the warm cream background (#f3f1e5) as the page canvas and use the surface stack (white, surface-container-low, surface-container-high) for layering.
• Do pair Switzer headlines with negative letter-spacing (-0.04em for display, -0.02em for headline-lg) to create forward momentum.
• Do use the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on cards at rest and transition to lg (0 8px 24px rgba(0, 0, 0, 0.12)) on hover over 160ms.
• Do maintain 24px gutter spacing on mobile and scale to 32px+ on larger breakpoints; use lg spacing (24px) for section separation.
• Do apply 1px solid borders at #ededed to all cards and inputs—borders are the primary depth signal, not shadows alone.

**Don't**

• Don't use pure white (#ffffff) as the page background; use the warm cream (#f3f1e5) to reduce eye strain and maintain brand warmth.
• Don't apply the primary purple to non-interactive elements like backgrounds, dividers, or decorative shapes—it must remain reserved for actions.
• Don't use heavy drop-shadows (> 12px blur) or multiple stacked shadows; the design system relies on subtle elevation (md and lg only).
• Don't round button corners beyond 8px or card corners beyond 12px; excessive rounding conflicts with the geometric precision aesthetic.
• Don't use system fonts or fallback sans-serifs in place of Switzer; the typeface is core to brand identity and must load reliably.
• Don't mix tertiary red (#fc413d) with primary purple in the same UI section; reserve red for errors and alerts only.