Tokens synced Every class follows your system.
Review 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.
Card.astro
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.
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-frameworknpx elevate-framework preparenpm run elevate“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