Skip to main content

Scales [wip]

Color Scales​

Blend​

Blend scale defines levels of opacity used to create depth and emphasis in the interface by blending elements with their backgrounds.

Typography Scales​

Font Families​

Font family tokens define the available typefaces used throughout the system.

Guidelines:​

  • Limit font families to 1–3 maximum to avoid visual inconsistency.
  • Use for example “Inter” for body and UI text to maintain clarity and neutrality.
  • Use monospace only when alignment or character distinction is required.
  • Font family selection should occur at the semantic layer, not in components.

Font Size Scale​

Use linear scale for font sizes to ensure predictability, accessibility, and ease of implementation.

Principles:​

  • Increment: +4 units
  • Minimum recommended size: 12 units
  • No arbitrary or fractional values

Guidelines:​

  • Always reference sizes via tokens.
  • Semantic styles may map multiple roles to the same size token.

Line Height Scale​

Line height tokens define vertical rhythm and readability. Values are expressed as absolute tokens, not ratios, to ensure consistent rendering across platforms.

Principles:​

  • Body Text: Aim for a line height of 1.4 to 1.6 times the font size (for example: 16 units font with 24 units line height) for comfortable extended reading.
  • Headings & Titles: Use a tighter ratio, around 1.2 to 1.35 times the font size, as they are shorter and need to appear more cohesive and impactful.

Guidelines:​

  • Line height should always be explicitly defined for text styles.
  • Avoid auto-calculated or browser-default line heights.
  • Font Size: Larger fonts need relatively tighter leading, smaller fonts need more space.
  • Line Length: Longer lines of text require more line height to maintain readability.
  • Line heights are often set to values divisible by 4 to align with a baseline grid.

Letter Spacing Scale​

Typography letter spacing involves adjusting space between letters to improve readability, with rules like looser spacing for small text and tighter for large headlines. These adjustments are guided by visual consistency and W3C standards (0.12x font size min) for accessibility.

Principles:​

  • Default value is 0
  • Values are stored unitless numbers
  • This system does not apply to every font family with the same rules

Guidelines:​

  • Use sparingly, most body text should use letter-spacing-0.
  • Excessive tracking reduces readability.
  • Adjustments should be intentional and consistent across the system.

Font Weight Scale​

Font weight tokens define typographic emphasis and hierarchy using a numeric scale.

Principles:​

  • Prefer fewer weights to maintain visual consistency.
  • Avoid using weight alone to convey state (disabled, error, etc.).
  • Semantic tokens should define when and why weight changes.

Font Style Scale​

Each font face may have an italic counterpart.