Design system
Everything here was taken from the Audience reference screens: colors were pixel-sampled and sizes measured at 2x and halved. Items marked derived don't appear in the screens and were derived from the same tokens.
Colors
Live values. Switch the theme to see the dark palette (derived).
Surfaces
backdropshellpanelcardcard-outercontrolnav-activehovercontrol-hoverLines
borderdividergridgoalText
fgfg-2fg-3fg-4fg-5iconCoral — brand
coral-50coral-100coral-200coral-300coral-400coral-500coral-600coral-700Data & semantic
pink-500blue-500blue-600green-500amber-500red-500gray-fillinverseTypography
Inter (variable, optical size axis). Sizes matched to the screens by cap height and text width.
text-nd-display18,42028.5 / 34 · 400 · −0.02em · opsz 32 · Big totalstext-nd-titleAudience20 / 28 · 500 · −0.005em · opsz 32 · Page titletext-nd-metric1,28418.5 / 24 · 400 · −0.01em · KPI valuetext-nd-headingAudience growth15.6 / 20 · 500 · opsz 32 · Card titletext-nd-bodyGrow and understand the people who follow you14 / 20 · 400 · Body copy (subtitle 13.5, source rows 14.5)text-nd-navUnited States13 / 18 · 500 · opsz 32 · Nav, list rows, trendtext-nd-labelTotal audience12.5 / 16 · 400 · KPI labels, valuestext-nd-captionContacts by country10.75 / 14 · 400 · Legends, card subtitlestext-nd-microSummer low · +5210 / 14 · 500 · Chips, tooltips, overlineoverlineSpacing & radius
4px rhythm with the exact offsets measured in the screens.
Spacing
Radius
rounded-nd-xsrounded-nd-smrounded-nd-mdrounded-nd-controlrounded-nd-shellrounded-nd-kpirounded-nd-panelrounded-nd-cardApp frame
1500px frame: shell inset 41px top / 86px sides · sidebar column 227px · top bar 68px · panel padding 16px · KPI grid 4 × 252px, gap 14 · growth row 1fr + 315px, gap 18 · bottom row 1fr + 1fr, gap 18 · card height 320px.
Borders & elevation
Hairline 1px borders carry structure; shadows stay barely visible. Dark theme uses deeper shadows (derived) so elevation still reads.
shadow-nd-xsshadow-nd-cardshadow-nd-controlshadow-nd-popshadow-nd-btnIcons
Custom duotone glyphs on a 16px grid. Left: nav tone (gray body, dark details). Right: active / default (secondary at 42%). Nav size 14px box.
Data display
KPI cards
KPI cards · footer variant
Tick meters
Trend
Chips & tooltips
Legend
Source bars
Location rows
Description list
Campaign details
- Type
- Regular campaign
- From
- Harbor & Co.hello@harbor.co
- Reply-to
- —
- Created
- Oct 12, 2026
Tracking
- Track opens
- On
- Track clicks
- On
- Social sharing
- Off
Status colors
Six tones, each with solid · soft · line · ink tokens in both themes (derived; solids reuse the sampled green, amber and blue).
successsuccess-softsuccess-linesuccess-inkdangerdanger-softdanger-linedanger-inkwarningwarning-softwarning-linewarning-inkinfoinfo-softinfo-lineinfo-inkneutralneutral-softneutral-lineneutral-inkbrandbrand-softbrand-linebrand-inkProduct states
Variants
Inline alerts
Dropdowns
Same surface as selects: radius 8, 1px border, pop shadow. Items 28px · 12.5px · 14px duotone icons.
Toasts
Bottom-right stack (max 4). Hover pauses the countdown line; errors stay 7s, loading stays until resolved.
Static preview
Forms
Fields are 32px — the same height as buttons — radius 8, 13px text. Focus: coral border + 3px glow. Invalid: danger border. Labels 12.5px/500 (derived).
Text fields · states
Helper text sits under the field.
Enter a valid email address
Locked by your workspace admin.
Full-width form select with descriptions and a check on the chosen item.
Choose a sender
Shown in the inbox preview.
Checkbox
Radio
Switch
Choice cards
Segmented
Form layout
Sender
Who your emails come from.
Leave empty to use the from email.
Notifications
Alerts for your workspace.
Modals
Card surface (radius 20, 1px border), footer on the KPI-shell tint. Focus is trapped; Esc and the scrim close it (derived).
Danger is the only filled colour button; it appears only inside a confirm step.
App shell & top bar
Sidebar states (default · locked · compact rail · upgrade card) and the top-bar parts: command search (⌘K), product switcher, notifications, user menu.
Top bar
Press ⌘K to focus search · ↑ ↓ to move · Enter to open · Esc to close.
Locked (no subscription)
Compact rail
Rules
- Locked items keep their place, turn fg-5 with a lock glyph and are not links (aria-disabled).
- The compact rail (64px) is used by sub-apps with their own side panel (Settings, Media); labels move to right-side tooltips.
- The upgrade card only appears in the sidebar footer while the product is locked.
- Below 1024px the sidebar becomes a drawer opened from the menu button; it closes on navigation, Esc or the scrim.
Notifications
Built only from existing parts: bell icon button + brand status dot, menu surface, card-title + NdBadge header, segmented filter, menu rows with status-tone tiles, ⋮ row menu (read/unread, dismiss with Undo), ghost buttons.
With activity
Notifications
- Spring launch was sent
Delivered to 18,420 contacts · 46.2% opened in the first hour.
2m ago · View report - Bounce rate is rising
4.1% this week on harbor.co — above the 3% safe limit.
38m ago · Review bounces - Import complete
1,284 contacts added to Newsletter. 16 duplicates skipped.
1h ago - New signups milestone
Your signup form passed 8,000 subscribers.
3h ago
- Payment failed
We couldn't charge the card ending 4242 for $49.00.
Yesterday · Update card - Welcome series paused
Sarah paused the automation while editing step 2.
Mar 12 - Domain verified
harbor.co is ready to send.
Mar 10
Tabs, pagination, stepper & timeline
Tabs are sidebar nav items in a row. Pagination uses small icon buttons with the nav-active fill. Steps are icon tiles: success when done, active when current, outline when upcoming. The timeline reuses the step tiles and hairline for flows such as an automation sequence; gaps carry a label on the line.
Page header
Spring launch
Campaign · Scheduled for Mar 14, 9:00 AM
Maya Okafor
maya@harborandco.com
Side navigation
Tabs
Use ← → to move between tabs.
Pagination
Stepper
- RecipientsWho gets it
- 2ContentDesign the email
- 3ScheduleWhen it sends
- 4ReviewCheck and send
Stepper · vertical checklist
- Import contacts
Upload a CSV or connect an integration.
- 2Create your first campaign
Pick a template and write your message.
- 3Track results
Opens, clicks and bounces appear here.
Timeline · automation sequence
- Trigger: Welcome EmailA new subscriber joins your list
- Send right away
- Welcome to the clubSubject: Thanks for joining — here's 10% offEmail 1
- Wait 2 days
- Getting startedSubject: Three ways to get more out of your planEmail 2
- ExitUnsubscribes · makes a purchase
Lists, avatars & tags
List views reuse the card, tick meter and status badges; avatars and tags reuse the status tones and badge geometry; tooltips are the chart's dark annotation chip.
List view
Recent campaigns
What to explore next
Recent lists
Preview cards
Email preview
List rows
Avatars
Tags
Tooltips
Wizard
One slim bar stays in view: the way out, what you're making, and where you are. Each step asks a question.
New campaign
Step 3 of 4Who should receive this?
A step's heading is the question it asks.
Editing marks
For the email builder's toolbars. Everything else uses the duotone icons above.
Code block
px_example_token_for_this_style_guide
Long values wrap instead of scrolling.
Code sample (languages)
curl -X POST 'https://api.example.com/emails' \
-H 'Authorization: Bearer key_xxx'Product accent (Developer API is pink)
Choice cards
Numbered steps
- 1Instructions, not progress
Use the stepper when steps get done. Use this when they're just something to read.
- 2All equally readable
Nothing is greyed out, because nothing has been completed.
Form skeleton
Search & pick
Combobox: a filter or single choice with search, for lists too long for a select. Chip select: pick several from a visible set. Swatches: a colour palette instead of the OS colour picker.
Rule flow on a board panel, with add slot and catalog picker
Who's included
Contacts who match these rules…
- Everyone you can email
- 1
- and
- 2Date addedis afterOct 2, 2026
- If all are true → they join this segment1,204 contacts right now
Media library parts (asset card, folder list, storage meter)
Attention list (several things to do, instead of stacked alerts)
- You've used this period's email allowanceNew campaigns won't send until it resets.
- Room for 30 more contactsImports stop at your limit.
- Your plan ends on Nov 14You keep full access until then.
Slot picker (a few out of many, when how many matters)
- Open
- 32%
- Click
- 6%
- Open
- 24%
- Click
- 3%
Multi combobox (long lists, full names)
- Newsletter subscribers4.2K
- VIP customers318
Combobox
Chip select
Swatches
Progress, empty & error states
Progress is the signature tick meter. Empty states are an icon tile, a card title and pill actions. Error states are the empty state in the danger tone with Try again; the slow notice appears when loading runs long.
Progress
Empty states
No campaigns yet
Create your first campaign to start reaching your 18,420 contacts.
Nothing to review
All bounced contacts have been cleaned up.
Recent campaigns
Couldn't load your campaigns
The server had a problem loading your campaigns. Try again in a moment.
Tables
Card frame, overline headers, menu-row hover, brand-soft selection, footer bar for pagination. Full example with filters, bulk actions and sorting on the Subscribers screen.
| Status | Segments | Opened | ||
|---|---|---|---|---|
Jane Cooper Jane Cooper jane@harbor.co | Subscribed | NewsletterVIP customers | 62% | |
Omar Haddad Omar Haddad omar@gmail.com | Pending | Webinar | 18% | |
Priya Raman Priya Raman priya@outlook.com | Bounced | — | — |
Status screens
One component for HTTP errors, warnings, success and failure — status tile, code badge, title, next step. Standalone page or inside the app panel.
Charts
Hand-drawn SVG so every offset matches the screens exactly; data read off the reference pixels.
Campaign performance
Audience growth
New contacts
Grouped bars
Skeletons
Each mirrors its component's shape; shimmer sweeps right to left.
Platforms, calendar & post preview
Brand marks are the only icons that keep their colour (X and TikTok follow the foreground). The platform tile is the outline icon tile with a brand mark; a second brand or an account photo sits as a corner badge. The month calendar is a table card with status-tone pills (dots on phones) and an optional colour key. The post preview keeps each network's layout and order on nd surfaces, in the same nested-card stage as the email preview.
Brand marks · platform tiles
Month calendar
November 2026
6 postsDate & time picker
Past times are disabled. Presets, keyboard arrows, 15-minute slots.
Closes when you pick a day.
Pick a date and time that hasn't passed
Media uploader
Up to 4 files · images or video. Drag files onto the tile.
Media modal
Social post preview
Spring blend is back ☕ Bright, citrusy and roasted this morning. Grab a bag before Friday #springblend @harbor