Typography
01
Power Beyond Limits
H1 / .text-h1 — Barlow Condensed 900 · clamp(3rem, 8vw, 7rem)
02
Engineered For Endurance
H2 / .text-h2 — Barlow Condensed 800 · clamp(2rem, 4vw, 3.4rem)
03
Built To Perform
H3 / .text-h3 — Barlow Condensed 700 · clamp(1.4rem, 2.5vw, 2rem)
04
Product Highlights
H4 / .text-h4 — Barlow Condensed 700 · 1rem
05
Our Technology
H5 / .text-h5 — Barlow Condensed 600 · 0.7rem
06
Battery Life
H6 / .text-h6 — Barlow Condensed 500 · 0.62rem
07

Barlow at weight 300 is the workhorse of this design system — used for long-form reading across product stories, FAQs, and detail copy throughout the site.

P / .text-body — Barlow 300 · 1rem
08
Secondary copy for card descriptions and FAQ answers, set a touch smaller and tighter than the default body text.
.text-body-sm — Barlow 300 · 0.85rem
09
"The performance difference was noticeable from the very first charge."
.text-quote — Barlow 300 italic · 0.82rem
10
Shop Now
.text-button — Barlow Condensed 700 · 0.82rem
11
98%
.text-stat — Barlow Condensed 800 · 2.4rem
12
Fine print, disclaimers, and legal copy use this smallest text style.
small / .text-note — Barlow 300 · 0.72rem
Buttons
Bright background — .bg-bright
Shop Now
.btn .btn--primary
Learn More
.btn .btn--secondary
Discover More
.btn .btn--primary + btn-arrow.svg
Dark background — .bg-dark
Shop Now
.btn .btn--primary .btn--inverse
Learn More
.btn .btn--secondary .btn--inverse
Discover More
.btn .btn--primary .btn--inverse + btn-arrow.svg
Blocks

Text block

Shop Now