Andromeda Token Explorer - Interactive Demo

Color System

Select a color palette to see how tokens create consistent, themed interfaces

Primary Success Error Warning Info

Buttons

Primary, Success, and Error palettes have button styles. Watch how the button colors change based on your selection.

Select an alert type to see how semantic colors are applied

Info Success Warning Error

Welcome!

This is an example demonstrating the Andromeda Design System alert components.

See how form inputs appear in different states and sizes

Default Filled Disabled Error

Default Large

Text Input

Adjust spacing values to see how they affect layout and visual rhythm

2xs (4px) xs (8px) s (12px) m (16px) l (20px) xl (24px) 2xl (32px) 3xl (40px)

Watch the padding change smoothly as you select different spacing values

Experience how font size tokens create visual hierarchy

xs s m l xl 2xl 3xl 4xl

The quick brown fox jumps over the lazy dog. Design systems enable consistent typography across all touchpoints.

See how border radius tokens affect component appearance

s (4px) m (6px) l (8px) xl (12px) 2xl (16px) full (200px)

Card 1

Card 2

Card 3

Understanding how tokens flow from primitives to components

Level 1: Primitives

Base values that never change across themes. These are the foundation.

--space-m: 1rem --color-primary-600: #7532f2 --radius-l: 0.5rem

Level 2: Semantic

Contextual tokens that map primitives to purposes. These adapt to themes.

--color-surface-primary-700 --padding-block-m --color-text-neutral-800

Level 3: Component

Specific tokens for components. Built from semantic tokens for consistency.

--color-btn-filled-bg --color-btn-filled-bg-hover --color-btn-outline-bg-hover