Skip to content

Design System

Five Elements Tokens

Live reference of CSS custom properties, button sizes, typography scale, and layout tokens used across the theme.

Main Palette

Data Blue

#101630

--fe-dark

Clear White

#FFFFFF

--fe-white

Technical Grey

#DDDDDD

--fe-border

Background

#E5E5E5

--fe-bg

Muted

#A8A9AD

--fe-muted

Accent Palette

Innovative Blue

#0EB0E7

--fe-cyan

Passion Red

#7A040F

passion-red

Energy Orange

#FF9408

energy-orange

Typography Scale

Font: Museo Sans. Line-heights are unitless (1.1 for headings).

H1 / Display 2XL / w700 clamp(36px, 4vw, 60px) --fe-type-display-2xl-size line-height: --fe-type-display-2xl-line
Five Elements Digital
H2 / Display XL / w700 clamp(32px, 3.2vw, 48px) --fe-type-display-xl-size line-height: --fe-type-display-xl-line
Five Elements Digital
H3 / Display LG / w700 clamp(28px, 2.6vw, 36px) --fe-type-display-lg-size line-height: --fe-type-display-lg-line
Five Elements Digital
H4 / Display MD / w700 clamp(24px, 2.2vw, 30px) --fe-type-display-md-size line-height: --fe-type-display-md-line
Five Elements Digital
H5 / Display SM / w500 clamp(18px, 1.7vw, 24px) --fe-type-display-sm-size line-height: --fe-type-display-sm-line
Five Elements Digital
Heading LG / w700 clamp(18px, 1.4vw, 20px) --fe-type-heading-lg-size line-height: --fe-type-heading-lg-line
Five Elements Digital
Body LG / w300 18px line-height: 28px
Five Elements Digital — body text sample for reading comfort.
Body MD / w300 16px line-height: 24px
Five Elements Digital — body text sample for reading comfort.
Body SM / w300 14px line-height: 20px
Five Elements Digital — body text sample for reading comfort.
Body XS / w300 12px line-height: 18px
Five Elements Digital — body text sample for reading comfort.

Buttons

Base class: .fe-btn. Color: .fe-btn-cyan or .fe-btn-dark. Size: .fe-btn--sm / default (md) / .fe-btn--lg / .fe-btn--xl

Small — .fe-btn--sm

Cyan Button Dark Button

Medium (default)

Cyan Button Dark Button

Large — .fe-btn--lg

Cyan Button Dark Button

XL — .fe-btn--xl

Cyan Button Dark Button

Layout Tokens

Page Width

--fe-layout-max: 1440px --fe-content-max: 1280px --fe-layout-margin: 32px

Grid

--fe-layout-columns: 12 --fe-layout-gutter: 24px

Header

--fe-header-top-space: 30px Nav width: min(1280px, calc(100% - 160px))

Breakpoints

Desktop: 1280px Tablet: 1024px Mobile: 768px

Button Token Values

Size Font Size Line Height Min Height Padding X Padding Y
SM 14px 20px 40px 24px 8px
MD (default) 16px 24px 48px 32px 12px
LG 20px 28px 56px 40px 14px
XL 24px 32px 64px 54px 14px