Now expanding across the Greater Toronto Area. New digital inventory available Q3.Reserve early access
Shree Bihari Media Solutions
ContactRequest a proposal
FormatsNetworkInventoryIndiaTechnologyAboutContactRequest a proposal
Design system

Signal Gold

The single source of truth for the Shree Bihari Media Solutions brand on the web — tokens, type, components and motion, documented as living examples. Click any colour swatch to copy its token.

Color

Cinematic near-blacks and warm neutrals carry 90% of every screen; a single restrained gold does the talking. Azure and green appear only for expansion states and success.

Dark surfaces
Light surfaces
Text on dark
Text on light
Accents

Typography

Fraunces (serif) for expressive display moments — the single expressive gesture. Inter for everything functional, with tabular numerals for metrics and money.

Book the corridor.display · Fraunces 56
A network measured in outcomes.sec-title · 30–54
Placed where attention is unavoidable..lede · 15–19
The network.eyebrow · 11 / .24em
Default body copy — Inter 16/24, the reading size.body · Inter 16
$3,500 · 50K+ · 99.9%num · Inter 800 tabular

Spacing

A 4px base scale. Section rhythm on marketing pages runs generous — --sec-y is a fluid 88–150px.

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
96px

Radius

One radius language: buttons pill, inputs small, cards large, sheets XL.

--r-sm · 10
--r · 16
--r-lg · 22
--r-xl · 28
--r-pill

Buttons

One primary action per view. Gold is reserved for the single most important thing on screen.

On dark
Text link →
On light

Forms

Labels always above the field. Gold focus ring. Used across contact and the quote flow.

Enter a valid email address.

Chips & Badges

Chips are interactive filters (inventory, quote flow). Badges are static status labels.

Filter chips
Badges
Flagship● AvailableExpansionBooked

Cards

Border-first surfaces — hairlines separate, shadows only float. Dark by default, light variant for paper sections.

Digital

Hwy 410 & Bovaird Dr

Highway-facing spectacular · 50K+ daily impressions.

View board →
Case study

Northline Auto

A weekend financing push across three corridors.

Motion

Motion explains, never decorates. Fast, physical, interruptible — and fully disabled under prefers-reduced-motion.

--ease cubic-bezier(.16, 1, .3, 1) — standard reveal & hover
Reveal opacity + 22px rise, 0.8s, staggered via data-d
Hover lift translateY(-2px) on cards & buttons, 0.28–0.35s

Iconography

Inline SVG, 1.8 stroke weight, round caps/joins, sized 16–24px. Always paired with a label. Gold only when it carries meaning.