Typography

Typography

The Typography section allows you to create and customize font tokens for consistent text styling across your application.

Custom Fonts

You can add your own Custom Fonts by clicking the Add New button. Custom fonts can be used alongside the predefined library fonts to match your brand guidelines.

Library Fonts

The platform comes with a predefined set of Library Fonts that follow a standard type scale. Each font token includes:

• Token Name – The reference name used in your app (e.g., Heading Large, Body Default).

• Font Size – The size of the text in pixels.

• Font Weight – The thickness of the font (e.g., regular, medium, semiBold).

• Font Height – The line height (e.g., 1.15, 1.25).

• Font Family – The typeface used (default is Inter).

Editing Fonts

To edit a font token:

1. Click the edit icon (✏️) next to the font you want to change.

2. Adjust font size, weight, height, or family as needed.

3. Changes will be applied wherever that font token is used in your app.

Why Use Font Tokens?

Font tokens ensure:

• Consistency – All text elements follow a unified style.

• Easy Theme Updates – Changing a font token updates all components using it.

• Scalability – You can maintain a clear typography hierarchy without manually adjusting each element.