Tokens
The default Tamagui token scale and sizing structure
These are the default @tamagui/config tokens that power this site. Your app
can define its own scale and naming system.
Understanding the size scale
Most design systems use pure exponential scaling (2, 4, 8, 16). Tamagui instead uses a hybrid scale: gradual increments from 1 to 10 for fine control across common UI controls, followed by exponential steps from 11 to 16 for large display elements. This gives components a practical range of sizes where small differences matter most.
Shared scale keys
Token groups (size, space, radius) and font groups share the same 1 through 16 keys. A size 2 Button naturally aligns with size 2 padding, a size 2 icon, and size 2 text.
Sub-unit scale (0.25, 0.5, 0.75)
While the primary scale starts at 1, Tamagui includes three fractional tokens below 1 for fine adjustments, borders, and sub-pixel alignment.
Primary scale (1-10)
Sizes 1 through 10 increase gradually for controls and containers. Size 2 suits compact UI elements, size 4 is the standard default size, sizes 5 and 6 provide emphasized controls, and sizes 7 and above serve larger call-to-action blocks.
Display scale (11-16)
Sizes 11 through 16 switch to exponential spacing for hero sections and display banners.