Skip to content
Elevate
Beta Still taking shape. Tell us what breaks.

CSS that speaks your design language.

Elevate compiles utility classes straight from your design tokens, and stops the build the moment something is off-system.

Get startedOpen the playgroundView on GitHub
Card.astro

Tokens synced Every class follows your system.
Review

Tokens

Write what you mean.

Every class names a token from your design system. Elevate looks up the value and writes exactly that CSS. Change the token, and every class that uses it follows.

How tokens work
1.5rem
pd:d6

padding: 1.5rem;

#5560F5
bg-color:indigo

background-color: #5560F5;

Card title
font:h5

font-size: 1.375rem;

bd:width-px

border-width: 1px;

Layout

A whole layout, in one class.

Direction and alignment in a single class, on axes you can see. Try any part of it.

::

, and .

Click any part of the class to change it.

 
 
   
 
 
 
Structure
 
Everything else stays in your HTML.
 
The things that usually send you back to a stylesheet have a place in the class list.
 
 
  env:card 
Envelopes
 
Name a list of classes once, reuse it anywhere, and reopen it with env:card:open to edit.
   ctx:card 
Context scopes
 
Draw a boundary and end it with ctx:end:card. Styles inside can't leak out.
   @child 
Relational selectors
 
Style children, descendants, siblings or the parent from inside a scope.
   @hover:[…] 
Grouped states
 
Change several things on hover, focus or any other state, in one group.
  
 
 
 
 
AI
 
Wrong never ships quietly.
 
A mistyped utility class usually does nothing, and nobody notices. A wrong Elevate class stops the build and names the fix, so an AI assistant can check its own work.
 Using Elevate with AI 
 
 
     
  1.  1 
     
    Give your assistant the reference
     
     elevate-docs.pages.dev/llms.txt  
     
     
    2.  
  2.  2 
     
    It writes Elevate
     
    <nav class="row:x-between:y-center pd:4">
     
     
    3.  
  3.  ! 
     
    The build stops on the one class that's off-system
     
    Spacing Value Required: "pd" takes spacing tokens, and "4" isn't one
in src/components/Nav.astro on line 8
     
     
    4.  
  4.  ✓ 
     
    It fixes exactly that, and the build passes
     
    pd:4 → pd:d4   Compiled
     
     
    5.  
 
   
 
 
 
Output
 
Ship only what you use.
 
Nothing is prebuilt. Elevate watches your files and compiles CSS for the classes you actually write, mobile-first, with errors that point to the exact file and line.
 
npm install elevate-framework
npx elevate-framework prepare
npm run elevate
 
 Read the guide Open the playground 
 
 
 
“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