Typography

The Typography section consolidates all text styles that have been synced from Figma. A text style is a reusable text configuration that defines attributes like font family, size, weight, line height, and letter spacing — the fundamental building blocks of your brand’s visual hierarchy.

This section serves as a centralized reference for the entire team — designers, developers, and product managers — to look up exactly which typographic styles exist in the system, what their values are, and which design tokens they are linked to.

Overview

The Typography interface is divided into two main zones:

• Left Sidebar: A navigable index that groups text styles by category (e.g., Heading, Body, Caption, Display). Clicking a group automatically scrolls the main area to that category.
• Main Content Area: Full list of text styles organized by group. Each style shows a text preview with its properties applied.
• Toolbar: At the top, includes a search field to filter styles by name and a counter showing how many styles are currently displayed.

Note

If no styles have been synced yet, the section will show an empty state with instructions for syncing from the Figma plugin.

Text Style Catalog

Information shown

Styles are organized into groups based on their categorization path in Figma (e.g., Heading/H1, Body/Regular, Caption/Small). Each style in the list shows:

• Preview: A sample text rendered with that style applied — you’ll see the text using the actual font, size, and weight of the style.
• Style name: The full name of the text style, including its group path.
• Properties: Key style values visible at a glance (font family, size in pixels, weight).

Search and Filtering

The search bar at the top filters styles in real time as you type. The filter applies to the style name. Clearing the search text (using the X button on the right of the field) restores the full view.

Text Style Detail Panel

Clicking any style in the list opens the Detail Panel from the right side. This panel shows all properties of the selected style with technical precision.

Style Properties

The panel details the exact values of each typographic attribute:

• Font Family: The font being used (e.g., Inter, Roboto, Playfair Display).
• Font Size: The text size in pixels (e.g., 16px, 24px, 48px).
• Font Weight: The thickness variant of the font (e.g., Regular 400, Medium 500, Bold 700).
• Line Height: The vertical space between lines of text. Can be a fixed pixel value or a relative percentage.
• Letter Spacing: Additional horizontal space between characters (tracking). In percentage or em units.
• Text Case: Whether the text has a transformation applied (e.g., UPPERCASE, lowercase, Capitalize). If no transformation is set, this field is not shown.

Design Token References

If any property of the text style is linked to a design variable (token), the panel will clearly indicate it. For example, if the font size is linked to the token Typography/Size/Body, you’ll see the token name alongside the value.

You can click the name of a referenced token to open an additional stacked panel with all the details of that token: its type, its values in each mode (Light/Dark, etc.), and its alias chain if applicable.

Available Actions

Action	Roles	Description
Search styles	All	Typing in the search bar filters styles by name in real time.
Navigate by group	All	Clicking a group in the sidebar scrolls the main area to that category.
View style detail	All	Clicking a style opens the Detail Panel with all its typographic properties.
Explore linked token	All	Clicking a referenced token within the panel opens a stacked panel with that token’s details.

Role Permissions

• Admin: Can explore all styles and their details.
• Editor: Same exploration access as Admin.
• Viewer: Full read-only access. Can explore all styles, view their properties, and navigate to linked tokens.

Note

Text styles are managed in Figma and synced to Grails. They cannot be manually edited from the platform — any changes must be made in the Figma file and then re-synced.