Live Demo
Interactive demo of Shift CSS - adjust the seed hues to see the entire color system update in real-time.
Adjust the seed hues to see the entire color system update in real-time.
Color Scales
Primary
Neutral (Brand-Tinted Grays)
Status Colors
Surfaces
Elevation Variants
Sunken
s-surface="sunken"
Flat
s-surface="flat"
Raised
s-surface="raised"
Floating
s-surface="floating"
Modifiers
Bordered
s-bordered
Interactive
s-interactive - hover me!
Color Variants
Primary
s-surface="primary"
Secondary
s-surface="secondary"
Accent
s-surface="accent"
State Surfaces
Success
For success messages
Warning
For warning messages
Danger
For error messages
Buttons
Variants
State Variants
Sizes
States & Modifiers
Full Width
Button Group
Cards
Basic Cards
Card with Header
Card body content goes here.
Card Title
Card subtitle text
Using semantic title/subtitle attributes.
Media Card
Media Card
With image container
Using s-card-media for 16:9 images.
Horizontal Card
Side-by-side layout
Using s-horizontal modifier.
Card Variants
Flat Card
s-card="flat"
Elevated Card
s-card="elevated"
Outline Card
s-card="outline"
Interactive Card
Hover Me!
s-interactive adds lift on hover.
Inputs
Text Inputs
Input Sizes
Input Groups
Select & Textarea
Checkbox, Radio & Toggle
Typography
text-xs: The quick brown fox jumps
text-sm: The quick brown fox jumps
text-base: The quick brown fox jumps
text-lg: The quick brown fox jumps
text-xl: The quick brown fox jumps
text-2xl: The quick brown fox
text-3xl: The quick brown fox