JUMPSTART SC Style Guide

Jumpstart SC tokens, typography, links, and button states on light and dark surfaces.

Colors

JS Yellow --js-yellow-primary #fdb835
JS Yellow Alt --js-yellow-alt #f3c745
JS Navy --js-navy #0f2346
JS Black --js-black #07121c
JS Cream --js-cream #fef6e3
JS Blue --js-blue #88aac6
Ink 03% --ink-3 3% overlay
Ink 12% --ink-12 12% overlay
Ink 24% --ink-24 24% overlay
Ink 30% --ink-30 30% overlay
Blue 20% --js-blue-20 20% tint
Blue 40% --js-blue-40 40% tint
Blue 60% --js-blue-60 60% tint
Blue 80% --js-blue-80 80% tint

Typography

.h0
Jumpstart display
.h1 / h1
Jumpstart headline 1
.h2 / h2
Jumpstart headline 2
.h3 / h3
Jumpstart headline 3
.h4 / h4
Jumpstart headline 4
.h5 / h5
Jumpstart headline 5
.h6 / h6
Jumpstart headline 6
.paragraph-lg

Body large: lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.paragraph-lg-bold

Body large bold: lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.paragraph-sm

Body small: lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.paragraph-sm-italic

Body small italic: lorem ipsum dolor sit amet.

.paragraph-sm-bold

Body small bold: lorem ipsum dolor sit amet.

.category

Category Label

.category-sm

Category Small

.disclaimer

Disclaimer: small legal or helper text on light background.

Buttons

Filled (.btn.btn--lg.btn--filled)
Button Medium Small
Outline (.btn.btn--lg.btn--outline)
Button Medium Small
Text (.btn.btn--lg.btn--text)
Button Medium Small
On dark (.btn--on-dark)
Filled Outline Text

Forms