LorryZone Design System v7.0

Design System v7.0

Inter · SF Pro equivalent · 15 Jul 2026

01 — Color

Brand palette

Two blues — one per background context. Dark luxury neutrals for a premium, high-contrast feel.

Brand blue
Blue — Light#0066CCCTAs · links · active states on white / light gray sections
Blue — Dark#2997FFCTAs · links · accents on black / dark sections
Blue — Hover#004FA3Hover / pressed state for buttons on white
Blue — Tint#EBF3FBBadge background · outline button hover surface
Neutrals
Black#000000Hero background · main page background
Near Black#1D1D1FFooter · secondary dark sections · primary text on white
Off White#F5F5F7Alternate section backgrounds · headings on dark
White#FFFFFFCards · white content sections · primary background
Mid Gray#86868BSupporting copy · captions · nav links on dark
Border#D2D2D7Hairlines · card edges · section dividers

02 — Typography

Type system

Inter — the web equivalent of SF Pro. Clean, neutral, and premium at every weight. Apple's exact letter-spacing rhythm: −0.022em body, −0.05em display.

Display
72px · 800 · Inter
India moves
with us.
Heading 1
48px · 700 · Inter
Fleet Advertising at scale.
Heading 2
32px · 700 · Inter
Mobile Van Advertising
Heading 3
22px · 600 · Inter
Truck Branding Solutions
Body
17px · 400 · Inter
LorryZone operates a network of more than fifty thousand commercial trucks across India. GPS-tracked, dynamic, and result-oriented transit advertising for your brand.
Caption
12px · 400 · Inter
GPS-tracked fleet · Pan-India coverage · 50,000+ vehicles
Eyebrow
11px · 600 · 0.1em UC
Transit Media Solutions

03 — Buttons

Button variants

Pill shape (border-radius 980px), Inter weight 400, two blues — one per background context.

Get Started Learn More View details
Start a Campaign Learn More View details
Fleet Advertising GPS Tracked Pan-India 50,000+ Trucks

04 — Layout Patterns

Navigation & hero

Glass nav on pure black. Hero: Inter 800 weight, #2997FF eyebrow, stat strip in near-black below.

LorryZone Get a Quote

Transit Media · Pan-India

Your brand,
moving India.

50,000+ GPS-tracked trucks carrying your message to every corner of the country — at a fraction of hoarding costs.

Start a Campaign Learn More
50K+
Commercial trucks
Pan-India
Coverage
GPS
Live tracking
B2B
Brand campaigns

05 — Components

Service cards

18px corner radius. 2px hairline grid join between cards. Blue text links as primary CTA — low friction, no visual weight.

Transit Media
Truck Advertising
Mobile billboards on 50,000+ GPS-tracked trucks covering national highways and city corridors.
View details
Hyper-Local
Mobile Van Advertising
Fixed illuminated boards on mobile vans — park, promote, and reach exactly the audience you need.
View details
Last Mile
Auto Rickshaw Branding
High-frequency last-mile visibility through auto rickshaw fleet branding across tier 1 and 2 cities.
View details

06 — Forms

Form components

10px radius inputs, 15px Inter, blue focus ring at #0066CC with 15% opacity halo.

Send enquiry

07 — Motion

Motion tokens

Three durations. One easing curve. Define once — developers implement consistently.

Snap
80ms
Hover states · badge fills · border color changes
transition: 80ms ease-out
Base
200ms
Button press · card lift · input focus ring · nav link
transition: 200ms ease-out
Reveal
400ms
Section entrance · stat counter · page load sequence
transition: 400ms cubic-bezier(.16,1,.3,1)
ElementPropertyToken
Buttonopacity · background80ms ease-out
Cardtransform (lift 2px)200ms ease-out
Navbackdrop-filter on scroll200ms ease-out
Stat counterscount up on scroll-enter1200ms ease-out
Section revealopacity 0→1 + translateY 20px→0400ms cubic
prefers-reduced-motionAll durations → 0ms. No exceptions.

08 — Spacing

Spacing scale

Sections breathe with 60–80px vertical padding. All components on an 8px base grid.

4pxFine gaps, icon padding
8pxBadge padding, inline gaps
12pxInput vertical, nav link gap
16pxForm row gaps, card rows
22pxButton horizontal padding (pill)
28pxCard body padding
48pxNav horizontal padding
60pxSection vertical padding
80pxHero top padding