Visual Identity System
Coworkers
Where AI feels like a team you already know how to work with.
Insiders Preview
Design
Philosophy
Make the extraordinary feel ordinary.
We are not building the best AI model. We are building the best experience for working with AI. Our visual identity must reflect this—technology that disappears into the background, while the human experience feels like magic.
Clarity
Every element serves a purpose. Every interaction has a clear reason to exist.
Partnership
Work with AI like you work with a team—collaborative, warm, never transactional.
Delight
Something people choose, recommend, and talk about. A secret weapon for work.
Color
Palette
Warm, human, approachable. Our palette feels like a sunlit workspace—inviting, not clinical. We use restraint: five colors maximum.
Primary
Warm Charcoal
#2D2A26
Primary text, headings, key UI elements
Cream
#FAF8F5
Primary background, canvas, whitespace
Accent
Terracotta
#C4725C
Accent elements, interactive highlights, CTAs
Neutrals
Warm Sand
#F0ECE6
Stone
#6B6560
Pebble
#E5E0D8
Usage Ratio
Typography
Two typefaces. Maximum clarity. Playfair Display brings warmth and humanity to headlines. Inter ensures perfect readability everywhere else.
Display
font-serifPlayfair Display
Used for headlines, hero text, and moments of emphasis. Brings warmth and editorial elegance.
Body
font-sansInter
Used for body copy, UI elements, labels, and all functional text. Optimized for readability at any size.
Type Scale
Spacing &
Layout
Whitespace is premium. Generous spacing creates breathing room—the calm confidence of a design that doesn't need to shout.
Spacing Scale
Grid System
12-column grid with 16px gutter. Maximum content width: 1152px (72rem).
Border Radius
sm
4px
md
6px
lg
8px
xl
12px
2xl
16px
full
50%
Layout Principles
Generous margins
Minimum 24px padding on mobile, 48px on desktop. Let content breathe.
Consistent rhythm
Use the spacing scale consistently. Multiples of 8px create visual harmony.
Asymmetric balance
12-column grid enables 4/8 or 5/7 splits—more sophisticated than centered.
Mobile-first
Design for small screens first. Enhance, don't adapt, for larger screens.
Components
Building blocks designed for clarity and delight. Every component should feel inevitable—obvious, not clever.
Buttons
Buttons use 12px vertical padding, 24px horizontal. Text is 14px medium weight. Border radius: 8px.
Inputs
Helper text provides additional context.
Cards
Card Title
Cards contain related content and actions. Use subtle borders and rounded corners.
Inverted Card
Use inverted cards sparingly for emphasis or calls-to-action.
Interactive States
Selection
Toggle
Badges
Voice &
Tone
We speak like humans, not like a company. Direct, warm, and unpretentious. Never jargon. Never cleverness for cleverness' sake.
AI should not feel like a tool you have to learn. It should feel like a team you already know how to work with.
Writing Guidelines
"Create a new co-worker"
"Your workspace is ready"
"Something went wrong. Let's try that again."
"Meet your team"
"Initialize new AI agent instance"
"Workspace provisioning complete"
"Error 500: Internal server error"
"AI-powered assistant dashboard"
Voice Attributes
Clear
Every word earns its place. No fluff. No jargon. Say exactly what you mean.
"Create co-worker"
Warm
Friendly without being familiar. Professional without being cold. Like a helpful colleague.
"Let's get started"
Confident
We know what we're doing. No hedging. No unnecessary qualifiers. Direct and sure.
"Your work is saved"
Key Terminology
When someone uses Coworkers, they should feel like they've been handed something they didn't realize they were waiting for.
Not because it's flashy. Not because it's the most powerful. But because it's the first thing that just makes sense.