HomeStyle Guide
Design system

Style guide

The visual language behind bcgteam.ca — tokens, motion, type scale, and core surfaces. Everything renders from CSS variables so dark mode and future themes inherit automatically.

Color tokens

Brand--brand#1B2938
Brand dark--brand-darker#0f1822
Ink--ink
Body fg--fg
Soft fg--fg-soft
Muted--muted
Surface 1--bg-elev-1
Surface 2--bg-elev-2
Line--line
Brand tint--brand-tint

Brand gradient + glass

Brand surface.surface-brand · uses --grad-brand
Glass surface.surface-glass · uses --glass-bg + --glass-blur

Typography scale

Display 1Built on trust.
Display 2A calmer way to move home.
HeadingSection heading
BodyWe work the way you wish your last agent had — calm, prepared, and never selling fear.
EyebrowTrusted in Stouffville

Motion tokens

Ease out--ease-out
Ease spring--ease-spring
Ease in-out--ease-in-out
Duration fast--dur-fast
Duration base--dur
Duration slow--dur-slow
Reveal distance--reveal-distance
Hover lift--hover-lift

Hover the cards below to feel each curve.

Hover liftLift
Spring scaleSpring
Page fadeFade

Buttons

Forms