Design Tokens
Complete visual reference of all CSS classes from design-tokens.css. Each card demonstrates the actual styling effect of the utility class.
Gradient Utilities
Vibrant Hero
.gradient-vibrantTrust Hero
.gradient-trustMinimal Hero
.gradient-minimalSunny Hero
.gradient-sunnyPattern Backgrounds
Enterprise Background
.bg-pattern-enterpriseVibrant Background
.bg-pattern-vibrantTrust Background
.bg-pattern-trustMinimal Background
.bg-pattern-minimalEditorial Background
.bg-pattern-editorialDark Background
.bg-pattern-darkText Patterns
Sample Text
Enterprise Text
.text-pattern-enterpriseSample Text
Vibrant Text
.text-pattern-vibrantSample Text
Trust Text
.text-pattern-trustSample Text
Minimal Text
.text-pattern-minimalSample Text
Editorial Text
.text-pattern-editorialSample Text
Dark Text
.text-pattern-darkBorder Patterns
Border Demo
Enterprise Border
.border-pattern-enterpriseBorder Demo
Vibrant Border
.border-pattern-vibrantBorder Demo
Trust Border
.border-pattern-trustBorder Demo
Minimal Border
.border-pattern-minimalBorder Demo
Editorial Border
.border-pattern-editorialBorder Demo
Dark Border
.border-pattern-darkButton Patterns
Enterprise CTA
.btn-cta-enterpriseVibrant CTA
.btn-cta-vibrantTrust CTA
.btn-cta-trustMinimal CTA
.btn-cta-minimalEditorial CTA
.btn-cta-editorialDark CTA
.btn-cta-darkTypography
Extra Large Heading
Heading XL
.text-heading-xlLarge Heading
Heading LG
.text-heading-lgMedium Heading
Heading MD
.text-heading-mdSmall Heading
Heading SM
.text-heading-smLarge body text for emphasis
Body Large
.text-body-lgStandard body text for content
Body Medium
.text-body-mdSmall body text for captions
Body Small
.text-body-smUtility Classes
Demo
Card Shadow
.shadow-cardDemo
Card Shadow Hover
.shadow-card-hoverDemo
Subtle Shadow
.shadow-subtleDemo
Card Radius
.rounded-cardButton Radius
.rounded-buttonDemo
Input Radius
.rounded-input