Skip to content
Utility First, Design Driven

Elevate CSS

CSS That Speaks Your Design Language
Learn More View On Github

The System Knows the Way

Designer: “Use large spacing here.”

You: “Is that pd:4, pd:6, or pd:8?”

Checks three components. Finds three different answers.

Six months later “large” is now 20px instead of 24px.

Searches 47 files. Changes 23 classes. Still shipped inconsistent spacing.

What if your CSS just knew what “large” meant to your design system?



Write What You Mean

pd:large compiles to your design system’s exact definition of large padding. bg:primary outputs your brand’s actual primary color. text:heading uses your typography scale, not a guess. When your design system changes, your CSS changes with it. Automatically.



/* In your design system */
spacing: { lg: "2rem" }
colors: { primary: "#3b82f6" }


/* In your code */
pd:lg bg:primary


/* Compiles to exactly */
.pd\:lg {
  padding: 2rem;
}
.bg\:primary {
  background-color: #3b82f6;
}


Design Tokens Define CSS Classes

Your designer updates large from 24px to 20px in the design system. Every pd:large across every component updates instantly. Zero file hunting. Zero missed updates. Zero drift between design and code. The source of truth stays singular.



<div class ="pd-x:large pd-y:small row:x-center:y-center">
  <h1 class ="font:sans:h5 mg-t:small /md/ font:h3 /lg/ font:h1">Your Design System In CSS</h1>
</div>


Build-time Validation Protects Your Vision

Type pd:xlarge when only pd:large exists? Build fails with exact file location. Use a color token that doesn’t exist? Compiler catches it before users see it. Try spacing values outside your design system? They don’t compile. Your design system becomes enforceable, not just aspirational.



❌ Invalid Prefixed Value: Unable to determine spacing value "xlarge"
   in src/components/Button.tsx on line 23


💡 Troubleshooting Tips:
   1. Examine your prefixed value and ensure it matches the expected token type.
   2. If this is a custom modifier, ensure that you are using the correct syntax.


For more information, refer to [https://elevate-docs.pages.dev](https://elevate-docs.pages.dev)



Syntax Built For Real Convenience

Grouped state changes: @hover:[bg:darker_text:white] keeps related hover effects together instead of scattered across class lists. Smart responsive design: /tablet/ w:large /desktop/ w:full adapts when you change breakpoint pixel values. Directional shortcuts: pd:large for all sides, pd-x:large for horizontal padding, pd-y:large for vertical padding.



<div class ="w:mobile /md/ w:tablet /xl/ w:full">
  <h1 class ="text:white:center">I'm Spatially Aware</h1>
</div>


States Without The Mess

Contextual styling that groups related properties together instead of scattering them across your class list like hover:bg-blue-600 hover:text-white hover:scale-105. No more hunting through dozens of classes to find which hover states belong to which element, or wondering if you forgot to add a focus state that matches your hover state. Everything that changes together stays together, making interactive components predictable and maintainable.



<div class ="pd-x:large pd-y:small row:x-center:y-center">
  <div class ="w:full bg-color:green @hover:[bg-color:red_font:semibold_text:white]"><p>What Happens On Hover, Again?</p></div>
</div>


Simple Setup, Powerful Results

Install package. Configure design tokens. Write utilities. Built-in file watching, automatic compilation, and detailed error messages with line numbers. No webpack configuration. No build script modifications. No plugin dependencies. And it’s mobile first.



Generated on Demand

Zero pre-built utilities. CSS gets compiled from your design tokens exactly when you write it. Ship what you use - 100kb new in the box.

Build-Time Validation

Type pd:xlarge instead of pd:xl and your build fails immediately. Typos become compiler errors.

Consistency, Enforced

Your utilities compile from design tokens. No approximations, no drift, no guessing which blue to use.

Design System Driven

Your tokens define your utilities. Change your design system and every component updates automatically.



For Teams Who Ship Consistently

Your design system defines spacing tokens but developers still guess at values. Your brand guidelines specify colors but CSS files contain hex codes and approximations. Your design team works in systematic scales while your code accumulates magic numbers. Elevate CSS bridges the gap and your design system becomes the heart of your CSS vocabulary.





“When I am working on a problem, I never think about beauty. But when I have finished, if the solution is not beautiful?”

”… I know it is wrong.”

R. Buckminster Fuller



Join The Adventure.

Let’s Build Something Great, Together.