tools — theme import and editor
bring your own design system.
Upload a design system as one HTML file, or start from quebi's own theme. Every token is then yours to edit — colours, type and shape — with a live preview, contrast checks, a link to share and a stylesheet to import after quebi-theme.css. It all runs in your browser: the file is never uploaded and its scripts never run.
source
01what the file must define
02Each token is filled in this order. By name: a CSS custom property in the file's <style> blocks (or inline on <html>), resolved by the browser on :root, whose name is one of the names below or ends in one — --bg-000, --ds-bg-000 and --color-bg-000 all fill bg. An exact name beats a prefixed one.
By component: the first class rule that looks like a page (.x-page), a button (.x-btn, .x-button, .x-btn-solid), an input (.x-input, .x-field input), a box (.x-box, .x-card, .x-panel) or a checkbox (.x-check input) is rendered in a sandbox and its computed radius, border, shadow, font and background are read back. That is where shape comes from, and it wins over a name — --bg-000 is the page in one system and the card in the next — unless the property is named exactly after the token, like --radius-control.
Otherwise: only bg and fg are required. A missing colour is derived from them; anything else keeps quebi's value. The editor shows where each value came from.
The dark theme is read with each of these switched on: [data-theme="dark"], .dark, [data-mode="dark"], @media (prefers-color-scheme: dark). @font-face rules with data: or absolute URLs come along with an upload; a share link carries only font names. Values that could break out of a declaration — ;, braces, url() — are never written.
bg
colour · per theme
--app-bg --bg-000 --bg --background --color-bg --color-background --surface --page
or: background of a `*-page` class
Page ground. Everything sits on it.
required
fg
colour · per theme
--app-text --text --fg --foreground --color-text --color-fg --ink
Headlines, navigation, links, primary copy.
required
fg-muted
colour · per theme
--app-text-2 --text-body --fg-muted --text-secondary --color-text-secondary --body
Running text.
derived: fg
fg-subtle
colour · per theme
--app-text-muted --text-muted --fg-subtle --text-tertiary --muted --color-text-muted
Labels, captions, numbers, placeholders.
derived: fg mixed 68% into bg
raised
colour · per theme
--app-surface --bg-100 --bg-raised --surface-raised --bg-subtle --surface-2
Hovered rows, tags, inset areas.
derived: fg mixed 10% into bg
pressed
colour · per theme
--app-line --bg-200 --bg-pressed --surface-pressed --surface-3
Pressed states, a second level on raised.
derived: fg mixed 15% into bg
card
colour · per theme
--card --bg-card --surface-card --bg-box
or: background of a `*-box`, `*-card`, `*-panel` or `*-surface` class
The ground of a card, and of a boxed field.
derived: bg
elevated
colour · per theme
--bg-elevated --surface-elevated --popover --bg-overlay
Menus, popovers, dialogs, toasts.
derived: card on a light ground, raised on a dark one
hairline
colour · per theme
--app-line --line --border --hairline --color-border --divider
Rules between rows, the edge of a card, control borders.
derived: fg at 25% (20% on a dark ground)
rule
colour · per theme
--app-action --line-strong --border-strong --rule --color-border-strong
The rule under a table header, the top rule of a list.
derived: fg
action
colour · per theme
--app-action --action --primary --accent --brand --color-primary
The primary button.
derived: fg
on-action
colour · per theme
--app-on-action --on-action --on-primary --primary-foreground --on-accent --action-fg
Text and marks on the action fill.
derived: bg
action-hover
colour · per theme
--action-hover --primary-hover --accent-hover
The action fill under the pointer.
derived: action mixed 85% into bg
signal
colour · per theme
--app-signal --signal --link --color-link --selection
The one hue, for state: a checked box, progress, a link.
derived: action
on-signal
colour · per theme
--app-on-signal --on-signal --on-link
The check mark and text on a signal fill.
derived: bg
signal-inverse
colour · per theme
--app-signal-inverse --signal-inverse --link-inverse
The signal on a dark ground: a link in a toast.
derived: signal mixed 30% into bg
selected
colour · per theme
--app-selected --selected --bg-selected --selection-bg
Selected rows, items and segments.
derived: signal mixed 12% into bg
on-selected
colour · per theme
--app-on-selected --on-selected --selected-fg
Text in a selected row.
derived: fg
overlay
colour · per theme
--app-overlay --overlay --tooltip --toast --inverse-bg
Toasts, tooltips, the selection bar.
derived: fg
on-overlay
colour · per theme
--app-on-overlay --on-overlay --on-tooltip --inverse-fg
Text on an overlay.
derived: bg
overlay-ring
colour · per theme
--app-overlay-ring --overlay-ring
The 1px ring around an overlay.
derived: overlay
focus
colour · per theme
--app-focus --app-signal --focus --ring --focus-ring --color-focus
The focus ring and a focused field's edge.
derived: signal
danger
colour · per theme
--app-danger --danger --error --destructive --color-danger --color-error
Invalid fields, destructive actions.
default #b91c1c
warn
colour · per theme
--app-warning --warn --warning --color-warning
Warnings.
default #92400e
success
colour · per theme
--app-success --success --positive --color-success
Success states.
default #065f46
glyph
colour · per theme
--glyph --watermark
The giant watermark mark behind a Stage.
derived: fg at 6%
glow-from
colour · per theme
--glow-from --stage-from --hero-from
Where the Stage light starts (top right).
derived: bg
glow-to
colour · per theme
--glow-to --stage-to --hero-to
Where the Stage light falls off.
derived: pressed
page-image
background-image · per theme
--page-image --page-pattern --bg-pattern
or: background-image of a `*-page` class
A pattern behind the page, such as a dot grid.
default none
page-image-size
length
--page-image-size --page-pattern-size
or: background-size of a `*-page` class
The tile size of that pattern.
default auto
radius-control
length
--app-radius --radius-control --radius-button --radius-input --radius-m --radius-md
or: border-radius of a `*-btn` / `*-button` class
Corners of buttons, fields and toggles.
default 6px
radius-surface
length
--app-radius-l --radius-surface --radius-card --radius-box
or: border-radius of a `*-box` / `*-card` class
Corners of cards and dialogs.
default 10px
radius-mark
length
--app-radius-s --radius-mark --radius-checkbox
or: border-radius of the input in a `*-check` / `*-checkbox` class
Corners of the checkbox box, badges, tooltips.
default 4px
radius-s
length
--radius-s --radius-sm --radius-small
Corners of tooltips, menus, popovers.
default 6px
radius-l
length
--radius-l --radius-lg --radius-large
The frame of an embedded Stage.
default 22px
border-control
length
--border-control --border-width-control --border-width
or: border width of a `*-btn` / `*-button` class
Border width of buttons, fields and checkboxes.
default 1px
border-surface
length
--border-surface --border-width-surface --border-card
or: border width of a `*-box` / `*-card` class
Border width of cards.
default 1px
field
choice
--field-style
or: an `*-input` class (or `*-field input`) with side borders is a box
Fields as an underline, or as a box on the card ground.
default box
field-px
length
--field-padding --input-padding-x
or: padding-left of that input
Inline padding inside a boxed field.
default 12px
press
length
--press --press-offset
or: translate on `*-btn:hover` / `:active`
How far a button travels into its shadow on hover and press.
default 0px
shadow-control
box-shadow · per theme
--shadow-control --shadow-button --shadow-input
or: box-shadow of a `*-btn` class
Shadow of outline buttons, fields and toggles.
default none
shadow-action
box-shadow · per theme
--shadow-action --shadow-solid --shadow-primary
or: box-shadow of a `*-btn-solid` / `*-btn-primary` class
Shadow of the solid button.
default none
shadow-surface
box-shadow · per theme
--shadow-surface --shadow-card --shadow-box --shadow-hard
or: box-shadow of a `*-box` / `*-card` class
Shadow of cards.
default none
shadow-overlay
box-shadow · per theme
--app-shadow-overlay --shadow-overlay-ring
Shadow of toasts, tooltips, the selection bar.
default 0 0 0 1px #374151, 0 12px 32px #03071240
shadow-float
box-shadow · per theme
--shadow-float --shadow-popover --shadow-overlay --shadow-lg
Shadow of menus, popovers, dialogs, toasts.
default 0 1px 2px #0307120f, 0 12px 32px #03071214
font-display
font stack
--font-display --font-heading --font-headline --font-serif
Headlines, titles, navigation.
default "Outfit", ui-sans-serif, system-ui, sans-serif
font-text
font stack
--font-text --font-sans --font-body --font-base
Running text and fields.
default "Inter", ui-sans-serif, system-ui, sans-serif
font-mono
font stack
--font-mono --font-code
Labels and code.
default "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace
font-control
font stack
--font-control --font-button
or: font-family of a `*-btn` class
The face of buttons, toggles and tags.
default var(--font-sans)
49 tokens.