Design System · reference
Every style, every piece.
The colors, text styles and components Crewmate is built from. The Agent skill /design-system reads this page before it builds anything. Hidden from search engines; delete it before you publish if you don’t need it.
01 · Colors
25 color styles. Change one, the site follows.
Lantern is the only call-to-action color. Ada, Milo, June and Theo each mark one crewmate: cursor, badge, chart and record line.
Sail
#F6F7F8
Deep
#0E1A24
Ink
#111316
Lantern
#FFB224
Ada
#FF6B4A
Milo
#2F7BFF
June
#1FA463
Theo
#8B6CFF
Deck
#FFFFFF
Fog
#E9ECEF
Deep Raised
#172633
On Sail
#111316
On Sail Low
#5B6169
On Deep
#F6F7F8
On Deep Low
#93A1AD
Line Sail
#111316 · 10 %
Line Deep
#F6F7F8 · 12 %
Wordmark Deep
#F6F7F8 · 7 %
Sail Glass
#F6F7F8 · 90 %
Glass
#FFFFFF · 55 %
Glass Strong
#FFFFFF · 90 %
Line Strong
#111316 · 16 %
Ink Hover
#2A2E33
Lantern Hover
#FFC04D
Deep Tint
#F6F7F8 · 6 %
02 · Type
Mona Sans and Spline Sans Mono. Sizes are desktop / tablet / phone.
Highlight styles share their parent’s size. The Wordmark style (300 px) is a spare display size for one giant word; the demo Footer ends on a painted quay instead.
Display Hero
Mona Sans · 96px / 76px / 46px
Your crew, on shift.
Page Title
Mona Sans · 72px / 60px / 42px
Pay per crewmate.
Heading
Mona Sans · 52px / 42px / 32px
Every move on the record.
Title
Mona Sans · 24px / 22px / 20px
Books closed two days earlier.
Number
Mona Sans · 88px / 68px / 52px
1,286
Lead
Mona Sans · 22px / 20px / 18px
Crewmates work in your tools and ask before they send.
Body
Mona Sans · 17px / 17px / 16px
June reconciles 214 bank lines a day and leaves you four to look at.
Small
Mona Sans · 14px / 14px / 13px
Approved by Dana R., Ops lead
UI
Mona Sans · 13px / 13px / 12px
# crew-chatter · 14 humans
Label
Spline Sans Mono · 11px / 11px / 10px
Waiting for you
Trace
Spline Sans Mono · 12.5px / 12.5px / 12px
09:41:10 waiting for you · refund $40
Cursor Tag
Mona Sans · 12px / 12px / 11px
Ada · Research
Button
Mona Sans · 15px / 15px / 15px
Start free
Logo
Mona Sans · 22px / 22px / 20px
crewmate
Article Heading
Mona Sans · 30px / 26px / 23px
The line we drew
Article Body
Mona Sans · 19px / 18px / 17px
Anything that sends, pays or deletes waits for a person.
Nav
Mona Sans · 14px / 14px / 14px
Product
03 · Buttons
One button, eight variants. Plus the form button.
Every action button has a Link field that points to / by default. The label rolls on hover, the mini cursor slides in.
04 · Crewmates
A name, a color, a cursor.
Agent Cursor has three variants: Idle, Waiting (Lantern tag, waiting text) and Name only. Change the arrow image and color to add a crewmate.
Ada
Research
Ada
Waiting for you
Ada
Milo
Outreach
Milo
Waiting for you
Milo
June
Finance
June
Waiting for you
June
Theo
Support
Theo
Waiting for you
Theo
05 · Cards
Every repeatable block is a component.
Edit an instance from the right panel: texts, images, links, colors and toggles are Variables. Layer names below match the Assets panel.
04 Cards/Crew Badge
04 Cards/Article Card
04 Cards/Shift Report
SHIFT REPORT · WEEK 41 · MON–FRI
6,240
tasks done
9.5 h
back per person
27 : 1
tasks per approval
0
redos
Approved by Dana R., Ops lead
APPROVED
04 Cards/Chat Message
DR
Dana Ruiz
Ops lead, Copperline
10:42
Month-end close went from four days to two. June leaves me four lines to check.
04 Cards/Plan Row
Crew
4 to 20 crewmates for teams that run on many tools.
$39
per crewmate / month
Unlimited tasks
All 120 integrations
1-year audit log
04 Cards/QA Thread
Do crewmates replace my team?
Theo
No. They take the repeat work so your team gets the judgment calls. Most crews run alongside 3 to 12 humans.
04 Cards/Shift Card
08:00
Clock in
Ada reads everything that changed overnight: 214 accounts, 61 tickets, 9 invoices. You get a three-line summary.
08:00:04 Ada read 214 accounts · 12 s
08:00:19 Theo tagged 61 tickets · 31 s
08:01:02 Ada sent you a 3-line summary
04 Cards/Run Step
01
Trigger
A new ticket, an invoice, a calendar request or a rule you set. Something happens in a tool, and a crewmate picks it up.
09:41:02 zendesk.ticket.created #4821
04 Cards/Compare Row
Audit log
30 days
1 year
Unlimited
04 Cards/Tool Tile
Gmail
Milo · sent 3 emails
04 Cards/Seal
SOC 2 Type II
Audited every year
04 Cards/Crew Logo
Copperline
257 tasks today
06 · On Deep
Approvals, rules and the record.
04 Cards/Approve Toast
04 Cards/Rule Row
Sending
Emails to customers, messages in public channels.
Asks first
04 Cards/Audit Row
14:02:11
June
sent refund
Order #8812
duplicate charge
Dana R.
04 Cards/Permission Cell
Read & draft
07 · Sections and the Crew Stage
Big pieces, same rules.
Section components: Nav, Footer, Logo, Loader, Where They Work, Approval Stack, Audit Log, Crew Builder, Sea Card, Shift Clock. The Crew Stage is the template’s one code component: pick a preset (Inbox, Calendar, Board, Books) or write your own script in its properties.
| From | Subject | Label | Status |
|---|---|---|---|
| Kofi M. · Tessel | Charged twice for October | Unread | New |
| Sam O. · Fieldnote | Can we add 12 seats? | Unread | New |
| Lena H. · Mareva | Export to CSV is broken | Unread | New |
| Priya R. · Halden | Invoice address change | Unread | New |
| Dana R. · Copperline | Refund for order #8812 | Unread | New |
| Abe T. · Pellucid | SSO setup question | Unread | New |
| Ruth K. · Larchmont | Renewal quote, please | Unread | New |
03 Sections/Painted Band · Image · variants Desktop, Full Bleed, Phone · one Agent Cursor per page, placed on a painted subject
08 · Motion
One curve, one spring. Partition P4, clean cascade.
Curve
Forth calm · cubic-bezier(0.22, 0.36, 0.12, 1) · 0.9–1.4 s · entries and reveals
Spring
UI · stiffness 320, damping 60 · cursors, toasts, buttons, badges
Reveal
Titles word by word (opacity 0, y 10, blur 5) · sections rise 24 px on view
Cursors
Curved paths, never straight · 120 ms pause before each click · typing 35–55 ms per character
Numbers
Odometer roll on view (Shift Report, counters)
Reduced motion
Loops and decorative movement stop when the visitor asks for reduced motion