A calm helpdesk language that keeps the active conversation, customer record, AI assistance, and human handoff in one frame.
Foundations
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Style identity
A calm helpdesk language that keeps the active conversation, customer record, AI assistance, and human handoff in one frame.
Soft editorial surfaces, saturated service-blue action, and warm human cues arou themeTypography
MediumLL
Primary interface, helpdesk copy, navigation, and agent controls observed in the live site.
MediumLL, MediumLL Fallback, ui-sans-serif, system-ui, sans-serifFallback: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif
IvoryLL
Editorial display contrast for a human, customer-centered service story.
IvoryLL, IvoryLL Fallback, Georgia, serifFallback: Georgia, Times New Roman, serif
DmMono
Compact status, metric, and technical metadata cues.
DmMono, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
Canvas light
#f7fbffPrimary light page or work field
Canvas dark
#111c2bPrimary dark page or work field
Surface light
#ffffffRaised content surface in light mode
Surface dark
#18263aRaised content surface in dark mode
Border
#d9e6f2Low-contrast separation and control edges
Ink
#152235Primary text and interface content
Muted ink
#617287Supporting copy and metadata
Accent
#3d83e8Primary action, selection, or brand signal
Accent strong
#2467c9Pressed and high-contrast action state
Accent soft
#deedffTinted selection or supporting surface
Secondary signal
#19a77bCollaboration, health, or growth cue
Tertiary signal
#f5967dHuman, warm, or threat cue
Type scale
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | 100px / 48px mobile | 400 | 0.9 / 1 | -0.06em |
| Section | 64px / 40px mobile | 400 | 0.95 / 1 | -0.045em |
| Conversation title | 28px / 23px mobile | 500 | 1.05 | -0.025em |
| Body large | 24px / 18px mobile | 400 | 1.1 / 1.35 | -0.02em |
| Body | 16px / 15px mobile | 400 | 1.5 | 0 |
| Detail | 12px | 500 | 1.2 | 0.04em |
Spacing & shape
Iconography
Keep icons subordinate to conversation copy, use currentColor, and pair channel or severity symbols with text. Use original CSS-built avatars and message marks in the pack.
System metrics
Radius
Spacing
Motion
Elevation
Conversation surface
0 16px 42px rgba(16,38,70,.10)Keep the active thread above surrounding context
Context drawer
0 10px 28px rgba(16,38,70,.16)Make supporting customer detail available without stealing focus
Surfaces & shape
Chalk
#f1eee9Warm editorial page field
White
#ffffffActive conversation or card
Helpdesk blue
#0007cbPrimary AI/helpdesk action
Orange
#ff5600Human warmth and service emphasis
Guidelines
Imagery
Use abstract message bubbles, customer-context cards, agent avatars, queue rows, and lightweight AI suggestion panels. Avoid real conversation screenshots, Intercom marks, copied customer logos, or downloaded illustrations. Human warmth should come from color, names, and handoff cues rather than decorative mascots.
Layout
Use a warm editorial hero and concise global navigation, then tell the AI-agent helpdesk story through Fin, omnichannel inbox, AI ticketing, Copilot, customer intelligence, onboarding, and outbound message chapters. Product specimens should use a conversation-first frame with compact context rails. On mobile, stack conversation and context, keep the composer and handoff labels visible, and turn sidebars into an accessible disclosure.
Concept
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
18 published components in collection order
Components
Production-ready specimens from this AI Kit's approved collection.
More like this
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.