Foundations
Variants
Every surface speaks the same variant language. The design style picks the default (glinr, minimal or glass), and a tone axis carries meaning. Components adapt to the nearest theme scope automatically.
Vocabulary
Eight variants with the same meaning on every component. The ladder from flat to rich is plain, solid, glinr.
| Variant | Look | Use for |
|---|---|---|
| glinr | Signature lift. Concentric radii, gradient hairline ring, tonal shell, raised pill controls, inset wells. Default of the glinr style. | Cards, panels, tabs, code, popovers, signature components |
| plain | shadcn-compatible look. Flat fill, 1px border, small radius, shadow-sm at most. Default of the minimal style. | Teams coming from shadcn, dense admin UI |
| solid | Neutral black and white with tonal depth (ring, highlight, drops). Crisp opaque fill with a top highlight, hairline ring and layered drop shadow. | Primary actions, badges, most surfaces |
| soft | Tinted surface: surface-2 for neutral, 12 percent tone mix for other tones, tone text. | Secondary actions, status, inline notices |
| outline | Transparent with a hairline ring and a hover wash. | Tertiary actions, toolbars, forms |
| ghost | Transparent, tint on hover only. | Dense UI, icon buttons, menus |
| gradient | Accent to brand gradient, white text. | One hero call to action per view |
| glass | Opt-in frosted surface with a readable opacity floor. Needs a backdrop. | Overlays and floating panels over imagery |
Design styles
One setting in GlinProvider (style) or data-glin-style on any element switches the default variant of every component that has no explicit variant prop.
| Style | Default variant | Note |
|---|---|---|
| glinr | glinr | Library default, also without any provider. |
| minimal | plain | Flat shadcn-like. Keeps the neutral black and white palette. |
| glass | glass | Opt-in aesthetic. It needs a colorful backdrop to read, wrap it in a ThemeScope with luminance. |
Variant by tone
The shared surface builders rendered across every variant and tone, in both theme scopes.
light scope
| variant | neutral | accent | success | warning | danger | info |
|---|---|---|---|---|---|---|
| glinr | ||||||
| solid | ||||||
| plain | ||||||
| soft | ||||||
| outline | ||||||
| ghost | ||||||
| gradient | ||||||
| glass |
dark scope
| variant | neutral | accent | success | warning | danger | info |
|---|---|---|---|---|---|---|
| glinr | ||||||
| solid | ||||||
| plain | ||||||
| soft | ||||||
| outline | ||||||
| ghost | ||||||
| gradient | ||||||
| glass |
Button
Existing Button variants shown under the standard names. Names marked extra stay as additional looks.
light scope
| variant | default |
|---|---|
| solid: default | |
| solid: primary | |
| soft: secondary | |
| outline: outline | |
| ghost: ghost | |
| glass: glass | |
| extra: liquid | |
| extra: matte | |
| extra: glow | |
| extra: key | |
| extra: key-white |
dark scope
| variant | default |
|---|---|
| solid: default | |
| solid: primary | |
| soft: secondary | |
| outline: outline | |
| ghost: ghost | |
| glass: glass | |
| extra: liquid | |
| extra: matte | |
| extra: glow | |
| extra: key | |
| extra: key-white |
Badge
light scope
| variant | default |
|---|---|
| default | default |
| outline | outline |
| ghost | ghost |
| glass | glass |
| success | success |
| warning | warning |
| destructive | destructive |
| info | info |
dark scope
| variant | default |
|---|---|
| default | default |
| outline | outline |
| ghost | ghost |
| glass | glass |
| success | success |
| warning | warning |
| destructive | destructive |
| info | info |
Card
light scope
| variant | default |
|---|---|
| default | defaultSurface text |
| elevated | elevatedSurface text |
| interactive | interactiveSurface text |
| glass | glassSurface text |
dark scope
| variant | default |
|---|---|
| default | defaultSurface text |
| elevated | elevatedSurface text |
| interactive | interactiveSurface text |
| glass | glassSurface text |
Alert
light scope
| variant | default |
|---|---|
| default | defaultReadable in both scopes. |
| glass | glassReadable in both scopes. |
| matte | matteReadable in both scopes. |
dark scope
| variant | default |
|---|---|
| default | defaultReadable in both scopes. |
| glass | glassReadable in both scopes. |
| matte | matteReadable in both scopes. |
Legacy aliases
Old names keep working and resolve to the vocabulary.
defaultresolves tosolid, toneneutralprimaryresolves tosolid, toneaccentsecondaryresolves tosoft, toneneutraldestructiveresolves tosolid, tonedangersuccessresolves tosoft, tonesuccessfrostedresolves toglass, toneneutral
ThemeScope
Force light or dark on a subtree. Tokens, glass opacity and dark: utilities all follow the scope.
This area follows the page theme.
A dark section inside the page.
Success
Pick a variant
| When | Variant | Note |
|---|---|---|
| The main action on the screen | solid or glinr | tone accent for brand emphasis |
| A supporting action next to a solid one | soft or outline | outline when the surface is busy |
| Status, validation, tags | soft | tone success, warning, danger, info |
| Toolbars, tables, dense lists | ghost | keeps rows quiet |
| A marketing hero | gradient | limit to one per view |
| Floating over a photo or gradient | glass | wrap in a dark ThemeScope when the image is dark |