Brand guidelines — Tang & Associates

01 / Foundation

A restrained editorial system

Tang & Associates is the public-facing brand for David Tang, REALTOR® with RE/MAX Crest Realty. The practice covers residential buying, selling, and presale opportunities across the Lower Mainland.

Positioning

Calm, informed, and high-trust rather than promotional. Presence comes from scale, spacing, and restraint.

Source of truth

The logo files in the kit are canonical. The broader visual language follows the Harbour Edition style guide and tokens.

02 / Logo

The mark

A T·A monogram is cut from a single gold disk via SVG fill-rule="evenodd"; the letterforms are negative space, not painted strokes. The horizontal bar and vertical spine compose the T; the diagonal legs and crossbar compose the A.

Gold markDefault on white and light grey

White markDark, ink, or harbour surfaces

03 / Colour

Harbour Edition colour

Gold remains the only primary accent. The wider system adds a white/grey surface rhythm and a restrained harbour-blue family for dark surfaces and select UI states. Use gold as punctuation, not atmosphere.

Gold#C9A87Coklch(75.04% 0.0705 74.38)Primary accent · logomark · emphasis rules

Gold deep#A88555oklch(63.89% 0.0776 74.43)Hover / press when gold needs contrast

White#FFFFFFoklch(100% 0 0)Primary page background

Grey block#F6F6F6oklch(97.31% 0 0)Alternating section background

Warm 200#E8E8E8oklch(93.10% 0 0)Borders, dividers, table rules

Ink#1A1A1Aoklch(21.78% 0 0)Primary text · dark neutral surface

Harbour#2C4A6Boklch(40.14% 0.0666 251.90)Dark-surface secondary · UI states

Harbour deep#14253Aoklch(26.09% 0.0458 254.45)Deep dark surface · footers, panels

04 / Voice

Voice & copy

Copy is warm, declarative, and restrained — considered counsel, not a real-estate ad.

Do

Grounded words: considered, calm, careful, thoughtful.
Sentence case for headings, body, labels, buttons.
Two-digit step numbers.

Do not

No exclamation points.
No emoji or decorative unicode icons.
No agency-speak such as “we’re here to…”
No ampersands in running prose except the brand name.

05 / Typography

Typography

Cormorant for presence, Lexend for clarity. The wordmark stays Lexend Exa, reserved for the lockup.

Wordmark · reserved

TANG & ASSOCIATES

Lexend Exa Light — used only inside the bundled logo lockups, never as system type.

Display

Finding the right home across Metro Vancouver.

Cormorant Garamond 400/500 — headlines, pull quotes, stat numerals.

UI and body

David Tang advises buyers and sellers across Metro Vancouver with a calm, considered approach to every move.

Lexend 400/500 — body, navigation, labels, buttons, captions, forms.

06 / Layout & UI

Editorial interface rules

SurfaceWhite card on a near-neutral grey block — 1 px #E8E8E8 hairline, no shadow by default.

0 4 10 16 pill

Radius0 dividers · 4 controls · 10 listing cards · 16 large panels · pill for actions and tags.

Motion~250–280 ms colour transitions — hover to preview. No bounce, blur, or glass. Respects reduced-motion.

Contact

StatesHover shifts toward gold; a visible gold focus ring with offset stays on every interactive element.

07 / Lockup

Lockup formats

The lockup pairs the logomark with the wordmark set in Lexend Exa Light. Use the bundled SVGs; do not rebuild from parts. Minimum lockup width is 120 px — below that, use the mark alone.

Horizontal lockup — Horizontal — defaultMarketing, headers, decks

Stacked lockup — Stacked — squareCertificates, social tiles

Single-line lockup — Single-line — stripsHeaders, signatures, footers

08 / Clearspace

Clearspace

Maintain clearspace equal to 25% of the mark's bounding diameter on all sides. At 80 px diameter, leave at least 20 px clear. Treat the lockup as one unit and measure from its bounding box. Avatars and favicons may sit edge-to-edge inside a distinct container.

The clearspace unit

X is the mark's bounding diameter. Keep a gap of ¼ X — 25% of X — clear on every side.

Measure from the lockup's bounding box, treating it as one unit. Avatars and favicons are the exception and may sit edge-to-edge inside their container.

09 / Co-branding

Co-branding

Tang & Associates is David Tang's personal practice brand within RE/MAX Crest Realty. Keep co-branding conservative and separated until final placement rules are confirmed.

Keep Tang & Associates as the primary identity on practice-owned materials.
Place brokerage marks with equal optical weight, not necessarily equal pixel size.
Separate identities with a thin vertical divider and one clearspace unit.
Do not merge the Tang lockup with partner type or redraw either brand.

10 / Minimum size

Mark weights

The mark publishes in three stroke weights with identical geometry. Use the heaviest weight that still feels appropriate at the rendered size.

Weight	Stroke	Render size	Use
Standard	3	≥ 48 px	Marketing, documents, signatures, hero
Bold	4.5	17–47 px	Compact UI, small avatars, mobile chrome
Heavy	6	≤ 16 px	Favicons and dense low-DPI contexts

All three shown at one size so the stroke difference is visible — the geometry is identical. In use, pick the weight by render size (see table).

11 / Animation

Reveal animations

Three self-contained SVG reveals ship with the kit. Use one-shot animations in heroes and signatures; use looping reveal variants sparingly. Build and export from the logo studio (Animated reveal mode).

Variant	Use
Disk + carve	Default brand reveal for heroes and signatures
Ring + strokes	Lighter, editorial moments
Iris reveal	High-attention moments

Disk + carve — the default revealHover to replay. Ring + strokes and Iris reveal build and export from the logo studio. Static when reduced-motion is on.

12 / Don'ts

Protect the mark

The construction logic breaks under distortion, effects, recolouring, or generic decorative styling.

Don't stretch or distort.

Don't use low-contrast gold-on-gold.

Don't rotate the mark.

Don't add shadows or effects.

Don't recolour outside the palette.

T&A

Don't pair with redundant type.

13 / Asset reference

Asset reference

Everything ships as one downloadable kit — the gold mark in all three weights, single-colour variants, the horizontal, stacked and single-line lockups, favicons and app icons, and the reveal animations. No file paths to hunt through; download the kit and the structure is inside.

Download Brand Kit →Open logo studio