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

“Use large spacing here.” Six months later, “large” is 20px.

Elevate locks CSS to your design system so meaning never drifts.



Write What You Mean

pd:d6 compiles to your exact spacing token. bg-color:indigo outputs your actual brand color. font:h3 maps to your typography scale.

No guessing. No approximations. When the design system changes, your CSS updates automatically.



/* In your design system */
spacing: { d6: "1.5rem" }
colors: { indigo: "#5865EF" }


/* In your code */
pd:d6 bg-color:indigo


/* Compiles to exactly */
.pd\:d6 {
  padding: 1.5rem;
}
.bg-color\:indigo {
  background-color: #5865EF;
}



Layout In One Class

Elevate adds layout affordances: single-class primitives that encode common layout intent.

Contain, Stack, Cluster, Split, Center, and Grid-Auto let you build real layouts without wrapper spam.



<section class="contain">
  <div class="stack:gap-d6">
    <div class="cluster:gap-d3 just-between">
      <h2 class="text:white">Affordances</h2>
      <button class="bg-color:indigo text:white pd-x:d3 pd-y:d2">Action</button>
    </div>
    <div class="split:ratio-2-1:gap-d6 /lg/ split:ratio-3-1">
      <div class="bg-color:indigo-2 pd:d4">Main</div>
      <div class="bg-color:indigo-1 pd:d4">Side</div>
    </div>
    <div class="grid-auto:min-c10:gap-d4">
      <div class="bg-color:indigo-2 pd:d4">Card</div>
      <div class="bg-color:indigo-2 pd:d4">Card</div>
      <div class="bg-color:indigo-2 pd:d4">Card</div>
    </div>
  </div>
</section>



Envelopes: Meta-Classes Without CSS Files

Collapse any utility list into a named class and reopen it later when you need to edit. You get reusable, bespoke classes without leaving your HTML.



<div class="env:card pd-x:d4 bg-color:indigo text:white shadow:soft">
  Card
</div>


<!-- On save -->
<div class="env:card"></div>


<!-- Reopen to edit -->
<div class="env:card:open"></div>



Build-time Validation Protects Your Vision

Type pd:d99 when only pd:d6 exists? Build fails with exact file location. Use a color token that doesn’t exist? The compiler catches it before users see it. Your design system becomes enforceable, not just aspirational.



Error: Invalid Prefixed Value: Unable to determine spacing value "d99"
   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)



States Without The Mess

Grouped state changes keep interactions coherent: @hover:[bg-color:indigo text:white] ties related changes together.



<div class="pd-x:d6 pd-y:d3 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?</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. Mobile-first by default.



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:d99 instead of pd:d6 and your build fails immediately. Typos become compiler errors.

Design System Driven

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

Consistency, Enforced

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

Layout

Contain, Stack, Cluster, Split, Center, and Grid-Auto turn layout intent into single classes.

Envelopes

Collapse full utility lists into reusable classes you can reopen and edit anytime.



For Teams Who Ship Consistently

Your design system defines spacing and color, but the code still drifts into guesses, hex codes, and magic numbers. Elevate bridges that gap so the system becomes the CSS vocabulary itself.

Your designers work in systems. Your developers should too.





“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.