Flat by default
No shadows, no gradients, no borders. Depth comes from color alone.
Design system for admin tools, SaaS and apps
Calm software, built faster.
Petal is a flat, Apple-like design system with 1,200+ components and ready pages, in light and dark, made for products people use all day.
No bordersNo shadowsLight and darkMobile first
Overview
Sample data
Revenue
Last 30 daysThis week
0 of 4 done1,200+Component variants
21Ready pages
2Themes, equal
0Borders
0Shadows
AAContrast target
Works withHTML + CSSWeb Components · soonReact · soonCSS variables
Theming
Re-skin everything in one click.
Every Petal component reads from tokens. Change the theme, accent, density or radius and the real components next to the controls follow.
Theme
Accent
Density
Radius
| Project | Owner | Budget |
|---|---|---|
| Website refresh | Maya | €12,400 |
| Mobile app | Jon | €38,900 |
| Billing rework | Ana | €9,150 |
| Onboarding | Lee | €6,720 |
SignupsSample
Project created
Components
Not screenshots. The real thing.
Every card below is a working Petal component. Drag, type, hover, and press ⌘K or Ctrl K anywhere on the page.
Templates
21 pages, ready to ship.
Each page is assembled from the same components you just used. Open one to see it larger. All content is sample data.
Principles
Four rules. No exceptions.
Color blocks, not borders
Every surface is one step lighter or darker than the one it sits on.
Dark is not an afterthought
Both themes are designed together, tested together and shipped together.
Mobile is the first screen
A bottom tab bar replaces the sidebar, and tables scroll inside their own card.
Developers
Tokens are plain CSS variables.
Markup stays readable and every value lives in one place. Copy it, ship it, re-skin it with one line. Framework packages are in development.
Accessibility and quality
Only what we have tested.
This page is built from Petal, and the items marked Verified were checked on this page. The rest is work in progress and labelled as such.
Verified on this pageIn progress
Pricing
Pick a plan. Ship this month.
Placeholder prices, set in one place in the page script. Final licensing is still being decided.
Yearly saves 20%Placeholder prices
Make your next product feel calm.
Start with the tokens, copy a template, and keep what you like.