Design tokens · Tweakpad UI

Each role is a --tp-* custom property on the document root. Values are read from this page, so the theme switcher in the header and a compact density show up in them. Override a role on any element to change it for everything inside; Theming covers replacing the set.

Color

Semantic surfaces, each paired with the foreground placed on it, plus lines, focus and chart series. Foreground rows give their contrast on the paired surface, flagged under 4.5:1.

Token

Preview

Value

Description

--tp-background

var(--tp-background)

Base surface of the interface.

--tp-foreground

var(--tp-foreground)

Text and icons on the base surface.

--tp-card

var(--tp-card)

Contained surface in ordinary flow, such as cards and panels.

--tp-card-foreground

var(--tp-card-foreground)

Text and icons on card surfaces.

--tp-popover

var(--tp-popover)

Floating or layered surface, such as popovers, menus and dialogs.

--tp-popover-foreground

var(--tp-popover-foreground)

Text and icons on floating surfaces.

--tp-primary

var(--tp-primary)

Primary action or selected emphasis.

--tp-primary-foreground

var(--tp-primary-foreground)

Text and icons on primary fills.

--tp-secondary

var(--tp-secondary)

Secondary action or emphasis.

--tp-secondary-foreground

var(--tp-secondary-foreground)

Text and icons on secondary fills.

--tp-muted

var(--tp-muted)

Low-emphasis surface, such as tracks, wells and placeholders.

--tp-muted-foreground

var(--tp-muted-foreground)

Low-emphasis text and icons: descriptions, hints and captions.

--tp-accent

var(--tp-accent)

Transient hover, active or highlighted surface.

--tp-accent-foreground

var(--tp-accent-foreground)

Text and icons on accent surfaces.

--tp-destructive

var(--tp-destructive)

Destructive action or error surface.

--tp-destructive-foreground

var(--tp-destructive-foreground)

Text and icons on destructive fills.

--tp-success

var(--tp-success)

Successful or positive status surface.

--tp-success-foreground

var(--tp-success-foreground)

Text and icons on success fills.

--tp-warning

var(--tp-warning)

Cautionary status surface.

--tp-warning-foreground

var(--tp-warning-foreground)

Text and icons on warning fills.

--tp-primary-subtle

var(--tp-primary-subtle)

Tinted fill of primary status: informational badges and alerts.

--tp-primary-subtle-foreground

var(--tp-primary-subtle-foreground)

Primary text tone on its tinted fill and on surfaces.

--tp-primary-border

var(--tp-primary-border)

Edge of primary status fills.

--tp-destructive-subtle

var(--tp-destructive-subtle)

Tinted fill of destructive status: destructive variants and error alerts.

--tp-destructive-subtle-foreground

var(--tp-destructive-subtle-foreground)

Destructive text tone on its tinted fill and on surfaces, such as error messages.

--tp-destructive-border

var(--tp-destructive-border)

Edge of destructive status fills.

--tp-success-subtle

var(--tp-success-subtle)

Tinted fill of success status: success variants and alerts.

--tp-success-subtle-foreground

var(--tp-success-subtle-foreground)

Success text tone on its tinted fill and on surfaces.

--tp-success-border

var(--tp-success-border)

Edge of success status fills.

--tp-warning-subtle

var(--tp-warning-subtle)

Tinted fill of warning status: warning variants and alerts.

--tp-warning-subtle-foreground

var(--tp-warning-subtle-foreground)

Warning text tone on its tinted fill and on surfaces.

--tp-warning-border

var(--tp-warning-border)

Edge of warning status fills.

--tp-border

var(--tp-border)

Separators and lines.

--tp-edge

var(--tp-edge)

Outer edge of a component or panel, such as cards and tables.

--tp-hairline

var(--tp-hairline)

Fine edge of floating surfaces (menus, popovers, lists, toolbars) and value surfaces.

--tp-input

var(--tp-input)

Edge of fields and outline controls.

--tp-control

var(--tp-control)

Fill of fields and outline controls.

--tp-control-strong

var(--tp-control-strong)

Stronger fill of fields and outline controls: the hover fill of outline and ghost controls and the fill of disabled fields.

--tp-control-border

var(--tp-control-border)

Boundary of checkboxes and radios, at a non-text contrast against the page.

--tp-choice

var(--tp-choice)

Fill of a chosen radio: the control fill by default, the primary color when flat.

--tp-choice-foreground

var(--tp-choice-foreground)

Dot of a chosen radio.

--tp-ring

var(--tp-ring)

Focus indication.

--tp-chart-1

var(--tp-chart-1)

First categorical data series.

--tp-chart-2

var(--tp-chart-2)

Second categorical data series.

--tp-chart-3

var(--tp-chart-3)

Third categorical data series.

--tp-chart-4

var(--tp-chart-4)

Fourth categorical data series.

--tp-chart-5

var(--tp-chart-5)

Fifth categorical data series.

Syntax color

One color per lexical scope of highlighted code.

Token

Preview

Value

Description

--tp-syntax-comment

var(--tp-syntax-comment)

Comments.

--tp-syntax-keyword

var(--tp-syntax-keyword)

Keywords and storage modifiers.

--tp-syntax-string

var(--tp-syntax-string)

String and template literals.

--tp-syntax-number

var(--tp-syntax-number)

Numeric literals.

--tp-syntax-function

var(--tp-syntax-function)

Function and method names.

--tp-syntax-type

var(--tp-syntax-type)

Type, class and interface names.

--tp-syntax-constant

var(--tp-syntax-constant)

Named and literal constants.

--tp-syntax-variable

var(--tp-syntax-variable)

Variables and parameters.

--tp-syntax-property

var(--tp-syntax-property)

Properties, keys and member names.

--tp-syntax-tag

var(--tp-syntax-tag)

Markup element names.

--tp-syntax-attribute

var(--tp-syntax-attribute)

Markup attribute names.

--tp-syntax-operator

var(--tp-syntax-operator)

Operators.

--tp-syntax-inserted

var(--tp-syntax-inserted)

Added lines in a diff.

--tp-syntax-deleted

var(--tp-syntax-deleted)

Removed lines in a diff.

Content color

Colors that people apply inside documents: per hue, a surface for highlights and table cell backgrounds and a foreground for text. Only user content and the swatches that offer these colors use them. Foreground rows give their contrast on their surface and on the background, flagged under 4.5:1.

Token

Preview

Value

Description

--tp-content-gray

var(--tp-content-gray)

Gray highlight and table cell background in user content.

--tp-content-gray-foreground

var(--tp-content-gray-foreground)

Gray text in user content, and text on the gray surface.

--tp-content-brown

var(--tp-content-brown)

Brown highlight and table cell background in user content.

--tp-content-brown-foreground

var(--tp-content-brown-foreground)

Brown text in user content, and text on the brown surface.

--tp-content-orange

var(--tp-content-orange)

Orange highlight and table cell background in user content.

--tp-content-orange-foreground

var(--tp-content-orange-foreground)

Orange text in user content, and text on the orange surface.

--tp-content-yellow

var(--tp-content-yellow)

Yellow highlight and table cell background in user content.

--tp-content-yellow-foreground

var(--tp-content-yellow-foreground)

Yellow text in user content, and text on the yellow surface.

--tp-content-green

var(--tp-content-green)

Green highlight and table cell background in user content.

--tp-content-green-foreground

var(--tp-content-green-foreground)

Green text in user content, and text on the green surface.

--tp-content-blue

var(--tp-content-blue)

Blue highlight and table cell background in user content.

--tp-content-blue-foreground

var(--tp-content-blue-foreground)

Blue text in user content, and text on the blue surface.

--tp-content-purple

var(--tp-content-purple)

Purple highlight and table cell background in user content.

--tp-content-purple-foreground

var(--tp-content-purple-foreground)

Purple text in user content, and text on the purple surface.

--tp-content-pink

var(--tp-content-pink)

Pink highlight and table cell background in user content.

--tp-content-pink-foreground

var(--tp-content-pink-foreground)

Pink text in user content, and text on the pink surface.

--tp-content-red

var(--tp-content-red)

Red highlight and table cell background in user content.

--tp-content-red-foreground

var(--tp-content-red-foreground)

Red text in user content, and text on the red surface.

Spacing

Padding, gaps and margins. Every step is the spacing seed times its number; a trailing -5 is the half step.

Token

Preview

Value

Description

--tp-spacing

var(--tp-spacing)

Seed of the spacing scale. Every space step, control height and icon size multiplies it.

--tp-space-0

var(--tp-space-0)

No space.

--tp-space-0-5

var(--tp-space-0-5)

Half a step.

--tp-space-1

var(--tp-space-1)

One step.

--tp-space-1-5

var(--tp-space-1-5)

One and a half steps.

--tp-space-2

var(--tp-space-2)

Two steps.

--tp-space-2-5

var(--tp-space-2-5)

Two and a half steps.

--tp-space-3

var(--tp-space-3)

Three steps.

--tp-space-4

var(--tp-space-4)

Four steps.

--tp-space-5

var(--tp-space-5)

Five steps.

--tp-space-6

var(--tp-space-6)

Six steps.

--tp-space-8

var(--tp-space-8)

Eight steps.

--tp-space-10

var(--tp-space-10)

Ten steps.

--tp-space-12

var(--tp-space-12)

Twelve steps.

--tp-space-16

var(--tp-space-16)

Sixteen steps.

Font family

Typefaces for interface text, headings and code.

Token

Preview

Value

Description

--tp-font-sans

var(--tp-font-sans)

Interface text; the default for every component.

--tp-font-heading

var(--tp-font-heading)

Headings and titles. Follows the sans family unless a theme sets it.

--tp-font-mono

var(--tp-font-mono)

Code, keyboard input and machine values such as codes and readouts.

Font weight

Weights for body text, labels, titles and strong emphasis.

Token

Preview

Value

Description

--tp-font-normal

var(--tp-font-normal)

Body text; the default weight.

--tp-font-medium

var(--tp-font-medium)

Labels, controls and light emphasis.

--tp-font-semibold

var(--tp-font-semibold)

Titles and headings.

--tp-font-bold

var(--tp-font-bold)

Strong emphasis.

Line height

Line heights as multiples of the font size.

Token

Preview

Value

Description

--tp-leading-tight

var(--tp-leading-tight)

Compact lines: headings, labels and single-line controls.

--tp-leading-normal

var(--tp-leading-normal)

Body text; the default line height.

--tp-leading-relaxed

var(--tp-leading-relaxed)

Open lines for longer reading.

Letter spacing

Letter spacing relative to the font size.

Token

Preview

Value

Description

--tp-tracking-tight

var(--tp-tracking-tight)

Tighter letters for large headings.

--tp-tracking-normal

var(--tp-tracking-normal)

Neutral letter spacing; the default.

--tp-tracking-wide

var(--tp-tracking-wide)

Wider letters for small or uppercase labels.

Size

Block size of single-line controls, icon extents and the minimum pointer target. Control and icon sizes derive from the spacing seed.

Token

Preview

Value

Description

--tp-control-height-xs

var(--tp-control-height-xs)

Block size of extra-small single-line controls.

--tp-control-height-sm

var(--tp-control-height-sm)

Block size of small single-line controls.

--tp-control-height-md

var(--tp-control-height-md)

Block size of default single-line controls.

--tp-control-height-lg

var(--tp-control-height-lg)

Block size of large single-line controls.

--tp-icon-size-xs

var(--tp-icon-size-xs)

Extra-small icons, such as icons inside badges.

--tp-icon-size-sm

var(--tp-icon-size-sm)

Small icons.

--tp-icon-size-md

var(--tp-icon-size-md)

Default icon extent.

--tp-icon-size-lg

var(--tp-icon-size-lg)

Large icons.

--tp-target-size-min

var(--tp-target-size-min)

Minimum pointer target. Smaller controls extend their hit area to it on touch; it is never a visual size.

Border and focus

Line widths and style for borders, and the focus ring geometry.

Token

Preview

Value

Description

--tp-border-width

var(--tp-border-width)

Default width of borders and separators.

--tp-border-width-strong

var(--tp-border-width-strong)

Heavier line for emphasis, at least the default width.

--tp-joined-edge-width

var(--tp-joined-edge-width)

Width of the edge between joined slots, such as one-time code slots; the flat appearance widens the cut.

--tp-border-style

var(--tp-border-style)

Line style of borders.

--tp-ring-width

var(--tp-ring-width)

Width of the focus ring.

--tp-ring-offset

var(--tp-ring-offset)

Gap between an element and its focus ring.

Radius

Corner rounding. Every step derives from the radius seed, so changing it reshapes the whole set.

Token

Preview

Value

Description

--tp-radius-sm

var(--tp-radius-sm)

Smallest corner, for small inner elements.

--tp-radius-md

var(--tp-radius-md)

Compact controls and items inside surfaces.

--tp-radius-lg

var(--tp-radius-lg)

Default corner of controls and surfaces; equal to the seed.

--tp-radius

var(--tp-radius)

Seed of the radius scale. Every other step multiplies it.

--tp-radius-xl

var(--tp-radius-xl)

Larger surfaces such as dialogs and code blocks.

--tp-radius-2xl

var(--tp-radius-2xl)

Large rounded surfaces such as toasts.

--tp-radius-3xl

var(--tp-radius-3xl)

Very large rounded surfaces.

--tp-radius-4xl

var(--tp-radius-4xl)

Largest derived corner.

--tp-radius-full

var(--tp-radius-full)

Circles and pills.

Shadow

Elevation, from flat to the highest overlay.

Token

Preview

Value

Description

--tp-shadow-none

var(--tp-shadow-none)

No elevation.

--tp-shadow-sm

var(--tp-shadow-sm)

Slight lift for raised controls and selected tabs.

--tp-shadow-md

var(--tp-shadow-md)

Floating surfaces such as popovers and select lists.

--tp-shadow-lg

var(--tp-shadow-lg)

Highest lift for menus and large overlays.

Opacity

State opacities for disabled content and modal backdrops.

Token

Preview

Value

Description

--tp-opacity-disabled

var(--tp-opacity-disabled)

Disabled controls and content.

--tp-opacity-backdrop

var(--tp-opacity-backdrop)

Strength of the modal backdrop behind dialogs and drawers.

Motion

Durations and easing curves of default motion. Durations are multiplied by the motion scale, so reduced motion makes them instant.

Token

Preview

Value

Description

--tp-duration-fast

var(--tp-duration-fast)

Feedback: color, fill, track and thumb changes, and dialog fades.

--tp-duration-normal

var(--tp-duration-normal)

Anchored surfaces, panels, layout changes and viewport moves.

--tp-duration-slow

var(--tp-duration-slow)

Reveals and hover zoom.

--tp-easing-standard

var(--tp-easing-standard)

State changes and movement within the page.

--tp-easing-enter

var(--tp-easing-enter)

Arrivals: opening surfaces, reveals and items settling into place.

--tp-easing-exit

var(--tp-easing-exit)

Departures: closing surfaces.