Education and government: type made for easy reading, large targets.
Escola
Atkinson Hyperlegible · radius 10px · text 17px
Colors
Typography
Page title
Section subtitle
Reading text, descriptions and captions. The body of every screen uses this size.
- Headings
- Atkinson Hyperlegible · 700
- Body
- Atkinson Hyperlegible · 400
Corners
sm3px
md5px
lg7px
xl10px
2xl13px
Base 10px on rounded-xl; the rest follow from it.
shadow-sm
shadow-md
shadow-lg
Spacing · unit 4.5px
- 14.5px
- 29px
- 313.5px
- 418px
- 627px
- 836px
- 1254px
- 1672px
Type scale · base 17px × 1.2
- 4xlCoffee42/50px
- 3xlCoffee35/42px
- 2xlCoffee29/34px
- xlCoffee24/32px
- lgCoffee20/28px
- baseCoffee and bread17/26px
- smCoffee and bread14/22px
- xsCoffee and bread12/18px
Controls
h-8 = 36px
h-10 = 45px
h-12 = 54px
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.