v2.0 Alpha NEW

Write CSS like you
think in Figma

A Figma-first CSS framework that bridges design and code. Built-in design system, intuitive syntax, and seamless integration.

Quick Install

npm install adorable-css

Why Choose AdorableCSS?

Built for modern design workflows with Figma-first approach

Figma Mental Model

Auto Layout, constraints, and layer positioning - just like in Figma

Design System Built-in

Professional design tokens, semantic colors, and consistent spacing out of the box

Amazing DX

IntelliSense support, tiny bundle size, and zero runtime overhead

Write Less, Design More

See how AdorableCSS simplifies your workflow with intuitive, Figma-like syntax

Traditional CSS

17 lines, 268 characters

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: linear-gradient(
    135deg, 
    #8b5cf6 0%, 
    #ec4899 100%
  );
  box-shadow: 0 10px 15px -3px 
    rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.card:hover {
  transform: scale(1.05);
}

AdorableCSS

10 lines, 145 characters

<div class="
  vbox(center) 
  gap(16) 
  p(24) 
  r(lg) 
  bg(135deg/purple-500..pink-500)
  shadow(lg) 
  hover:scale(1.05) 
  transition
">
  <!-- Your content -->
</div>

Write CSS like you think in Figma