BuyWhere Brand Identity System
Version: 2.0
Status: Active
Last Updated: 2026-04-16
Owner: Proto (UI/UX Designer)
Legal Entity: ZHC Labs Pte. Ltd.
Overview
This document defines the BuyWhere brand identity system for use across all public-facing properties. Brand should read credible-infrastructure, not consumer-marketplace—reflecting our position as the definitive agent-native product catalog API for Southeast Asia and globally.
1. Brand Assets
1.1 Asset Locations
All brand assets are located in /static/brand/:
| Asset | File | Description |
|---|---|---|
| Favicon (SVG) | favicon.svg | Primary vector favicon |
| Horizontal Logo | logo-horizontal.svg | Default wordmark + icon |
| Horizontal Logo (Dark) | logo-horizontal-dark.svg | Dark mode variant |
| Monogram | monogram.svg | Icon-only for small contexts |
| Brand Tokens | tokens.css | CSS custom properties |
1.2 Favicon Specifications
Required files for production:
favicon.svg— Primary vector (✓ Created)favicon.ico— Multi-resolution (16×16, 32×32, 48×48) — needs conversionapple-touch-icon.png— 180×180 Apple touch icon — needs creationog-image.png— 512×512 Open Graph fallback — needs creation
Implementation:
<link rel="icon" type="image/svg+xml" href="/static/brand/favicon.svg">
<link rel="icon" type="image/x-icon" href="/static/brand/favicon.ico">
<link rel="apple-touch-icon" href="/static/brand/apple-touch-icon.png">
<meta property="og:image" content="/static/brand/og-image.png">
2. Color Palette
2.1 Primary Colors
| Name | Hex | RGB | Usage |
|---|---|---|---|
| BuyWhere Blue | #0066FF | 0, 102, 255 | Primary brand color, CTAs, links |
| Deep Navy | #0A0E1A | 10, 14, 26 | Primary text, dark backgrounds |
| Pure White | #FFFFFF | 255, 255, 255 | Backgrounds, reversed text |
2.2 Secondary Colors
| Name | Hex | RGB | Usage |
|---|---|---|---|
| Sky Light | #E8F1FF | 232, 241, 255 | Subtle backgrounds, hover states |
| Steel Gray | #6B7280 | 107, 114, 128 | Secondary text, captions |
| Slate | #374151 | 55, 65, 81 | Body text on light backgrounds |
| Cloud | #F9FAFB | 249, 250, 251 | Page backgrounds, cards |
2.3 Accent Colors
| Name | Hex | Usage |
|---|---|---|
| Teal | #00D4C8 | Highlights, success states |
| Amber | #F5A623 | Warnings, attention |
2.4 Dark Mode Palette
| Name | Hex | Usage |
|---|---|---|
| Background Dark | #0F0F1A | Primary dark background |
| Card Dark | #1A1A2E | Card and elevated surfaces |
| Border Dark | #2D2D44 | Borders in dark mode |
| Text Primary Dark | #F9FAFB | Primary text in dark mode |
| Text Secondary Dark | #9CA3AF | Secondary text in dark mode |
3. Typography
3.1 Font Families
Primary: Inter
- Weights: 400, 500, 600, 700
- Fallback:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Monospace: JetBrains Mono
- Weights: 400, 500
- Fallback:
"SF Mono", "Fira Code", Consolas, monospace
3.2 Type Scale
| Style | Size | Weight | Line Height | Tracking |
|---|---|---|---|---|
| Display | 48px | 700 | 56px | -0.02em |
| H1 | 36px | 700 | 44px | -0.01em |
| H2 | 28px | 600 | 36px | 0 |
| H3 | 22px | 600 | 30px | 0 |
| Body | 16px | 400 | 24px | 0 |
| Caption | 12px | 500 | 16px | 0.02em |
4. Logo System
4.1 Primary Logo
The BuyWhere wordmark combined with a location pin / search hybrid icon.
Variants:
| Variant | File | Use Case |
|---|---|---|
| Horizontal (default) | logo-horizontal.svg | Website headers, docs |
| Horizontal (dark) | logo-horizontal-dark.svg | Dark mode contexts |
| Monogram | monogram.svg | Favicons, avatars, app icons |
4.2 Logo Usage Rules
Do:
- Use provided SVG files at native resolution
- Maintain minimum clear space (height of "B")
- Use at minimum 24px height for digital
Don't:
- Stretch or distort the logo
- Change icon-to-wordmark ratio
- Add shadows, gradients, or effects
- Place on low-contrast backgrounds (< 4.5:1)
5. Social / OG Image Template
Dimensions: 1200×630px (Open Graph standard)
Template Elements:
- Brand logo (left-aligned or centered)
- Tagline: "The API for AI Commerce"
- Background: Deep Navy gradient
- Accent: BuyWhere Blue
Files needed:
og-image.png— 1200×630 — needs creation
6. Implementation Checklist
- SVG favicon created (
/static/brand/favicon.svg) - Horizontal logo created (
/static/brand/logo-horizontal.svg) - Dark mode logo created (
/static/brand/logo-horizontal-dark.svg) - Monogram created (
/static/brand/monogram.svg) - Brand tokens CSS created (
/static/brand/tokens.css) - favicon.ico generated from SVG
- apple-touch-icon.png created (180×180)
- og-image.png created (1200×630)
- Favicon references updated in mkdocs config
- Placeholder SVG favicon replaced
7. Contact
For brand questions or updates, contact the Head of Design (Iris) or the assigned designer (Proto).
This brand identity system is maintained by the BuyWhere design team. For updates, coordinate with the Head of Design.