Indigo Design System v1.2.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/OUTCOME < 767px 768px to 1199px 1200px + FONT NAME/WEIGHT/COLOR
heading-level-1()
Level 1
 38px/44px 44px/50px 56px/64px 'Source Sans Pro', sans-serif/
300/#006FF4
heading-level-2()
Level 2
 30px/36px 32px/38px 40px/42px 'Source Sans Pro', sans-serif/
600/#616161
heading-level-3()
Level 3
 24px/32px 28px/34px 32px/38px 'Source Sans Pro', sans-serif/
400/#404040
heading-level-4()
Level 4
 18px/24px 22px/30px 24px/32px 'Source Sans Pro', sans-serif/
600/#404040
heading-level-5()
Level 5
 16px/22px 18px/24px 20px/24px 'Source Sans Pro', sans-serif/
600/#404040
heading-level-6()
Level 6
 16px/22px 18px/24px 18px/24px 'Source Sans Pro', sans-serif/
400/#404040
paragraph()
Body Text
 16px/22px 18px/24px 18px/28px 'Source Sans Pro', sans-serif/
300/#404040
link()
Link Text 		color: #006FF4
fill: #006FF4
text decoration: none

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-xs 38px
$indi-font-size-heading-level-1-s 44px
$indi-font-size-heading-level-1-l 56px
$indi-font-size-heading-level-2-xs 30px
$indi-font-size-heading-level-2-s 32px
$indi-font-size-heading-level-2-l 40px
$indi-font-size-heading-level-3-xs 24px
$indi-font-size-heading-level-3-s 28px
$indi-font-size-heading-level-3-l 32px
$indi-font-size-heading-level-4-xs 18px
$indi-font-size-heading-level-4-s 22px
$indi-font-size-heading-level-4-l 24px
$indi-font-size-heading-level-5-xs 16px
$indi-font-size-heading-level-5-s 18px
$indi-font-size-heading-level-5-l 20px
$indi-font-size-heading-level-6-xs 16px
$indi-font-size-heading-level-6-l 18px
$indi-font-size-form-input 18px

Web Fonts

To use this font family in your website or app:

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