The Nine Tyres Design System

Every colour, type style, component and icon used across the site, in one place. Built on Poppins, a deep-blue brand gradient and a soft, layered shadow scale. Hand-written HTML5 and CSS3 — no frameworks, no build step, no dependencies.

v1.0 · Mockup css/style.css · 1,904 lines css/responsive.css · 5 breakpoints Poppins 300–800

Colours Typography Buttons Badges Cards Inputs Icons Spacing & Scales

01 — Colour

Brand palette

Deep blue carries every primary action. Golden amber is the accent — highlights, active states and hovers. Yellow appears only inside the logo lock-up and star ratings. Everything else is neutral, so the brand colours never have to compete for attention.

Brand Blue--primary · #0F4C81

Brand Amber--accent · #F4A300

Brand Yellow--yellow · #FFC220

White--white · #FFFFFF

Surface--surface · #F7F7F7

Border--border · #E5E5E5

Text--text · #222222

Success--success · #16A34A

WhatsApp--whatsapp · #25D366

Brand Gradient

linear-gradient(135deg, var(--primary), var(--primary-400)) — icon boxes, step numbers, seals, avatars.

CTA Band Gradient

linear-gradient(115deg, --primary-900, --primary, --primary-400) — the full-width closing CTA on every page.

Support Tints

--primary-050 · --accent-050 · --success-050 — badge and icon-box backgrounds only.

02 — Typography

Poppins, one family, eight weights

Headings are tight (-.02em to -.035em) and heavy. Body copy runs at 1.65 line-height in the softer --text-2 grey. Every heading size is fluid — it scales with the viewport using clamp(), so nothing has to be re-tuned per breakpoint.

Let's do it right. .h-display
clamp(2.4 – 4.1rem) / 800

Premium tyres, fitted right

h1 / .h1
clamp(2.1 – 3.3rem) / 800

Why customers choose Nine Tyres

h2 / .h2
clamp(1.7 – 2.5rem) / 700

Bridgestone Turanza 6

h3 / .h3
clamp(1.2 – 1.45rem) / 700

Wheel alignment & balancing

h4 / .h4
1.06rem / 600

Free inspection, free nitrogen filling and expert fitting — on every set we sell.

.lead
clamp(1 – 1.16rem) / 400

Body copy. Every tyre and battery is sourced through authorized channels with a verifiable manufacturer warranty.

body p
16px / 400 / 1.65

Small text — used for card copy, hints and secondary lines.

.small
.875rem / 400

Tiny + muted — disclaimers, mockup notes and image credits.

.tiny .muted
.78rem / --text-3

Eyebrow Label .eyebrow
.74rem / 700 / .16em

An emphasised word in a heading

.mark
amber underlay

03 — Buttons

Buttons & links

Pill-shaped, 600 weight, always with a 2px lift on hover. Primary blue is reserved for the single most important action on a screen. Arrows inside buttons slide 4px on hover.

Variants

.btn--primary · --amber · --outline · --ghost · --whatsapp · --dark

Sizes

.btn--lg (18/34) · .btn (14/26) · .btn--sm (10/18) · .btn--icon (46px circle)

Full-width WhatsApp block

.btn--block — used inside cards and the mobile drawer.

Text Link See all offers

.link-arrow — the arrow slides right on hover. Used in split section headings.

04 — Badges

Badges & the trust seal

Badges are tinted, never saturated — the only exception is .badge--dark, which sits on photography. The Bridgestone trust badge is a component of its own and must not be recoloured or rebuilt out of ordinary badges.

Badge Variants

Flat 25% Off ₹500 Cashback Free Add-on Valid till 31 Oct Festival Offer

.badge--blue · --amber · --success · --grey · --dark

Authorized Dealer Trust Badge

Authorized Dealer Bridgestone Tyres

.badge-auth — hero, page heroes and any page that sells Bridgestone stock. One per screen.

05 — Cards

Card components

Five card types cover the whole site. All of them share the same recipe: white surface, 1px --border, --r-lg radius, --sh-xs at rest, and a 6px lift into --sh-lg on hover.

.card

Base card

The generic surface — used for hours, directions, notes and anything that does not need a photo. Modifiers: .card--flat, .card--pad-lg, .card--hover.

.feature

Genuine Products

Icon + title + copy. A amber rule wipes across the top edge on hover, and the icon box tilts.

.photo-card

White sports car front wheel photographed in a showroom

Offer

Photo card

16:9 image, badges, title, copy and a footer that is pinned to the bottom of the card.

.tyre-card

Bestseller

Bridgestone

Turanza 6

205/55 R16 91V

Type: Tubeless
Warranty: 5 Years
Load Index: 91
Speed: V — 240 km/h

Wet Grip Low Noise

Price on enquiry

.quote

“Walked in for a puncture, walked out with an honest opinion that two of my tyres still had a season left.”

RK Rahul Krishnan Honda City · Car Owner

.icon-box variants

.icon-box (54px) with --amber · --success · --dark · --solid · --sm (42px, used in .info-tile).

06 — Forms

Input fields

All fields share a 1.5px border, a 12px radius and a 13/15px pad. On focus the border turns brand blue and a 4px rgba(15,76,129,.1) ring appears — the same focus treatment across inputs, selects and textareas.

Fields

Name *

Vehicle Type

Search bar

Message

Field hint — .field-hint, .76rem, --text-3.

.field wraps a label + control. .span-2 makes it full width inside .form-grid. Required markers use .req.

Chips

.chips > .chip — filter pills. The selected chip takes .is-active (solid blue + blue shadow).

Focus & Success States

Focused input (click it)

Enquiry received. Our team will call you back within 30 minutes.

Focus ring: border-color: var(--primary) + box-shadow: 0 0 0 4px rgba(15,76,129,.1). Keyboard focus elsewhere uses a 3px blue :focus-visible outline. .form-success.is-visible replaces the form after a mock submit.

07 — Icons

The icon set

Every icon on the site is inline SVG on a 24×24 grid, 1.9–2px stroke, round caps and joins, drawn in currentColor so it inherits from its parent. No icon font, no sprite sheet, no external requests. Brand-filled icons (WhatsApp, social, stars) are the only fills.

phone

mail

check

shield

star

arrow

chevron

plus

map-pin

clock

wrench

tyre

bike

bolt

Icons are drawn from the Feather/Lucide 24×24 grid and hand-tuned. Copy the SVG straight out of the markup — there is nothing to import.

08 — Scales

Spacing, radius & elevation

One spacing scale, one radius scale, one shadow scale. If a value is not on a scale, it does not belong in the stylesheet. Sections breathe at 56–104px; cards sit on 20–32px.

Spacing Scale — --s-1 … --s-10

--s-1

4px

--s-2

8px

--s-3

12px

--s-4

16px

--s-5

24px

--s-6

32px

--s-7

48px

--s-8

64px

--s-9

96px

--s-10

128px

Utilities: .mt-4 · .mt-5 · .mt-6 · .mt-7 · .mb-4 · .mb-5 · .mb-6 and the grid gaps (.gap-2 · .gap-3 · .gap-4) all read from this scale.

Radius Scale

--r-xs
8px

--r-sm
12px

--r-md
16px

--r-lg
22px

--r-xl
28px

--r-pill
999px

Inputs use --r-sm, cards --r-lg, panels and bands --r-xl, buttons and badges --r-pill.

Elevation Scale

--sh-xs
rest state

--sh-sm
chips, seals

--sh-md
panels, map

--sh-lg
hover lift

--sh-primary
primary CTA

Shadows are cool-grey (rgba(16,24,40,·)) and never exceed 10% opacity — except --sh-primary, which tints the primary button.

Motion

--fast · .18s

Colour, border and small transforms.

--base · .3s

Card lifts, shadows, icon boxes.

--slow · .6s

Image zooms and slider tracks.

.reveal · .d1–.d5

Scroll-in fade with 70ms stagger steps.

Easing is --ease cubic-bezier(.22,.61,.36,1) for UI and --ease-out cubic-bezier(.16,1,.3,1) for entrances. Everything is disabled under prefers-reduced-motion.

One system · Nine pages · Zero dependencies

Let's do it right.

Everything on this page is live markup from css/style.css — copy a component straight out of the source and it will look exactly like this.

Back to the Homepage