Yao Agents

Overview

Yao Agents is an open-source AI agent desktop application that brings autonomous intelligence to multi-device workflows while maintaining local data sovereignty. The design system embodies 'Technical Minimalism'—a philosophy that strips away decorative complexity to expose functional clarity, allowing users to focus on agent creation and orchestration without cognitive overhead. The aesthetic combines sharp, geometric precision (56px display headlines in Outfit 800, 12px border-radius on buttons) with approachable warmth through a vibrant primary blue (#3371fc) that signals agency and control. The emotional response is one of competence: users feel they're working with a sophisticated, trustworthy tool that respects their data and their time.

The brand voice is direct, technical yet accessible, and action-oriented. Vocabulary favors concrete nouns (agents, tasks, devices, workflows) over abstractions. Tone is confident without arrogance—the copy assumes users are intelligent but may be new to agent-based automation. Example sentence in brand voice: 'Your agents run locally on your machines—no cloud lock-in, no vendor dependency.'

Colors

The color system is built on a light, neutral foundation (#ffffff surface, #f8f9fa surface-dim) that maximizes legibility for technical interfaces while maintaining visual warmth. Primary (#3371fc) is the signature accent—a saturated, medium-blue that appears on all call-to-action buttons, active navigation states, and focus indicators. It conveys trust and technical sophistication without coldness. Secondary (#0ea5e9) is a cyan accent used for supporting highlights, status indicators, and secondary interactive elements; it pairs with primary in gradient contexts (e.g., logo text uses linear-gradient(135deg, #0ea5e9, #8b5cf6)). Tertiary (#8b5cf6) is a purple accent reserved for tertiary actions, badges, and decorative accents. The text hierarchy uses #212529 (on-surface) for primary conten

Typography

The type system pairs Outfit (geometric, modern, used for headlines and display) with Roboto (neutral, highly legible, used for body and UI labels). Display (56px, 800 weight, -0.02em tracking) anchors hero sections and major page titles with maximum impact; Headline-lg (40px, 700 weight) is used for section headings and modal titles. Body-md (16px, 400 weight, 24px line-height) is the default for paragraph text and ensures comfortable reading at arm's length on desktop and tablet. Label-md (14px, 500 weight, 0.01em tracking) is applied to button text, form labels, and navigation items—the 500 weight provides visual distinction without heaviness. On small labels over busy backgrounds (e.g., badges on cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. Letter-spacing

Layout

The layout uses a 12-column grid with a max-width of 1280px, maintaining a fluid layout on smaller screens (breakpoints at 1024px and 640px). The spacing scale is semantic: gutter (24px) is used for horizontal padding in containers, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. White-space is generous—the hero section uses 40px vertical spacing between headline, subheadline, and CTA buttons to create visual breathing room and guide the eye downward. Container padding is consistently 24px on desktop, reducing to 12px on mobile to maximize content area. The grid rhythm is 8px-based (unit: 8px), allowing all spacing to align to a consistent baseline. Sections are separated by subtle background color shifts (e.g., #f6f7f8 a

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background layering rather than dramatic drop-shadows. Level 1 (Base): flat white background (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid border in rgba(0, 0, 0, 0.08) with optional box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on hover. Level 3 (Modals & Floating Elements): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) combined with a 1px border in rgba(0, 0, 0, 0.08). The FAB (floating action button) uses a breathing animation with dual shadows: box-shadow: 0 8px 24px rgba(51, 113, 252, 0.15), 0 0 20px rgba(51, 11

Shapes

The shape philosophy is 'Precision with Approachability'—using small, consistent border-radius values that feel technical and intentional rather than soft or playful. Buttons use 12px radius (rounded.lg), creating a subtle rounded corner that softens the geometric precision without sacrificing modernity. Input fields and smaller interactive elements use 6px radius (rounded.DEFAULT), maintaining visual consistency while reducing visual weight. Cards and containers use 10px radius (rounded.md) for a middle ground between buttons and larger surfaces. The FAB uses 9999px (rounded.full) for a perfe

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use backgroundColor: #3371fc, textColor: #ffffff, padding: 12px 48px, height: 48px, borderRadius: 12px, fontSize: 18px, fontWeight: 500. On hover, backgroundColor shifts to #4580ff with boxShadow: 0 4px 12px rgba(51, 113, 252, 0.3), creating a subtle lift effect. On active/press, backgroundColor becomes #2861e6. Secondary buttons (button-secondary) use a transparent background with a 2px solid border in #3371fc, maintaining the same padding and height. Transitions use 200ms cubic-bezier(0.2, 0, 0.38, 0.9) for snappy but not jarring feedback. All buttons include Material Symbols icons (16px) with 8px gap to the text.

Containers & Surfaces Cards (card) use backgroundColor: #f6f7f8, border

Do's and Don'ts

**Do**

• Do use primary blue (#3371fc) for all primary CTAs and active states—it's the signature brand color and users expect it to signal actionable elements.
• Do maintain 24px padding (md spacing) inside cards and containers to ensure content breathes and remains scannable.
• Do apply 12px border-radius to buttons and 6px to inputs—this precision-with-warmth balance is core to the brand aesthetic.
• Do use Outfit for all headlines (display, headline-lg, headline-md) and Roboto for body text—never mix them within a single text block.
• Do include a 3px focus ring (boxShadow: 0 0 0 3px rgba(51, 113, 252, 0.1)) on all interactive elements for keyboard accessibility.
• Do use the secondary cyan (#0ea5e9) and tertiary purple (#8b5cf6) as supporting accents in gradients and status indicators, never as primary CTAs.

**Don't**

• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—the design relies on subtle layering and borders, not dramatic depth.
• Don't apply border-radius greater than 18px on any component except the FAB (which uses 9999px for a circle)—larger radii contradict the precision aesthetic.
• Don't mix Outfit and Roboto within a single text element or use Roboto for headlines—the type pairing is intentional and breaking it dilutes brand recognition.
• Don't use colors outside the defined palette (primary, secondary, tertiary, error) for interactive elements—every color choice should reinforce the brand system.
• Don't add drop-shadows to cards or buttons; use 1px borders and subtle hover state changes instead—the glassmorphic header is the only exception.
• Don't exceed 48px height for standard buttons or 56px for the FAB—these sizes are optimized for touch and desktop interaction and changing them breaks the spatial rhythm.