Kimi K3

Overview

Kimi K3 is an agentic AI platform designed for knowledge workers, developers, and creative professionals who demand both power and clarity. The design system embodies 'Functional Minimalism'—a philosophy that strips away visual noise while maintaining rich interaction depth. The brand personality is direct, capable, and uncluttered: the interface gets out of the way so users can focus on their work. The visual language uses a clean light canvas (rgb(251, 250, 249)) paired with a confident Google Blue primary (#1a73e8) that signals trust and action. Every element serves a purpose; decoration is absent. The emotional response is one of calm competence: users feel they are working with a tool that understands their needs and respects their time.

The tone is precise, professional, and occasionally conversational. Kimi speaks in active voice, avoids jargon when possible, and prioritizes clarity over cleverness. Example sentence in brand voice: 'Run parallel tasks with Swarm to get more work done—no waiting, no context switching.'

Colors

The color system is anchored in a neutral, warm light palette (surface: #fbfaf9, on-surface: #202124) that provides a calm, focused working environment. The primary accent is Google Blue (#1a73e8), used exclusively for interactive elements—buttons, links, focus states, and key CTAs. This color is never used for passive elements; it signals actionability. Secondary accent (#4285f4) provides a lighter, supporting tone for secondary CTAs and informational highlights. Tertiary (#34a853) is reserved for success states, confirmations, and positive feedback. The error color (#d33b27) is used sparingly for destructive actions and validation errors. The surface stack progresses from #ffffff (surface-container-lowest, used for cards and inputs) through #f5f3f2 (surface-container, used for grouped co

Typography

The typography system uses Roboto as the primary typeface, chosen for its clarity, neutrality, and excellent legibility at all sizes. The hierarchy is built on six levels: Display (60px, 700 weight) for hero headlines, Headline-lg (40px, 600 weight) for section titles, Headline-md (28px, 600 weight) for subsections, Title-lg (20px, 600 weight) for card headers, Body-lg (18px, 400 weight) for long-form content, Body-md (16px, 400 weight) for standard UI text, Label-md (14px, 600 weight) for buttons and interactive labels, and Label-sm (12px, 500 weight) for secondary metadata. Letter-spacing is conservative: -0.04em on display sizes to tighten large text, 0.01em on labels to add breathing room to small text. Line-height is generous (1.6 on body, 1.4 on headlines) to ensure readability in a

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible responsive behavior. The spacing scale is semantic: unit (8px) is the base increment, xs (4px) for micro-spacing within components, sm (12px) for internal padding in inputs and chips, md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero and full-width spacing. The gutter (24px) is used consistently for horizontal margins on the main container. White-space is generous: sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. Cards and containers use md padding (24px) internally, with outline-variant borders (1px solid #d0d0d0) to define edges without heaviness. The design favor

Elevation & Depth

Elevation in Kimi K3 is achieved through a restrained shadow system that emphasizes flatness while providing subtle depth cues. There are three elevation levels: Level 1 (sm shadow: 0 1px 2px rgba(0, 0, 0, 0.06)) is used for standard cards, inputs, and resting buttons—barely perceptible, maintaining the flat aesthetic. Level 2 (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied on hover states, popovers, and elevated cards to signal interactivity and lift. Level 3 (lg shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for modals, dropdowns, and floating panels that demand visual separation

Shapes

The shape philosophy is 'Geometric Clarity'—rounded corners are used purposefully to soften hard edges without introducing organic or playful forms. The rounded scale progresses from sm (0.25rem / 4px) for small UI elements like checkboxes and minor dividers, DEFAULT (0.5rem / 8px) for standard inputs and small buttons, md (0.75rem / 12px) for chips and secondary components, lg (1rem / 16px) for primary buttons and medium cards, xl (1.5rem / 24px) for large cards and modals, and full (9999px) for pills and badges. Buttons use lg (16px) to signal their importance and clickability. Input fields

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (solid #1a73e8 background, white text, 48px height, 12px 24px padding, lg radius), secondary (transparent background, #1a73e8 text, 1px outline-variant border, same dimensions), and ghost (transparent background, #1a73e8 text, no border, flexible height). All buttons use label-md typography (14px, 600 weight). Hover states darken the primary color to #1557b0 and elevate the shadow to md (0 3px 8px rgba(0, 0, 0, 0.15)); transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1). Active states deepen to #0d47a1. Disabled buttons reduce opacity to 50% and remove pointer-events. Chips are compact, pill-shaped buttons (32px height, 8px 16px padding, full radius) used for filtering or tagging; selected ch

Do's and Don'ts

**Do**

• Do use primary (#1a73e8) exclusively for interactive elements—buttons, links, focus states—never for passive backgrounds or text.
• Do maintain md spacing (24px) between major sections to create visual breathing room and reduce cognitive load.
• Do apply lg radius (16px) to buttons and cards to signal their importance and improve touch targets.
• Do use the shadow system consistently: sm for resting states, md for hover, lg for modals—never skip shadows or use custom values.
• Do keep text color at on-surface (#202124) for body text and on-surface-variant (#5f6368) for secondary text; avoid custom grays.
• Do use Roboto at the specified weights (400 for body, 600 for labels/headlines) and letter-spacing values (-0.04em for display, 0.01em for labels).

**Don't**

• Don't use primary color for backgrounds, borders, or non-interactive elements—it is reserved for CTAs and focus states only.
• Don't add custom shadows or blur effects; use only the three defined elevation levels (sm, md, lg) with the exact rgba values.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radius breaks visual consistency.
• Don't mix typefaces or use weights outside the system (e.g., 500 weight on body text, 700 on labels); stick to Roboto 400/600.
• Don't reduce spacing below sm (12px) for section separation or below xs (4px) for internal component padding.
• Don't apply glassmorphism, gradients, or decorative effects; the design is flat, minimal, and functional.