CSS that respects the platform—not run from it.
Semantic Props
Expertly crafted CSS Custom Properties (variables) for creating consistent components in any design.

css — Import At-Rule

@import "https://cdn.jsdelivr.net/npm/semantic-props@2.1.0";

shell — NPM Install Command

npm install semantic-props
Style Queries

This feature is unsupported on your browser.

Semantic Props provides customizable theme alongside select viewport style() queries. Learn More.

Theme style query values are for demonstration purposes only. Initial value is none.

Viewport style query values are boolean true or false. Initial value is false.

Our Website
Home About Us Contact Us Our Blog
Border Style and Radius

Semantic Props provides CSS border values for style and radius.

Line (Border Style) var(--line)
Small Radius var(--small-radius)Medium Radius var(--medium-radius)Large Radius var(--large-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 100
var(--accent-100)
Accent 200
var(--accent-200)
Accent 300
var(--accent-300)
Accent 400
var(--accent-400)
Accent 500
var(--accent-500)
Accent 600
var(--accent-600)
Accent 700
var(--accent-700)
Accent 800
var(--accent-800)
Accent 900
var(--accent-900)
Blue 100
var(--blue-100)
Blue 200
var(--blue-200)
Blue 300
var(--blue-300)
Blue 400
var(--blue-400)
Blue 500
var(--blue-500)
Blue 600
var(--blue-600)
Blue 700
var(--blue-700)
Blue 800
var(--blue-800)
Blue 900
var(--blue-900)
Brown 100
var(--brown-100)
Brown 200
var(--brown-200)
Brown 300
var(--brown-300)
Brown 400
var(--brown-400)
Brown 500
var(--brown-500)
Brown 600
var(--brown-600)
Brown 700
var(--brown-700)
Brown 800
var(--brown-800)
Brown 900
var(--brown-900)
Coral 100
var(--coral-100)
Coral 200
var(--coral-200)
Coral 300
var(--coral-300)
Coral 400
var(--coral-400)
Coral 500
var(--coral-500)
Coral 600
var(--coral-600)
Coral 700
var(--coral-700)
Coral 800
var(--coral-800)
Coral 900
var(--coral-900)
Cyan 100
var(--cyan-100)
Cyan 200
var(--cyan-200)
Cyan 300
var(--cyan-300)
Cyan 400
var(--cyan-400)
Cyan 500
var(--cyan-500)
Cyan 600
var(--cyan-600)
Cyan 700
var(--cyan-700)
Cyan 800
var(--cyan-800)
Cyan 900
var(--cyan-900)
Gray 100
var(--gray-100)
Gray 200
var(--gray-200)
Gray 300
var(--gray-300)
Gray 400
var(--gray-400)
Gray 500
var(--gray-500)
Gray 600
var(--gray-600)
Gray 700
var(--gray-700)
Gray 800
var(--gray-800)
Gray 900
var(--gray-900)
Green 100
var(--green-100)
Green 200
var(--green-200)
Green 300
var(--green-300)
Green 400
var(--green-400)
Green 500
var(--green-500)
Green 600
var(--green-600)
Green 700
var(--green-700)
Green 800
var(--green-800)
Green 900
var(--green-900)
Indigo 100
var(--indigo-100)
Indigo 200
var(--indigo-200)
Indigo 300
var(--indigo-300)
Indigo 400
var(--indigo-400)
Indigo 500
var(--indigo-500)
Indigo 600
var(--indigo-600)
Indigo 700
var(--indigo-700)
Indigo 800
var(--indigo-800)
Indigo 900
var(--indigo-900)
Lime 100
var(--lime-100)
Lime 200
var(--lime-200)
Lime 300
var(--lime-300)
Lime 400
var(--lime-400)
Lime 500
var(--lime-500)
Lime 600
var(--lime-600)
Lime 700
var(--lime-700)
Lime 800
var(--lime-800)
Lime 900
var(--lime-900)
Magenta 100
var(--magenta-100)
Magenta 200
var(--magenta-200)
Magenta 300
var(--magenta-300)
Magenta 400
var(--magenta-400)
Magenta 500
var(--magenta-500)
Magenta 600
var(--magenta-600)
Magenta 700
var(--magenta-700)
Magenta 800
var(--magenta-800)
Magenta 900
var(--magenta-900)
Orange 100
var(--orange-100)
Orange 200
var(--orange-200)
Orange 300
var(--orange-300)
Orange 400
var(--orange-400)
Orange 500
var(--orange-500)
Orange 600
var(--orange-600)
Orange 700
var(--orange-700)
Orange 800
var(--orange-800)
Orange 900
var(--orange-900)
Pink 100
var(--pink-100)
Pink 200
var(--pink-200)
Pink 300
var(--pink-300)
Pink 400
var(--pink-400)
Pink 500
var(--pink-500)
Pink 600
var(--pink-600)
Pink 700
var(--pink-700)
Pink 800
var(--pink-800)
Pink 900
var(--pink-900)
Red 100
var(--red-100)
Red 200
var(--red-200)
Red 300
var(--red-300)
Red 400
var(--red-400)
Red 500
var(--red-500)
Red 600
var(--red-600)
Red 700
var(--red-700)
Red 800
var(--red-800)
Red 900
var(--red-900)
Violet 100
var(--violet-100)
Violet 200
var(--violet-200)
Violet 300
var(--violet-300)
Violet 400
var(--violet-400)
Violet 500
var(--violet-500)
Violet 600
var(--violet-600)
Violet 700
var(--violet-700)
Violet 800
var(--violet-800)
Violet 900
var(--violet-900)
Yellow 100
var(--yellow-100)
Yellow 200
var(--yellow-200)
Yellow 300
var(--yellow-300)
Yellow 400
var(--yellow-400)
Yellow 500
var(--yellow-500)
Yellow 600
var(--yellow-600)
Yellow 700
var(--yellow-700)
Yellow 800
var(--yellow-800)
Yellow 900
var(--yellow-900)
Filter and Opacity Effects

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

Light Blur

var(--light-blur)

Medium Blur

var(--medium-blur)

Heavy Blur

var(--heavy-blur)

Low Brightness

var(--low-brightness)

High Brightness

var(--high-brightness)

Low Contrast

var(--low-contrast)

High Contrast

var(--high-contrast)

Weak Grayscale

var(--weak-grayscale)

Medium Grayscale

var(--medium-grayscale)

Strong Grayscale

var(--strong-grayscale)

Low Hue-Rotate

var(--low-hue-rotate)

High Hue-Rotate

var(--high-hue-rotate)

Weak Invert

var(--weak-invert)

Medium Invert

var(--medium-invert)

Strong Invert

var(--strong-invert)

Low Opacity

var(--low-opacity)

Medium Opacity

var(--medium-opacity)

High Opacity

var(--high-opacity)

Low Saturation

var(--low-saturation)

High Saturation

var(--high-saturation)

Weak Sepia

var(--weak-sepia)

Medium Sepia

var(--medium-sepia)

Strong Sepia

var(--strong-sepia)
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)

TIGHT LETTER SPACING

var(--tight-letter)

NORMAL LETTER SPACING

var(--normal-letter)

WIDE LETTER SPACING

var(--wide-letter)

SHORT LINE HEIGHT

var(--short-line)

NORMAL LINE HEIGHT

var(--normal-line)

TALL LINE HEIGHT

var(--tall-line)

TIGHT WORD SPACING

var(--tight-word)

NORMAL WORD SPACING

var(--normal-word)

WIDE WORD SPACING

var(--wide-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.

Light Text Shadow var(--light-text-shadow)Medium Text Shadow var(--medium-text-shadow)Heavy Text Shadow var(--heavy-text-shadow)
Light Box Shadow var(--light-box-shadow)Medium Box Shadow var(--medium-box-shadow)Heavy Box Shadow var(--heavy-box-shadow)
Light Inset Shadow var(--light-inset-shadow)Medium Inset Shadow var(--medium-inset-shadow)Heavy Inset Shadow var(--heavy-inset-shadow)
Light Shadow var(--light-shadow)Medium Shadow var(--medium-shadow)Heavy Shadow var(--heavy-shadow)
Containers and Spacing Sizes

Semantic Props provides containers alongside sizes.

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)
Extra Small (3x) Container var(--3x-small-container)
Extra Small (2x) Container var(--2x-small-container)
Extra Small Container var(--x-small-container)
Small Container var(--small-container)
Medium Container var(--medium-container)
Large Container var(--large-container)
Extra Large Container var(--x-large-container)
Extra Large (2x) Container var(--2x-large-container)
Extra Large (3x) Container var(--3x-large-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)
Fast Time var(--fast-time)
Normal Time var(--normal-time)
Slow Time var(--slow-time)
Transform Effects

Semantic Props provides CSS scale values.

Small Scale var(--small-scale)
Large Scale var(--large-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)