Design
The library we build interfaces from. Pick a theme and every example on the page changes with it.
The patterns come from the 21st.dev community and from Originkit. We redrew each one on our tokens, and each links to its original. Atlas and the sample copy are made up.
Hero
The first screen: a headline, one sentence and a button.
Pricing
Plans with a billing switch, a featured plan and a comparison table.
Menus
A navbar, a mega menu, a dropdown and a menubar. They all work: click or hover.
Cards and numbers
Bento grids, product features and counters that start when they come into view.
Testimonials and FAQ
A testimonial carousel, a wall of quotes and two accordions.
Forms
Sign in, sign up and a newsletter. Nothing is sent from the preview.
Footers
The end of the page: link columns, contact and the brand name.
From our CRM
The pieces we keep in the CRM library: tokens, buttons, animations and icons.
Tokens
Colours, fonts and spacing as tokens. Change one value and the whole app follows.
--primary: #F81300;Components
Buttons, forms, tables and switches. Designed once, used on every screen.
Motion
Movement where something happens: loading, saving, moving between screens.
Icons
One set in one style, as SVG. Hover over them and they draw themselves again.
Want a system like this?
If you have a brand book, we build on it. If not, we make one with you from scratch, included in the price.
Book a call