Typography

Clean, legible typography optimized for data-dense enterprise interfaces.

Font Stack

font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Inter is the primary typeface — designed for screen readability with open apertures and tall x-height.

Type Scale

Token	Size	Weight	Use
`xxl`	24px	600	Page titles
`xl`	20px	600	Section headings
`lg`	16px	500	Subheadings, emphasis
`base`	14px	400	Body text (default)
`sm`	12px	400	Captions, labels, metadata

Usage

import { typography } from '@gtcx/tokens';
 
const styles = {
  fontFamily: typography.fontFamily,
  fontSize: typography.fontSize.base,   // 14px
  lineHeight: typography.lineHeight.normal, // 1.5
};

Heading Hierarchy

H1: 24px / 600 — Page title (one per page)
H2: 20px / 600 — Section heading
H3: 16px / 500 — Subsection heading
H4: 14px / 600 — Group label

Guidelines

Base font size is 14px — optimized for data-dense screens
Use 600 weight for headings, 400 for body text
Line height: 1.5 for body text, 1.25 for headings
Maximum line length: 75 characters for readability
Use semantic color tokens for text color, not hardcoded values

Colors Spacing