Sternum Design guide

Typography

Intro

This is 'Proxima Nova', our brand typeface for Sternum. Proxima Nova is available at Adobe Fonts.

Type Scale

We follow a 4px baseline grid for achieving a vertical rhythm on all block-level elements across the Sternum Suite.

Heading One

font-size: 42px (2.625rem)
line-height: 50px (1.19)

Heading Two

font-size: 33px (2.063rem)
line-height: 41px (1.242em)

Heading Three

font-size: 26px (1.625rem)
line-height: 39px (1.5em)

Heading Four

font-size: 20px (1.25rem)
line-height: 26 (1.3em)

Body Bold

font-size: 16px (1rem)
line-height: 24px (1.5em)

Body

font-size: 16px (1rem)
line-height: 24px (1.5em)
Meta
font-size: 13px (0.813rem)
line-height: 22px (1.692em)

Paragraphs

The default body text is 16px. For optimum reading length, the paragraph width is capped at 635px.

Examples

Main section title

Sub-section title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small meta-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Color

Brand

Paradise

#F7005E

Not legible

Not legible

Not legible

26px

16px

Paradise text

Cultured text

Pass

Charcoal text

Pass

Not legible

RichBlack text

Not legible

Not legible

Functional Colors

RichBlack

#08090A

Not legible

RichBlack text

Not legible

Not legible

Not legible

Not legible

26px

16px

Paradise text

Cultured text

Pass

Charcoal text

Pass

Not legible

Gunmetal

#222831

RichBlack text

Not legible

Not legible

Not legible

Not legible

26px

16px

Paradise text

Cultured text

Pass

Charcoal text

Pass

Not legible

Not legible

Charcoal

#393E46

Not legible

Not legible

Not legible

26px

16px

Paradise text

Cultured text

Pass

Charcoal text

Pass

Not legible

RichBlack text

Not legible

Not legible

Metal

#A7A2A9

Not legible

Not legible

Not legible

Pass

26px

16px

Paradise text

Cultured text

Not legible

Charcoal text

Pass

Not legible

RichBlack text

Not legible

Cultured

#F6F6F6

Pass

Pass

Pass

26px

16px

Paradise text

Cultured text

Not legible

Charcoal text

Not legible

Pass

RichBlack text

Pass

Pass

Brand Gradient

Brand-gradient

#F7005E-#FB1C29, 110°

Pass

Not legible

Not legible

Not legible

Not legible

26px

16px

Paradise text

Cultured text

Pass

Charcoal text

Pass

Not legible

RichBlack text

Form Elements

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Security
Careers
Sternum
Compliance
Customer
Contact
Infrastructure
Blog
ADS
EIV
Data
News
Demo
Industrial
Finance
Operations
Medical
Video
Partnership
Product
City
Webinar
Time
Third-party
Success
Resources
Scalable
OS
DevOps
Binary
Reliable
Central
Discovery
Forensics
Workflow
Advantage
Approach

All icons are in SVG format and can be downloaded for usage. In the future, all icons will be a part of the Sternum font for expanded functionality.

Helper Classes

We have a number of helper classes that allow us to quickly style elements without adding unnecessary bloat and complexity to our CSS. This also allows us to keep our CSS specificity low.

Spacing

For consistent spacing and to maintain awe use a level system for both margin and padding. Padding can be applied by using the classes padding--lv1 through padding--lv8, while margin uses the margin--lv1 through margin--lv8 scale. Use padding--lv0 or margin--lv0 to completely remove any margin or padding from the element.

Level 1: 6px

Level 2: 12px

Level 3: 18px

Level 4: 24px

Level 5: 30px

Level 6: 36px

Level 7: 42px

Level 8: 48px

Notes

To fine tune the padding and margin for an element, supplement the padding level with the following classes:

padding-top--lv0 or margin-top--lv0 for no space on top

padding-bottom--lv0 or margin-bottom--lv0 for no space on bottom

padding-top-bottom--lv0 or margin-top-bottom--lv0 for no space on top or bottom

padding-left--lv0 or margin-left--lv0 for no space on left

padding-right--lv0 or margin-right--lv0 for no space on right

padding-left-right--lv0 or margin-left-right--lv0 for no space on left or right

Below margin helpers:

margin-bottom--lv0 for a margin bottom of 0px

margin-bottom--lv1 for a margin bottom of 6px

margin-bottom--lv2 for a margin bottom of 12px

margin-bottom--lv3 for a margin bottom of 18px

margin-bottom--lv4 for a margin bottom of 24px

margin-bottom--lv5 for a margin bottom of 30px

margin-bottom--lv6 for a margin bottom of 36px

margin-bottom--lv7 for a margin bottom of 42px

margin-bottom--lv8 for a margin bottom of 48px

Typography

Class

Description

font-style--italic

Bring emphasis through italics

font-weight--light

Apply font-weight of 300

font-weight--bold

Apply font-weight of 600

text-align--left

Align text to the left

text-align--right

Align text to the right

text-align--center

Align text to the center

text-transform--uppercase

Transform all of the text to uppercase

text-transform--lowercase

Transform all of the text to lowercase

text-transform--capitalize

Capitalize the first letter of each word

full-width

By default, paragraphs have a max-width of 635px. To override, apply full-width to the <p> tag.

Display & Visibility

Class name

CSS

zin-lv1

z-index: 1

zin-lv2

z-index: 10

zin-lv3

z-index: 100

zin-lv4

z-index: 1000

zin-lv5

z-index: 10000

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.