Dock. Sunlit cream paper, cobalt pulse.
- SaaS
- Light theme
- 17 colors
- 1 typeface
Dock operates in a sunlit, cream-warm workspace language: a soft #faf9f7 canvas replaces the usual pure-white SaaS backdrop, giving every screen a paper-like, approachable feel. Typography carries the weight — 84px Roobert display headlines sit alongside 16px body text with generous breathing room, letting the copy feel like confident printed prose rather than UI chrome. A single electric cobalt blue (#0068f9) punctuates the calm neutrals as the only interactive color: filled CTAs, active states, and links all share this vivid hue, while a secondary violet (#6736eb) appears sparingly as decorative accent. Components stay featherlight — pill-shaped buttons, hairline borders, soft elevated cards, and zero heavy shadows — so the product screenshots become the visual heroes rather than chrome around them.
Dock design system
Brand3
Violet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Pressed/hover state for Electric Cobalt buttons — darker shade of the brand blue
Blue supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Accent4
Decorative wash behind icons or highlight badges — cool counterpoint to the warm cream canvas
Outlined/ghost button border, subtle blue-tinted dividers within product UI
Decorative accent — secondary brand color for highlight tags, illustrative elements, and customer logo treatments
Green supporting accent for decorative details and low-frequency emphasis. Use as a supporting accent, not as a status color
Neutrals10
Primary text, headings, icons — near-black with a cool blue undertone (17.9:1 on white)
Secondary text, dark surface fills for footer or dark mode moments
Dark surface for dark UI moments (footer dark blocks, modal overlays)
Secondary body text, card metadata, table labels
Muted helper text, placeholder text, disabled states
Icon strokes in nav, subdued borders on neutral controls
Borders and dividers — barely-there separation between cards and sections
Page background — warm off-white instead of pure white gives the entire system a paper-like, approachable feel
Card and panel surfaces — one step brighter than canvas to create subtle elevation without shadows
Elevated surfaces, nav background, button text on filled CTAs
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Pure White on Electric Cobalt
4.83 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
