The PowersportOS visual identity.

Logo, colors, typography, and usage rules. Written so partners, press, and integrators can reproduce the brand correctly without guessing. Color tokens are pulled live from the actual stylesheet. If a hex code changes here, the site has changed first.

Logo

Two variants. One identity.

The wordmark uses the brand's signature orange "OS" accent. Always present the logo on a surface that gives it adequate contrast. Use the dark-background version on navy or near-black, the light-background version on white or near-white.

For dark backgrounds

Download SVG

For light backgrounds

Download SVG

Do

Reproduce the logo in its native colors. The orange "OS" is the brand anchor.
Give it generous clear space, at least the height of the wordmark on every side.
Use the SVG file when possible. It scales cleanly at any size.
Use the right contrast variant. Dark-bg version on dark, light-bg version on light.

Don't

Don't stretch, skew, or rotate the wordmark.
Don't recolor the logo. The orange accent is part of the identity.
Don't apply gradients, shadows, glows, or 3D effects.
Don't crop the wordmark or use only the "PowersportOS" portion without the "OS" accent.
Don't place the logo on busy photo backgrounds; use a solid surface or a heavily darkened/lightened image.

Color palette

Dark navy. Orange accent. Functional support.

The PowersportOS palette is built around a deep navy ground and a single warm accent. Other colors exist for functional signals (status, links, success) but the brand identity is the navy-and-orange contrast. Don't introduce competing accents; they dilute it.

Navy

--navy

#080f1a

Primary surface, body background

Navy mid

--navy-mid

#0d1829

Cards, dropdowns, raised surfaces

Navy border

--navy-border

#1a2a40

Divider lines, card borders

Orange

--orange

#f97316

Brand accent. The 'OS' in the logo, eyebrows, emphasis (not button fills)

Orange CTA

--orange-cta

#c2410c

Button fill for primary CTAs, Stripe-style palette fork so white text on the button clears WCAG AA (6.65:1)

Blue

--blue

#3B82F6

Secondary accent, links, active states (not button fills)

Blue CTA

--blue-cta

#2563eb

Button fill for secondary CTAs, white text on the button clears WCAG AA (4.77:1)

Green

--green

#10B981

Live status, success states

Text

--text

#e2e8f0

Primary body text on dark surfaces

Text dim

--text-dim

#8794a8

Captions, mono labels, sub-text (WCAG AA on navy)

Text muted

--text-muted

#74829a

Tertiary text, metadata (WCAG AA on navy)

Typography

Four faces. Four roles.

Headings are TASA Explorer, distinctive without being trendy. Body and UI are Atkinson Hyperlegible, designed by the Braille Institute for high legibility. Code, version chips, and section labels are JetBrains Mono to signal "structural truth" visually. TASA Orbiter is loaded as a companion display face for occasional decorative use. All four are loaded from Google Fonts.

TASA Explorer

Weight 400–800 (variable) · Headings, brand wordmark

PowersportOS

Primary heading face. Used for h1 through h4. Distinctive without being trendy. A brand anchor, not a body-text choice.

TASA Orbiter

Weight 400–800 (variable) · Reserved / decorative headings

Operating layer

Available alongside Explorer for occasional emphasis where the two need to coexist. Loaded by default; use sparingly.

Atkinson Hyperlegible

Weight 400 / 700 (regular and italic) · Body text, paragraphs, UI labels

The operating layer for European powersport retail

Designed by the Braille Institute for high legibility. Distinctive forms aid quick reading and signal that we take clarity seriously. Replaces Inter as the workhorse body face.

JetBrains Mono

Weight 400 / 500 · Code, version chips, section labels, metadata, decorative accents

// section-label

Monospace voice. Used to signal structural truth: version numbers, code references, system labels, the chrome around hero blocks.

In practice

Voice & tone notes.

PowersportOS speaks with the voice of an experienced operator, not a hype-driven marketer. Direct, slightly understated, technically literate without being jargon-heavy. The site copy reads "stated facts" more than "promises".

Do

Use plain professional English. Short sentences. Active voice.
Explain the "why" with a concrete example, not abstractions.
Acknowledge what's not yet shipped honestly ("Coming" badges, "on the roadmap" callouts).
Use italic sans labels for section anchors and card eyebrows. Reserve mono for actual code, SKUs, part numbers, and command output, never for decoration.

Don't

Don't use "revolutionary", "disruptive", "AI-powered" unless the context truly warrants; the words have lost meaning.
Don't oversell early-access or pre-release functionality as if it ships today.
Don't claim parity with TecAlliance / TecDoc; we are explicitly not a copy, and the comparison is misleading both directions.
Don't use exclamation marks in body copy. Confidence shows through clear sentences, not punctuation.

Questions about brand usage, or need assets in a different format? Email info@powersportos.com. Happy to provide.