# Tang & Associates — Brand Guidelines

**Version 1.0.0 · May 17, 2026**

Full brand-system reference for Tang & Associates: logo identity, voice, colour, typography, layout, imagery, UI behaviour, and asset usage. The logo assets in this repository are canonical. The broader visual system follows the Harbour Edition design system in `V:\projects\tangco-design-system`, with `Style Guide.html` and `css/tokens.css` treated as the source of truth where that repo contains conflicting notes.

## Brand foundation

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

The tone is quiet confidence: editorial, restrained, warm, and precise. The system should feel closer to an architecture or fashion editorial than a conventional real-estate advertisement. The core visual ingredients are a gold T+A logomark, a clean white page, neutral ink, Cormorant Garamond display type, Lexend UI type, generous whitespace, thin rules, and restrained harbour-blue dark surfaces.

## 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*. The letters share the central spine and meet at the top.

The logo files in this repo are the canonical identity assets. Do not replace them with the older logo files in `V:\projects\tangco-design-system\assets`; that folder should be updated from this repo later.

## Colour

Gold remains the only primary accent. The wider brand system adds a white/grey page system and a restrained harbour-blue family for dark surfaces and select UI states.

| Token | Value | Role |
|---|---:|---|
| Gold | `#C9A87C` | Primary brand accent, logomark, eyebrows, stat numerals, active indicators, thin emphasis rules |
| Gold deep | `#A88555` | Hover or press state when gold needs more contrast |
| White | `#FFFFFF` | Primary page background |
| Grey block | `#F6F6F6` | Alternating section background; creates rhythm without adding colour |
| Ink | `#1A1A1A` | Primary text and dark neutral surface |
| Warm 200 | `#E8E8E8` | Borders, dividers, table rules |
| Harbour blue | `#2C4A6B` | Dark-surface secondary, restrained UI states |
| Harbour deep | `#14253A` | Deep dark surface for footers, panels, and photo-led sections |

Use gold as punctuation, not atmosphere. Do not make large gold backgrounds except for intentional logomark tile moments. Do not introduce additional accent colours. Avoid warm cream page backgrounds in new system work; the Harbour Edition page is white with near-neutral grey blocks. Use harbour blue sparingly on dark surfaces and select UI states; never as a broad page background or equal accent to gold.

CMYK and Pantone values for gold are approximate. Verify on press with a calibrated swatch book before print runs. For metallic ink, ask the printer for a Pantone Metallic equivalent rather than trusting RGB previews.

## Logo specimens

Use the **gold** mark on white or light grey backgrounds, the **white** mark on dark/harbour/ink surfaces, and the **black** mark for monochrome print where gold is unavailable.

- **Gold mark** — `dist/monochrome/logomark-gold.svg`. Default.
- **White mark** — `dist/monochrome/logomark-white.svg`. Dark or saturated surfaces.
- **Black mark** — `dist/monochrome/logomark-black.svg`. Monochrome print and reproduction constraints.
- **Primary lockup** — `dist/lockup/lockup-primary.svg`. Gold mark + black wordmark on white/light surfaces.
- **Reverse lockup** — `dist/lockup/lockup-reverse.svg`. Gold mark + white wordmark on dark surfaces.
- **Mono lockups** — `dist/lockup/lockup-mono-{black,white}.svg`. Single-ink, embossing, engraving, and other constrained reproduction.

## 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. 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.

## Lockup

The lockup pairs the logomark with the wordmark, **TANG & ASSOCIATES**, set in **Lexend Exa Light**. Use the bundled SVGs; do not rebuild the lockup from separate parts.

Rules:

1. The mark is the brand-colour carrier. When colour reproduction is available, the mark stays gold.
2. The wordmark is black or white only when paired with the gold mark.
3. The wordmark is never used alone.
4. Mono palettes are for reproduction constraints, not styling.
5. Minimum lockup width is 120 px; below that, use the logomark alone.
6. Treat the lockup as a fixed asset. Do not alter spacing, proportion, wordmark weight, or alignment.

Formats:

| Format | Use |
|---|---|
| Horizontal | Default for marketing pages, document headers, decks, and wide placements |
| Stacked | Square or portrait placements such as certificates, awards, and social tiles |
| Single-line | Narrow strips such as site headers, email signatures, and footer bars |

## Minimum size and 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 width | Render size | Use |
|---|---:|---:|---|
| Standard | 3 | ≥ 48 px | Default for 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.

## Co-branding

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

- Keep Tang & Associates as the primary identity on practice-owned materials.
- Place partner or brokerage 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.
- Use the mono-black lockup for single-ink press where gold is unavailable.
- Do not merge the Tang lockup with partner type or redraw either brand.

## Voice and copy

Tang's copy is warm, declarative, and restrained. It should sound informed and calm, not promotional.

- Use third person for bios and overview pages: "David Tang is..."
- Use first/second person for direct client-facing copy: "I will..." and "you can..."
- Prefer grounded words like considered, calm, careful, thoughtful.
- Avoid agency-speak such as "we're here to..." and avoid vague CTAs like "reach out" or "let's chat."
- Do not use exclamation points.
- Do not use emoji.
- Do not use decorative unicode icons.
- Reserve ampersands for the brand name and wordmark; use "and" in running prose.

Casing rules:

- Eyebrows are uppercase and tracked: `JUST LISTED`, `REALTOR®`, `STEP 01 · CONSULT`.
- Headings are sentence case, often with one italicized Cormorant word.
- Body copy and UI labels are sentence case.
- Buttons are sentence case: `Book a free consultation`, not `BOOK A FREE CONSULTATION`.
- Step numbers use two digits: `STEP 01`, not `STEP 1`.

## Typography

The identity has four type roles.

| Role | Typeface | Use |
|---|---|---|
| Wordmark | Lexend Exa Light | Reserved for the logo lockup only |
| Display | Cormorant Garamond | Headlines, pull quotes, stat numerals, editorial emphasis |
| UI/body | Lexend | Navigation, labels, buttons, body, captions, forms |
| Alternate UI | Lexend Deca | Optional softer UI face where the design system explicitly uses it |

Use Cormorant Garamond weights 400/500 for most display work. Use Lexend weights 400/500 for UI. Avoid over-bold styling; presence comes from scale, spacing, and the serif contrast.

The local font files are in `assets/fonts/`. Do not rely on Google Fonts for the guideline deliverables.

## Layout and UI

The Harbour Edition system is editorial and flat. Structure is carried by whitespace, type, rules, and photography.

- Use a 4 px spacing grid with generous rhythm.
- Page background is white; alternate sections may use `#F6F6F6`.
- Cards are white with a 1 px `#E8E8E8` border.
- Default UI cards are flat; do not add shadows by default.
- Use radius `0` for dividers and flat UI blocks, `4px` for small controls, `10px` for listing/photo cards, `16px` for large photo-led panels, and pill radius only for actions/tags.
- Use thin gold rules for emphasis: active tabs, CTA borders, H2 underlines, stat accents.
- Use harbour blue sparingly on dark surfaces and select UI states; never as a broad page background or equal accent to gold.
- Use a fixed dark header for website surfaces when applicable.

Motion is restrained:

- Prefer colour transitions around 250-280 ms.
- Hover may shift colour to gold or add a subtle listing-card lift.
- The loading loop is approved only for short wait states: page/app loading, export progress, render progress, or a compact splash moment. Use `dist/animations/logomark-loading-loop.svg` or an equivalent export from `tools/builder.html`; keep it small, stop it when content is ready, and respect reduced-motion settings in product UI.
- Do not use bounce, overshoot, spring physics, decorative blur, or glassmorphism.
- Preserve visible focus rings: `2px` gold outline with offset is the default.

## Imagery

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

## Iconography

The brand is nearly icon-less. Use the logomark as the primary owned icon: favicon, loading symbol, section dingbat, or profile tile.

If utility icons are unavoidable, use thin outline icons at small sizes only and keep them secondary. Do not use emoji, filled icon sets, oversized icons, or unicode symbols as decoration.

## Animation

Three self-contained SVG logo reveals ship with the kit:

| Variant | Use |
|---|---|
| Disk + carve | Default brand reveal for heroes and signatures |
| Ring + strokes | Lighter, editorial moments |
| Iris reveal | High-attention moments where the brand mark can be telegraphed twice |

Use one-shot animations in heroes and signatures. Use looping reveal variants sparingly.

## Don'ts

- Don't stretch, skew, rotate, or distort the mark.
- Don't recolour outside the approved logo palette.
- Don't place gold-on-gold or use insufficient contrast.
- Don't add drop shadows, glows, bevels, or effects to the logo.
- Don't pair the mark with redundant T+A type.
- Don't use the wordmark alone.
- Don't import or redraw the older design-system logo assets.
- Don't add gradients, decorative patterns, glass effects, or non-brand accent colours to new brand work.

## 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/lockup-{primary,reverse,mono-black,mono-white}.svg` | Horizontal lockups |
| `dist/lockup/stacked/` | Stacked lockups |
| `dist/lockup/single-line/` | Single-line lockups |
| `dist/favicon/` | Favicons and app icons |
| `dist/animations/logomark-{variant}.svg` | Logo reveal animations |
| `assets/fonts/` | Local font files for wordmark and brand-system typography |
| `tools/logo-builder.html` | Static logo builder |
| `tools/builder.html` | Animation builder |
| `guidelines/brand-book.json` | Presentation deck content |

*Tang & Associates Brand Guidelines · Version 1.0.0 · May 17, 2026 · Update this file, `brand-guidelines.html`, and `brand-book.json` together when brand-system guidance changes.*