Font

Satoshi

Weight Used: Bold (700); Medium (500); Regular (400)

[Titles/headlines are in Bold (700)]

Lorem ipsum dolor sit amet

[Body text is usually in Medium (500); Bold (700) can be used for emphasis]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero. Duis nunc neque, suscipit hendrerit consequat at, maximus eu lorem. Aenean ultricies arcu mi, in mollis tellus scelerisque non. Sed non euismod turpis, eget tincidunt arcu. Donec scelerisque lacinia elit ac efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras ornare sem tortor, faucibus sodales magna luctus eu. Quisque ornare commodo arcu id placerat.

[Fine print is usually in Regular (400)]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Web Text Styles

e26-heading-style-h1

Desktop Headline h1

[size: 3.5rem/56px; line-height: 3.875rem/62px; weight: Bold(700)]

e26-heading-style-h2

Desktop Headline h2

[size: 2.75rem/44px; line-height: 3.125rem/50px; weight: Bold(700)]

e26-heading-style-h3

Desktop Headline h3

[size: 2.5rem/40px; line-height: 2.875rem/46px; weight: Bold(700)]

e26-heading-style-h4

Desktop Headline h4

[size: 2.25rem/36px; line-height: 2.75rem/44px; weight: Bold(700)]

e26-heading-style-h5

Desktop Headline h5

[size: 2rem/32px; line-height: 2.5rem/40px; weight: Bold(700)]

e26-heading-style-h6

Desktop Headline h6

[size: 0.75rem/28px; line-height: 2.25rem/36px; weight: Bold(700)]

e26-heading-style-h1

Mobile Headline h1

[size: 2.5rem/40px; line-height: 2.875rem/46px; weight: Bold(700)]

e26-heading-style-h2

Mobile Headline h2

[size: 2.25rem/36px; line-height: 2.625rem/42px; weight: Bold(700)]

e26-heading-style-h3

Mobile Headline h3

[size: 2rem/32px; line-height: 2.5rem/40px; weight: Bold(700)]

e26-heading-style-h4

Mobile Headline h4

[size: 1.75rem/28px; line-height: 2.25rem/36px; weight: Bold(700)]

e26-heading-style-h5

Mobile Headline h5

[size: 1.5rem/24px; line-height: 2rem/32px; weight: Bold(700)]

e26-heading-style-h6

Mobile Headline h6

[size: 1.25rem/20px; line-height: 1.75rem/28px; weight: Bold(700)]

Text Sizes

e26-text-size-xlarge

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

e26-text-size-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

e26-text-size-default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

e26-text-size-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

e26-text-size-fineprint

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas scelerisque lectus a lacus finibus, quis fringilla.

Text Weights

e26-text-weight-bold

text-weight-bold

e26-text-weight-medium

text-weight-medium

e26-text-weight-regular

text-weight-regular

Other HTML Tags

All Paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may

All Links

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All unordered lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Alignments

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Bold text

Emphasis

^Superscript

_Subscript

Colors

Background Colors

e26-bg-primary

#F9F9FA

[Primary background]

e26-bg-secondary

#F9F9FA

[Secondary background used for section breaks]

e26-bg-secondary

#FFFFFF

[Secondary background used for section breaks]

e26-bg-dark

#1D1D1F

[Primary background]

Text Colors

e26-text-dark

#1D1D1F

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Primary text color]

e26-text-dark-secondary

#1D1D1F @ 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Used frequently to create contrast against primary text color]

e26-text-dark-tertiary

#1D1D1F @ 50%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Used sparingly]

e26-divider-dark

#1D1D1F @ 20%

[Dividers on light backgrounds]

e26-text-light

#F5F5F7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Primary text color]

e26-text-light-secondary

#F5F5F7 @ 85%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Used frequently to create contrast against primary text color]

e26-text-light-tertiary

#F5F5F7 @ 70%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam diam, ultricies finibus varius et, sollicitudin sit amet neque. Mauris mauris turpis, cursus aliquam bibendum a, sollicitudin sit amet libero.

[Used sparingly]

e26-divider-light

#F5F5F7 @ 20%

[Dividers on light backgrounds]

Overlay Colors

[Used for cards, shadows, overlays, etc.]

e26-overlay-dark-10

#1D1D1F @ 10%

e26-overlay-dark-20

#1D1D1F @ 20%

e26-overlay-dark-30

#1D1D1F @ 30%

e26-overlay-dark-40

#1D1D1F @ 40%

e26-overlay-dark-50

#1D1D1F @ 50%

e26-overlay-dark-60

#1D1D1F @ 60%

e26-overlay-dark-70

#1D1D1F @ 70%

e26-overlay-dark-80

#1D1D1F @ 80%

e26-overlay-dark-90

#1D1D1F @ 90%

e26-overlay-light-10

#F5F5F7 @ 10%

e26-overlay-light-20

#1D1D1F @ 20%

e26-overlay-light-30

#1D1D1F @ 30%

e26-overlay-light-40

#F5F5F7 @ 40%

e26-overlay-light-50

#F5F5F7 @ 50%

e26-overlay-light-60

#F5F5F7 @ 60%

e26-overlay-light-70

#F5F5F7 @ 70%

e26-overlay-light-80

#F5F5F7 @ 80%

e26-overlay-light-90

#F5F5F7 @ 90%

Accent Colors

[Used very sparingly to highlight icons or text; typically used within gradients]

e26-accent-violet

#884DE6

e26-accent-blue

#0070D9

e26-accent-sky-blue

#07AAFC

e26-accent-teal

#00AABD

e26-accent-green

#1FA368

e26-accent-yellow

#FCCB07

e26-accent-gold

#FFA641

e26-accent-coral

#FF7C5B

e26-accent-pink

#EA4B93

e26-accent-blue-green

0%

accent-blue

#0070D9

50%

accent-teal

#00AABD

100%

accent-green

#1FA368

e26-accent-violet-gold

0%

accent-violet

#884DE6

50%

accent-coral

#FF7C5B

100%

accent-gold

#FFA641

e26-accent-pink-blue

0%

accent-pink

#EA4B93

50%

accent-violet

#884DE6

100%

accent-sky-blue

#07AAFC

e26-accent-blue-gold

0%

accent-blue

#0070D9

50%

accent-violet

#884DE6

100%

accent-gold

#FFA641

Icons

We use a streamlined version of Apple Icons Library (SF Symbols). Instead of loading the entire library here, we pick and choose icons as needed. See an exhaustive list here.

Arrows & UI

varient

Seals & Checks

varient

Medical & Science

varient

Tech & Data

varient

Nature

varient

Service & Marketing

varient

Spacing

Spacing Tokens

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

128px

Containers

container-desktop

1280px

container-desktop-xl

1472px

[For full size-cards on screens over 1920px; pair with 96px horizontal padding to create 1280px content width]

container-medium

912px

[Used sparingly for desktop sizing on narrow sections, cards, modals, etc.]

container-small

496px

[Used sparingly for desktop & tablet sizing on narrow sections, cards, modals, etc.]

padding-tablet

48px

[Full width design on tablet with 48px padding for content]

padding-mobile

24px

[Full width design on mobile with 24px padding for content]

Section Vertical Padding

Mix and match top and bottom vertical padding sizes as content dictates.

section-xsmall

16px

section-small

32px

section-medium

64px

[Default padding for sections on mobile breakpoint]

section-large

96px

[Default padding for sections on tablet breakpoint]

section-xlarge

128px

[Default padding for sections on desktop breakpoint]

Border Radius

Card corner radiuses are dictated by size/content:

Smaller cards may have a “medium” radius (16px) on mobile, and grow to “large” 24px on desktop.
Medium-sized cards may be “large” 24px across all devices.
Larger full-section cards may be “large” 24px on mobile, and grow to “xlarge” 36px on desktop.

section-xsmall

4px

section-small

8px

radius-medium

16px

radius-large

24px

radius-xlarge

36px

radius-infinite

999px