Indigo Design System v1.0.0

Typography

Typography maximizes legibility and communicates concepts clearly, enabling users to digest content and take action. It is the foundation for tone, voice, and content.

Overview

You can use this library to find the typography you need and determine when and how to use them. It is designed to ensure consistency across all USAC products.

Font

Source Sans Pro

Use the Source Sans Pro font family for web properties and applications.

This sans-serif typeface is versatile, forward-looking, legible, and friendly. This typeface is also open-source. Using a free typeface aligns with USAC’s mission to provide connectivity and access for everyone. Plus, Google Fonts provides this typeface, so it is easy to download and use.

NAME WEIGHT SPECIMEN
300 light
Lorem ipsum dolor set amet consiquir lorem ipsum dolor set amet.
400 regular
Lorem ipsum dolor set amet consiquir lorem ipsum dolor set amet.
600 semibold
Lorem ipsum dolor set amet consiquir lorem ipsum dolor set amet.

Tokens

Use these tokens for font families as a reference and for variable use.

VARIABLE NAME VALUE
$indi-font-family-sans-serif 'Source Sans Pro', sans-serif
$indi-font-weight-light 300
$indi-font-weight-normal 400
$indi-font-weight-bold 600

Hierarchy

Use this as a baseline of headings for creating effective hierarchy within your layouts.

These mixins omit vertical spacing that can disrupt display within tight component designs. To add vertical spacing between headings, text, and other elements, apply Space concepts such as Stacking as exhibited by the Long Form Text component.

MIXIN INCLUDES OUTCOME
heading-level-1() color: #006FF4
font-family: 'Source Sans Pro', sans-serif
font-size: 56px
font-weight: 300
line-height: 64px
Level 1
heading-level-2() color: #616161
font-family: 'Source Sans Pro', sans-serif
font-size: 40px
font-weight: 600
line-height: 42px
Level 2
heading-level-3() color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 32px
font-weight: 400
line-height: 38px
Level 3
heading-level-4() color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 24px
font-weight: 600
line-height: 32px
Level 4
heading-level-5() color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 20px
font-weight: 400
line-height: 24px
Level 5
heading-level-6() color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 400
line-height: 24px
Level 6
paragraph() color: #404040
font-family: 'Source Sans Pro', sans-serif
font-size: 18px
font-weight: 300
line-height: 28px
Body Text
link() color: #006FF4
fill: #006FF4
text decoration: none
Link Text

Sizes

Use size tokens in your style to align with Indigo’s sizing of most commonly used textual elements. In the absence of a token, discuss the use of font.size.default versus font.size.small for most elements in your interface with your team.

VARIABLE NAME VALUE
$indi-font-size-default 16px
$indi-font-size-xs 12px
$indi-font-size-s 14px
$indi-font-size-m 16px
$indi-font-size-l 18px
$indi-font-size-xl 24px
$indi-font-size-heading-level-1 56px
$indi-font-size-heading-level-2 40px
$indi-font-size-heading-level-3 32px
$indi-font-size-heading-level-4 24px
$indi-font-size-heading-level-5 20px
$indi-font-size-heading-level-6 18px
$indi-font-size-form-input 18px
$indi-font-size-form-label 20px

Web Fonts

To use this font family in your website or app:

  • Include the Google Web Font <link> below in your document’s <head>.
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">