REMs

REMs (Root EMs) are relative units in CSS that scale based on the root font size. They make designs responsive and scalable.

We are converting measurements to rems for web implementation. In Figma, we continue to use pixels because Figma only supports pixel units. Conversion rate: 1 rem = 16px.

Sizing Methods

• Fixed sizing: A static width or height, used when exact dimensions are required.

• Fill sizing: Expands to fill the available space in a container.

• Hug sizing: Adjusts automatically to fit the content inside.

• Min height & width: Ensures elements don't shrink below a certain size.

• Max height & width: Limits how large an element can grow.

• Examples: We are moving away from fixed sizing in favor of combining padding with min and max constraints to support responsiveness.

• Button Example: Use a min-height with flexible padding.

  
  

  

  
  

• Form Field Example: Use max-width with padding to adapt to screen size.

  
  

  

  
  

• Menu Example: Use a percentage width with min and max constraints to ensure responsive behavior.

  
  

  

Working with Spacing Tokens in Figma

• All components and templates should come with spacing tokens applied.

• Designers should apply tokens for custom layouts or components.

• Tokens aren’t required everywhere; niche values without corresponding tokens can remain un-tokenized.

• Tokens should be used semantically; don’t pick a token just because it matches a size. Token values may change, and using them correctly ensures design consistency.

• Engineers can inspect spacing tokens in dev mode.

• The visual design team will review token usage during VD reviews and FnF reviews starting Kronos.

• Figma FnF mode can highlight areas where tokens are not applied.

General Tokens

General tokens represent basic spacing units reused throughout the design system.

Gap

Used for padding, margins, and gaps.

Border Radius

Defines the roundness of corners for UI elements.

Goal & Ideal State

Proportional Scaling: Our long-term objective is to establish a system where component corner radii scale proportionally based on element size and container depth.

• Current Limitations: The existing design language is constrained by a uniform 4px maximum, which limits visual variety and hierarchical depth.

• Token Implementation: To prepare for a more flexible and scalable architecture, we are introducing a new set of design tokens across all components.

• Transitional State: During this phase, several tokens will resolve to 4px. This "flat" mapping is a temporary measure to facilitate a seamless global update once the final proportional values are defined.

Thickness

Used for stroke widths, bars, and rectangular objects.

Semantic Tokens

Semantic tokens provide spacing based on usage context rather than exact numeric values.

Height

Width

Square

Container Line Heights

Note: These are not actual line heights, but container heights for elements adjacent to text, such as icons or buttons, that need to align with the text.