See what Stellar gives you

Stellar turns one config file into a complete design system: tokens for color, type, space, shadow, motion, and layout, delivered as plain CSS. Sizes scale with the screen; colors flip with the theme. This page shows every token in use: click any to copy it, and flip the theme to check light and dark.

Color

Six color sets (primary, neutral, error, and three more), each a 12-shade ramp from light to dark that flips in dark mode. Every shade carries an -on for text that reads on it and a -dim for quieter text. Build from one set: a shade for the surface, its -on for text, its -dim for the quiet parts. Each swatch shows its number in its own -on, so you can see where text stays legible.

primary--primary-1to--primary-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
secondary--secondary-1to--secondary-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
tertiary--tertiary-1to--tertiary-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
neutral--neutral-1to--neutral-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
neutral-variant--neutral-variant-1to--neutral-variant-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
error--error-1to--error-12
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim

One set in practice

Each card is built from a single color set: a background shade, its -on for text, and -dim for quieter text.

primary

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

secondary

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

tertiary

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

neutral

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

neutral-variant

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

error

The quick brown fox jumps over the lazy dog.

Secondary text uses the -dim variant.

step 7

Named brand colors

--named-{brand}-{n} : each brand color expanded into a 2+1+2 shade ramp, every shade with -on and -dim.

adobe
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
android
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
aws
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
bluesky
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
c
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
clojure
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
cplusplus
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
csharp
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
css
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
dart
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
docker
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
elixir
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
firefox
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
go
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
html
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
java
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
javascript
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
kotlin
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
microsoft
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
odin
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
php
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
python
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
ruby
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
rust
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
safari
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
slack
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
stripe
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
swift
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
typescript
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
ubuntu
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim
zig
-2
-1
0
1
2
on
on
on
on
on
dim
dim
dim
dim
dim

Data visualization

--chart-qualitative-{n} : distinct colors for categories, picked to be easy to tell apart, each with -on and -dim.

1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim

--chart-diverging-{1..6}-step-{1..12} : ordered shade ramps for ranked data, every shade with -on and -dim.

1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
1
2
3
4
5
6
7
8
9
10
11
12
on
on
on
on
on
on
on
on
on
on
on
on
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim
dim

Gradients

--gradient-brand-surface
--gradient-brand-diagonal
--gradient-vapor
--gradient-spotlight
--gradient-qualitative-sweep
--gradient-neutral-soft
--gradient-striped
--gradient-diverging

Code & syntax

The full set of syntax colors (keyword, string, function name, and so on), taken from the theme and flipped for dark mode. This is exactly what the code highlighter uses.

fn ramp(seed: Color, steps: i32) {
    // derive tones from one seed
    let scale = 1.618;
    println!("generated {} tones\n", steps);
}
--code-bg--code-border--code-border-subtle--code-comment--code-comment-special--code-deleted--code-emph--code-error--code-fg--code-highlight-line--code-inner-bg--code-inserted--code-keyword--code-keyword-const--code-keyword-decl--code-keyword-namespace--code-ln--code-ln-current--code-name--code-name-attribute--code-name-builtin--code-name-class--code-name-constant--code-name-decorator--code-name-entity--code-name-exception--code-name-function--code-name-label--code-name-namespace--code-name-property--code-name-tag--code-name-variable--code-number--code-operator--code-selection--code-string--code-string-affix--code-string-delim--code-string-doc--code-string-escape--code-string-regex--code-strong--code-type

Type

A numbered scale for text size, with font families, weights, line height, and letter spacing alongside. Step 0 is 1rem; smaller steps shrink to fine print, larger steps grow to headings, and every step scales with the screen so text holds its proportions. Each specimen is set at its real size.

Size scale

--font-size-0 is the 1rem starting point; each step up is about 1.2x the one below it, each step down a little smaller.

Grumpy wizards make toxic brew
--font-size-12
Grumpy wizards make toxic brew
--font-size-11
Grumpy wizards make toxic brew
--font-size-10
Grumpy wizards make toxic brew
--font-size-9
Grumpy wizards make toxic brew
--font-size-8
Grumpy wizards make toxic brew
--font-size-7
Grumpy wizards make toxic brew
--font-size-6
Grumpy wizards make toxic brew
--font-size-5
Grumpy wizards make toxic brew
--font-size-4
Grumpy wizards make toxic brew
--font-size-3
Grumpy wizards make toxic brew
--font-size-2
Grumpy wizards make toxic brew
--font-size-1
Grumpy wizards make toxic brew
--font-size-0
Grumpy wizards make toxic brew
--font-size--1
Grumpy wizards make toxic brew
--font-size--2

Families

Ready-made stacks with system fallbacks, each a different voice. --font-sans for UI and body, --font-mono for code and figures, --font-serif for long-form; the rest are character choices. The same sentence is set in each to compare. --font-{name}.

--font-antiqueThe five boxing wizards jump quickly.
--font-classical-humanistThe five boxing wizards jump quickly.
--font-didoneThe five boxing wizards jump quickly.
--font-geometric-humanistThe five boxing wizards jump quickly.
--font-handwrittenThe five boxing wizards jump quickly.
--font-humanistThe five boxing wizards jump quickly.
--font-industrialThe five boxing wizards jump quickly.
--font-monoThe five boxing wizards jump quickly.
--font-monospace-codeThe five boxing wizards jump quickly.
--font-monospace-slab-serifThe five boxing wizards jump quickly.
--font-neo-grotesqueThe five boxing wizards jump quickly.
--font-old-styleThe five boxing wizards jump quickly.
--font-rounded-sansThe five boxing wizards jump quickly.
--font-sansThe five boxing wizards jump quickly.
--font-serifThe five boxing wizards jump quickly.
--font-slab-serifThe five boxing wizards jump quickly.
--font-transitionalThe five boxing wizards jump quickly.

Weights

Aa--font-weight-thin
Aa--font-weight-extra-light
Aa--font-weight-light
Aa--font-weight-normal
Aa--font-weight-medium
Aa--font-weight-semi-bold
Aa--font-weight-bold
Aa--font-weight-extra-bold
Aa--font-weight-black
Aa--font-weight-extra-black

Line height

A fixed line height for each text size, tighter for small text, airier for large. Borrow one for a much bigger heading and the lines can overlap. --font-line-height-{n}.

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height--3

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height--2

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height--1

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height-0

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height-1

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height-2

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height-3

Type that wraps across several lines shows its leading. The taller the line height, the more open the paragraph feels.

--font-line-height-4

Letter spacing

Negative steps tighten spacing for large headings, positive steps open it up for small text, zero in between. It also tightens a little as the screen widens. --font-letter-spacing-{n}.

TRACKING --font-letter-spacing-3

TRACKING --font-letter-spacing-2

TRACKING --font-letter-spacing-1

TRACKING --font-letter-spacing-0

TRACKING --font-letter-spacing--1

TRACKING --font-letter-spacing--2

Space & size

One numbered scale for every gap, padding, margin, and size. Reuse a step for related spacing to hold a steady rhythm; like type, each step scales with the screen. Each bar's width is the token's value.

--size--2
--size--1
--size-0
--size-1
--size-2
--size-3
--size-4
--size-5
--size-6
--size-7
--size-8
--size-9
--size-10
--size-11
--size-12

Borders & radius

Two numbered scales (corner radius and border width), plus a few organic shapes. Small radius for inputs and cards, large for pills and avatars; thicker borders for more emphasis. The blob and hand-drawn radii are ready-made irregular corners. Each box uses the value directly.

Corner radius

--border-radius-0
--border-radius-1
--border-radius-2
--border-radius-3
--border-radius-4
--border-radius-5
--border-radius-6

Half steps interpolate between neighbors (n -> n+1): --border-radius-1-2 --border-radius-2-3 --border-radius-3-4 --border-radius-4-5 --border-radius-5-6

Border width

Numbered steps that scale with the screen; thicker for more emphasis. --border-width-{n}.

--border-width-0
--border-width-1
--border-width-2
--border-width-3
--border-width-4
--border-width-5

Organic radii

--radius-blob-{n} : soft, asymmetric multi-corner blobs.

--radius-blob-1
--radius-blob-2
--radius-blob-3
--radius-blob-4
--radius-blob-5

--radius-drawn-{n} : subtle hand-drawn wobble.

--radius-drawn-1
--radius-drawn-2
--radius-drawn-3
--radius-drawn-4
--radius-drawn-5
--radius-drawn-6

Elevation

A shadow scale for how far a surface sits off the page. Each step stacks soft layers so the shadow reads as real, not a flat drop. The higher the step, the more the surface lifts: a low step for a card, a higher one for a dropdown, the highest for a dialog. Negative steps press inward for inset fields. Step 0 is none.

--shadow--4
--shadow--3
--shadow--2
--shadow--1
--shadow-0
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-5
--shadow-6

Motion

A transition combines three tokens: an easing (how it moves), a duration (how long), and a transform amount (how far, scale, rotate, slide, or fade). Easings range from a plain standard curve to springy ones like bounce and shake; durations scale with the screen and switch off under reduced-motion. Build one below, play it, and copy the CSS.

Compose

Pick a property, an amount, a duration, and an easing; toggle Activate to play the transition (changing any chip replays it), then copy the rule below. The box on the right is exactly what you would ship.

property
amount
duration
steps
easing
thing
CSS

Raw amount stops

The chips above use friendly names (up, xl, muted). Each one is just a nickname for one of these numbered steps. Copy a number to use it directly.

--anim-distance-0--anim-distance-1--anim-distance-2--anim-distance-3--anim-distance-4--anim-opacity-0--anim-opacity-1--anim-opacity-2--anim-rotate--1--anim-rotate-0--anim-rotate-1--anim-rotate-2--anim-scale--1--anim-scale--2--anim-scale-0--anim-scale-1--anim-scale-2

Layout

Stacking order, media proportions, and the viewport bounds behind the fluid scales. Named z-index steps keep overlapping UI in a fixed order without magic numbers; aspect-ratio tokens hold media at set proportions. The viewport min and max are the widths every fluid size scales between.

Stacking order

Named layers so overlapping elements stack in a set order: dropdown over the page, tooltip over that, dialog, drawer, and toast on top. No hand-picked numbers that drift out of order. The cards below overlap in that order. --zindex-{name}.

drawer700
dialog800
dropdown900
toast950
tooltip1000
important18014398509481984

Aspect ratio

Lock a box to a proportion so media holds its shape at any width: square for avatars, widescreen for 16:9 video, plus portrait, cinematic and ultrawide. --aspect-ratio-{name}.

portrait
widescreen
square
landscape
cinematic
ultrawide

Viewport bounds

Every fluid size scales across this range: smallest at 320px and below, largest at 1440px and above, smoothly in between. Text, spacing, radius, border width, and duration all scale between these two widths. You rarely set them directly; reach for them to line a media query up with the scales.

320px
fluid scaling
1440px
--viewport-min--viewport-max