Typography

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Admin UI uses typeface VTEX Trust. It has been designed to meet VTEX's needs and reflect our design principles.

Example	Token
Text in tables, modals, toasts, alerts, cards; Text in form fields and controls; Placeholder text in form fields.	$bodyfontVariationSettings: var(--admin-ui-text-body-fontVariationSettings)fontSize: var(--admin-ui-text-body-fontSize)lineHeight: var(--admin-ui-text-body-lineHeight)letterSpacing: var(--admin-ui-text-body-letterSpacing)
Tab title; Table line title; Card title; Modal title. Totalizer percentage.	$title1fontVariationSettings: var(--admin-ui-text-title1-fontVariationSettings)fontSize: var(--admin-ui-text-title1-fontSize)lineHeight: var(--admin-ui-text-title1-lineHeight)letterSpacing: var(--admin-ui-text-title1-letterSpacing)
Nested card title.	$title2fontVariationSettings: var(--admin-ui-text-title2-fontVariationSettings)fontSize: var(--admin-ui-text-title2-fontSize)lineHeight: var(--admin-ui-text-title2-lineHeight)letterSpacing: var(--admin-ui-text-title2-letterSpacing)
Text in tag, tooltip and table pagination; Form error and help text. Labels in form field placeholders and select inline.	$detailfontVariationSettings: var(--admin-ui-text-detail-fontVariationSettings)fontSize: var(--admin-ui-text-detail-fontSize)lineHeight: var(--admin-ui-text-detail-lineHeight)letterSpacing: var(--admin-ui-text-detail-letterSpacing)
Totalizer value.	$displayfontVariationSettings: var(--admin-ui-text-display-fontVariationSettings)fontSize: var(--admin-ui-text-display-fontSize)lineHeight: var(--admin-ui-text-display-lineHeight)letterSpacing: var(--admin-ui-text-display-letterSpacing)
Text in regular and small buttons; Account name in top bar.	$action1fontVariationSettings: var(--admin-ui-text-action1-fontVariationSettings)fontSize: var(--admin-ui-text-action1-fontSize)lineHeight: var(--admin-ui-text-action1-lineHeight)letterSpacing: var(--admin-ui-text-action1-letterSpacing)
Text in left nav and action menu items; Links.	$action2fontVariationSettings: var(--admin-ui-text-action2-fontVariationSettings)fontSize: var(--admin-ui-text-action2-fontSize)lineHeight: var(--admin-ui-text-action2-lineHeight)letterSpacing: var(--admin-ui-text-action2-letterSpacing)
Page header title	$pageTitlefontVariationSettings: var(--admin-ui-text-pageTitle-fontVariationSettings)fontSize: var(--admin-ui-text-pageTitle-fontSize)lineHeight: var(--admin-ui-text-pageTitle-lineHeight)letterSpacing: var(--admin-ui-text-pageTitle-letterSpacing)

Sans-serif font stack

fontfamily: 'VTEX Trust', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;

Mono font stack

fontfamily: 'MonoLisa', 'Operator Mono', 'Fira Code Retina', 'Fira Code',
  'FiraCode-Retina', 'Dank Mono', 'Consolas', 'Monaco', 'Menlo', monospace;

React components

Components	Description
Heading	h1 to h6 HTML headings
List	ul, ol & li HTML tags
Paragraph	<p /> HTML tag
Text	<span> or a specific text element, like <i>, <kbd>, <strong>, etc