Tang & Associates

Brand Guidelines

Full brand-system reference for identity, voice, colour, typography, layout, imagery, UI behaviour, and assets. Logo assets in this repository are canonical; Harbour Edition design language follows the design-system style guide and tokens.

David Tang's Metro Vancouver real estate brand

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.

The system is editorial, restrained, photographic, and precise: a gold T+A logomark, clean white surfaces, neutral ink, Cormorant display type, Lexend UI type, thin rules, and quiet harbour-blue dark surfaces.

01 / Foundation

Brand foundation

See in deck

Positioning

Tang & Associates gives a residential real estate practice the restraint usually reserved for architecture or fashion editorial. It should feel calm, informed, and high-trust rather than promotional.

Source of truth

The logo files in this repo are canonical. The broader visual language follows V:\projects\tangco-design-system\Style Guide.html and css/tokens.css; older logo files in that repo should be replaced from this kit.

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 middle crossbar compose the A.

Gold mark Default on white and light grey surfaces.

White mark Dark, ink, harbour, or saturated surfaces.

Black mark Monochrome print and reproduction constraints.

03 / Colour

Harbour Edition colour

See in deck

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.

Gold#C9A87CPrimary accent

White#FFFFFFPage background

Grey block#F6F6F6Section rhythm

Ink#1A1A1AText and dark neutral

Harbour#2C4A6BDark-surface secondary

Harbour deep#14253ADeep panels

Rules

Use gold as punctuation: logo, eyebrows, stat numerals, active indicators, and thin emphasis rules.
Do not introduce additional accent colours.
Use white as the page surface and near-neutral grey for section rhythm.
Use harbour blue sparingly on dark surfaces and select UI states; never as a broad page background or equal accent to gold.
Verify CMYK/Pantone gold values on press; RGB cannot preview metallic ink.

04 / Voice

Voice and copy

See in deck

Copy is warm, declarative, and restrained. It should sound informed and calm, not promotional.

Do

Use grounded words: considered, calm, careful, thoughtful.
Use uppercase tracked eyebrows: JUST LISTED, REALTOR®, STEP 01 · CONSULT.
Use sentence case for headings, body, labels, and buttons.
Use 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

See in deck

Wordmark · reserved

TANG & ASSOCIATES

Lexend Exa Light is used only inside the bundled logo lockups.

Display

Finding the right home across Metro Vancouver.

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

UI and body

David Tang is a Metro Vancouver REALTOR® with RE/MAX Crest Realty, helping families buy, sell, and secure presale opportunities across the Lower Mainland.

Lexend 400/500 handles body copy, navigation, labels, buttons, captions, and forms.

06 / Layout and UI

Editorial interface rules

See in deck

System behaviour

Use a generous 4 px spacing grid.
Carry structure with whitespace, typography, and 1 px borders.
Default UI cards are flat: white background, thin border, no shadow.
Reserve 10 px and 16 px radii for photography and photo-led panels.
Use pill radius only for actions, tags, and status pills.
Prefer colour transitions around 250-280 ms; avoid bounce, overshoot, blur, and glass effects.
Use the loading loop only for short wait states: page/app loading, export progress, render progress, or compact splash moments. Keep it small, stop it when content is ready, and respect reduced-motion settings.
Keep focus rings visible with a gold outline and offset.

07 / Imagery

Photography direction TBD

See in deck

Photography direction is TBD. Do not treat sample placeholders, stock imagery, or temporary mood references as final brand direction.

Status

TBD. Keep photography decisions out of production guidance until the final direction is approved.

08 / Lockup

Lockup formats

See in deck

The lockup pairs the logomark with the wordmark, set in Lexend Exa Light. Use the bundled SVGs. Do not rebuild the lockup from parts.

Horizontal — default Marketing pages, document headers, decks, and wide placements.
Stacked — square or portrait Certificates, awards, portrait cards, and social tiles.
Single-line — narrow strips Site headers, email signatures, and footer bars.

Rules

The mark is the brand-colour carrier; it stays gold whenever colour reproduction is available.
The wordmark is black or white only when paired with the gold mark.
The wordmark is never used alone.
Minimum lockup width is 120 px; below that, use the logomark alone.

09 / Clearspace

Clearspace

See in deck

Maintain clearspace equal to 25% of the mark's bounding diameter on all sides. At 80 px diameter, leave at least 20 px clear. The lockup is treated as one unit; measure clearspace from the lockup bounding box.

Avatars and favicons are the exception: the mark may sit edge-to-edge inside a visually distinct container.

10 / Co-branding

Co-branding

See in deck

Tang & Associates is David Tang's personal practice brand within RE/MAX Crest Realty. Until final RE/MAX placement requirements are confirmed, keep co-branding conservative and separated.

Rules

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

11 / Minimum size

Mark weights

See in deck

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

Below about 12 px, prefer a solid gold disk and rely on context; even Heavy can muddy at that size.

12 / Animation

Reveal animations

See in deck

Three self-contained SVG logo reveals ship with the kit. Use one-shot animations in heroes and signatures. Use looping reveal variants sparingly.

Variant	Use	File
Disk + carve	Default brand reveal.	`logomark-disk-carve.svg`
Ring + strokes	Lighter editorial moments.	`logomark-ring-strokes.svg`
Iris reveal	High-attention moments.	`logomark-iris-reveal.svg`

13 / Don'ts

Don'ts

See in deck

Don't stretch or distort.

Don't recolour outside the approved palette.

Don't rotate the mark.

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

Don't add shadows, glows, or effects.

Don't pair the mark with redundant T+A type.

14 / Asset reference

Asset reference

Path	What it is
`dist/logomark.svg`	Canonical brand mark, gold, Standard weight.
`dist/monochrome/logomark-{gold,white,black}.svg`	Single-colour SVG variants.
`dist/weights/{bold,heavy}/logomark-{gold,white,black}.svg`	Heavier mark weights.
`dist/png/{gold,white,black}/logomark-{N}.png`	Raster logomarks with automatic size-to-weight mapping.
`dist/lockup/`	Horizontal, stacked, and single-line lockups in approved palettes.
`dist/favicon/`	Favicons and app icons.
`dist/animations/`	Logo reveal animations.
`assets/fonts/`	Local font files for wordmark and Harbour Edition typography.
`tools/logo-builder.html`	Static logo builder.
`tools/builder.html`	Animation builder.