Minder

MINDER · GENERAL DESIGN SYSTEM · NOTION SKIN

Minder Platform Design System

Live components. Switching skins in the nav changes tokens only.

01

Foundation / Design Tokens

Every value here is what the stylesheet at the foot of the page ships.

Notion: warm paper canvas, blue CTA, hairline rules.

Primary / Brand

primary-50 → primary-900
primary-50#F0F7FDtint background
primary-100#DBECFA
primary-200#B8D8F6
primary-300#85BDEF
primary-400#4299E7
primary-500#0075DEbrand · CTA, link
primary-600#005BABpressed / hover
primary-700#114697
primary-800#213183deep indigo
primary-900#121B48

Neutral / Gray

neutral-0 → neutral-1000
neutral-0#FFFFFFsurface
neutral-50#F6F5F4warm paper canvas
neutral-100#EDEDEC
neutral-200#E6E6E6hairline
neutral-300#C8C6C3
neutral-400#A39E98ash · disabled text
neutral-500#7F7A75
neutral-600#615D59stone · secondary text
neutral-700#494744
neutral-800#31302Ewarm charcoal
neutral-900#161615
neutral-1000#000000ink · primary text

Semantic / Status

each ramp carries -light, -default, -dark
successCompleted, verified
lightdefaultdark
#E4F5E7#1AAE39#137D29
warningNeeds attention
lightdefaultdark
#FBEBE0#DD5B00#9F4200
errorFailure, destructive
lightdefaultdark
#FAE9EC#D6455F#9A3244
infoNeutral information
lightdefaultdark
#E0EEFB#0075DE#0054A0

Background & Surface

bg-base · bg-subtle · bg-elevated · bg-overlay
bg-base#F6F5F4the page itself
bg-subtle#FFFFFFcards, fields
bg-elevated#FFFFFFmodals, dropdowns — plus shadow
bg-overlayrgba(0,0,0,0.24)scrim behind a modal

Text Colors

text-primary → text-link
Agtext-primary#000000
Agtext-secondary#615D59
Agtext-disabled#A39E98
Agtext-inverse#FFFFFF
Agtext-link#0075DE

Border & Divider

border-default · border-subtle · border-focus
border-default#E6E6E6
border-subtle#EDEDEC
border-focus#0075DE

Typography

Roboto, one family
display-164 / 64 · 700 · -2.125px

Meet the night shift

display-254 / 56 · 700 · -1.875px

One tool for your whole company

heading-140 / 44 · 700 · -1px

Plans and features

heading-226 / 32 · 700 · -0.625px

Build perfect workflows

heading-322 / 28 · 700 · -0.25px

Your connected workspace

title20 / 28 · 600 · -0.125px

Write, plan, and organize

body-md16 / 24 · 400 · 0

A calm default for clear, document-like reading.

body-sm15 / 20 · 400 · 0

Compact enough for tables and dense content.

label14 / 20 · 500 · 0

Workspace name

caption14 / 20 · 400 · 0

Supporting notes and footnotes.

eyebrow12 / 16 · 600 · 0.125px

ESSENTIAL FOR STAYING ORGANIZED

Spacing — 8px base rhythm
xxs4px
xs8px
sm12px
md16px
lg24px
xl28px
xxl32px
3xl48px
4xl64px
Border radius
xs4pxform fields
sm6pxchips
md8pxutility buttons
lg12pxcards
xl16pxpanels
full9999pxCTAs, badges, avatars
Elevation & depth
noneflat card on the warm canvas
softcards, menus
elevatedmodals, popovers
Grid & breakpoints
Mobile< 768pxSingle column; nav collapses; CTAs stack full-width
Tablet768–1023pxGrids collapse toward 2-up; nav condenses
Laptop1024–1279pxTightened gutters; 3-column grids retained
Desktop≥ 1280pxFull multi-column grids; centred ~1200px column

02

Unique Component

The four pieces a re-vendor would overwrite.

Nav bar · outline trace

--sweep-intensity 1.00 · --sweep-cycle 18s
A · Outline tracecomposed · ambient-sweep
MinderGeneralDashboardAI chatLibraryGet global.css
One lap every 18s; ~3s to cross.

The light rides the whole outline on a motion path, so it holds one speed the whole way round instead of tearing along the long edges the way a rotating gradient would. Drops onto .systemNav unchanged — --sweep-radius defaults to 0, which is the real bar’s square corner.

Button · hover

--primary-hover-* · --primary-hover-lift
Primarycomposed · globals.css

Hover picks up a vertical gradient with a lit top edge and an outer glow. The gradient starts at --primary itself, so it can never drift from the resting state it grows out of. Geometry is untouched — only the surface changes.

Secondarycomposed · globals.css

A solid tint rather than a gradient, so the two never compete. Both skies are one set of tokens; only the values swap.

Toast · tilted sweep

--sweep-toast-tilt -30deg
Toast / Notificationcomposed · sonner + ambient-sweep

A toast lives about four seconds, so the nav’s 18s cycle would never be seen on one: the light runs once, just after it settles. Status toasts sweep in their own colour — a green toast lit with brand blue would read as two unrelated systems.

State surfaces

lottie · vector, no raster assets
Loading statecomposed · empty + lottie + skeleton
Loading deployments
Fetching the latest rollout history.
Empty statecomposed · empty + lottie
No deployments yet
Kick off the first rollout to see it here.

03

Form & Input

Button
Text input
Textarea
Select / Dropdowncomponents/select · native-select
Checkbox
Radio button
Switch / Toggle
Slider / Range
Date pickercomponents/calendar + popover
Search input
File uploadcomponents/input[type=file]
Label, helper text, error

Shown to everyone in the workspace.

Horizontal field

Control first, text beside it.

04

Navigation

Navbar / Header
Minder
Sidebar / Side navigation
Inbox
Tabs
Make changes to your account here.
Steppercomposed · separator + button
  1. Workspace
  2. 2Members
  3. 3Billing
  4. 4Done
Menu / Dropdown menu

05

Feedback & Status

Alert / Banner
Toast / Notification
Modal / Dialog
Popover
Tooltip
Progress bar
Spinner / Loading
Skeleton loader
Loading statecomposed · empty + lottie + skeleton
Loading deployments
Fetching the latest rollout history.
Empty state
No deployments yet
Kick off the first rollout to see it here.
Badge / Tag / Chip
DefaultSecondaryOutlineDestructive Needs review

06

Data Display

Card
Deploy the kit
Roll it out to a new customer.
New
Eight steps, tracked end to end.
Stat / KPI cardcomposed · card + badge
Total visitors
84,392
+12.8%
Active workspaces
1,284
+8.4%
Table / Data grid
Recent kit deployments.
CustomerOwnerStatusProgress
Acme CorpHungLive100%
NorthwindMaiDeploying62%
GlobexTrungBlocked18%
List
Customer tracker

Updated 12 minutes ago

Kit sync

Running · 3 of 8 steps

Avatar
MOHN
HNMTTL
+3
Accordion / Collapse

Yes. It follows the WAI-ARIA disclosure pattern.

Timelinecomposed · marker
Kit generated 09:12
Environment provisioned 09:24
Data migrated 09:51
Live 10:04
Carousel
1
2
3
4
5
Divider
Minder Ops

An internal operations console.

Blog
Docs
Source

07

Overlay / Interaction

Dropdown menu
Context menu
Right-click here
Command palette

Command Palette

Search for a command to run...

Confirmation dialog

08

The stylesheet

Generated from tokens.ts. Follows the active skin.

CSSminder-tokens.css
Download
/* ==========================================================================
   Minder general design system — design tokens
   Generated from app/design-system/general/tokens.ts
   ========================================================================== */

:root {
  /* Primary / brand */
  --color-primary-50: #F0F7FD;
  --color-primary-100: #DBECFA;
  --color-primary-200: #B8D8F6;
  --color-primary-300: #85BDEF;
  --color-primary-400: #4299E7;
  --color-primary-500: #0075DE;
  --color-primary-600: #005BAB;
  --color-primary-700: #114697;
  --color-primary-800: #213183;
  --color-primary-900: #121B48;

  /* Neutral */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F6F5F4;
  --color-neutral-100: #EDEDEC;
  --color-neutral-200: #E6E6E6;
  --color-neutral-300: #C8C6C3;
  --color-neutral-400: #A39E98;
  --color-neutral-500: #7F7A75;
  --color-neutral-600: #615D59;
  --color-neutral-700: #494744;
  --color-neutral-800: #31302E;
  --color-neutral-900: #161615;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-light: #E4F5E7;
  --color-success: #1AAE39;
  --color-success-dark: #137D29;
  --color-warning-light: #FBEBE0;
  --color-warning: #DD5B00;
  --color-warning-dark: #9F4200;
  --color-error-light: #FAE9EC;
  --color-error: #D6455F;
  --color-error-dark: #9A3244;
  --color-info-light: #E0EEFB;
  --color-info: #0075DE;
  --color-info-dark: #0054A0;

  /* Background & surface */
  --bg-base: #F6F5F4;
  --bg-subtle: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0,0,0,0.24);

  /* Text */
  --text-primary: #000000;
  --text-secondary: #615D59;
  --text-disabled: #A39E98;
  --text-inverse: #FFFFFF;
  --text-link: #0075DE;

  /* Border & divider */
  --border-default: #E6E6E6;
  --border-subtle: #EDEDEC;
  --border-focus: #0075DE;

  /* Typography — Roboto, one family */
  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-display-1: 700 64px/64px var(--font-sans);
  --tracking-display-1: -2.125px;
  --text-display-2: 700 54px/56px var(--font-sans);
  --tracking-display-2: -1.875px;
  --text-heading-1: 700 40px/44px var(--font-sans);
  --tracking-heading-1: -1px;
  --text-heading-2: 700 26px/32px var(--font-sans);
  --tracking-heading-2: -0.625px;
  --text-heading-3: 700 22px/28px var(--font-sans);
  --tracking-heading-3: -0.25px;
  --text-title: 600 20px/28px var(--font-sans);
  --tracking-title: -0.125px;
  --text-body-md: 400 16px/24px var(--font-sans);
  --tracking-body-md: 0;
  --text-body-sm: 400 15px/20px var(--font-sans);
  --tracking-body-sm: 0;
  --text-label: 500 14px/20px var(--font-sans);
  --tracking-label: 0;
  --text-caption: 400 14px/20px var(--font-sans);
  --tracking-caption: 0;
  --text-eyebrow: 600 12px/16px var(--font-sans);
  --tracking-eyebrow: 0.125px;

  /* Spacing — 8px base rhythm */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 28px;
  --space-xxl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* Border radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-none: none;
  --shadow-soft: 0 .175px 1.041px rgba(0,0,0,.01), 0 .8px 2.925px rgba(0,0,0,.02), 0 2.025px 7.847px rgba(0,0,0,.027), 0 4px 18px rgba(0,0,0,.04);
  --shadow-elevated: 0 .5px 1px rgba(0,0,0,.012), 0 2px 5px rgba(0,0,0,.02), 0 5px 12px rgba(0,0,0,.028), 0 11px 26px rgba(0,0,0,.038), 0 23px 52px rgba(0,0,0,.05);

  /* Breakpoints */
  /* Mobile: < 768px — Single column; nav collapses; CTAs stack full-width */
  /* Tablet: 768–1023px — Grids collapse toward 2-up; nav condenses */
  /* Laptop: 1024–1279px — Tightened gutters; 3-column grids retained */
  /* Desktop: ≥ 1280px — Full multi-column grids; centred ~1200px column */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font: var(--text-body-md);
}

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-subtle);
  padding: var(--space-lg);
}

.card--elevated { border-color: transparent; box-shadow: var(--shadow-elevated); }