Studios and architecture: construction orange, zero rounding, wide grotesque.
Concreto
Space Grotesk · radius 0px · text 15px
Colors
Typography
Page title
Section subtitle
Reading text, descriptions and captions. The body of every screen uses this size.
- Headings
- Space Grotesk · 700
- Body
- Space Grotesk · 400
Corners
sm0px
md0px
lg0px
xl0px
2xl0px
Base 0px on rounded-xl; the rest follow from it.
shadow-sm
shadow-md
shadow-lg
Spacing · unit 4px
- 14px
- 28px
- 312px
- 416px
- 624px
- 832px
- 1248px
- 1664px
Type scale · base 15px × 1.25
- 4xlCoffee46/56px
- 3xlCoffee37/44px
- 2xlCoffee29/34px
- xlCoffee23/32px
- lgCoffee and bread19/26px
- baseCoffee and bread15/22px
- smCoffee and bread12/18px
- xsCoffee and bread11/16px
Controls
h-8 = 32px
h-10 = 40px
h-12 = 48px
Buttons, inputs and selects share the same three heights.
Components
DraftPaidPendingNewOverdue
+1
Volume
Storage
Dashboard
Weekly revenue
$27,120
+18.4% vs. last week
Orders
359
+9.1% vs. last week
Average order
$75.50
+4.2% vs. last week
Use the left and right arrow keys to read each point, or the View table button.
Orders
Store openCoupon
Works on the site and on the payment link.
Low stock
Serra do Caparaó coffee, 250 g, has 3 bags left.
Payment declined
The customer's bank did not respond on order #4126.
ShippedPending
Measured contrast: all 34 pairs pass WCAG, in light and dark.