DesignKit

Create a theme

Project

northstar · revision 1

Browser saves stay on this device. Download a project to keep its inputs, revisions, reviews, and measurement receipt.

Saved projects Viewport widthsOne to six distinct widths, 320 to 2000 px.

Import project

Project fileProject JSON

Body fontDisplay fontMono font Motion

Token overrides

Family Token Override value

color.primary = #b45c0f

Revision history

Compare revisionComparison component

Edits, Undo, and restore create revisions. Earlier evidence stays in the project.

Theme name

Brand color

The generated primary color can differ from the seed to improve contrast.

Color mode

Spacing density

Scale ratio

Type and spacing grow at 1.333× per step.

Start from a preset

Preview: Northstar

light · comfortable

Workspace preferences

Primary#b45c0f

Surface#faf4f0

On surface#1b1715

Outline#9c9794

Export theme

Shared links include theme inputs. Download the project to retain revisions and evidence.

northstar.theme.css

/* Northstar */
/* optimized seed #be6826 ratio perfect-fourth */
:root {
  --color-primary-50: #fdf3ed;
  --color-neutral-50: #faf4f0;
  --color-primary-100: #f9e3d5;
  --color-neutral-100: #ece6e3;
  --color-primary-200: #f3cbb2;
  --color-neutral-200: #d9d3cf;
  --color-primary-300: #e5a880;
  --color-neutral-300: #bcb6b3;
  --color-primary-400: #d1824d;
  --color-neutral-400: #9c9794;
  --color-primary-500: #b45c0f;
  --color-neutral-500: #7b7673;
  --color-primary-600: #943d00;
  --color-neutral-600: #5f5a57;
  --color-primary-700: #6c2800;
  --color-neutral-700: #433f3c;
  --color-primary-800: #4d1800;
  --color-neutral-800: #2f2a28;
  --color-primary-900: #310900;
  --color-neutral-900: #1b1715;
  --color-primary-950: #1a0200;
  --color-neutral-950: #0c0806;
  --color-error: #cc272e;
  --color-on-error: #ffffff;
  --color-warning: #dca400;
  --color-on-warning: #0a0a0a;
  --color-success: #279936;
  --color-on-success: #0a0a0a;
  --color-primary: #b45c0f;
  --color-on-primary: #ffffff;
  --color-primary-container: #f9e3d5;
  --color-on-primary-container: #310900;
  --color-surface: #faf4f0;
  --color-on-surface: #1b1715;
  --color-surface-dim: #ece6e3;
  --color-surface-bright: #faf4f0;
  --color-outline: #9c9794;
  --space-4xs: clamp(0.316rem, 0.29rem + 0.117vw, 0.396rem);
  --space-3xs: clamp(0.422rem, 0.3867rem + 0.156vw, 0.527rem);
  --space-2xs: clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem);
  --space-xs: clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem);
  --space-base: clamp(1rem, 0.9167rem + 0.37vw, 1.25rem);
  --space-sm: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem);
  --space-md: clamp(1.778rem, 1.6296rem + 0.658vw, 2.222rem);
  --space-lg: clamp(2.37rem, 2.1728rem + 0.878vw, 2.963rem);
  --space-xl: clamp(3.16rem, 2.8971rem + 1.171vw, 3.951rem);
  --space-2xl: clamp(4.214rem, 3.8628rem + 1.561vw, 5.267rem);
  --type-xs: clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem);
  --type-base: clamp(1rem, 0.9167rem + 0.37vw, 1.25rem);
  --type-sm: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem);
  --type-md: clamp(1.778rem, 1.6296rem + 0.658vw, 2.222rem);
  --type-lg: clamp(2.37rem, 2.1728rem + 0.878vw, 2.963rem);
  --type-xl: clamp(3.16rem, 2.8971rem + 1.171vw, 3.951rem);
  --radius-sm: clamp(0.563rem, 0.5156rem + 0.208vw, 0.703rem);
  --radius-md: clamp(0.75rem, 0.6875rem + 0.278vw, 0.938rem);
  --radius-lg: clamp(1.333rem, 1.2222rem + 0.494vw, 1.667rem);
  --radius-pill: 999px;
  --elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --elevation-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04);
  --elevation-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04);
  --motion-preset: snappy;
  --motion-fast: 120ms;
  --motion-normal: 200ms;
  --motion-slow: 320ms;
  --state-mode: light;
  --state-density: comfortable;
  --state-contrastProfile: default;
  --primary: var(--color-primary);
  --on-primary: var(--color-on-primary);
  --surface: var(--color-surface);
  --on-surface: var(--color-on-surface);
  --outline: var(--color-outline);
  --action-bg: var(--color-primary);
  --action-fg: var(--color-on-primary);
  --surface-bg: var(--color-surface);
  --surface-fg: var(--color-on-surface);
  --field-bg: var(--color-surface);
  --field-fg: var(--color-on-surface);
  --field-border: var(--color-outline);
  --field-placeholder: var(--color-outline);
  --field-helper: var(--color-on-surface);
  --field-error: var(--color-error);
  --field-focus-ring: var(--color-primary);
  --choice-bg: var(--color-surface);
  --choice-fg: var(--color-on-surface);
  --choice-border: var(--color-outline);
  --choice-track: var(--color-outline);
  --choice-thumb: var(--color-surface);
  --choice-selected-bg: var(--color-primary);
  --choice-selected-fg: var(--color-on-primary);
  --choice-selected-border: var(--color-primary);
  --overlay-bg: var(--color-surface-bright);
  --overlay-fg: var(--color-on-surface);
  --overlay-border: var(--color-outline);
  --overlay-backdrop: var(--color-surface-dim);
  --overlay-shadow: var(--elevation-lg);
  --tab-indicator: var(--color-primary);
  --tab-active-fg: var(--color-primary);
  --tab-inactive-fg: var(--color-on-surface);
  --list-row-bg: var(--color-surface-bright);
  --list-row-fg: var(--color-on-surface);
  --list-row-highlight-bg: var(--color-primary-container);
  --list-row-highlight-fg: var(--color-on-primary-container);
  --list-row-selected-bg: var(--color-primary-container);
  --list-row-selected-fg: var(--color-on-primary-container);
  --status-neutral-bg: var(--color-surface-dim);
  --status-neutral-fg: var(--color-on-surface);
  --status-neutral-border: var(--color-outline);
  --status-brand-bg: var(--color-primary-container);
  --status-brand-fg: var(--color-on-primary-container);
  --status-brand-border: var(--color-primary);
  --status-success-bg: var(--color-success);
  --status-success-fg: var(--color-on-success);
  --status-success-border: var(--color-success);
  --status-warning-bg: var(--color-warning);
  --status-warning-fg: var(--color-on-warning);
  --status-warning-border: var(--color-warning);
  --status-danger-bg: var(--color-error);
  --status-danger-fg: var(--color-on-error);
  --status-danger-border: var(--color-error);
  --display-card-bg: var(--color-surface-bright);
  --display-card-fg: var(--color-on-surface);
  --display-card-border: var(--color-outline);
  --display-card-muted: var(--color-on-surface);
  --display-avatar-bg: var(--color-primary-container);
  --display-avatar-fg: var(--color-on-primary-container);
  --display-avatar-ring: var(--color-outline);
  --nav-item-fg: var(--color-on-surface);
  --nav-current-fg: var(--color-primary);
  --nav-current-bg: var(--color-primary-container);
  --nav-disabled-fg: var(--color-outline);
  --nav-separator-fg: var(--color-outline);
  --floating-bg: var(--overlay-bg);
  --floating-fg: var(--overlay-fg);
  --floating-border: var(--overlay-border);
  --floating-shadow: var(--overlay-shadow);
  --table-shell-bg: var(--color-surface-bright);
  --table-shell-fg: var(--color-on-surface);
  --table-divider: var(--color-outline);
  --table-header-bg: var(--color-neutral-50);
  --table-header-fg: var(--color-on-surface);
  --table-cell-fg: var(--color-on-surface);
  --table-row-hover-bg: var(--color-surface-dim);
  --table-row-selected-bg: var(--color-primary-container);
  --table-row-selected-fg: var(--color-on-primary-container);
  --table-sort-affordance: var(--color-primary);
  --table-sticky-header-shadow: var(--elevation-sm);
  --calendar-trigger-bg: var(--field-bg);
  --calendar-trigger-fg: var(--field-fg);
  --calendar-trigger-border: var(--field-border);
  --calendar-surface-bg: var(--overlay-bg);
  --calendar-surface-fg: var(--overlay-fg);
  --calendar-surface-border: var(--overlay-border);
  --calendar-surface-shadow: var(--overlay-shadow);
  --calendar-caption-fg: var(--color-on-surface);
  --calendar-nav-bg: var(--color-surface-dim);
  --calendar-nav-fg: var(--color-on-surface);
  --calendar-weekday-fg: var(--field-helper);
  --calendar-day-bg: var(--color-surface);
  --calendar-day-fg: var(--color-on-surface);
  --calendar-day-selected-bg: var(--color-primary);
  --calendar-day-selected-fg: var(--color-on-primary);
  --calendar-day-disabled-fg: var(--field-helper);
  --calendar-day-outside-fg: var(--color-outline);
  --calendar-day-today-ring: var(--color-primary);
  --command-shell-bg: var(--overlay-bg);
  --command-shell-fg: var(--overlay-fg);
  --command-shell-border: var(--overlay-border);
  --command-shell-shadow: var(--overlay-shadow);
  --command-query-bg: var(--field-bg);
  --command-query-fg: var(--field-fg);
  --command-query-border: var(--field-border);
  --command-item-bg: var(--list-row-bg);
  --command-item-fg: var(--list-row-fg);
  --command-item-highlight-bg: var(--list-row-highlight-bg);
  --command-item-highlight-fg: var(--list-row-highlight-fg);
  --range-day-bg: var(--calendar-day-bg);
  --range-day-fg: var(--calendar-day-fg);
  --range-day-selected-bg: var(--calendar-day-selected-bg);
  --range-day-selected-fg: var(--calendar-day-selected-fg);
  --range-day-between-bg: var(--color-primary-container);
  --range-day-between-fg: var(--color-on-primary-container);
  --shell-nav-bg: var(--color-surface-dim);
  --shell-nav-fg: var(--nav-item-fg);
  --shell-nav-active-bg: var(--nav-current-bg);
  --shell-nav-active-fg: var(--nav-current-fg);
  --shell-nav-border: var(--color-outline);
  --stepper-track: var(--color-outline);
  --stepper-complete: var(--color-success);
  --stepper-current: var(--color-primary);
  --stepper-upcoming: var(--color-surface-dim);
  --stepper-error: var(--color-error);
  --tree-item-bg: var(--list-row-bg);
  --tree-item-fg: var(--list-row-fg);
  --tree-item-selected-bg: var(--list-row-selected-bg);
  --tree-item-selected-fg: var(--list-row-selected-fg);
  --chart-grid: var(--color-outline);
  --chart-axis: var(--field-helper);
  --chart-brand: var(--color-primary);
  --chart-success: var(--color-success);
  --chart-warning: var(--color-warning);
  --chart-danger: var(--color-error);
  --chart-neutral: var(--color-outline);
  --chart-surface-bg: var(--display-card-bg);
  --chart-surface-fg: var(--display-card-fg);
  --grid-shell-bg: var(--table-shell-bg);
  --grid-shell-fg: var(--table-shell-fg);
  --grid-shell-border: var(--table-divider);
  --grid-header-bg: var(--table-header-bg);
  --grid-header-fg: var(--table-header-fg);
  --grid-cell-bg: var(--table-shell-bg);
  --grid-cell-fg: var(--table-cell-fg);
  --grid-cell-active-bg: var(--color-primary-container);
  --grid-cell-active-fg: var(--color-on-primary-container);
  --grid-pinned-shadow: var(--table-sticky-header-shadow);
  --control-radius: var(--radius-md);
  --control-height: var(--space-sm);
  --overlay-radius: var(--radius-lg);
}

Use this theme in a Svelte app

Pass the same compiled theme to your controls. The project export preserves fonts and token overrides for createProjectTheme.

import { createTheme } from '@dkcli/tokens';

export const theme = createTheme({
  "name": "Northstar",
  "seed": {
    "color": "#c44724",
    "mode": "light",
    "density": "comfortable",
    "ratio": "perfect-fourth",
    "motion": "snappy"
  }
});

Mathematical fixtures

Calculated checks across all 38 components.

180 / 180 fixtures pass

Fixtures calculate declared contrast, target, layout, and motion checks. Browser qualification measures rendered scenes separately. Neither certifies accessibility.

Inspect fixture results

Accordion2 / 2 pass

Alert5 / 5 pass

Avatar3 / 3 pass

Badge15 / 15 pass

Breadcrumbs1 / 1 pass

Button13 / 13 pass

Card3 / 3 pass

Checkbox9 / 9 pass

Chip3 / 3 pass

Combobox9 / 9 pass

CommandPalette2 / 2 pass

DataChart3 / 3 pass

DataGridLite3 / 3 pass

DatePicker3 / 3 pass

Dialog3 / 3 pass

Drawer6 / 6 pass

EmptyState3 / 3 pass

FileUpload6 / 6 pass

InlineEdit1 / 1 pass

Menu6 / 6 pass

Pagination1 / 1 pass

Popover3 / 3 pass

Progress3 / 3 pass

RadioGroup12 / 12 pass

RangeDatePicker3 / 3 pass

SegmentedControl4 / 4 pass

Select9 / 9 pass

SideNav2 / 2 pass

Skeleton3 / 3 pass

Stepper3 / 3 pass

Switch6 / 6 pass

Table3 / 3 pass

Tabs12 / 12 pass

TextField6 / 6 pass

Textarea6 / 6 pass

Toast2 / 2 pass

Tooltip1 / 1 pass

TreeView2 / 2 pass

Browser qualification

320 / 768 / 1280 px · default gallery scenes

Measure rendered controls and selected interactions. Mathematical fixtures remain a separate check.

Compare presets

First design system Second design system Compared component

Cobalt

Blue seed, light mode, comfortable spacing, and a perfect-fourth scale.

light comfortable perfect-fourth snappy

Linen

Brown seed, light mode, comfortable spacing, and a major-second scale.

light comfortable major-second calm

Presets

Cobalt

#295dff

Blue seed, light mode, comfortable spacing, and a perfect-fourth scale.

General-purpose apps

`Button`

`TextField`

Project name

`Card`

Launch checklist

Ready for review.

`Dialog`

Color Type and scale Motion Proof system

Sage

#1f8a70

Green seed, light mode, compact spacing, and a major-third scale.

Compact dashboards
Administrative tools

`Button`

`TextField`

Project name

`Card`

Launch checklist

Ready for review.

`Dialog`

Spacing Type and scale Motion Layout and composition

Ember

#ff6b3d

Orange seed, dark mode, comfortable spacing, and an augmented-fourth scale.

Dark-mode apps

`Button`

`TextField`

Project name

`Card`

Launch checklist

Ready for review.

`Dialog`

Color Contrast and distinctness Radius and elevation Proof system

Linen

#8a6f47

Brown seed, light mode, comfortable spacing, and a major-second scale.

Documentation
Content-focused apps

`Button`

`TextField`

Project name

`Card`

Launch checklist

Ready for review.

`Dialog`

Type and scale Spacing Motion Proof system

Preset differences

Cobalt

Comfortable spacing
Perfect-fourth scale
Snappy motion

Linen

Major-second scale
Comfortable spacing
Calm motion