Internal · CAL-9 Design System v1
One stop reference for every primitive and shell that ships with v1. Test at 360px, 768px, and 1024px viewport widths. Everything here is built on the locked tokens — anything new starts by extending them, not forking the file.
Color
teal
#155e63
teal-light
#1a747a
teal-dark
#0f474b
sage
#76b39d
sage-light
#8fc4ae
sage-pale
#e8f4f0
bg
#f7f9f8
surface
#ffffff
text
#1a1a1a
muted
#555555
border
#e3e8e6
Type scale
Radius + elevation
Card with teal-tinted shadow at sm elevation.
Cards group related content. Use the lowest elevation that still reads as a unit.
Card with teal-tinted shadow at md elevation.
Cards group related content. Use the lowest elevation that still reads as a unit.
Card with teal-tinted shadow at lg elevation.
Cards group related content. Use the lowest elevation that still reads as a unit.
End-to-end preview using the CalculatorShell, NumericInput (with unit toggle), and ResultCard. Drives the whole page chrome with the same tokens calculator pages will use.
Total brew water in your kettle.
Typical pour-over lives between 15 and 17.
Coffee dose
31.3 g
for 500 g of water at 1 : 16
Find your dose for any brew size, in grams or ounces.
Total brew water in your kettle.
Typical pour-over lives between 15 and 17.
Coffee dose
31.3 g
for 500 g of water at 1 : 16
Preview slot
Drop ResultCard here
Last updated
This shell is what every calculator page renders inside. Mobile-first single column under 768px; inputs and result split at md+.