Stylesheet values made simple.
Semantic Props
Expertly crafted CSS Custom Properties (variables) for creating consistent components in any design.

css — Import At-Rule

@import "https://unpkg.com/semantic-props@beta";
Border Style and Radius

Semantic Props provides CSS border values for style and radius.

Border Style var(--border-style)
Smallest Radius var(--smallest-radius)Smaller Radius var(--smaller-radius)Small Radius var(--small-radius)Medium Radius var(--medium-radius)Large Radius var(--large-radius)Larger Radius var(--larger-radius)Largest Radius var(--largest-radius)
Color Palette

Semantic Props provides a simple but expansive color palette.

White
var(--white)
Black
var(--black)
Background Color
var(--background-color)
Middleground Color
var(--middleground-color)
Foreground Color
var(--foreground-color)
High Contrast Color
var(--high-contrast-color)
Medium Contrast Color
var(--medium-contrast-color)
Low Contrast Color
var(--low-contrast-color)
Accent 50
var(--accent-50)
Accent 100
var(--accent-100)
Accent 150
var(--accent-150)
Accent 200
var(--accent-200)
Accent 250
var(--accent-250)
Accent 300
var(--accent-300)
Accent 350
var(--accent-350)
Accent 400
var(--accent-400)
Accent 450
var(--accent-450)
Accent 500
var(--accent-500)
Accent 550
var(--accent-550)
Accent 600
var(--accent-600)
Accent 650
var(--accent-650)
Accent 700
var(--accent-700)
Accent 750
var(--accent-750)
Accent 800
var(--accent-800)
Accent 850
var(--accent-850)
Accent 900
var(--accent-900)
Accent 950
var(--accent-950)
Blue 50
var(--blue-50)
Blue 100
var(--blue-100)
Blue 150
var(--blue-150)
Blue 200
var(--blue-200)
Blue 250
var(--blue-250)
Blue 300
var(--blue-300)
Blue 350
var(--blue-350)
Blue 400
var(--blue-400)
Blue 450
var(--blue-450)
Blue 500
var(--blue-500)
Blue 550
var(--blue-550)
Blue 600
var(--blue-600)
Blue 650
var(--blue-650)
Blue 700
var(--blue-700)
Blue 750
var(--blue-750)
Blue 800
var(--blue-800)
Blue 850
var(--blue-850)
Blue 900
var(--blue-900)
Blue 950
var(--blue-950)
Brown 50
var(--brown-50)
Brown 100
var(--brown-100)
Brown 150
var(--brown-150)
Brown 200
var(--brown-200)
Brown 250
var(--brown-250)
Brown 300
var(--brown-300)
Brown 350
var(--brown-350)
Brown 400
var(--brown-400)
Brown 450
var(--brown-450)
Brown 500
var(--brown-500)
Brown 550
var(--brown-550)
Brown 600
var(--brown-600)
Brown 650
var(--brown-650)
Brown 700
var(--brown-700)
Brown 750
var(--brown-750)
Brown 800
var(--brown-800)
Brown 850
var(--brown-850)
Brown 900
var(--brown-900)
Brown 950
var(--brown-950)
Coral 50
var(--coral-50)
Coral 100
var(--coral-100)
Coral 150
var(--coral-150)
Coral 200
var(--coral-200)
Coral 250
var(--coral-250)
Coral 300
var(--coral-300)
Coral 350
var(--coral-350)
Coral 400
var(--coral-400)
Coral 450
var(--coral-450)
Coral 500
var(--coral-500)
Coral 550
var(--coral-550)
Coral 600
var(--coral-600)
Coral 650
var(--coral-650)
Coral 700
var(--coral-700)
Coral 750
var(--coral-750)
Coral 800
var(--coral-800)
Coral 850
var(--coral-850)
Coral 900
var(--coral-900)
Coral 950
var(--coral-950)
Cyan 50
var(--cyan-50)
Cyan 100
var(--cyan-100)
Cyan 150
var(--cyan-150)
Cyan 200
var(--cyan-200)
Cyan 250
var(--cyan-250)
Cyan 300
var(--cyan-300)
Cyan 350
var(--cyan-350)
Cyan 400
var(--cyan-400)
Cyan 450
var(--cyan-450)
Cyan 500
var(--cyan-500)
Cyan 550
var(--cyan-550)
Cyan 600
var(--cyan-600)
Cyan 650
var(--cyan-650)
Cyan 700
var(--cyan-700)
Cyan 750
var(--cyan-750)
Cyan 800
var(--cyan-800)
Cyan 850
var(--cyan-850)
Cyan 900
var(--cyan-900)
Cyan 950
var(--cyan-950)
Gray 50
var(--gray-50)
Gray 100
var(--gray-100)
Gray 150
var(--gray-150)
Gray 200
var(--gray-200)
Gray 250
var(--gray-250)
Gray 300
var(--gray-300)
Gray 350
var(--gray-350)
Gray 400
var(--gray-400)
Gray 450
var(--gray-450)
Gray 500
var(--gray-500)
Gray 550
var(--gray-550)
Gray 600
var(--gray-600)
Gray 650
var(--gray-650)
Gray 700
var(--gray-700)
Gray 750
var(--gray-750)
Gray 800
var(--gray-800)
Gray 850
var(--gray-850)
Gray 900
var(--gray-900)
Gray 950
var(--gray-950)
Green 50
var(--green-50)
Green 100
var(--green-100)
Green 150
var(--green-150)
Green 200
var(--green-200)
Green 250
var(--green-250)
Green 300
var(--green-300)
Green 350
var(--green-350)
Green 400
var(--green-400)
Green 450
var(--green-450)
Green 500
var(--green-500)
Green 550
var(--green-550)
Green 600
var(--green-600)
Green 650
var(--green-650)
Green 700
var(--green-700)
Green 750
var(--green-750)
Green 800
var(--green-800)
Green 850
var(--green-850)
Green 900
var(--green-900)
Green 950
var(--green-950)
Indigo 50
var(--indigo-50)
Indigo 100
var(--indigo-100)
Indigo 150
var(--indigo-150)
Indigo 200
var(--indigo-200)
Indigo 250
var(--indigo-250)
Indigo 300
var(--indigo-300)
Indigo 350
var(--indigo-350)
Indigo 400
var(--indigo-400)
Indigo 450
var(--indigo-450)
Indigo 500
var(--indigo-500)
Indigo 550
var(--indigo-550)
Indigo 600
var(--indigo-600)
Indigo 650
var(--indigo-650)
Indigo 700
var(--indigo-700)
Indigo 750
var(--indigo-750)
Indigo 800
var(--indigo-800)
Indigo 850
var(--indigo-850)
Indigo 900
var(--indigo-900)
Indigo 950
var(--indigo-950)
Lime 50
var(--lime-50)
Lime 100
var(--lime-100)
Lime 150
var(--lime-150)
Lime 200
var(--lime-200)
Lime 250
var(--lime-250)
Lime 300
var(--lime-300)
Lime 350
var(--lime-350)
Lime 400
var(--lime-400)
Lime 450
var(--lime-450)
Lime 500
var(--lime-500)
Lime 550
var(--lime-550)
Lime 600
var(--lime-600)
Lime 650
var(--lime-650)
Lime 700
var(--lime-700)
Lime 750
var(--lime-750)
Lime 800
var(--lime-800)
Lime 850
var(--lime-850)
Lime 900
var(--lime-900)
Lime 950
var(--lime-950)
Magenta 50
var(--magenta-50)
Magenta 100
var(--magenta-100)
Magenta 150
var(--magenta-150)
Magenta 200
var(--magenta-200)
Magenta 250
var(--magenta-250)
Magenta 300
var(--magenta-300)
Magenta 350
var(--magenta-350)
Magenta 400
var(--magenta-400)
Magenta 450
var(--magenta-450)
Magenta 500
var(--magenta-500)
Magenta 550
var(--magenta-550)
Magenta 600
var(--magenta-600)
Magenta 650
var(--magenta-650)
Magenta 700
var(--magenta-700)
Magenta 750
var(--magenta-750)
Magenta 800
var(--magenta-800)
Magenta 850
var(--magenta-850)
Magenta 900
var(--magenta-900)
Magenta 950
var(--magenta-950)
Orange 50
var(--orange-50)
Orange 100
var(--orange-100)
Orange 150
var(--orange-150)
Orange 200
var(--orange-200)
Orange 250
var(--orange-250)
Orange 300
var(--orange-300)
Orange 350
var(--orange-350)
Orange 400
var(--orange-400)
Orange 450
var(--orange-450)
Orange 500
var(--orange-500)
Orange 550
var(--orange-550)
Orange 600
var(--orange-600)
Orange 650
var(--orange-650)
Orange 700
var(--orange-700)
Orange 750
var(--orange-750)
Orange 800
var(--orange-800)
Orange 850
var(--orange-850)
Orange 900
var(--orange-900)
Orange 950
var(--orange-950)
Pink 50
var(--pink-50)
Pink 100
var(--pink-100)
Pink 150
var(--pink-150)
Pink 200
var(--pink-200)
Pink 250
var(--pink-250)
Pink 300
var(--pink-300)
Pink 350
var(--pink-350)
Pink 400
var(--pink-400)
Pink 450
var(--pink-450)
Pink 500
var(--pink-500)
Pink 550
var(--pink-550)
Pink 600
var(--pink-600)
Pink 650
var(--pink-650)
Pink 700
var(--pink-700)
Pink 750
var(--pink-750)
Pink 800
var(--pink-800)
Pink 850
var(--pink-850)
Pink 900
var(--pink-900)
Pink 950
var(--pink-950)
Red 50
var(--red-50)
Red 100
var(--red-100)
Red 150
var(--red-150)
Red 200
var(--red-200)
Red 250
var(--red-250)
Red 300
var(--red-300)
Red 350
var(--red-350)
Red 400
var(--red-400)
Red 450
var(--red-450)
Red 500
var(--red-500)
Red 550
var(--red-550)
Red 600
var(--red-600)
Red 650
var(--red-650)
Red 700
var(--red-700)
Red 750
var(--red-750)
Red 800
var(--red-800)
Red 850
var(--red-850)
Red 900
var(--red-900)
Red 950
var(--red-950)
Violet 50
var(--violet-50)
Violet 100
var(--violet-100)
Violet 150
var(--violet-150)
Violet 200
var(--violet-200)
Violet 250
var(--violet-250)
Violet 300
var(--violet-300)
Violet 350
var(--violet-350)
Violet 400
var(--violet-400)
Violet 450
var(--violet-450)
Violet 500
var(--violet-500)
Violet 550
var(--violet-550)
Violet 600
var(--violet-600)
Violet 650
var(--violet-650)
Violet 700
var(--violet-700)
Violet 750
var(--violet-750)
Violet 800
var(--violet-800)
Violet 850
var(--violet-850)
Violet 900
var(--violet-900)
Violet 950
var(--violet-950)
Yellow 50
var(--yellow-50)
Yellow 100
var(--yellow-100)
Yellow 150
var(--yellow-150)
Yellow 200
var(--yellow-200)
Yellow 250
var(--yellow-250)
Yellow 300
var(--yellow-300)
Yellow 350
var(--yellow-350)
Yellow 400
var(--yellow-400)
Yellow 450
var(--yellow-450)
Yellow 500
var(--yellow-500)
Yellow 550
var(--yellow-550)
Yellow 600
var(--yellow-600)
Yellow 650
var(--yellow-650)
Yellow 700
var(--yellow-700)
Yellow 750
var(--yellow-750)
Yellow 800
var(--yellow-800)
Yellow 850
var(--yellow-850)
Yellow 900
var(--yellow-900)
Yellow 950
var(--yellow-950)
Filter and Opacity Effects

Semantic Props provides CSS filter and opacity values for various types of media.

Lightest Blur

var(--lightest-blur)

Lighter Blur

var(--lighter-blur)

Light Blur

var(--light-blur)

Medium Blur

var(--medium-blur)

Heavy Blur

var(--heavy-blur)

Heavier Blur

var(--heavier-blur)

Heaviest Blur

var(--heaviest-blur)

Lowest Brightness

var(--lowest-brightness)

Lower Brightness

var(--lower-brightness)

Low Brightness

var(--low-brightness)

High Brightness

var(--high-brightness)

Higher Brightness

var(--higher-brightness)

Highest Brightness

var(--highest-brightness)

Lowest Contrast

var(--lowest-contrast)

Lower Contrast

var(--lower-contrast)

Low Contrast

var(--low-contrast)

High Contrast

var(--high-contrast)

Higher Contrast

var(--higher-contrast)

Highest Contrast

var(--highest-contrast)

Lowest Saturation

var(--lowest-saturation)

Lower Saturation

var(--lower-saturation)

Low Saturation

var(--low-saturation)

High Saturation

var(--high-saturation)

Higher Saturation

var(--higher-saturation)

Highest Saturation

var(--highest-saturation)

Lowest Opacity

var(--lowest-opacity)

Lower Opacity

var(--lower-opacity)

Low Opacity

var(--low-opacity)

Medium Opacity

var(--medium-opacity)

High Opacity

var(--high-opacity)

Higher Opacity

var(--higher-opacity)

Highest Opacity

var(--highest-opacity)
Font Sizes and Styles

Semantic Props provides various values for styling fonts.

Extra Large (9x)

var(--9x-large) The quick brown fox jumps over the lazy dog.

Extra Large (8x)

var(--8x-large) The quick brown fox jumps over the lazy dog.

Extra Large (7x)

var(--7x-large) The quick brown fox jumps over the lazy dog.

Extra Large (6x)

var(--6x-large) The quick brown fox jumps over the lazy dog.

Extra Large (5x)

var(--5x-large) The quick brown fox jumps over the lazy dog.

Extra Large (4x)

var(--4x-large) The quick brown fox jumps over the lazy dog.

Extra Large (3x)

var(--3x-large) The quick brown fox jumps over the lazy dog.

Extra Large (2x)

var(--2x-large) The quick brown fox jumps over the lazy dog.

Extra Large

var(--x-large) The quick brown fox jumps over the lazy dog.

Large

var(--large) The quick brown fox jumps over the lazy dog.

Medium

var(--medium) The quick brown fox jumps over the lazy dog.

Small

var(--small) The quick brown fox jumps over the lazy dog.

Extra Small

var(--x-small) The quick brown fox jumps over the lazy dog.

Larger

var(--larger) The quick brown fox jumps over the lazy dog.

Smaller

var(--smaller) The quick brown fox jumps over the lazy dog.

Body Family

var(--body-family)

Display Family

var(--display-family)

Monospace Family

var(--mono-family)

Accent Family

var(--accent-family)

THIN WEIGHT

var(--thin-weight)

LIGHT WEIGHT

var(--light-weight)

REGULAR WEIGHT

var(--regular-weight)

BOLD WEIGHT

var(--bold-weight)

HEAVY WEIGHT

var(--heavy-weight)

TIGHTEST LETTER SPACING

var(--tightest-letter)

TIGHTER LETTER SPACING

var(--tighter-letter)

TIGHT LETTER SPACING

var(--tight-letter)

NORMAL LETTER SPACING

var(--normal-letter)

WIDE LETTER SPACING

var(--wide-letter)

WIDER LETTER SPACING

var(--wider-letter)

WIDEST LETTER SPACING

var(--widest-letter)

SHORTEST LINE HEIGHT

var(--shortest-line)

SHORTER LINE HEIGHT

var(--shorter-line)

SHORT LINE HEIGHT

var(--short-line)

NORMAL LINE HEIGHT

var(--normal-line)

TALL LINE HEIGHT

var(--tall-line)

TALLER LINE HEIGHT

var(--taller-line)

TALLEST LINE HEIGHT

var(--tallest-line)

TIGHTEST WORD SPACING

var(--tightest-word)

TIGHTER WORD SPACING

var(--tighter-word)

TIGHT WORD SPACING

var(--tight-word)

NORMAL WORD SPACING

var(--normal-word)

WIDE WORD SPACING

var(--wide-word)

WIDER WORD SPACING

var(--wider-word)

WIDEST WORD SPACING

var(--widest-word)
Aspect Ratios

Semantic Props provides CSS aspect-ratio values for various types of media.

Square Ratio var(--square-ratio)
Landscape Ratio var(--landscape-ratio)
Portrait Ratio var(--portrait-ratio)
Video Ratio var(--video-ratio)
Wide Ratio var(--wide-ratio)
Display Safe-Areas

Semantic Props provides CSS values for irregular display safe-areas. Learn More.
The following demo modifies the values for presentation purposes.

Safe Area Top

var(--safe-top)

Safe Area Right

var(--safe-right)

Safe Area Bottom

var(--safe-bottom)

Safe Area Left

var(--safe-left)

Safe Area

var(--safe)

Safe Area X-Axis

var(--safe-x)

Safe Area Y-Axis

var(--safe-y)

Safe Area Header

var(--safe-header)

Safe Area Body

var(--safe-body)

Safe Area Footer

var(--safe-footer)
Shadow Effects

Semantic Props provides CSS text-shadow, box-shadow and filter shadow effects.

Lightest Text Shadow var(--lightest-text-shadow)Lighter Text Shadow var(--lighter-text-shadow)Light Text Shadow var(--light-text-shadow)Medium Text Shadow var(--medium-text-shadow)Heavy Text Shadow var(--heavy-text-shadow)Heavier Text Shadow var(--heavier-text-shadow)Heaviest Text Shadow var(--heaviest-text-shadow)
Lightest Box Shadow var(--lightest-box-shadow)Lighter Box Shadow var(--lighter-box-shadow)Light Box Shadow var(--light-box-shadow)Medium Box Shadow var(--medium-box-shadow)Heavy Box Shadow var(--heavy-box-shadow)Heavier Box Shadow var(--heavier-box-shadow)Heaviest Box Shadow var(--heaviest-box-shadow)
Lightest Inset Shadow var(--lightest-inset-shadow)Lighter Inset Shadow var(--lighter-inset-shadow)Light Inset Shadow var(--light-inset-shadow)Medium Inset Shadow var(--medium-inset-shadow)Heavy Inset Shadow var(--heavy-inset-shadow)Heavier Inset Shadow var(--heavier-inset-shadow)Heaviest Inset Shadow var(--heaviest-inset-shadow)
Lightest Shadow var(--lightest-shadow)Lighter Shadow var(--lighter-shadow)Light Shadow var(--light-shadow)Medium Shadow var(--medium-shadow)Heavy Shadow var(--heavy-shadow)Heavier Shadow var(--heavier-shadow)Heaviest Shadow var(--heaviest-shadow)
Containers and Spacing Sizes

Semantic Props provides containers alongside sizes.

Extra Small (4x) var(--4x-small)
Extra Small (3x) var(--3x-small)
Extra Small (2x) var(--2x-small)
Extra Small var(--x-small)
Small var(--small)
Medium var(--medium)
Large var(--large)
Extra Large var(--x-large)
Extra Large (2x) var(--2x-large)
Extra Large (3x) var(--3x-large)
Extra Large (4x) var(--4x-large)
Extra Large (5x) var(--5x-large)
Extra Large (6x) var(--6x-large)
Extra Large (7x) var(--7x-large)
Extra Large (8x) var(--8x-large)
Extra Large (9x) var(--9x-large)
Smaller var(--smaller)
Larger var(--larger)
Margin Size var(--margin-size)
Smallest Container var(--smallest-container)
Smaller Container var(--smaller-container)
Small Container var(--small-container)
Medium Container var(--medium-container)
Large Container var(--large-container)
Larger Container var(--larger-container)
Largest Container var(--largest-container)
Animation Timing and Easing

Semantic Props provides CSS animation values for timing and easing.

Ease var(--ease)
Ease-In var(--ease-in)
Ease-Out var(--ease-out)
Ease-In-Out var(--ease-in-out)
Fastest Time var(--fastest-time)
Faster Time var(--faster-time)
Fast Time var(--fast-time)
Normal Time var(--normal-time)
Slow Time var(--slow-time)
Slower Time var(--slower-time)
Slowest Time var(--slowest-time)
Transform Effects

Semantic Props provides CSS transform values for scale.

Smallest Scale-X var(--smallest-scale-x)
Smaller Scale-X var(--smaller-scale-x)
Small Scale-X var(--small-scale-x)
Large Scale-X var(--large-scale-x)
Larger Scale-X var(--larger-scale-x)
Largest Scale-X var(--largest-scale-x)
Smallest Scale-Y var(--smallest-scale-y)
Smaller Scale-Y var(--smaller-scale-y)
Small Scale-Y var(--small-scale-y)
Large Scale-Y var(--large-scale-y)
Larger Scale-Y var(--larger-scale-y)
Largest Scale-Y var(--largest-scale-y)
Smallest Scale var(--smallest-scale)
Smaller Scale var(--smaller-scale)
Small Scale var(--small-scale)
Large Scale var(--large-scale)
Larger Scale var(--larger-scale)
Largest Scale var(--largest-scale)
Z-Index Positions

Semantic Props provides CSS z-index values for positioning.

Z-Bottom var(--z-bottom)Z-Relative var(--z-relative)Z-Absolute var(--z-absolute)Z-Sticky var(--z-sticky)Z-Fixed var(--z-fixed)Z-Top var(--z-top)