Skip to main content
Ben

Lab

The design tokens this site is built from. Each one is listed with its light and dark values, the primitive it comes from, and a preview styled by the token itself.

Color

Color tokens
TokenDescriptionLightDarkPreview
--color-surface-basePage background.#fffffffrom color.gray.0#101216from color.gray.950
--color-surface-raisedBackground of raised areas: cards, table headers, code.#f8f9fafrom color.gray.50#1a1d23from color.gray.900
--color-text-defaultPrimary text.#1a1d23from color.gray.900#f8f9fafrom color.gray.50
--color-text-mutedSecondary text.#525866from color.gray.600#cdd2d8from color.gray.300
--color-text-subtleTertiary text, such as metadata. Still body text, so 4.5:1.#6b7280from color.gray.500#9ba3aefrom color.gray.400
--color-link-defaultLink text.#1d4ed8from color.blue.700#93c5fdfrom color.blue.300
--color-link-hoverLink text on hover.#1e40affrom color.blue.800#bfdbfefrom color.blue.200
--color-border-subtleDecorative dividers only. Not contrast-checked; never the only boundary of a control.#e2e5e9from color.gray.200#2a2f38from color.gray.800
--color-border-strongBoundaries of UI components (3:1).#6b7280from color.gray.500#6b7280from color.gray.500
--color-focus-ringFocus indicator color (3:1 against every surface).#2563ebfrom color.blue.600#60a5fafrom color.blue.400

Type

Type tokens
TokenDescriptionValuePreview
--type-family-bodyFont family for all body and UI text.system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'from type.font-stack.system
--type-family-codeFont family for code and token names.ui-monospace, SFMono-Regular, Menlo, Consolas, monospacefrom type.font-stack.mono
--type-size-smallSecondary text: captions, footers, metadata.0.875remfrom type.font-size.sm
--type-size-bodyDefault running text.1remfrom type.font-size.md
--type-size-leadIntroductory paragraph text.1.25remfrom type.font-size.lg
--type-size-h1Page title (h1).2.5remfrom type.font-size.3xl
--type-size-h2Section heading (h2).2remfrom type.font-size.2xl
--type-size-h3Subsection heading (h3).1.5remfrom type.font-size.xl
--type-weight-bodyWeight for running text.400from type.font-weight.400
--type-weight-strongWeight for emphasis and labels.600from type.font-weight.600
--type-weight-headingWeight for headings.700from type.font-weight.700
--type-leading-bodyLine height for running text.1.6from type.line-height.normal
--type-leading-headingLine height for headings.1.2from type.line-height.tight

Space

Space tokens
TokenDescriptionValuePreview
--space-inset-smPadding inside small elements.0.5remfrom space.2
--space-inset-mdPadding inside standard containers.1remfrom space.4
--space-inset-lgPadding inside large containers.1.5remfrom space.6
--space-stack-xsVertical gap between tightly related items.0.25remfrom space.1
--space-stack-smVertical gap between related items.0.5remfrom space.2
--space-stack-mdVertical gap between paragraphs and blocks.1remfrom space.4
--space-stack-lgVertical gap between groups.1.5remfrom space.6
--space-stack-xlVertical gap between sections.2remfrom space.8
--space-inline-smHorizontal gap between small inline items.0.5remfrom space.2
--space-inline-mdHorizontal gap between inline items, such as nav links.1remfrom space.4
--space-layout-xsPage side gutter (16px).1remfrom space.4
--space-layout-smSmall layout gap between page regions.2remfrom space.8
--space-layout-mdMedium layout gap between page regions.3remfrom space.12
--space-layout-lgLarge layout gap between page regions.4remfrom space.16

Radius

Radius tokens
TokenDescriptionValuePreview
--radius-controlCorners of interactive controls.4pxfrom radius.4
--radius-surfaceCorners of cards and raised surfaces.8pxfrom radius.8
--radius-pillFully rounded pills and tags.9999pxfrom radius.full

Motion

Motion tokens
TokenDescriptionValuePreview
--motion-duration-instantImmediate feedback, such as hover color changes.100msfrom motion.time.100Reduced motion: 0ms from motion.time.0No preview
--motion-duration-fastSmall state changes.150msfrom motion.time.150Reduced motion: 0ms from motion.time.0No preview
--motion-duration-baseStandard transitions.250msfrom motion.time.250Reduced motion: 0ms from motion.time.0No preview
--motion-duration-slowLarge or entering elements.400msfrom motion.time.400Reduced motion: 0ms from motion.time.0No preview
--motion-easing-enterElements entering or appearing.cubic-bezier(0, 0, 0.2, 1)from motion.curve.outNo preview
--motion-easing-exitElements leaving or disappearing.cubic-bezier(0.4, 0, 1, 1)from motion.curve.inNo preview
--motion-easing-standardElements moving or changing in place.cubic-bezier(0.4, 0, 0.2, 1)from motion.curve.in-outNo preview

Effect

Effect tokens
TokenDescriptionLightDarkPreview
--effect-focus-ring-widthFocus indicator outline width.Both themes2pxfrom effect.line.2
--effect-focus-ring-offsetGap between an element and its focus indicator.Both themes2pxfrom effect.line.2
--effect-elevation-raisedShadow for slightly raised surfaces.0px 1px 2px 0px rgb(0% 0% 0% / 0.08)from effect.shadow.sm0px 1px 2px 0px rgb(0% 0% 0% / 0.5)from effect.shadow.sm-dark
--effect-elevation-overlayShadow for overlays such as menus and dialogs.0px 4px 12px 0px rgb(0% 0% 0% / 0.12)from effect.shadow.md0px 4px 12px 0px rgb(0% 0% 0% / 0.6)from effect.shadow.md-dark