Typography

Typography plays a key role in shaping Tendoo’s visual hierarchy, readability, and brand identity. We use a clear and scalable type system built with design tokens to maintain consistency across interfaces and platforms.

Font Stack

The Tendoo Design System uses a system font stack to optimize performance, legibility, and platform compatibility.

--font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

You may customize this in your project settings if your brand includes a custom or licensed font.

Type Scale

We use a modular scale to define heading and body text sizes. Each level has an assigned token for easier use in both design and development.

Font Weights

Usage Guidelines

• Use text.base and font.regular as the default for most body content.
• Avoid too many font sizes or weights on a single screen.
• Stick to the scale for vertical rhythm and readability.
• Use semantic HTML tags (<h1>–<h6>, <p>, <label>) and apply styles via tokens or utility classes.

Example

<h1 className="text-4xl font-bold leading-tight">
  Welcome to Tendoo
</h1>

<p className="text-base font-regular leading-relaxed">
  Tendoo helps you build accessible, consistent interfaces faster with a shared design system.
</p>

Accessibility

• Maintain a minimum 1.5× line height for body text.
• Use sufficient contrast between text and background colors.
• Avoid using text size or weight alone to convey meaning.

Typography defines more than just size and weight — it builds rhythm, emotion, and clarity across every product interface. Stick to the system to create accessible, elegant, and readable designs.