Brand book · 04
UI kit
The parts every Dwellir page is built from: buttons, cards, fields and sheets. A short tour, then the full design system.
Built from parts, not paint
Every page is assembled from the same parts. A part brings its look; a page picks a variant and arranges parts with layout. These are a few of them, live.
Actions
One primary action per screen. The rest step down.
Copy fields
Anything a reader copies, in the mono face, with one click.
Rune icons in icon chips
Grain
Every standalone card on the ground or the alt sheet: the card colour under a still film grain.
Sky with the aurora
The one call to action among glass panes.
Plain
Cards inside cards, and dense content: tables, forms, lists.
The full design system
The design system page shows every part in every variant, with the rules for when to use it. Its groups:
- Foundations
- Surfaces
- Actions
- Forms
- Copy fields
- Navigation
- Overlays
- Data
- App data
- Feedback
- Blocks
- Aurora canvas
- Page hero
- Rune icons
- Chain icons
Build new UI with components/ui and components/brand. Give a part layout classes only, pick its look with its variants, and run npm run lint:ds.
Start free.1 response = 1 credit.
100,000 responses a day at 20 per second, on 150+ networks. Upgrade when you need more.