Internal reference · noindex · unlinked

Brand & component reference

The source of truth for the Nikola Innovation storefront, for humans and AI. Every token and treatment below is a live example with its exact spec. Rules: white canvas, the Anton display face for big headlines, Montserrat for body, a monospace face for data labels, one orange accent. Separation comes from hairline rules and space. One dark band and one orange band per page, used intentionally.

01 · Color

Color tokens

Canvas#ffffffDefault page background
Subtle band#f6f6f4Alt section / quote fill
Hairline#ececec1px borders + dividers
Orange (accent)#fa8b22Buttons, kickers, numerals
Orange (hover)#ff9f3aButton hover only
Ink#1a1a1aHeadings + dark sections
Near-black band#161616Hero / emphasis band
Body text#4a4a4aParagraph copy
Muted#8a847aCaptions, meta, labels
On-dark body#cfcabfBody text on dark bands

02 · Typography

Families

Built for power. Built for comfort.

Display · Anton · apply class="ni-display" · weight 400 · uppercase · big headlines only (h1, hero h2)

More usable power, a smoother stroke, and less strain on the knees and joints. Body copy stays Montserrat for readability.

Body · Montserrat · weights 400 / 500 / 600 / 700 · line-height 1.6 to 1.75

Now launching · Made in Ohio

Label · system monospace (ui-monospace,'SF Mono',Menlo) · ~12px · letter-spacing .16em · uppercase · kickers + data captions

Type scale

Display H1

.ni-display · clamp(2.8rem, 6vw, 4.4rem) · line-height 1.02 to 1.05 · page + hero headlines

Section H2

.ni-display · clamp(2rem, 3.8vw, 2.8rem) · section headlines

Subhead H3 (Montserrat 700)

Montserrat · 1.1 to 1.2rem · 700 · card titles, sub-sections

Lead paragraph. Slightly larger intro copy under a headline.

Montserrat · 1.12rem · 500 · lede / intro

Body paragraph. The default reading size for long-form copy.

Montserrat · 1rem · 400 · body

Small / caption text and meta lines.

Montserrat · 12.5 to 13px · 600 · captions, meta

03 · Buttons & links

Variants

Primary orange pill Dark pill Small pill Text link →

Primary: bg #fa8b22 · text #fff · weight 700 · padding 14px 30px · radius 8px · hover #ff9f3a. Dark pill on orange bands. Small pill (radius 999px) for inline CTAs. Text link: orange, 700, underline on hover.

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

04 · Labels & kickers

Eyebrows and data labels

The proof

Validated by · 2,000 riders · 3 universities

Orange kicker labels a section; muted variant for credibility/meta. Separator between items is a middot ( · ), never an em dash.

05 · Components

Stat band

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

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

Cards

Card title

1px #ececec border, 14 to 16px radius, white fill. The default container for grouped content.

Card title

No drop shadows. Hairlines and whitespace carry hierarchy.

Card title

Numbers use Anton; labels use monospace.

Bands

Canvas #fff
Subtle #f6f6f4
Dark #161616
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 · 3px orange left border · radius 0 10px 10px 0 · weight 600.

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 / minus marker in orange · no default disclosure triangle.

Form field

Input: 1px #d9d4ca border · radius 8px · padding 13px 14px · focus border #fa8b22. Hairline divider above uses border-top:1px solid #ececec.

06 · Layout & spacing

Rhythm

Content widthmax-width 1040 to 1100px, padding 0 28px
Narrow columnmax-width 760px for long-form text
Section paddingclamp(52px, 7vw, 86px) top/bottom
Grid gapclamp(28px, 5vw, 60px) for split layouts
Card radius12 to 16px · Button radius 8px · Pill 999px
Mobile breakpointstack multi-column to 1 column under 760 to 820px

07 · Imagery, voice & build rules

Rules

  • Never use em dashes. Use commas, colons, or periods. Separators in labels use a middot ( · ).
  • Plain B2B voice. No marketing jargon, no corporate speak. Lead with value (power and comfort, proven), do not assume the reader remembers Nikola.
  • Anton for big headlines only via class="ni-display". Smaller headings stay Montserrat 700.
  • Monospace for data labels (kickers, stat captions, eyebrows): font-family:ui-monospace,'SF Mono',Menlo,monospace.
  • Images render as <img>, never CSS background. Product shots sit on a #000 / #161616 panel. Heroes over photos need a scrim + text-shadow for legibility.
  • Build: every custom section scopes its CSS under #shopify-section-[section-id] and prefixes ALL class names (generic names like media, grid, link, card, button collide with Dawn base.css and break layout).