Pulsar

Pulsar Tools

Brand

One brand colour in; a full token kit out. Colour ramps, semantic surface and text tokens, a type scale, contrast checks — exported as CSS custom properties, a Tailwind theme, W3C design tokens JSON, and a swatch sheet for the brand document.

16px
8px
Type scale ratio
1.25

border-default on surface-page is 1.9:1 — below the minimum. A darker primary fixes text-brand and text-link; a lighter subtle surface fixes body text on it.

Business Nebula tokensBusiness NebulaDesign tokens — generated by Pulsar BrandPRIMARY50 #f1e8ff100 #e4d9ff200 #cdbeff300 #b19cff400 #9573ff500 #7a46ff600 #6638d9700 #5026b1800 #3b138a900 #270165950 #180046NEUTRAL50 #f4f4fd100 #e7e7f0200 #d0d0d9300 #b4b3bc400 #95949c500 #7a7981600 #63626a700 #4d4c53800 #37373e900 #24232a950 #131319TYPE SCALE · Poppinsxs · 10.24pxsm · 12.8pxbase · 16pxlg · 20pxxl · 25px2xl · 31.25px3xl · 39.06px4xl · 48.83px5xl · 61.04pxCONTRASTtext-body on surface-page — 10.8:1 AAAtext-muted on surface-page — 5.51:1 AAtext-brand on surface-page — 8.52:1 AAAtext-link on surface-card — 6.7:1 AAtext-on-brand on surface-brand — 5.06:1 AAtext-body on surface-brand-subtle — 9.97:1 AAAborder-default on surface-page — 1.9:1 AA non-text
Swatch sheet
Business Nebula tokensBusiness NebulaDesign tokens — generated by Pulsar BrandPRIMARY50 #f1e8ff100 #e4d9ff200 #cdbeff300 #b19cff400 #9573ff500 #7a46ff600 #6638d9700 #5026b1800 #3b138a900 #270165950 #180046NEUTRAL50 #f4f4fd100 #e7e7f0200 #d0d0d9300 #b4b3bc400 #95949c500 #7a7981600 #63626a700 #4d4c53800 #37373e900 #24232a950 #131319TYPE SCALE · Poppinsxs · 10.24pxsm · 12.8pxbase · 16pxlg · 20pxxl · 25px2xl · 31.25px3xl · 39.06px4xl · 48.83px5xl · 61.04pxCONTRASTtext-body on surface-page — 10.8:1 AAAtext-muted on surface-page — 5.51:1 AAtext-brand on surface-page — 8.52:1 AAAtext-link on surface-card — 6.7:1 AAtext-on-brand on surface-brand — 5.06:1 AAtext-body on surface-brand-subtle — 9.97:1 AAAborder-default on surface-page — 1.9:1 AA non-text
/* Business Nebula design tokens — generated by Pulsar Brand */
:root {
  --primary-50: #f1e8ff;
  --primary-100: #e4d9ff;
  --primary-200: #cdbeff;
  --primary-300: #b19cff;
  --primary-400: #9573ff;
  --primary-500: #7a46ff;
  --primary-600: #6638d9;
  --primary-700: #5026b1;
  --primary-800: #3b138a;
  --primary-900: #270165;
  --primary-950: #180046;
  --neutral-50: #f4f4fd;
  --neutral-100: #e7e7f0;
  --neutral-200: #d0d0d9;
  --neutral-300: #b4b3bc;
  --neutral-400: #95949c;
  --neutral-500: #7a7981;
  --neutral-600: #63626a;
  --neutral-700: #4d4c53;
  --neutral-800: #37373e;
  --neutral-900: #24232a;
  --neutral-950: #131319;

  --surface-page: #f4f4fd;
  --surface-card: #ffffff;
  --surface-sunken: #e7e7f0;
  --surface-inverse: #131319;
  --surface-brand: #7a46ff;
  --surface-brand-subtle: #f1e8ff;
  --text-strong: #131319;
  --text-body: #37373e;
  --text-muted: #63626a;
  --text-on-brand: #ffffff;
  --text-brand: #5026b1;
  --text-link: #6638d9;
  --border-subtle: #d0d0d9;
  --border-default: #b4b3bc;
  --border-brand: #7a46ff;

  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;
  --text-5xl: 3.815rem;
  --font-sans: Poppins, system-ui, sans-serif;
  --font-mono: JetBrains Mono, ui-monospace, monospace;
  --radius: 8px;
}

2 ramps × 11 steps, 15 semantic tokens, 9 type sizes.