Brand accent

A single violet accent in OKLCH. The dark value is lighter so contrast holds on dark surfaces.

oklch(0.55 0.2 289) / dark oklch(0.782 0.118 289.4)
Violet accent for links, focus rings, and primary emphasis.
oklch(0.99 0.003 290) / dark oklch(0.168 0.004 264.4)
Text on top of the accent.
var(--color-accent)
Alias of the accent. Tailwind: bg-brand.
var(--color-accent-foreground)
Tailwind: text-brand-foreground.

Base colors

Six neutral scales via data-glin-base: obsidian (default), neutral, zinc, slate, stone, gray. Set it on html or any element to scope it. Every pair keeps WCAG AA in light and dark (pnpm --filter @glinui/docs tokens:check).

Base color

Zinc: Cool, barely blue gray.

light

background
surface
surface-2
surface-3
well
border
muted
subtle
solid

Sample card

Muted copy on a raised surface.

dark

background
surface
surface-2
surface-3
well
border
muted
subtle
solid

Sample card

Muted copy on a raised surface.

import "@glinui/tokens/preferences.css"


// Whole app
<GlinProvider target="document" defaults={{ base: "zinc" }}>...</GlinProvider>


// One subtree
<ThemeScope base="zinc">...</ThemeScope>


<!-- Plain HTML -->
<html data-glin-base="zinc">

Surfaces

Tonal stacking: 0 is the page, 3 is the highest. The well is recessed for code and previews.

var(--color-background)
Page canvas. Tailwind: bg-surface-0.
var(--color-surface)
Cards and panels, one step above the page.
oklch(0.97 0.003 245) / dark oklch(0.242 0.007 248.1)
Hover states and raised rows.
oklch(0.94 0.005 246) / dark oklch(0.263 0.045 281)
Highest tonal step, popovers and selected items.
oklch(0.955 0.004 246) / dark oklch(0.139 0.003 246.3)
Recessed areas such as code blocks and previews.

Semantic and signal colors

Text, border, and status colors. Explore ramps, contrast ratios, and export formats in the color explorer.

oklch(0.985 0.002 240) / dark oklch(0.168 0.004 264.4)
Tailwind: bg-background.
oklch(0.23 0.01 248) / dark oklch(0.95 0.01 247)
Primary text. Tailwind: text-foreground.
oklch(0.89 0.01 246) / dark oklch(0.323 0.009 248.1)
Strong dividers. Tailwind: border-border.
oklch(0.52 0.014 270) / dark oklch(0.646 0.013 286)
Secondary text. Tailwind: text-muted.
oklch(0.65 0.013 280) / dark oklch(0.498 0.014 281)
Tertiary text and placeholders. Tailwind: text-subtle.
oklch(0.62 0.17 111) / dark oklch(0.933 0.167 111.1)
Live and active status.
oklch(0.6 0.14 175) / dark oklch(0.752 0.141 175.3)
Success and healthy status.

Elevation

One light source above: a top highlight plus layered drops. Dark mode swaps the highlight for a quieter edge and deepens the drops.

var(--highlight), var(--drop-1)
Resting cards. Tailwind: shadow-elev-1.
var(--highlight), var(--drop-2)
Raised panels and hovered cards.
var(--highlight), var(--drop-3)
Popovers, menus, and dialogs.
inset 0 2px 4px rgb(0 0 0 / 0.08), inset 0 0 0 1px rgb(0 0 0 / 0.04)
Recessed wells and inputs.
0 1px 1px rgb(0 0 0 / 0.06), 0 3px 6px -2px rgb(0 0 0 / 0.08)
Drop shadow only, without the top highlight. Tailwind: shadow-drop-1.
linear-gradient(180deg, edge / 0.14, edge / 0.05 40%, edge / 0.07)
Gradient edge, strongest at the top. Use as a 1px padded wrapper background.
linear-gradient(90deg, transparent, edge / 0.12, transparent)
Fading 1px divider, for section tops.
rgb(0 0 0 / 0.07) / dark rgb(255 255 255 / 0.07)
Soft border. Tailwind: border-line-soft.

Type scale and fonts

Inter for text, JetBrains Mono for code and eyebrows.

Inter

Tailwind: font-sans

JetBrains Mono

Tailwind: font-mono

0.75rem
0.875rem
1rem
1.1875rem
1.25rem
2rem
clamp(2rem, 4.2vw, 3rem)
clamp(2.75rem, 6.4vw, 4.25rem)

Radius

0.75rem
Cards and panels. Tailwind: rounded-card.
0.5rem
Inputs and buttons. Tailwind: rounded-input.
9999px
Chips and badges. Tailwind: rounded-pill.
0.5rem
Legacy scale, still used by older components.
0.75rem
1rem
1.25rem
1.75rem

Layout and spacing

Bars show relative length where a fixed size applies.

1200px
Content max width. Tailwind: max-w-layout.
clamp(16px, 4vw, 32px)
Page side padding. Tailwind: px-gutter.
clamp(64px, 9vw, 120px)
Vertical section rhythm. Tailwind: py-section.
64px
Top bar height. Tailwind: h-nav.
0.25rem
0.5rem
0.75rem
1rem
1.5rem
2rem

Motion

Durations and easing curves. Play them in the motion guide or the animations hub.

150ms
Hover and press feedback.
250ms
Menus, tooltips, small reveals.
400ms
Large surfaces and page level shifts.
500ms
Settle time for spring-like overshoot.
cubic-bezier(0.23, 1, 0.32, 1)
Entrances and hovers. Tailwind: ease-out.
cubic-bezier(0.77, 0, 0.175, 1)
On-screen movement and morphs.
cubic-bezier(0.32, 0.72, 0, 1)
Sheets and docked panels.

Glass variant

Glass is one surface variant, not the whole system. These tokens drive the .glass-1 to .glass-5 utilities. Deep dive: glass physics.

glass-1

blur 8px

glass-2

blur 12px

glass-3

blur 16px

glass-4

blur 24px

glass-5

blur 40px

--glass-1-surface, --glass-1-blur: 8px, opacity 0.08 light, 0.20 dark
--glass-2-surface, --glass-2-blur: 12px, opacity 0.12 light, 0.30 dark
--glass-3-surface, --glass-3-blur: 16px, opacity 0.18 light, 0.40 dark
--glass-4-surface, --glass-4-blur: 24px, opacity 0.25 light, 0.55 dark
--glass-5-surface, --glass-5-blur: 40px, opacity 0.35 light, 0.70 dark

8px
16px
24px
40px
180%
Always paired with blur in backdrop-filter.
rgb(255 255 255 / 0.20) / dark rgb(255 255 255 / 0.10)
Hairline border on glass.
rgb(255 255 255 / 0.40) / dark rgb(255 255 255 / 0.15)
Brighter top edge that simulates light refraction.
0 8px 24px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08)