01 — Describe
Start with your idea.
Decide who you are building for and what they need to do. Explore working examples yourself, or give your AI the guide and component manifest.
The design foundation for you and AI
Design with AI.
Build like a pro.
Turn your ideas into beautiful websites and apps. A flexible UI framework that gives you and your AI a head start.
Make it yours. Try a theme.
RoseGumAmberHoneyLimeMintJadeLagoonSkyIndigoAuroraInk
Good things in progress.
Projects3
In progress1
In review1
Last updatedOct 27, 2026
Activity
Last 7 daysRecent activity
- Updated brand direction2 hours ago
- Reviewed website refreshYesterday
- Created component library3 days ago
Projects
| Name | Status | Updated | Owner |
|---|---|---|---|
| Brand direction | In progress | Oct 27, 2026 | AJ |
| Website refresh | In review | Oct 26, 2026 | ML |
| Component library | Planning | Oct 24, 2026 | DK |
No matching projects. Try another name.
Changes are temporary3 projects
Real components. Go ahead, try them.See the Collection →
- CSS Utilities
- 600+
- Small classes. Plenty of possibilities.
- Icons
- 130+
- One consistent visual language.
- Components
- 60+
- Thoughtful controls, ready to make your own.
From idea to interface
Your creative direction.
A shared foundation.
Choose how you work. Compose an interface yourself, give AI a starting point, or switch between the two as your ideas take shape.
02 — Create
Build on good design.
Compose layouts, icons, and components with consistent spacing and clear hierarchy. Choose a theme and make it your own.
03 — Refine
Make every detail count.
Refine the code directly or work through changes with AI. Check mobile layouts, keyboard access, and light and dark states before you ship.
CSS utilities
A little markup.
A lot of possibility.
Make room for your own style. Flexible utilities bring your layout together, with the consistency of a shared design system.
Explore CSS utilities →Your workspace
Room for your next idea.
Make a little space. Make it your own.
<article class="panel stack p-lg gap-md items-start text-start">
<div><span class="badge">Your workspace</span></div>
<h3 class="m-0">Room for your next idea.</h3>
<p class="muted m-0 max-w-xs">Make a little space. Make it your own.</p>
</article>Components
Ready to use.
Yours to shape.
Build with polished forms, navigation, charts, and more. Shared styles and behaviors keep every interaction consistent while you make the design your own.
A clearer picture.
+18%Small wins add up.
A place for every status
In progressIn reviewReady to share
Little signals. A clearer picture.
Make it your view.
Make a little progress.
Your next projectFind your balance.
A little more room to focus.
Closer every day.
Your next release is taking shape.
Better together.
Make room for your team.
Less noise. More focus.
Choose what comes your way.
Good to know.
Everything is up to date
Your workspace is ready for whatever comes next.
Fits your workflow
Your stack.
One design language.
Start with native HTML or bring Layout UI to the framework you already use. Keep your application logic and a shared design foundation.
Explore tested integrations →U + AI = Layout UI
Your next idea. Beautifully built.
Bring your ideas to life with beautiful components and a foundation you can make your own. Build hands-on or alongside AI.