Color palete

    Theme Editor

    Edit the CSS tokens and watch the result instantly. Copy the CSS block into your global.css.

    Text & Accent

    --label
    --secondary-label
    --tertiary-label
    --quaternary-label
    --placeholder
    --link
    --accent
    --ring

    Surfaces — flat

    --background
    --surface-raised
    --surface-overlay

    Surfaces — grouped

    --grouped-background
    --grouped-surface
    --grouped-surface-inset

    Fills

    --fill
    --fill-secondary
    --fill-tertiary
    --fill-quaternary

    Separators

    --separator
    --separator-opaque

    System colors

    --system-blue
    --system-brown
    --system-cyan
    --system-green
    --system-indigo
    --system-mint
    --system-orange
    --system-pink
    --system-purple
    --system-red
    --system-teal
    --system-yellow

    Gray scale

    --system-gray
    --system-gray-2
    --system-gray-3
    --system-gray-4
    --system-gray-5
    --system-gray-6

    Preview

    Component preview

    They react live to token changes.

    DefaultSecondaryOutlineDestructive
    Off
    Color palette
    Gray scale