Colours
primary-default#8F0A33
secondary-default#4C6494
neutral-white#FFFFFF
neutral-black#101010
neutral-gray-light#F5F5F5
neutral-gray#999999
neutral-gray-dark#404040
neutral-border#D5D5D5
Typography - h1 to h6 at 900px viewport (drag the width slider)
Heading one
Heading two
Heading three
Heading four
Heading five
Heading six
Body copy at step 0 - the quick brown fox jumps over the lazy dog while the five boxing wizards jump quickly.
Small print at step -2.
Spacing - fluid scale at 900px viewport
Links
Standard linkUnderlined linkMuted link
Chip / tagPRO
Design DraftFilter
Keyboard key
Press ⌘ K to search
Spacer
.my-spacer (m) - also xs…3xlCard
Card title
Body copy inside a card, using your muted neutral.
Learn moreProse / articlePRO
Writing with your system
Everything inside .prose is spaced on your fluid scale.
Design systems should disappear into the writing.
HeroPRO
Everything your brand needs
One system, generated from your tokens.
Table
| Token | Purpose |
|---|
| --my-colour-primary | Brand colour |
| --my-step-0 | Fluid body size |
StatsPRO
Downloads31k
New users4,200
Uptime99.9%
List groupPRO
DashboardOrders 12Settings
AccordionPRO
What do I get?
A full SCSS architecture, yours forever.
Is it really mine?
Chat bubblesPRO
Hi! How can we help?
My design system doesn’t match my brand…
RatingPRO
4.0 · 128 reviews
CarouselPRO
Slide one
Slide two
Slide three
Slide four
Empty state
🗂No projects yetCreate your first project and it will show up here.
BreadcrumbPRO
Home/Library/Data
DropdownPRO
ProfileSettingsSign out
StepsPRO
CartShippingPaymentConfirm
ModalPRO
Toggled with the .is-open class.
DrawerPRO
DrawerSlides in from the edge - toggle with .is-open
PopoverPRO
Fluid scales Type and spacing interpolate between your sizes.
ToastPRO
Saved successfully ✓Alerts
Info Something useful to know.
Success It worked.
Error Something went wrong.
Announcement bannerPRO
Launch offer: Pro is 40% off this week.Get it →
Status dot
Operational Degraded Live
ProgressPRO