• Docs
Exe.Eyes
Command Palette
Search for a command to run...
Getting started
  • Introduction
  • Core philosophy
  • Installation
  • Page structure
  • Code architecture
Tokens
  • Overview
  • Primitive tokens
  • Semantic tokens
Typography
  • Type scale
  • Text style variable mode
  • Conventional vs. unconventional
Classes
  • Naming convention
  • Spacing classes
  • Layout classes
  • Typography classes
Starter kits
  • Overview
Classes

Typography classes

Typography utilities control size, weight, alignment, transform, and color. Size classes pull from the text-size semantic collection, so line height and letter spacing are applied automatically. For font family and style, use the variable mode dropdown to switch between base and secondary modes.

Size

classproperty
u-text-xs font-size: text-xs
u-text-sm font-size: text-sm
u-text-base font-size: text-base
u-text-md font-size: text-md
u-text-lg font-size: text-lg
u-text-xl font-size: text-xl
u-text-2xl font-size: text-2xl
u-text-3xl font-size: text-3xl
u-text-4xl font-size: text-4xl
u-text-5xl font-size: text-5xl
u-text-6xl font-size: text-6xl

Each size class pulls from the text-size semantic collection, so line height and letter spacing are applied automatically.

Weight

classproperty
u-font-light font-weight: light
u-font-regular font-weight: regular
u-font-medium font-weight: medium
u-font-semibold font-weight: semibold
u-font-bold font-weight: bold

Alignment

classproperty
u-text-align-left text-align: left
u-text-align-center text-align: center
u-text-align-right text-align: right

Transform & Style

classproperty
u-text-transform-uppercase text-transform: uppercase
u-text-transform-capitalize text-transform: capitalize
u-text-transform-italicize font-style: italic

Colors

classproperty
u-text-color-brand Sets text color to the primary brand color
u-text-color-faded Sets text color to the faded text semantic token
u-text-color-inherit Inherits text color from the parent element
Layout classes
Overview