{
  "title": "Tang & Associates Brand Book",
  "brand_name": "Tang & Associates",
  "document_type": "Brand Book",
  "version": "v1.0.0",
  "year": "May 17, 2026",
  "footer_mark": "../dist/favicon/logomark-favicon.svg",
  "spreads": [
    {
      "id": "cover",
      "type": "cover",
      "label": "Cover",
      "mark": "../dist/monochrome/logomark-gold.svg",
      "specs": [
        { "type": "color", "hex": "#C9A87C" },
        { "type": "year" },
        { "type": "voice", "quote": "Quiet confidence for Metro Vancouver real estate." },
        { "type": "spec", "label": "System", "value": "Harbour Edition", "specimen": "PHOTO · TYPE · GOLD" }
      ],
      "notes": "Open by positioning this as the full brand-system reference, not only a logo manual. The logo assets in this repo remain canonical. The design language follows the Harbour Edition style guide and tokens."
    },
    {
      "id": "foundation",
      "type": "rule-cards",
      "label": "Foundation",
      "title": "A restrained editorial system for David Tang.",
      "description": "Tang & Associates is David Tang's residential real estate practice with RE/MAX Crest Realty, serving buyers, sellers, and presale clients across Metro Vancouver.",
      "guidelines_anchor": "brand-guidelines.html#foundation-heading",
      "cards": [
        { "title": "Practice", "body": "Residential buy, sell, and presale work across the Lower Mainland." },
        { "title": "Tone", "body": "Quiet confidence. Calm, informed, declarative, and never promotional." },
        { "title": "Visual spine", "body": "Gold T+A logomark, clean white page, neutral ink, Cormorant display, Lexend UI, thin rules, and photographic restraint." },
        { "title": "Canonical sources", "body": "Logo assets come from this repo. The broader system follows the Harbour Edition style guide and tokens." }
      ],
      "notes": "Stress the source split: tangco-logo is the correct logo source; the design-system repo is the correct source for the broader visual language."
    },
    {
      "id": "mark-variants",
      "type": "mark-variants",
      "label": "Logo",
      "title": "The icon, in three weights",
      "description": "The T+A monogram inside a gold disk. Geometry is identical across weights; only the stroke thickens.",
      "guidelines_anchor": "brand-guidelines.html#weights-heading",
      "weights": [
        { "name": "Standard", "key": "standard", "stroke": "sw 3", "range": "≥ 48 px", "src": "../dist/monochrome/logomark-gold.svg" },
        { "name": "Bold", "key": "bold", "stroke": "sw 4.5", "range": "17-47 px", "src": "../dist/weights/bold/logomark-gold.svg" },
        { "name": "Heavy", "key": "heavy", "stroke": "sw 6", "range": "≤ 16 px", "src": "../dist/weights/heavy/logomark-gold.svg" }
      ],
      "size_matrix": [
        { "size": 16, "weight": "heavy" },
        { "size": 24, "weight": "bold" },
        { "size": 32, "weight": "bold" },
        { "size": 48, "weight": "standard" },
        { "size": 64, "weight": "standard" },
        { "size": 128, "weight": "standard" }
      ],
      "notes": "The current logo files are canonical. Do not use the older logo assets from the design-system folder."
    },
    {
      "id": "color",
      "type": "color-palette",
      "label": "Colour",
      "title": "White page, neutral ink, single gold accent.",
      "description": "Gold remains the only primary accent. Harbour Edition adds a clean white page, neutral grey section rhythm, and a quiet harbour-blue family for dark surfaces and select UI states.",
      "guidelines_anchor": "brand-guidelines.html#color-heading",
      "swatches": [
        {
          "name": "Gold",
          "role": "Primary accent",
          "hex": "#C9A87C",
          "rgb": "201, 168, 124",
          "hsl": "35°, 41%, 64%",
          "cmyk": "0, 16, 38, 21",
          "pantone": "466 C",
          "size": "large",
          "text_color": "#1a1a1a"
        },
        {
          "name": "White",
          "role": "Page",
          "hex": "#FFFFFF",
          "rgb": "255, 255, 255",
          "hsl": "0°, 0%, 100%",
          "cmyk": "0, 0, 0, 0",
          "pantone": "White",
          "text_color": "#1a1a1a",
          "outline": true
        },
        {
          "name": "Grey block",
          "role": "Section rhythm",
          "hex": "#F6F6F6",
          "rgb": "246, 246, 246",
          "hsl": "0°, 0%, 96%",
          "cmyk": "0, 0, 0, 4",
          "pantone": "Cool Gray 1 C",
          "text_color": "#1a1a1a",
          "outline": true
        },
        {
          "name": "Ink",
          "role": "Primary text",
          "hex": "#1A1A1A",
          "rgb": "26, 26, 26",
          "hsl": "0°, 0%, 10%",
          "cmyk": "0, 0, 0, 90",
          "pantone": "Black 6 C",
          "text_color": "#ffffff",
          "dark": true
        },
        {
          "name": "Harbour",
          "role": "Dark-surface secondary",
          "hex": "#2C4A6B",
          "rgb": "44, 74, 107",
          "hsl": "211°, 42%, 30%",
          "cmyk": "59, 31, 0, 58",
          "pantone": "7545 C",
          "text_color": "#ffffff",
          "dark": true
        }
      ],
      "notes": "Gold is punctuation, not atmosphere. White is the page. Grey blocks create rhythm. Harbour blue is a restrained dark-surface secondary, not a broad page background or equal accent to gold."
    },
    {
      "id": "voice",
      "type": "rule-cards",
      "label": "Voice",
      "title": "Warm, declarative, and restrained.",
      "description": "Copy should read like considered counsel, not a real-estate ad.",
      "guidelines_anchor": "brand-guidelines.html#voice-heading",
      "cards": [
        { "title": "Do", "body": "Use grounded language: considered, calm, careful, thoughtful. Mix third person for bios with first/second person for direct client guidance." },
        { "title": "Eyebrows", "body": "Uppercase tracked labels are a signature move: JUST LISTED, REALTOR®, STEP 01 · CONSULT." },
        { "title": "Casing", "body": "Use sentence case for headings, body, labels, and buttons. Step numbers use two digits." },
        { "title": "Avoid", "body": "No exclamation points, emoji, decorative unicode icons, agency-speak, or ampersands in running prose outside the brand name." }
      ],
      "notes": "The voice rules are as important as visual styling. They keep the brand restrained and specific."
    },
    {
      "id": "typography",
      "type": "typography",
      "label": "Typography",
      "title": "Cormorant for presence. Lexend for clarity.",
      "description": "The wordmark remains Lexend Exa. The wider system uses Cormorant Garamond for display and Lexend for body and UI.",
      "guidelines_anchor": "brand-guidelines.html#typography-heading",
      "specimens": [
        {
          "name": "Lexend Exa",
          "role": "Wordmark only",
          "weights": "Light",
          "sample": "TANG & ASSOCIATES",
          "font_family": "'Lexend Exa', sans-serif",
          "font_weight": 300,
          "size": "wordmark"
        },
        {
          "name": "Cormorant Garamond",
          "role": "Display",
          "weights": "Regular · Medium",
          "sample": "Finding the right home across Metro Vancouver.",
          "font_family": "'Cormorant Garamond', Georgia, serif",
          "font_weight": 400,
          "size": "display"
        },
        {
          "name": "Lexend",
          "role": "Body and UI",
          "weights": "Regular · Medium",
          "sample": "David Tang is a Metro Vancouver REALTOR® with RE/MAX Crest Realty, helping families buy, sell, and secure presale opportunities across the Lower Mainland.",
          "font_family": "'Lexend', system-ui, sans-serif",
          "font_weight": 400,
          "size": "body"
        }
      ],
      "notes": "The recommended system type is now Lexend plus Cormorant. Keep Lexend Exa reserved for the lockup."
    },
    {
      "id": "ui",
      "type": "rule-cards",
      "label": "UI",
      "title": "Flat, spacious, and ruled.",
      "description": "The interface system uses whitespace, type, and one-pixel rules instead of decorative elevation.",
      "guidelines_anchor": "brand-guidelines.html#layout-heading",
      "cards": [
        { "title": "Surface", "body": "White page. Near-neutral grey section blocks. White cards with 1 px #E8E8E8 borders." },
        { "title": "Radius", "body": "Default UI blocks are square. Use 4 px for small controls, 10 px for listing/photo cards, 16 px for large photo panels, and pill radius only for actions and tags." },
        { "title": "Motion", "body": "Prefer 250-280 ms colour transitions. Use the loading loop only for short wait states; keep it small, stop it when content is ready, and respect reduced-motion settings." },
        { "title": "States", "body": "Hover moves colour toward gold or adds a subtle listing-card lift. Focus rings stay visible with gold outline and offset." }
      ],
      "notes": "This spread bridges identity and product UI. The loading loop belongs here as product behaviour, not as a brand reveal. It should prevent the brand from drifting into generic rounded-card SaaS styling."
    },
    {
      "id": "photo-media",
      "type": "rule-cards",
      "label": "Photography",
      "title": "Photography direction TBD.",
      "description": "Photography direction is not finalized. Do not treat placeholders, stock imagery, or temporary mood references as final brand guidance.",
      "guidelines_anchor": "brand-guidelines.html#imagery-heading",
      "cards": [
        { "title": "Status", "body": "TBD. Keep photography decisions out of production guidance until the final direction is approved." },
        { "title": "Temporary usage", "body": "Use placeholders only where required for layout testing. Do not present them as brand-approved photography." }
      ],
      "notes": "Photography direction is intentionally unresolved. Keep this as TBD until approved image direction exists."
    },
    {
      "id": "lockup",
      "type": "lockup-formats",
      "label": "Lockup",
      "title": "Fixed lockups, three formats.",
      "description": "Use the bundled SVGs. Do not rebuild the lockup from separate logo and type parts.",
      "guidelines_anchor": "brand-guidelines.html#lockup-heading",
      "formats": [
        {
          "name": "Horizontal",
          "key": "horizontal",
          "src": "../dist/lockup/lockup-primary.svg",
          "use": "Default for marketing pages, document headers, presentation covers, and wide placements.",
          "formula": "Icon height = lockup height. Two-line wordmark right of icon."
        },
        {
          "name": "Stacked",
          "key": "stacked",
          "src": "../dist/lockup/stacked/lockup-primary.svg",
          "use": "Square or portrait formats: certificates, awards, social tiles.",
          "formula": "Icon centred above the two-line wordmark."
        },
        {
          "name": "Single-line",
          "key": "single-line",
          "src": "../dist/lockup/single-line/lockup-primary.svg",
          "use": "Narrow strips: site headers, email signatures, footer bars.",
          "formula": "Icon left. Wordmark set on one line."
        }
      ],
      "notes": "The mark carries brand colour. The wordmark is black or white only. Minimum lockup width is 120 px; below that use the mark alone."
    },
    {
      "id": "co-branding",
      "type": "co-branding",
      "label": "Co-branding",
      "title": "Separate identities. Equal optical weight.",
      "description": "Tang & Associates is David Tang's personal practice brand within RE/MAX Crest Realty. Keep partner and brokerage marks separated until final placement rules are confirmed.",
      "guidelines_anchor": "brand-guidelines.html#cobranding-heading",
      "rows": [
        { "tang_lockup": "../dist/lockup/lockup-primary.svg", "partner": "RE/MAX Crest Realty", "note": "Divider and equal optical weight." },
        { "tang_lockup": "../dist/lockup/lockup-mono-black.svg", "partner": "Partner", "note": "Mono treatment for press where gold is unavailable." }
      ],
      "notes": "Do not merge identities. Keep a divider and clearspace between Tang and any partner or brokerage mark."
    },
    {
      "id": "clearspace",
      "type": "clearspace",
      "label": "Clearspace",
      "title": "A quarter-diameter clearspace.",
      "description": "Maintain clearspace around the mark equal to 25% of the disk's bounding diameter on all sides.",
      "guidelines_anchor": "brand-guidelines.html#clearspace-heading",
      "src": "../dist/logomark.svg",
      "rules": [
        "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."
      ],
      "notes": "Keep the rule simple and mechanical. It applies to print and screen."
    },
    {
      "id": "animations",
      "type": "animations",
      "label": "Animation",
      "title": "Restrained logo reveals.",
      "description": "Three self-contained SVG reveals ship with the kit. Use one-shot in heroes and signatures; use looping reveal variants sparingly.",
      "guidelines_anchor": "brand-guidelines.html#animation-heading",
      "variants": [
        { "name": "A · Disk + carve", "src": "../dist/animations/logomark-disk-carve-loop.svg", "note": "Default brand reveal." },
        { "name": "B · Ring + strokes", "src": "../dist/animations/logomark-ring-strokes-loop.svg", "note": "Lighter editorial moments." },
        { "name": "C · Iris reveal", "src": "../dist/animations/logomark-iris-reveal-loop.svg", "note": "High-attention moments." }
      ],
      "notes": "Animation should feel deliberate and quiet, never decorative noise."
    },
    {
      "id": "donts",
      "type": "donts-grid",
      "label": "Don'ts",
      "title": "Protect the mark and the restraint.",
      "description": "The construction logic breaks under distortion, effects, recolouring, or generic decorative styling.",
      "guidelines_anchor": "brand-guidelines.html#donts-heading",
      "cells": [
        { "demo_type": "stretch", "src": "../dist/logomark.svg", "caption": "Don't stretch or distort." },
        { "demo_type": "recolor", "src": "../dist/logomark.svg", "caption": "Don't recolour outside the approved palette." },
        { "demo_type": "rotate", "src": "../dist/logomark.svg", "caption": "Don't rotate the mark." },
        { "demo_type": "low-contrast", "src": "../dist/logomark.svg", "caption": "Don't use low-contrast gold-on-gold." },
        { "demo_type": "shadow", "src": "../dist/logomark.svg", "caption": "Don't add shadows, glows, or effects." },
        { "demo_type": "redundant-type", "src": "../dist/logomark.svg", "caption": "Don't pair with redundant T+A type." }
      ],
      "notes": "Also avoid gradients, decorative patterns, glass effects, and non-brand accent colours in new system work."
    }
  ]
}