Skip to content

Tokens

Every value in Seed. Build UI with the semantic colors; each swatch shows Light on the left and Dark on the right. The Tailwind class is next to each name.

Backgrounds

  • bg-primaryDefault app and page background; cards and dialogs. Dark surfaces sit 2 to 6% apart (canvas #111, sidebar #141414, page #181818, elevated #1e1e1e); borders do the separating.
  • bg-secondarySubtle section background: sidebars, table headers, striped rows.
  • bg-tertiaryMuted fill: inputs at rest, chips, wells, code blocks.
  • bg-quartiaryStrongest neutral fill: skeletons, scrollbar thumbs, tracks.
  • bg-primary-hoverHover state of `bg-primary`.
  • bg-secondary-hoverHover state of `bg-secondary`.
  • bg-tertiary-hoverHover state of `bg-tertiary`.
  • bg-quartiary-hoverHover state of `bg-quartiary`.
  • bg-black-solidInverse solid fill (neutral-900 in Light, white in Dark): tooltips, inverse buttons, toasts. Text on it: `text-on-dark-color`.
  • bg-black-solid-hoverHover state of `bg-black-solid`.
  • bg-disabledFill of disabled solid controls (disabled primary button).
  • bg-disabled-altFill of disabled soft controls (disabled input, secondary button).
  • bg-canvasApp background behind panels and the page. The quietest surface; never put text directly on it without a panel.
  • bg-insetRecessed areas inside a surface: code blocks, wells, empty drop zones.
  • bg-elevatedFloating surfaces (popovers, menus, the Pluto panel). Same as bg-primary in Light, one step lighter in Dark so elevation reads without color.
  • bg-selectedNeutral selection: active nav, pressed toggles, selected rows. Keeps chrome colorless so the customer's brand color is the only accent on screen.
  • bg-selected-hoverHover on bg-selected.
  • bg-stageThe surface customer content is shown on (swatches, component previews). Pure, untinted, and switchable to the opposite mode or a checkerboard.
  • bg-stage-patternSecond color of the checkerboard stage, for judging transparency.
  • bg-accent-primarySoft accent fill: selected rows, active nav items, accent badges. Text on it: `text-accent-primary`.
  • bg-accent-primary-hoverHover state of `bg-accent-primary`.
  • bg-accent-solidSolid accent (blue) fill for the strongest emphasis. Text on it: `text-white` in Light, `text-on-dark-color` in Dark. Dark uses blue-600 so white text keeps 4.5:1 (was blue-500, 3.6:1).
  • bg-accent-solid-hoverHover state of `bg-accent-solid`.
  • bg-error-primarySoft error fill: alert, badge and banner backgrounds. Text on it: `text-error-primary`.
  • bg-error-primary-hoverHover state of `bg-error-primary`.
  • bg-error-secondarySolid error fill: solid badges, progress, emphasis alerts.
  • bg-error-secondary-hoverHover state of `bg-error-secondary`.
  • bg-success-primarySoft success fill: alert, badge and banner backgrounds. Text on it: `text-success-primary`.
  • bg-success-primary-hoverHover state of `bg-success-primary`.
  • bg-success-secondarySolid success fill: solid badges, progress, emphasis alerts.
  • bg-success-secondary-hoverHover state of `bg-success-secondary`.
  • bg-warning-primarySoft warning fill: alert, badge and banner backgrounds. Text on it: `text-warning-primary`.
  • bg-warning-primary-hoverHover state of `bg-warning-primary`.
  • bg-warning-secondarySolid warning fill: solid badges, progress, emphasis alerts.
  • bg-warning-secondary-hoverHover state of `bg-warning-secondary`.
  • bg-info-primarySoft info fill: alert, badge and banner backgrounds. Text on it: `text-info-primary`.
  • bg-info-primary-hoverHover state of `bg-info-primary`.
  • bg-info-secondarySolid info fill: solid badges, progress, emphasis alerts.
  • bg-info-secondary-hoverHover state of `bg-info-secondary`.
  • bg-offer-primarySoft offer fill: alert, badge and banner backgrounds. Text on it: `text-offer-primary`.
  • bg-offer-primary-hoverHover state of `bg-offer-primary`.
  • bg-offer-secondarySolid offer fill: solid badges, progress, emphasis alerts.
  • bg-offer-secondary-hoverHover state of `bg-offer-secondary`.
  • bg-overlay-alpha-primaryLight scrim behind popovers and drawers (20%).
  • bg-overlay-alpha-secondaryHeavy scrim behind modal dialogs and sheets: black at 75% in Light and Dark.

Text

  • text-primaryHeadings and body copy on `bg-primary`, `bg-secondary`, `bg-tertiary`. Contrast on `bg-primary` 17.9:1 Light / 17.9:1 Dark.
  • text-primary-hoverHover state of `text-primary`.
  • text-secondarySupporting copy: descriptions, secondary labels, table cells. Contrast on `bg-primary` 7.6:1 Light / 12.0:1 Dark.
  • text-secondary-hoverHover state of `text-secondary`.
  • text-tertiaryLeast emphasis that still reads as text: meta, timestamps, helper text. Contrast on `bg-primary` 4.8:1 Light / 7.0:1 Dark.
  • text-tertiary-hoverHover state of `text-tertiary`.
  • text-disabledLabels of disabled controls. Contrast on `bg-primary` 2.6:1 Light / 3.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-disabled-altDisabled content on `bg-disabled`/`bg-disabled-alt` fills. Contrast on `bg-primary` 1.5:1 Light / 2.4:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-accent-primaryAccent text: active tabs, selected labels. Contrast on `bg-primary` 5.2:1 Light / 7.0:1 Dark; on `bg-accent-primary` 4.7:1 Light / 4.1:1 Dark. Below 4.5:1 in at least one theme: text 24px+ or bold 19px+ only, or icons. Dark uses blue-300 so it keeps 4.5:1 on bg-accent-primary too (was blue-400, 4.0:1).
  • text-accent-primary-hoverHover state of `text-accent-primary`.
  • text-error-primaryError text: messages, inline validation, badge labels. Contrast on `bg-primary` 8.3:1 Light / 6.5:1 Dark; on `bg-error-primary` 7.6:1 Light / 5.8:1 Dark.
  • text-error-primary-hoverHover state of `text-error-primary`.
  • text-error-secondaryLight error text for large or decorative use; not body copy. Contrast on `bg-primary` 2.8:1 Light / 4.7:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-error-secondary-hoverHover state of `text-error-secondary`.
  • text-success-primarySuccess text: messages, inline validation, badge labels. Contrast on `bg-primary` 5.0:1 Light / 10.2:1 Dark; on `bg-success-primary` 4.6:1 Light / 8.6:1 Dark.
  • text-success-primary-hoverHover state of `text-success-primary`.
  • text-success-secondaryLight success text for large or decorative use; not body copy. Contrast on `bg-primary` 1.7:1 Light / 7.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-success-secondary-hoverHover state of `text-success-secondary`.
  • text-warning-primaryWarning text: messages, inline validation, badge labels. Contrast on `bg-primary` 5.2:1 Light / 7.9:1 Dark; on `bg-warning-primary` 4.5:1 Light / 6.9:1 Dark.
  • text-warning-primary-hoverHover state of `text-warning-primary`.
  • text-warning-secondaryLight warning text for large or decorative use; not body copy. Contrast on `bg-primary` 2.3:1 Light / 6.4:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-warning-secondary-hoverHover state of `text-warning-secondary`.
  • text-info-primaryInfo text: messages, inline validation, badge labels. Contrast on `bg-primary` 5.2:1 Light / 7.0:1 Dark; on `bg-info-primary` 4.7:1 Light / 5.8:1 Dark.
  • text-info-primary-hoverHover state of `text-info-primary`.
  • text-info-secondaryLight info text for large or decorative use; not body copy. Contrast on `bg-primary` 2.5:1 Light / 4.9:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-info-secondary-hoverHover state of `text-info-secondary`.
  • text-offer-primaryOffer text: messages, inline validation, badge labels. Contrast on `bg-primary` 5.5:1 Light / 9.3:1 Dark; on `bg-offer-primary` 4.8:1 Light / 7.9:1 Dark.
  • text-offer-primary-hoverHover state of `text-offer-primary`.
  • text-offer-secondaryLight offer text for large or decorative use; not body copy. Contrast on `bg-primary` 2.5:1 Light / 7.0:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-offer-secondary-hoverHover state of `text-offer-secondary`.
  • text-placeholderPlaceholder text inside inputs. Contrast on `bg-primary` 2.6:1 Light / 3.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-whiteWhite in both themes: on `bg-accent-solid` and button fills that stay saturated in Dark. Contrast on `bg-accent-solid` 5.2:1 Light / 3.7:1 Dark. Below 4.5:1 in at least one theme (kept as in the source): text 24px+ or bold 19px+ only, or icons.
  • text-on-dark-colorOn `bg-black-solid` (flips with it). Contrast on `bg-black-solid` 17.9:1 Light / 17.9:1 Dark.
  • text-accent-secondaryLight accent for large or decorative text only. Contrast on `bg-primary` 1.8:1 Light / 4.9:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • text-accent-secondary-hoverHover state of `text-accent-secondary`.
  • text-linkInline links in running text. Contrast on `bg-primary` 5.2:1 Light / 4.9:1 Dark.
  • text-link-hoverHover state of `text-link`.
  • text-on-accentText and icons on accent solids (bg-accent-solid, button-primary). White by default; createTheme switches it to near-black when the brand is too light for white.

Icons

  • icon-primaryDefault icons on `bg-primary`, `bg-secondary`, `bg-tertiary`. Contrast on `bg-primary` 17.9:1 Light / 17.9:1 Dark.
  • icon-primary-hoverHover state of `icon-primary`.
  • icon-secondarySupporting icons: descriptions, secondary labels, table cells. Contrast on `bg-primary` 7.6:1 Light / 12.0:1 Dark.
  • icon-secondary-hoverHover state of `icon-secondary`.
  • icon-tertiaryLeast emphasis that still reads as icons: meta, timestamps, helper icons. Contrast on `bg-primary` 4.8:1 Light / 7.0:1 Dark.
  • icon-tertiary-hoverHover state of `icon-tertiary`.
  • icon-disabledIcons of disabled controls. Contrast on `bg-primary` 2.6:1 Light / 3.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-disabled-altDisabled content on `bg-disabled`/`bg-disabled-alt` fills. Contrast on `bg-primary` 1.5:1 Light / 2.4:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-placeholderPlaceholder icons inside inputs. Contrast on `bg-primary` 2.6:1 Light / 3.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-whiteWhite in both themes: on `bg-accent-solid` and button fills that stay saturated in Dark.
  • icon-on-dark-colorOn `bg-black-solid` (flips with it). Contrast on `bg-black-solid` 17.9:1 Light / 17.9:1 Dark.
  • icon-accent-primaryAccent icons: active tabs, selected labels. Contrast on `bg-primary` 3.7:1 Light / 7.0:1 Dark; on `bg-accent-primary` 3.4:1 Light / 4.1:1 Dark. Below 4.5:1 in at least one theme (kept as in the source): text 24px+ or bold 19px+ only, or icons.
  • icon-accent-primary-hoverHover state of `icon-accent-primary`.
  • icon-accent-secondaryLight accent for large or decorative icons only. Contrast on `bg-primary` 1.8:1 Light / 4.9:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-accent-secondary-hoverHover state of `icon-accent-secondary`.
  • icon-error-primaryError icons in alerts and badges. Contrast on `bg-primary` 8.3:1 Light / 6.5:1 Dark; on `bg-error-primary` 7.6:1 Light / 5.8:1 Dark.
  • icon-error-primary-hoverHover state of `icon-error-primary`.
  • icon-error-secondaryLight error icon, decorative. Contrast on `bg-primary` 2.8:1 Light / 4.7:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-error-secondary-hoverHover state of `icon-error-secondary`.
  • icon-success-primarySuccess icons in alerts and badges. Contrast on `bg-primary` 3.3:1 Light / 10.2:1 Dark; on `bg-success-primary` 3.0:1 Light / 8.6:1 Dark. Below 4.5:1 in at least one theme (kept as in the source): text 24px+ or bold 19px+ only, or icons.
  • icon-success-primary-hoverHover state of `icon-success-primary`.
  • icon-success-secondaryLight success icon, decorative. Contrast on `bg-primary` 1.7:1 Light / 7.8:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-success-secondary-hoverHover state of `icon-success-secondary`.
  • icon-warning-primaryWarning icons in alerts and badges. Contrast on `bg-primary` 3.6:1 Light / 7.9:1 Dark; on `bg-warning-primary` 3.1:1 Light / 6.9:1 Dark. Below 4.5:1 in at least one theme (kept as in the source): text 24px+ or bold 19px+ only, or icons.
  • icon-warning-primary-hoverHover state of `icon-warning-primary`.
  • icon-warning-secondaryLight warning icon, decorative. Contrast on `bg-primary` 2.3:1 Light / 6.4:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-warning-secondary-hoverHover state of `icon-warning-secondary`.
  • icon-info-primaryInfo icons in alerts and badges. Contrast on `bg-primary` 5.2:1 Light / 7.0:1 Dark; on `bg-info-primary` 4.7:1 Light / 5.8:1 Dark.
  • icon-info-primary-hoverHover state of `icon-info-primary`.
  • icon-info-secondaryLight info icon, decorative. Contrast on `bg-primary` 2.5:1 Light / 4.9:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-info-secondary-hoverHover state of `icon-info-secondary`.
  • icon-offer-primaryOffer icons in alerts and badges. Contrast on `bg-primary` 3.8:1 Light / 9.3:1 Dark; on `bg-offer-primary` 3.3:1 Light / 7.9:1 Dark. Below 4.5:1 in at least one theme (kept as in the source): text 24px+ or bold 19px+ only, or icons.
  • icon-offer-primary-hoverHover state of `icon-offer-primary`.
  • icon-offer-secondaryLight offer icon, decorative. Contrast on `bg-primary` 2.5:1 Light / 7.0:1 Dark. Below 3:1 in at least one theme (kept as in the source): not for text or meaningful marks there.
  • icon-offer-secondary-hoverHover state of `icon-offer-secondary`.

Borders

  • border-primaryDefault border: inputs, outlined buttons.
  • border-secondaryCard and container borders, dividers.
  • border-tertiaryFaintest dividers inside cards and lists.
  • border-primary-solidHigh-emphasis border (inverse ink).
  • border-disabledBorder of disabled controls.
  • border-disabled-altBorder of disabled soft controls.
  • border-accent-primaryFocused or selected border.
  • border-accent-secondarySoft accent border around `bg-accent-primary`.
  • border-error-primaryStrong error border: invalid inputs, outlined alerts.
  • border-error-secondarySoft error border around `bg-error-primary` fills.
  • border-success-primaryStrong success border: outlined alerts and focused success states.
  • border-success-secondarySoft success border around `bg-success-primary` fills.
  • border-warning-primaryStrong warning border: outlined alerts and focused warning states.
  • border-warning-secondarySoft warning border around `bg-warning-primary` fills.
  • border-info-primaryStrong info border: outlined alerts and focused info states.
  • border-info-secondarySoft info border around `bg-info-primary` fills.
  • border-offer-primaryStrong offer border: outlined alerts and focused offer states.
  • border-offer-secondarySoft offer border around `bg-offer-primary` fills.

Buttons

  • button-primaryPrimary button fill. Label: `button-primary-text`.
  • button-primary-hoverPrimary button fill on hover.
  • button-primary-textPrimary button label. Contrast on `button-primary` 5.2:1 (both themes).
  • button-primary-text-hoverPrimary button label on hover.
  • button-primary-focusPrimary button focus ring color (see shadow `button-focus-primary`).
  • button-secondary-focusSecondary button focus ring color.
  • button-ghostGhost button fill (transparent).
  • button-ghost-hoverGhost button fill on hover (transparent in source).
  • button-ghost-focusGhost button focus ring color.
  • button-destructiveDestructive button fill. Label: `button-destructive-text`.
  • button-destructive-hoverDestructive button fill on hover.
  • button-destructive-textDestructive button label. Contrast on `button-destructive` 4.8:1 (both themes).
  • button-destructive-text-hoverDestructive button label on hover.
  • button-destructive-focusDestructive button focus ring color.
  • button-successSuccess button fill. Label: `button-success-text`.
  • button-success-hoverSuccess button fill on hover.
  • button-success-textSuccess button label. Contrast on `button-success` 3.3:1 (both themes). Below 4.5:1 (kept as in the source): fine for 19px+ bold labels; flag for smaller labels.
  • button-success-text-hoverSuccess button label on hover.
  • button-success-focusSuccess button focus ring color.

Type styles

  • Grow from a single seeddisplay-title-regular38px / 1.15 · 400
  • Grow from a single seeddisplay-number-regular30px / 1 · 400
  • Grow from a single seeddisplay-headline-regular28px / 1.2 · 400
  • Grow from a single seeddisplay-greeting-regular24px / 1.25 · 400
  • Grow from a single seedtitle-title-3-regular56px / 68px · 300
  • Grow from a single seedtitle-title-3-medium56px / 68px · 500
  • Grow from a single seedtitle-title-3-bold56px / 68px · 700
  • Grow from a single seedheading-h3-medium40px / 48px · 500
  • Grow from a single seedheading-h3-semibold40px / 48px · 600
  • Grow from a single seedheading-h3-bold40px / 48px · 700
  • Grow from a single seedheading-h4-medium32px / 38px · 500
  • Grow from a single seedheading-h4-semibold32px / 38px · 600
  • Grow from a single seedheading-h4-bold32px / 38px · 700
  • Grow from a single seedheading-h5-medium24px / 30px · 500
  • Grow from a single seedheading-h5-semibold24px / 30px · 600
  • Grow from a single seedheading-h5-bold24px / 30px · 700
  • Grow from a single seedheading-h6-medium20px / 24px · 500
  • Grow from a single seedheading-h6-semibold20px / 24px · 600
  • Grow from a single seedheading-h6-bold20px / 24px · 700
  • Grow from a single seedlabel-label-1-regular16px / 22px · 300
  • Grow from a single seedlabel-label-1-medium16px / 22px · 500
  • Grow from a single seedlabel-label-1-semibold16px / 22px · 600
  • Grow from a single seedlabel-label-1-bold16px / 22px · 700
  • Grow from a single seedlabel-label-2-regular14px / 20px · 300
  • Grow from a single seedlabel-label-2-medium14px / 20px · 500
  • Grow from a single seedlabel-label-2-semibold14px / 20px · 600
  • Grow from a single seedlabel-label-2-bold14px / 20px · 700
  • Grow from a single seedlabel-label-3-regular12px / 16px · 300
  • Grow from a single seedlabel-label-3-medium12px / 16px · 500
  • Grow from a single seedlabel-label-3-semibold12px / 16px · 600
  • Grow from a single seedlabel-label-3-bold12px / 16px · 700
  • Grow from a single seedbody-body-1-regular18px / 28px · 300
  • Grow from a single seedbody-body-1-medium18px / 28px · 500
  • Grow from a single seedbody-body-2-regular16px / 24px · 300
  • Grow from a single seedbody-body-2-medium16px / 24px · 500
  • Grow from a single seedbody-body-3-regular14px / 20px · 300
  • Grow from a single seedbody-body-3-medium14px / 20px · 500
  • Grow from a single seedbody-body-4-regular12px / 16px · 300
  • Grow from a single seedbody-body-4-medium12px / 16px · 500
  • Grow from a single seedcaption-caption-1-medium10px / 12px · 500
  • Grow from a single seedcaption-caption-1-semibold10px / 12px · 600
  • Grow from a single seedcaption-caption-2-medium9px / 10px · 500
  • Grow from a single seedcaption-caption-2-semibold9px / 10px · 600
  • Grow from a single seedreading-body-light16px / 26px · 300
  • Grow from a single seedreading-body-regular16px / 26px · 400
  • Grow from a single seedreading-small-light14px / 22px · 300
  • Seed / Tokensmono-label-medium11px / 16px · 500
  • Seed / Tokensmono-value-regular13px / 20px · 400

Spacing

  • p-xxxs2px
  • p-xxs4px
  • p-xs8px
  • p-sm12px
  • p-base16px
  • p-md20px
  • p-lg24px
  • p-xl28px
  • p-2xl32px
  • p-3xl40px
  • p-4xl48px
  • p-5xl60px
  • p-6xl72px

Radius

rounded-sm2px
rounded-md4px
rounded-lg8px
rounded-xl12px
rounded-2xl16px
rounded-3xl24px
rounded-4xl32px
rounded-5xl48px
rounded-full9999px
rounded-control4px
rounded-petal12px
rounded-petal-tip4px

Elevation

shadow-elevation-overlay
shadow-elevation-raised
shadow-elevation-2xs
shadow-elevation-xs
shadow-elevation-sm
shadow-elevation-md
shadow-elevation-lg
shadow-elevation-xl
shadow-elevation-2xl

155 semantic 292 primitives