Design System
Visual reference for the Make Yourself AI brand and product. Instrument Sans, dark-first, teal accent.
Colors
Brand — Teal Ramp
#2DCCD3
brand-500#26AFB8
brand-400#239CA3
brand-300#1E8A93
brand-200#008788
brand-100Brand — Accents
#A3E6BD
Primary (mint)#99DCD9
CTA (light teal)#EEE8C5
Warm (cream)#71CD9D
Highlight (green)Surfaces — Dark Theme
#0A0E11
Base#0F1011
Raised#28282C
Overlay#36424A
ElevatedSurfaces — Light Theme
#FBFAF7
Base#FFFFFF
Elevated#F4F1EA
SubtleText — Dark Theme
#D0D3D4
Primary#BEC1C5
Muted#ADB3BB
Subtle#8F97A0
DimStatus
#f97316
Pending#71CD9D
Complete#2DCCD3
Active#8F97A0
Draft#f85149
Error#d29922
Warning#58a6ff
InfoTypography
Font Family
Instrument Sans — weights 400 (Regular) and 600 (SemiBold)
'Instrument Sans', ui-sans-serif, system-ui, sans-serif
Scale
H1 — 52.9px / SemiBold / -1.82px tracking
Page Title
H2 — 36px / Bold
Section Header
H3 — 20px / SemiBold
Subsection Label
Subtitle — 20.67px / SemiBold / -0.252px tracking
Subtitle or description text
Body — 15px / SemiBold / -0.165px tracking
Body text used in tables and content areas
Caption — 13px / SemiBold / -0.13px tracking
Category labels and navigation items
Badge — 11px / SemiBold / 0.03em tracking
Badge Label
Spacing
sp-14px
sp-28px
sp-312px
sp-416px
sp-524px
sp-632px
sp-748px
sp-864px
Components
Buttons
Status Badges
PendingCompletedActiveDraftFailedWarning
Form Elements
Card
Operations Coordinator
Manages daily production scheduling, tracks work orders across the floor, and surfaces blockers before they cascade.
4 skills·2 workflows·Active
Toast / Alert
Workflow saved.
Connection failed. Check API key.
Template has unsaved changes.
Icons
Lucide — 1.5px stroke, 20px navigation / 16px inline. Color inherits from text.
Navigation (20px)
Home
Perspective
Workflows
Artifacts
Attunements
Functions
Analytics
Integrations
Settings
Users
Inline (16px)
Add
Edit
Delete
Copy
Search
Filter
Download
Upload
Share
Link
View
Email
Chat
Notify
Favorite
Like
Done
Close
Next
Expand
Public
Trigger
Run
Stack
Layout Grid
Breakpoints
| Token | Width | Columns | Behavior |
|---|---|---|---|
| xs | <640px | 1 | Single column, bottom nav |
| sm | 640px | 2 | Two-column grids, bottom nav |
| md | 768px | 6 | Sidebar rail, content narrows |
| lg | 1024px | 12 | Full layout with sidebar + content |
| xl | 1280px | 12 | Full layout + chat panel |
Content Widths
max-w-3xl768px — Prose, blog, docs
max-w-4xl896px — Wide content pages
max-w-6xl1152px — Full-width sections