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

Your name *

Message