Nikola Innovation · Design system

One system.
Every surface.

The crisp white system: one white canvas, one orange spark, one condensed voice. Every token below is authored once in design-tokens.json and rendered everywhere, on the site and in the emails, so nothing can drift.

v2 · authored in design-tokens.json · internal reference, noindex

01 · Color

Ten tokens. One orange spark.

No shadows and no second accent. Structure comes from hairlines and space. The palette does three jobs: surfaces to build on, ink for weight, and a single orange that points. One black, no near-black.

Canvas--ni-canvas#ffffffDefault page background. Everything sits on white.
Subtle band--ni-band#f6f6f4Alternate sections and quote fills.
Hairline--ni-hairline#ecececEvery 1px border and divider.
Ink--ni-ink#1a1a1aHeadings and dark bands. The one true black.
Body--ni-body#4a4a4aParagraph copy.
Muted--ni-muted#8a847aCaptions, meta, secondary labels.
On-dark body--ni-on-dark#cfcabfBody copy on a dark band.
Orange--ni-orange#fa8b22The one accent. Buttons, kickers, numerals.
Orange hover--ni-orange-hover#ff9f3aButton hover only. The one state change.
Input border--ni-input-border#d9d4caForm field borders.

02 · Type

Anton shouts. Montserrat speaks.

Three faces on a contrast axis, never two similar sans together: a condensed display face for headlines, a humanist sans for reading, and a monospace for data labels.

Families

Built for power. Built for comfort.

Display · Anton · --ni-font-display · apply class="ni-display" · weight 400 · uppercase · big headlines only

A smoother stroke that is easier on the knees, with a scientifically measured increase in power. Body copy stays Montserrat, capped near 70 characters per line.

Body · Montserrat · --ni-font-body · weights 400 / 500 / 600 / 700 · line-height 1.62

Now launching · Made in Ohio

Label · system monospace · --ni-font-mono · letter-spacing .16em · uppercase · kickers and data captions

Type scale

Display

--ni-text-display · clamp(3rem, 8vw, 5.5rem) · hero headlines

Heading 1

--ni-text-h1 · clamp(2.6rem, 6vw, 4rem) · page titles

Heading 2

--ni-text-h2 · clamp(1.9rem, 3.8vw, 2.8rem) · section headlines

Heading 3 (Montserrat 700)

--ni-text-h3 · 1.15rem · card and sub-section titles

Lede paragraph. Larger intro copy under a headline.

--ni-text-lede · 1.125rem · weight 500 · intro

Body paragraph. The default reading size.

--ni-text-body · 1rem · weight 400 · body

Small caption and meta lines.

--ni-text-small · 0.8125rem · captions, meta

Label / kicker

--ni-text-label · 0.75rem · mono, uppercase, orange

03 · Spacing

One scale. Consistent rhythm.

An 8-based px scale for component spacing (gaps, padding), plus two fluid tokens for section rhythm. Reach for a token, never a one-off number.

--ni-space-3xs 4px
--ni-space-2xs 8px
--ni-space-xs 12px
--ni-space-sm 16px
--ni-space-md 24px
--ni-space-lg 32px
--ni-space-xl 48px
--ni-space-2xl 64px
--ni-space-3xl 96px
--ni-space-4xl 128px

Fluid rhythm: --ni-space-section = clamp(56px, 8vw, 108px) for section top/bottom · --ni-space-gap = clamp(28px, 5vw, 60px) for split-layout gaps.

04 · Radius

Square enough to mean it.

Corners top out at 16px. Buttons, inputs and variant pills share one radius; cards and media go a touch softer; full pills are for small inline chips only.

Button / input / pill--ni-r-button · 8px

Card--ni-r-card · 14px

Media / band--ni-r-media · 16px

Full pill999px · tags, small CTAs

05 · Buttons and links

Quiet structure. One loud action.

One orange action carries the click. A dark pill for orange bands, a small pill for inline CTAs, a ghost only on dark or imagery, and a plain orange text link.

Primary orange Dark pill Small pill Text link ›

Primary: bg --ni-orange · text #fff · weight 700 · padding 14px 30px · radius --ni-r-button · hover --ni-orange-hover.

Primary Ghost (on dark) Ghost: transparent · 1.5px rgba(255,255,255,.5) border · white text · on dark or imagery only.

06 · Components

Built from the same parts.

Labels and kickers

The proof

Validated by · 2,000 riders · 3 universities

Orange kicker labels a section; the muted mono variant carries credibility and meta. Separator is a middot ( · ), never an em dash.

Stat band

+7%peak power
+2%pedaling efficiency
70%of riders improved
2,000+cyclists tested

Anton numerals in orange · semibold captions · hairline top and bottom rules · no card chrome. Collapses to 2-up under 680px.

Cards

Card title

1px hairline border, 14px radius, white fill. The default container for grouped content.

Card title

No drop shadows. Hairlines and whitespace carry the hierarchy.

Card title

Numbers use Anton; labels use monospace.

Bands

Canvas #ffffff
Subtle #f6f6f4
Ink #1a1a1a
Orange #fa8b22

One dark band and one orange band per page maximum, for emphasis. Everything else is canvas or subtle.

Pull quote

An estimated 13 million U.S. cyclists experience patellofemoral pain. Every revolution is a chance for bad stroke geometry to load the wrong tissue.

Subtle fill · card radius · weight 600 · the key phrase lifts to orange. No side-stripe border.

Accordion

What makes the NI Flow different?

Patented Zivo Flow Motion with 25mm of lateral float, so your joints move naturally.

Where is it made?

Designed and patented in Rocky River, Ohio.

Hairline rows · plus and minus marker in orange · no default disclosure triangle.

Form field

Input: 1px --ni-input-border · radius --ni-r-input · padding 13px 14px · focus border orange.

07 · Imagery

Real. Never rendered.

White is the frame; photography is the emotion and the proof. Four modes, used as intentional moments and never as wallpaper. Every image is a real photograph. We never illustrate.

Cyclists at speed, shot in motion MotionYou feel it from the first mile.
NI Flow pedal mechanism on black
ProductMachined metal on true black, rim light, three-quarter angle.
Rider effort in black and white
EffortBlack and white, high contrast, sits on a dark band.
Cycling shoe clipped into a pedal
DetailShoe, pedal, drivetrain. Proof the thing is real and made.
Rider silhouette on a warm horizon
WarmthGolden hour and silhouette, negative space for a headline.

Images render as <img>, never a CSS background. Product shots on a true-black panel. Photos behind text get a scrim plus text-shadow. Full frame set and provenance: docs/image-credits.md and the imagery moodboard.

08 · Voice and build rules

Plain. Proven. No apologies.

  • Never use em dashes. Use commas, colons, or periods. Separators in labels use a middot ( · ). CI blocks them.
  • Plain B2B voice. No jargon, no corporate speak. Lead with value (power and comfort, proven). We talk to shops and fitters, not just riders.
  • Anton for big headlines only via class="ni-display". Smaller headings stay Montserrat 700.
  • Monospace for data labels (kickers, stat captions, eyebrows): --ni-font-mono, uppercase, .16em tracking, orange.
  • Render from var(--ni-*), never a hardcoded brand hex. A unit test fails any brand hex used as a CSS value in a section.
  • Scope and prefix every section: wrap CSS under #shopify-section-[id] and prefix all class names. Generic names collide with Dawn base.css and break layout.

09 · Token reference

Every token, one source.

The complete surface. Change a value in design-tokens.json, run npm run build:tokens, and every surface updates.

Color
Token Value Use
--ni-canvas #ffffff Page background
--ni-band #f6f6f4 Alternate sections
--ni-hairline #ececec Borders and dividers
--ni-ink #1a1a1a Headings, dark bands
--ni-body #4a4a4a Paragraph copy
--ni-muted #8a847a Captions, meta
--ni-on-dark #cfcabf Body on dark bands
--ni-orange #fa8b22 The one accent
--ni-orange-hover #ff9f3a Button hover
--ni-input-border #d9d4ca Form fields
Type, radius and tracking
Token Value Use
--ni-font-display Anton Big headlines
--ni-font-body Montserrat Body copy
--ni-font-mono ui-monospace Data labels
--ni-label-tracking 0.16em Label letter-spacing
--ni-r-button 8px Buttons, inputs, pills
--ni-r-card 14px Cards
--ni-r-media 16px Media, bands
Type scale
Token Value Use
--ni-text-display clamp(3rem, 8vw, 5.5rem) Hero headlines
--ni-text-h1 clamp(2.6rem, 6vw, 4rem) Page titles
--ni-text-h2 clamp(1.9rem, 3.8vw, 2.8rem) Section headlines
--ni-text-h3 1.15rem Card titles
--ni-text-lede 1.125rem Intro copy
--ni-text-body 1rem Body
--ni-text-small 0.8125rem Captions
--ni-text-label 0.75rem Kickers, labels
Spacing
Token Value Use
--ni-space-3xs to 4xl 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 128px Component spacing
--ni-space-section clamp(56px, 8vw, 108px) Section rhythm
--ni-space-gap clamp(28px, 5vw, 60px) Split-layout gaps
--ni-leading-tight to relaxed 0.98 / 1.15 / 1.4 / 1.62 / 1.75 Line height
--ni-weight-regular to bold 400 / 500 / 600 / 700 Font weight