Reference

Design System

The AutoBrizza design system — colours, typography, components, and patterns used across the brand website.

Colours

Teal

#00B4CC · var(--color-teal)

Primary accent, CTAs, highlights

Deep Teal

#008B8B · var(--color-deep-teal)

Hover states, secondary accents

Silver

#A0A0A0 · var(--color-silver)

Borders, muted text, dividers

Gunmetal

#2F4F4F · var(--color-gunmetal)

Secondary text, dark surfaces

Navy

#001F3F · var(--color-navy)

Primary dark background, headings, footer

White

#FFFFFF · var(--color-white)

Primary light background

Surface

#F4F9FA · var(--color-surface)

Light teal-grey surface

Surface Alt

#E8F4F6 · var(--color-surface-alt)

Slightly deeper teal-grey

Teal Light

#E0F7FA · var(--color-teal-light)

Light teal accent backgrounds

Gradients

Teal → Silver (logo-matching)

Hero Gradient (global consistent dark gradient)

Typography

Font: Montserrat (Google Fonts) — 400, 500, 700 weights

text-5xlFresh Air. Better Drives.

text-4xlPremium Car Perfume

text-3xlFeatured Collection

text-2xlWhy AutoBrizza

text-xlOcean Breeze

text-lgElevate your driving experience.

text-basePremium ingredients. Lasting impressions.

text-smLong-lasting fragrance

text-xsPREMIUM CAR PERFUME

Premium Car Perfume

↑ Descriptor class: uppercase, weight 500, letter-spacing 0.3em

Buttons

All buttons: rounded-xl (12px), font-semibold, tracking-wide, min 44px height (touch target).

Inputs

Text Input

With Icon

Badges

Best SellerNew-29%Gift Pick

Cards

Glass Card

16px border-radius, thin translucent border, hover shadow.

Surface Card

Translucent surface background with blur.

Deep Card

Deep navy background for drawer and overlays.

Icons

Lucide React icons, 1.5px stroke weight, consistent sizing.