Num Values

🔢 Number Values

Number variables are used to define numeric values across layout, spacing, typography, and component structure. They are a core part of the Universal Design System (UDS) because they bring consistency, scalability, and responsiveness to how we size and space elements across products.

Number variables accept whole numbers or decimals (e.g., 16, 0, -8, 12.5) and are used anywhere a numeric input is required in Figma.

---

🎯 Why Use Number Variables

Using number variables allows us to:

• Standardize spacing and typography across all components

• Enable responsive behavior and scaling logic

• Apply consistent layout rules to reduce design debt

• Easily update values across many components from one place

By working with number variables instead of hardcoded values, teams maintain system integrity and reduce redundant overrides.

---

🔗 Common Use Cases

Use Case	Description
Padding & Gaps	Consistent internal spacing for layout components
Border Radius	Defines border rounding for buttons, cards, inputs, etc.
Border Width	Defines width of a border
Font Size	Part of our typographic scale for readable UI
Line Height / Letter Spacing	Enhances text legibility and rhythm
Layout Grids	Guides consistent column-based layouts
Min/Max Width & Height	Sets fluid constraints for responsive behavior

---

📦 Where We Use Number Variables in UDS

• padding-*: defines internal spacing for buttons, pills, containers, etc.

• gap-*: controls spacing between items in groups or stacked elements

• border-radius-*: determines the rounding of interactive or decorative elements

• min-width, max-width: applies to layout primitives like modals and containers

---

🧠 Tips & Best Practices

• Always use system-defined number variables rather than manual values

• Variables are grouped in collections like spacing, radius, layout, and type-scale to keep things organized

• Avoid using decimal values unless necessary — stick to whole increments from your spacing or type scale for consistency

• Min/max constraints should only be used when the design calls for fluid layout behavior

---

🧮 Example Values

*to be updated*

Token	Value	Use
gap-sm	8	Small spacing between stacked elements
padding-md	16	Standard internal padding for buttons
radius-lg	24	Large pill-style rounding
font-size-200	14	Base font size for body text
line-height-200	20	Vertical rhythm alignment

---

🛠 Applied To

• Auto layout padding, gap, margin

• Frame constraints

• Typography styles (when paired with font-size and line-height)

• Borders and radius values

• Layout grids and column structures

• Shadow offsets and blur spreads

---

🧩 Why It Matters

Number variables bring mathematical clarity to your system. They make the design predictable, maintainable, and dev-aligned — creating a seamless experience between design and implementation.

Use number values to scale your system with math, not mess.