Inngest Dashboard

Design Specification — Inngest Dashboard

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#159E88). All type is set in CircularXX. Detected font weights: 200, 300, 400, 500, 600, 700, 800, 900. Detected style signatures: technical / mono accents.

Logo asset(s): https://app.inngest.com/favicon.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Gradients

• radial-gradient(at 62% 96%,rgba(2,117,177,.8) 0px,transparent 50%),radial-gradient(at 48% 9%,rgba(21,158,136,.8) 0px,transparent 50%),radial-gradient(at 8% 11%,rgb(2,2,2) 0px,transparent 50%),radial-gradient(at 3% 93%,rgba(102,189,139,.8) 0px,transparent 50%),radial-gradient(at 89% 26%,rgba(45,159,101,.8) 0px,transparent 50%),radial-gradient(at 84% 79%,rgb(2,2,2) 0px,transparent 50%)

Typography

Primary typeface: CircularXX — stack: CircularXX

Font stacks (most used first)

• CircularXX
• CircularXX,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"
• CircularXXMono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit
• CircularXXMono

Derived type scale

Font sizes (by frequency)

Weights in use: 200, 300, 400, 500, 600, 700, 800, 900

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Grid columns (largest detected grid): 3

Breakpoints

• 640px
• 768px

Animation & Motion

Keyframes

@keyframes shimmer-text { 0%{background-position:100% 0}to{background-position:0 0} }
@keyframes ping { 75%,to{transform:scale(2);opacity:0} }
@keyframes slide-down-and-fade { 0%{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes underline { to{width:100%} }
@keyframes shimmer { to{content:var(--tw-content);transform:translate(100%)} }

Source Design Tokens (CSS custom properties)

:root {
  --color-carbon-0: 254 254 254;
  --color-carbon-50: 246 246 246;
  --color-carbon-75: 240 240 240;
  --color-carbon-100: 226 226 226;
  --color-carbon-200: 204 204 204;
  --color-carbon-300: 176 176 176;
  --color-carbon-400: 155 155 155;
  --color-carbon-500: 124 124 124;
  --color-carbon-600: 99 99 99;
  --color-carbon-700: 75 75 75;
  --color-carbon-800: 53 53 53;
  --color-carbon-900: 36 36 36;
  --color-carbon-950: 18 18 18;
  --color-carbon-1000: 8 8 8;
  --color-matcha-0: 239 249 242;
  --color-matcha-100: 223 245 230;
  --color-matcha-200: 196 239 212;
  --color-matcha-300: 154 218 179;
  --color-matcha-400: 102 189 139;
  --color-matcha-500: 44 155 99;
  --color-matcha-600: 2 122 72;
  --color-matcha-700: 1 98 57;
  --color-matcha-800: 1 84 48;
  --color-matcha-900: 0 77 43;
  --color-breeze-0: 239 247 255;
  --color-breeze-100: 224 242 255;
  --color-breeze-200: 206 233 255;
  --color-breeze-300: 156 210 255;
  --color-breeze-400: 82 178 253;
  --color-breeze-500: 35 137 241;
  --color-breeze-600: 19 101 214;
  --color-breeze-700: 20 80 177;
  --color-breeze-800: 23 67 155;
  --color-breeze-900: 19 64 133;
  --color-breeze-1000: 0 5 11;
  --color-ruby-0: 254 244 243;
  --color-ruby-100: 254 235 233;
  --color-ruby-200: 254 222 220;
  --color-ruby-300: 253 188 184;
  --color-ruby-400: 250 141 134;
  --color-ruby-500: 245 74 63;
  --color-ruby-600: 203 42 29;
  --color-ruby-700: 165 32 21;
  --color-ruby-800: 139 30 22;
  --color-ruby-900: 120 38 25;
  --color-honey-0: 255 246 223;
  --color-honey-100: 255 238 196;
  --color-honey-200: 255 227 155;
  --color-honey-300: 252 196 63;
  --color-honey-400: 236 153 35;
  --color-honey-500: 213 107 19;
  --color-honey-600: 186 66 16;
  --color-honey-700: 149 54 15;
  --color-honey-800: 120 52 15;
  --color-honey-900: 99 55 17;
  --color-blush-0: 255 244 245;
  --color-blush-100: 255 234 237;
  --color-blush-200: 255 221 226;
  --color-blush-300: 255 186 199;
  --color-blush-400: 253 136 160;
}

Do's and Don'ts

Do

• Do reserve the accent #159E88 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 200, 300, 400, 500, 600, 700, 800, 900.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #0275B1;
  --color-accent: #159E88;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #9CA3AF;
  --color-border: #E5E7EB;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: CircularXX;
  --font-size-body-md: 16px;
  --radius-sm: 6px;
  --space-md: 24px;
}