Foundations

The source of truth for design tokens and how to wire them up. Each section pairs the live tokens with copyable setup snippets so what you see is exactly what globals.css defines.

palette

Colors

arrow_forward

Primitives, semantic, theme tokens, and per-app brand swap

text_fields

Typography

arrow_forward

Three font families and 19 composite text style tokens

emoji_symbols

Icons

arrow_forward

Material Symbols Rounded with variable fill, weight, and optical size

For engineers

Dev notes

Things worth flagging up-front for engineers who haven’t worked in this stack before.

bolt

Tailwind v4 — there is no config file

If you’ve worked with Tailwind v3, don’t look for tailwind.config.{ts,js}— it doesn’t exist. Tokens are defined directly in CSS via the @theme block at the top of src/app/globals.css. Every CSS variable inside @theme auto-generates the matching utilities — declare --color-success and you immediately get bg-success, text-success, border-success, etc. The file below is the complete design system as plain CSS — colors, fonts, motion, and composite typography classes. Drop it into your stylesheet pipeline (any framework — Rails, Next, Vite, vanilla) and the tokens are live.

CSS·Complete design system — colors, fonts, motion, composite typography classes src/app/globals.css

@import "tailwindcss";

@theme {
  /* ─── PRIMITIVES ─────────────────────────────────────────────
     Foundation values. Never applied directly to elements.
     Referenced by Semantic, Tokens, and Apps below. */

  --color-primitive-gray-25:  #fcfcfc;
  --color-primitive-gray-50:  #f6f6f6;
  --color-primitive-gray-100: #e7e7e7;
  --color-primitive-gray-200: #d1d1d1;
  --color-primitive-gray-300: #b0b0b0;
  --color-primitive-gray-400: #888888;
  --color-primitive-gray-500: #6d6d6d;
  --color-primitive-gray-600: #5d5d5d;
  --color-primitive-gray-700: #4f4f4f;
  --color-primitive-gray-800: #454545;
  --color-primitive-gray-900: #3d3d3d;
  --color-primitive-gray-950: #181818;

  --color-primitive-app-core-solid:           #e14a00;
  --color-primitive-app-core-gradient-light:  #fcaa30;
  --color-primitive-app-core-gradient-dark:   #f27335;
  --color-primitive-app-validation-solid:           #009e8c;
  --color-primitive-app-validation-gradient-light:  #00d8b6;
  --color-primitive-app-validation-gradient-dark:   #059898;
  --color-primitive-app-handling-solid:           #6f4cff;
  --color-primitive-app-handling-gradient-light:  #8044ff;
  --color-primitive-app-handling-gradient-dark:   #443092;
  --color-primitive-app-hubs-solid:           #0b6bff;
  --color-primitive-app-hubs-gradient-light:  #00c5ff;
  --color-primitive-app-hubs-gradient-dark:   #0072ff;

  --color-primitive-semantic-success-500:     #0fd877;
  --color-primitive-semantic-success-800:     #0d6e41;
  --color-primitive-semantic-danger-500:      #f83446;
  --color-primitive-semantic-danger-800:      #a01421;
  --color-primitive-semantic-warning-500:     #ef9a11;
  --color-primitive-semantic-warning-800:     #8f3f11;
  --color-primitive-semantic-informative-500: #068bee;
  --color-primitive-semantic-informative-800: #024a8a;

  /* ─── SEMANTIC ───────────────────────────────────────────────
     References primitives. Not theme-reactive.
     Used for feedback and status communication. */

  --color-success:     var(--color-primitive-semantic-success-500);
  --color-success-fg:  var(--color-primitive-semantic-success-800);
  --color-danger:      var(--color-primitive-semantic-danger-500);
  --color-danger-fg:   var(--color-primitive-semantic-danger-800);
  --color-warning:     var(--color-primitive-semantic-warning-500);
  --color-warning-fg:  var(--color-primitive-semantic-warning-800);
  --color-informative: var(--color-primitive-semantic-informative-500);
  --color-informative-fg: var(--color-primitive-semantic-informative-800);

  /* ─── TOKENS ─────────────────────────────────────────────────
     References primitives. Reactive to light/dark mode.
     These are what components should consume. */

  --color-background:        #ffffff;
  --color-foreground:        var(--color-primitive-gray-800);
  --color-primary:           var(--color-primitive-gray-25);
  --color-content:           var(--color-primitive-gray-950);
  --color-secondary:         var(--color-primitive-gray-50);
  --color-tertiary:          var(--color-primitive-gray-100);
  --color-content-secondary: var(--color-primitive-gray-500);
  --color-shimmer-highlight: rgba(255, 255, 255, 0.75);

  /* ─── APPS ───────────────────────────────────────────────────
     References primitives. Reactive to app theming.
     Default: Core. Swap per-app via data-app attribute. */

  --color-app:                var(--color-primitive-app-core-solid);
  --color-app-fg:             #ffffff;
  --color-app-gradient-light: var(--color-primitive-app-core-gradient-light);
  --color-app-gradient-dark:  var(--color-primitive-app-core-gradient-dark);

  /* Fonts */
  --font-sans:    var(--font-ibm-plex-sans), system-ui, sans-serif;
  --font-heading: var(--font-space-grotesk), system-ui, sans-serif;
  --font-mono:    var(--font-ibm-plex-mono), ui-monospace, monospace;

  /* Motion — used by transition-* utilities without explicit duration/ease */
  --default-transition-duration: 220ms;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme overrides — swap via data-theme attribute */
[data-theme="light"] {
  --color-background:        #ffffff;
  --color-foreground:        var(--color-primitive-gray-800);
  --color-primary:           var(--color-primitive-gray-25);
  --color-content:           var(--color-primitive-gray-950);
  --color-secondary:         var(--color-primitive-gray-50);
  --color-tertiary:          var(--color-primitive-gray-100);
  --color-content-secondary: var(--color-primitive-gray-500);
  --color-shimmer-highlight: rgba(255, 255, 255, 0.75);
}
[data-theme="dark"] {
  --color-background:        var(--color-primitive-gray-950);
  --color-foreground:        var(--color-primitive-gray-300);
  --color-primary:           #202020;
  --color-content:           var(--color-primitive-gray-25);
  --color-secondary:         #242424;
  --color-tertiary:          #2e2e2e;
  --color-content-secondary: var(--color-primitive-gray-400);
  --color-shimmer-highlight: rgba(255, 255, 255, 0.08);
}

/* App overrides — swap via data-app attribute */
[data-app="validation"] {
  --color-app:                var(--color-primitive-app-validation-solid);
  --color-app-gradient-light: var(--color-primitive-app-validation-gradient-light);
  --color-app-gradient-dark:  var(--color-primitive-app-validation-gradient-dark);
}
[data-app="handling"] {
  --color-app:                var(--color-primitive-app-handling-solid);
  --color-app-gradient-light: var(--color-primitive-app-handling-gradient-light);
  --color-app-gradient-dark:  var(--color-primitive-app-handling-gradient-dark);
}
[data-app="hubs"] {
  --color-app:                var(--color-primitive-app-hubs-solid);
  --color-app-gradient-light: var(--color-primitive-app-hubs-gradient-light);
  --color-app-gradient-dark:  var(--color-primitive-app-hubs-gradient-dark);
}

/* ─── Text style tokens ──────────────────────────────────────────
   Composite classes: each one defines font, size, weight,
   line-height, and tracking as a single token. Apply ONE class
   per text element — don't compose with text-[14px] font-medium. */

/* Headings — Sans */
.heading-30 { font-family: var(--font-sans); font-size: 30px; font-weight: 500; line-height: 40px; letter-spacing: 0; }
.heading-24 { font-family: var(--font-sans); font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: 0; }
.heading-20 { font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: 0; }

/* Headings — Grotesk */
.heading-30-grotesk { font-family: var(--font-heading); font-size: 30px; font-weight: 500; line-height: 40px; letter-spacing: -0.02em; }
.heading-24-grotesk { font-family: var(--font-heading); font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.02em; }
.heading-20-grotesk { font-family: var(--font-heading); font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: -0.01em; }

/* Copy — Sans */
.copy-16        { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 20px; letter-spacing: 0; }
.copy-16-medium { font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: 0; }
.copy-14        { font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 0; }
.copy-14-medium { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: 0; }
.copy-12        { font-family: var(--font-sans); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0; }
.copy-12-medium { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }
.copy-10        { font-family: var(--font-sans); font-size: 10px; font-weight: 500; line-height: 13px; letter-spacing: 0; }

/* Copy — Mono */
.copy-14-mono          { font-family: var(--font-mono); font-size: 14px; font-weight: 500; line-height: 18px; letter-spacing: 0; }
.copy-12-mono          { font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }
.copy-12-mono-semibold { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0; }
.copy-10-mono          { font-family: var(--font-mono); font-size: 10px; font-weight: 500; line-height: 13px; letter-spacing: 0; text-transform: uppercase; }

/* Buttons */
.button-14 { font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0; }
.button-12 { font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0; }