Flint Design System
Workbench

Foundations

Typography

14 type styles, all Open Sans. Use a style, never a hand-set size.

Type styles

StyleSampleSize, weight, line heightUse for
display
--type-display-*		 Trail ready at dawn 48px / 700 / 1.2 Marketing heroes only
displayXl
--type-display-xl-*		 Trail ready at dawn 56px / 800 / 1.08 Marketing heroes only
headingH1
--type-heading-h1-*		 Trail ready at dawn 36px / 700 / 1.2 One per page, the page title
headingH2
--type-heading-h2-*		 Trail ready at dawn 24px / 700 / 1.3 Section titles
headingH3
--type-heading-h3-*		 Trail ready at dawn 18px / 700 / 1.4 Card and panel titles
bodyLg
--type-body-lg-*		 Trail ready at dawn 18px / 400 / 1.6 Lead paragraphs
bodyMd
--type-body-md-*		 Trail ready at dawn 16px / 400 / 1.5 Running text
bodySm
--type-body-sm-*		 Trail ready at dawn 14px / 400 / 1.5 App default for dense UI
labelButton
--type-label-button-*		 Trail ready at dawn 14px / 700 / 1 Buttons
labelDefault
--type-label-default-*		 Trail ready at dawn 14px / 600 / 1.4 Field labels and nav items
labelCaption
--type-label-caption-*		 Trail ready at dawn 12px / 600 / 1.3 Captions and metadata
labelKicker
--type-label-kicker-*		 Trail ready at dawn 12px / 700 / 1.2 Section eyebrows, sparingly
labelFinePrint
--type-label-fine-print-*		 Trail ready at dawn 12px / 700 / 1.2 Legal and fine print
labelHelper
--type-label-helper-*		 Trail ready at dawn 12px / 400 / 1.4 Helper text under fields

Rules

  • Nothing below 12px.
  • Headings follow document order: h1, then h2, then h3. Never pick a heading level for its size.
  • Keep running text under about 80 characters a line.
  • On iOS, .flintText(_:) scales every style with Dynamic Type.

In CSS

Every style is available as four variables: size, weight, line height and tracking.

CSS 
.card-title {
  font-family: var(--font-sans);
  font-size: var(--type-heading-h3-size);
  font-weight: var(--type-heading-h3-weight);
  line-height: var(--type-heading-h3-line-height);
  letter-spacing: var(--type-heading-h3-tracking);
}