Skip to main content
The Orbital Shadcn UI Kit includes a fully structured typographic system that reflects the same scale logic and hierarchy used in Tailwind CSS and Shadcn UI. All text elements — from headlines to captions — are connected to variable-driven tokens for font families, sizes, weights, and line heights. This ensures that every adjustment, whether stylistic or functional, updates globally across the entire design system.

​
How Typography Works

Typography is entirely controlled through the Typography variable collection. Each text component (headings, paragraphs, and labels) references these tokens, ensuring scalability and consistency across the entire interface. You can modify any font variable through the Orbital Variable Editor, and the system will automatically apply your changes to every component — mirroring how Tailwind typography utilities work in code.

​
Variable Structure

The collection is divided into four core categories: These variables are shared across all text components — from large displays to microcopy — ensuring that typography remains consistent even when themes, layouts, or brand settings change.

​
Tailwind Alignment

The font scales mirror Tailwind CSS’s typographic system, meaning designers and developers speak the same visual language. For instance:
  • text-base in Figma = text-base in Tailwind
  • text-4xl in Figma = text-4xl in Tailwind
This one-to-one relationship eliminates the need for translation between design and front-end development, keeping teams aligned and efficient.

​
Tips & Best Practices

  • 🔠 Define your preferred font families at the start — this will cascade through all text components.
  • 🧮 Keep consistent type hierarchy: 2–3 heading levels are usually enough for most UIs.
  • 🌓 Test typography in both Light and Dark modes to verify legibility and color contrast.
  • 🧷 Avoid detaching text styles; always use properties or variables to maintain scalability.
Tip: Typography in Orbital Shadcn UI Kit is not static — it’s a living system. Every change you make through variables reflects in real time, ensuring the same design logic developers apply with Tailwind.

​
Next Up

Continue to the Light/Dark Mode page → Learn how variable modes control theme transitions and UI behavior across different environments.