Skip to content
Grails

Typography

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

The section is a reference for the whole team: designers, developers and product managers can look up which text styles exist, what their values are, and which design tokens they are linked to.

The section at a glance

The section has two zones:

  • The left panel: an index of the styles by group (for example Heading, Body, Caption or Display), with a search field and a Status filter above it. Picking a group scrolls the main area to it. See Table and cards and Groups and the left panel.
  • The main area: the page head, with the name Typography and the number of text styles the project has, and under it the list of styles, grouped. The list opens as a table.

The head’s count is the total for the project. It does not change when you search or filter; the left panel shows the same total beside its name.

The Typography section: the left panel with its search and the Status filter, and the table of text styles with their font, size and line height

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

Pages in this section

  • Design: the list, its two views, its columns, and how token links appear in it.
  • Text style panel: the properties of one style, and the tokens bound to them.
  • Editing: how text styles change today, and what is planned.

Roles and 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 open linked tokens.

Nobody edits text styles from Grails today. Changes are made in Figma and synced again. See Editing.

The Design / Code switch in the head shows, on Code, the text styles your repository uploaded with grails-cli sync, with where each value comes from. It answers at once when you tap it. See Typography · Code.