# Brand Guide — Noble Collectable

The visual identity for Noble Collectable: graded, authenticated football card collectibles.

---

## Logo

### Primary Lockup

The primary logo combines the crest icon with the wordmark "NOBLE COLLECTABLE". Use this wherever possible for maximum brand presence (websites, social media headers, email signatures, printed materials).

**File:** `../brand/logo/noblecollectable-logo-primary.svg`

**Usage:**
- Websites (header, footer, about page)
- Social media profiles (banner, logo)
- Email signatures
- Business cards
- Printed marketing materials
- Store receipts

### Icon (Crest Shield)

The crest shield stands alone. Use for:
- Favicon (website browser tab)
- App icons
- Social media profile pictures
- Small digital spaces where the full wordmark doesn't fit
- Badges, stickers, or merchandise

**File:** `../brand/logo/noblecollectable-logo-icon.svg`

**Minimum size:** 32×32 pixels (at this size, the "NC" is still readable)

### Wordmark

"NOBLE COLLECTABLE" text only. Use for:
- Section headers on the website
- Social media captions
- Document headers
- When the icon must be placed separately

**File:** `../brand/logo/noblecollectable-logo-wordmark.svg`

### Favicon

Simplified, optimized version of the crest for browser tabs and app home screen icons.

**File:** `../brand/logo/noblecollectable-favicon.svg`

**Usage:**
- Website favicon (16×16, 32×32, 64×64px exports)
- Apple touch icon (iPhone/iPad home screen)
- Android app icon (with slight padding/background as needed)

---

## Color Palette

### Primary Colors

| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| **Burgundy 800** | `#5a1429` | rgb(90, 20, 41) | Primary brand color for text, outlines, strong elements |
| **Gold 400** | `#d4a550` | rgb(212, 165, 80) | Accent, highlights, premium details |

### Secondary/Supporting Colors (Website)

| Name | Hex | RGB | Use |
|------|-----|-----|-----|
| **Navy 900** | `#0c1a3f` | rgb(12, 26, 63) | Navigation, primary buttons, headers |
| **Slate 100** | `#f1f5f9` | rgb(241, 245, 249) | Light backgrounds, card backgrounds |
| **Slate 600** | `#475569` | rgb(71, 85, 105) | Secondary text, captions, borders |
| **Slate 50** | `#f8fafc` | rgb(248, 250, 252) | Page background, subtle fills |

### Semantic Colors

| Name | Hex | Use |
|------|-----|-----|
| **Success Green** | `#059669` | Positive actions (purchase complete, stock available) |
| **Warning Orange** | `#ea580c` | Cautions (low stock, pending order) |
| **Critical Red** | `#dc2626` | Errors, unavailable items |

### Dark Mode Adaptations

When building the website in dark mode:
- **Text:** Use Slate 100 (`#f1f5f9`) instead of Navy 900
- **Backgrounds:** Use Navy 900 (`#0c1a3f`) or darker
- **Accent (Gold):** Brighten slightly to `#e5c158` for contrast on dark
- **Burgundy:** Lighten to `#a82855` for readability on dark backgrounds
- **Borders:** Use Slate 600 with transparency

---

## Typography

### Display Font: Georgia (Serif)

**Usage:** Logo "NC" initials, large headings, premium brand moments

**Characteristics:**
- Classic, heritage-inspired serif
- Conveys trust and established authority
- System font (built into all modern OS/browsers, no CDN needed)
- Weights used: Regular (400), Bold (700)

**Example:** The "NC" in the crest badge

### Body Font: Arial / System Sans (San-Serif)

**Usage:** All body text, navigation, labels, UI elements

**Characteristics:**
- Clean, accessible, highly legible
- System-standard (available everywhere, no CDN needed)
- Professional and modern
- Weights used: Regular (400), Bold (700)

**Examples:** Navigation menu, product descriptions, buttons

### Font Pairing Rationale

**Georgia + Arial** is deliberate:
- Georgia's serif heritage signals premium collectibles and trust (like auction houses, galleries, luxury brands)
- Arial's contemporary sans-serif keeps the interface modern and accessible
- No dependency on external font servers (critical for portability and reliability)
- Pairs naturally without feeling trendy or templated

### Type Scale (Web)

Use these sizes consistently across the website:

| Element | Size | Weight | Letter-spacing |
|---------|------|--------|-----------------|
| H1 (Page title) | 48–56px | 700 | -0.02em |
| H2 (Section title) | 32–40px | 700 | -0.01em |
| H3 (Subsection) | 24–28px | 700 | 0 |
| Body text | 14–16px | 400 | 0 |
| Captions/Labels | 12–13px | 400 | 0.05em |
| Button text | 14px | 600 | 0.5px |

---

## Logo Usage Rules

### Clear Space

Maintain a minimum clear space (empty space) around the logo equal to the height of the "NC" initials. This prevents visual clutter and ensures the logo reads clearly.

```
┌─────────────────────┐
│  ← clear space →    │
│   [LOGO CREST]      │
│  ← clear space →    │
└─────────────────────┘
```

### Minimum Sizes

- **Primary lockup (icon + wordmark):** 200px wide minimum
- **Icon alone (crest shield):** 32×32px minimum (favicon size)
- **Wordmark only:** 120px wide minimum

**Below these sizes, the logo becomes illegible and should not be used.**

### Backgrounds

**Light backgrounds:**
- Use Burgundy 800 (`#5a1429`) for the crest outline and text
- Use Gold 400 (`#d4a550`) for accents
- Pair with white or Slate 50 backgrounds

**Dark backgrounds:**
- Use Gold 400 (`#d4a550`) for the crest outline (or brighten to `#e5c158`)
- Use darkened backgrounds (Navy 900 or darker)
- Ensure sufficient contrast (WCAG AA standard: 4.5:1 minimum)

### One-Color Versions (Simplified)

When color printing or reproduction is not available:
- **All Burgundy:** Use Burgundy 800 for all elements
- **All Gold:** Use Gold 400 for all elements (less common, for special uses)
- **Inverse (negative space):** Crest outline cut from a colored background

### Do's and Don'ts

✅ **DO:**
- Use the provided SVG files — they scale infinitely without quality loss
- Maintain the aspect ratio (don't stretch or skew)
- Use full-color versions on white, light, or dark backgrounds
- Place the icon and wordmark with adequate clear space
- Export to PNG/JPG only when necessary (web use should be SVG)

❌ **DON'T:**
- Rotate, skew, or distort the logo
- Change the colors (except dark-mode adjustments listed above)
- Remove or modify elements (the gold bar, shield, "NC")
- Place the logo on backgrounds where it lacks sufficient contrast
- Embed the logo at less than the minimum size (use icon-only at small sizes instead)
- Use drop shadows or 3D effects
- Outline the entire logo in a different color (only adjust core colors for theme)

---

## Brand Voice & Tone

**Noble Collectable** speaks with:
- **Confidence:** Premium, trustworthy, knowledgeable
- **Clarity:** Straightforward language, jargon explained where needed
- **Respect:** Honors the collector's passion and expertise
- **Professionalism:** Formal without being stuffy; modern without being casual

Example tone: *"Graded PSA 9 — authenticated and insured. This is the real deal."*

---

## Application Examples

### Website Hero Section

- Gold accent bar separates tagline from main heading
- Burgundy text on Slate 50 or white background
- Primary logo in top-left header

### Product Cards

- Navy 900 text on Slate 100 or white card background
- Small gold accent bar under product title
- Burgundy price text (premium feel)
- "Graded" badge in Navy with gold trim

### Email Header

- Primary logo (200px wide minimum) left-aligned
- Burgundy divider line below
- Gold accents on section breaks

### Social Media

- Favicon or icon (crest only) in profile picture
- Primary logo in Instagram bio or link
- Burgundy hashtag: #NobleCollectable
- Gold accent lines in post graphics

### Dark Mode (Website)

- Navy 900 backgrounds with Slate 100 text
- Gold accents brighten to `#e5c158`
- Logo outlined in gold or brightened burgundy
- Sufficient contrast maintained throughout

---

## File Organization

All brand assets are stored in `/brand/`:

```
brand/
├── logo/
│   ├── noblecollectable-logo-primary.svg      (full lockup)
│   ├── noblecollectable-logo-icon.svg         (crest shield)
│   ├── noblecollectable-logo-wordmark.svg     (text only)
│   └── noblecollectable-favicon.svg           (simplified for 32–64px)
└── [color palette file, if needed]
```

---

## Future Extensions

### Typography
- If a custom typeface is commissioned later, it should pair with the premium, heritage aesthetic (likely a serif for display, complementary sans for body)

### Secondary Mark
- A small "Verified" or "Authenticated" seal using the shield shape and gold accents (for product listings)

### Illustration Style
- If illustrations are added (player illustrations, grading badge graphics), they should use the Burgundy/Gold palette and clean, vector-based style (no photorealism or AI-generated imagery)

---

## Brand Evolution

This guide is **version 1.0** (Phase 1, August 2026). As the brand scales:
- Monitor logo performance at different sizes and contexts
- Collect feedback from customers and staff on recognition/trust
- Document any adjustments for consistency
- Update this guide after any significant changes

---

## Questions or Adjustments?

If you need:
- High-res PNG exports (for print): Open SVG in browser, right-click → "Save image as PNG"
- Color adjustments for specific applications: Refer to the palette hex values and adjust carefully
- New versions or variations: Contact Yousha Rizvi (developer)

---

**Document Version:** 1.0  
**Last Updated:** August 2026  
**Status:** Finalized, ready for Phase 2 implementation