Typography

SKY UX supports a set of semantically defined classes for text to ensure consistent usage and to maintain visual hierarchy of type. Components generally incorporate text classes as necessary but you may find cases where you need to apply classes directly.

The SKY UX font system is based on the Blackbaud Sans typeface.

Styling values are for reference only. You should apply styling through the use of the classes.

Typographic styles

Page heading

Usage
This class formats text that identifies a page, such as a page title or record name. Use this class on one element per page.
Code
<h1 class="bb-page-heading">Page heading</h1>
Styling
Blackbaud Sans Condensed Light 34px #282b31

Section heading

Usage
This class formats text that identifies subdivisions on a page, such as tile titles.
Code
<h2 class="bb-section-heading">Section heading</h2>
Styling
Blackbaud Sans Condensed Light 26px #282b31
Subsection heading
Usage
This class formats text that identifies subsections within containers. For example, in a tile for contact information, this class can format section heading for addresses, email addresses, and phone numbers.
Code
<div class="bb-subsection-heading">Subsection heading</div>
Styling
Blackbaud Sans Light 19px #686c73
Headline
Usage
This class formats text that calls out key information on a page, such as a constituent’s total giving or the number of records in a list. Use it sparingly or you will dilute its ability to draw attention.
Code
<div class="bb-headline">Headline</div>
Styling
Blackbaud Sans Condensed Semibold 22px #282b31
Emphasized body copy
Usage
This class formats text to call out key information that is slightly less important than headline text, such as constituent names in a list of contact cards. Use it sparingly or you will dilute its ability to draw attention.
Code
<div class="bb-emphasized">Emphasized body copy</div>
Styling
Blackbaud Sans Bold 16px #282b31
Regular body copy
Usage
This is the base body font and does not require a separate class. It formats text that does not semantically fall under any of the defined types.
Code
This is used when no other class is specified.
Styling
Blackbaud Sans 15px #282b31
De-emphasized body copy
Usage
This class formats text to de-emphasize information that you generally want users to skip over, such as placeholder text.
Code
<div class="bb-deemphasized">De-emphasized body copy</div>
Styling
Blackbaud Sans Italic 15px #686c73
Field label
Usage
This class formats labels for read-only fields that do not accept input. It uses a muted color because the label that identifies the field is less important than the content.
Code
<div class="bb-field-label">Field label</div>
Styling
Blackbaud Sans 15px #686c73
Success
Usage
This class prepends a green checkmark icon to provide a compact way to indicate a "success" status.
Code
<div class="text-success">Field label</div>
Styling
::before fa-check #71bf43
Warning
Usage
This class prepends a yellow warning icon to provide a compact way to indicate a "warning" status.
Code
<div class="text-warning">Field label</div>
Styling
::before fa-warning #fbb034
Danger
Usage
This class prepends a red warning icon to provide a compact way to indicate a "danger" status.
Code
<div class="text-danger">Field label</div>
Styling
::before fa-warning #ef4044