Brand Guidelines

Colors

A Premium, Trustworthy Identity

Smartliner USA establishes a premium brand identity through a refined color palette that reflects the durability of our custom-fit floor liners, the precision of laser-scanned technology, and the everyday protection for real lives. This palette—rooted in vibrant blues for trust and confidence, teals for accessibility and human connection, and oranges for rugged adventure—conveys sophistication, reliability, and emotional resonance.

Logos

Primary Logo Variations

Use these logos consistently across all materials. Maintain clear space and do not distort.

Smartliner Logo 1

Smartliner Logo 2

Smartliner Logo 3

Smartliner Logo 4

Core Palette

Primary Brand Colors

These three colors form the foundation of our visual identity, carefully selected to represent everyday excellence, tailored protection, and generational trust.

Smartliner Blue

#1178DF

RGB: 17, 120, 223

Dark Mode: #3A9EFF

Smartliner Home Teal

#33DAC1

RGB: 51, 218, 193

Dark Mode: #4EF0D8

Offroad UTV Orange

#D27B01

RGB: 210, 123, 1

Dark Mode: #E8931A

Extended Palette

Supporting Colors & Neutrals

Complementary shades and neutral tones for backgrounds, text, and UI elements.

Deep Charcoal

#24272A

RGB: 36, 39, 42

Dark Mode: #EEEEEE

Primary text on light backgrounds, bold headings

Medium Gray

#5C5C5C

RGB: 88, 88, 88

Dark Mode: #8B8B8B

Secondary text, muted elements, borders

Light Gray

#E3E3E3

RGB: 227, 227, 227

Dark Mode: #383838

Backgrounds, dividers, subtle UI elements

Off-White

#F6F6F6

RGB: 246, 246, 246

Dark Mode: #1A1A1A

Light mode backgrounds, cards, contrast sections

Guidelines

Color Usage & Accessibility

Complete blue scale for light and dark mode applications.

Light Mode Blues

Smartliner Blue 100 #DCE8F8

Smartliner Blue 200 #BBD4F3

Smartliner Blue 300 #98C4EE

Smartliner Blue 400 #75B2EC

Smartliner Blue 500 #52A5E9

Smartliner Blue 600 #4E9AE5

Smartliner Blue 700 #2A78C1

Smartliner Blue 800 #2A78C1

Smartliner Blue 900 #124279

With Opacity

Smartliner Blue 75% Opacity

Smartliner Blue 50% Opacity

Smartliner Blue 30% Opacity

Smartliner Blue 10% Opacity

Smartliner Blue 300 75% Opacity

Smartliner Blue 300 50% Opacity

Smartliner Blue 300 30% Opacity #F2D883

Dark Mode Blues

Smartliner Blue 100 #DCE8F8

Smartliner Blue 200 #BBD4F3

Smartliner Blue 300 #98C4EE

Smartliner Blue 400 #75B2EC

Smartliner Blue 500 #52A5E9

Smartliner Blue 600 #4E9AE5

Smartliner Blue 700 #2A78C1

Smartliner Blue 800 #2A78C1

Smartliner Blue 900 #124279

With Opacity

Smartliner Blue 75% Opacity

Smartliner Blue 50% Opacity

Smartliner Blue 30% Opacity

Smartliner Blue 10% Opacity

Smartliner Blue 300 75% Opacity

Smartliner Blue 300 50% Opacity

Smartliner Blue 300 30% Opacity

Extended Colors

UTV Orange Scale

Complete orange scale for light and dark mode applications.

Light Mode UTV Orange

UTV Orange 100 #FBF2E6

UTV Orange 200 #F2D8B3

UTV Orange 300 #E8BC7F

UTV Orange 400 #DD9C41

UTV Orange #D27B01

UTV Orange 700 #BB5B05

UTV Orange 800 #95460B

UTV Orange 900 #7A390D

With Opacity

UTV Orange 75% Opacity

UTV Orange 50% Opacity

UTV Orange 30% Opacity

UTV Orange 10% Opacity

UTV Orange 200 75% Opacity

UTV Orange 200 50% Opacity

UTV Orange 200 30% Opacity #F2D883

Dark Mode UTV Orange

UTV Orange 100 #FBF2E6

UTV Orange 200 #F2D8B3

UTV Orange 300 #E8BC7F

UTV Orange 400 #DD9C41

UTV Orange #D27B01

UTV Orange 700 #BB5B05

UTV Orange 800 #95460B

UTV Orange 900 #7A390D

With Opacity

UTV Orange 75% Opacity

UTV Orange 50% Opacity

UTV Orange 30% Opacity

UTV Orange 10% Opacity

UTV Orange 200 75% Opacity

UTV Orange 200 50% Opacity

UTV Orange 200 30% Opacity

Extended Colors

Home Teal Scale

Complete teal scale for light and dark mode applications.

Light Mode Home Teal

Home Teal 100 #EBFCF9

Home Teal 200 #C2F4ED

Home Teal 300 #9BECDF

Home Teal 400 #86E3D1

Home Teal #33DAC1

Home Teal 600 #10BCA5

Home Teal 700 #0A9788

Home Teal 800 #0C796D

Home Teal 900 #124F4A

With Opacity

Home Teal 75% Opacity

Home Teal 50% Opacity

Home Teal 30% Opacity

Home Teal 10% Opacity

Home Teal 200 75% Opacity

Home Teal 200 50% Opacity

Home Teal 200 30% Opacity #F2D883

Dark Mode Home Teal

Home Teal 100 #EBFCF9

Home Teal 200 #C2F4ED

Home Teal 300 #9BECDF

Home Teal 400 #86E3D1

Home Teal #33DAC1

Home Teal 600 #10BCA5

Home Teal 700 #0A9788

Home Teal 800 #0C796D

Home Teal 900 #124F4A

With Opacity

Home Teal 75% Opacity

Home Teal 50% Opacity

Home Teal 30% Opacity

Home Teal 10% Opacity

Home Teal 200 75% Opacity

Home Teal 200 50% Opacity

Home Teal 200 30% Opacity

Gradients

Adventure Flow Gradients

Use these gradients for hero backgrounds, product overlays, and lifestyle illustrations.

Subtle Orange Gradient

Subtle Teal Gradient

Tech Blue Gradient

Typography

Typography Mapping

Our type system uses Oswald for headers and Inter for body copy.

Font-Family: Oswald

Style Name: H1 Font Weight: 600 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.

Style Name: H1 Font Weight: 400 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.

Style Name: H2 Font Weight: 400 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.

Style Name: H3 Font Weight: 400 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.

Style Name: H4 Font Weight: 400 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.

Style Name: H5 Font Weight: 400 Text Case: Uppercase Letter Spacing (as a Family): +4% Demo:

ALMOST BEFORE WE KNEW IT, WE HAD LEFT THE GROUND.