# Diaspora Property Magazine — Brand Identity Guide
**Version:** 2.0
**Date:** May 24, 2026
---
## 1. Brand Strategy & Positioning
### 1.1 Brand Essence
**Core Idea:** *"Your trusted bridge to property back home."*
The brand must simultaneously communicate:
- **Bold Confidence** — unapologetically modern, commanding presence
- **Trust & Security** — the #1 concern for diaspora investors (fraud, distance)
- **Kenyan Heritage** — cultural connection without being cliché
- **Global Sophistication** — the audience lives in London, New York, Toronto, Dubai
- **Forward Momentum** — growth, ambition, building the future
### 1.2 Brand Personality
| Trait | Expression |
|-------|-----------|
| Bold | High-contrast visuals, strong typography, confident color choices |
| Modern | Clean geometric design, tech-forward, cutting-edge aesthetic |
| Professional | Structured layouts, precise spacing, authoritative voice |
| Dynamic | Energetic accent color, motion design, forward-moving imagery |
| Trustworthy | Verified badges, data-driven, transparent |
### 1.3 Brand Voice
- **Tone:** Bold, direct, confident — like a successful diaspora investor mentoring the next generation
- **Language:** Sharp, modern, action-oriented; no fluff; "Build. Invest. Own."
- **Avoid:** Passive voice, overly corporate jargon, tentative language, visual clutter
---
## 2. Brand Name Analysis
**"Diaspora Property Magazine"** is descriptive but long. Consider a shortened brand name for logo/identity:
### Recommended Brand Name: **DPMAG**
**Alternatives considered:**
| Option | Pros | Cons |
|--------|------|------|
| **DPMAG** | Short, punchy, modern, works as social handle | Requires brand building |
| **Diaspora Property** | Clear meaning | Generic, long |
| **Nyumbani** (Swahili: "Home") | Cultural, emotional, unique | May not resonate with non-Swahili speakers |
| **Shamba & Home** | Covers land + houses, Kenyan touch | Niche-sounding |
| **HomeVest Kenya** | Investment + home angle | Sounds like a SACCO |
**Final Recommendation:** Use **"Diaspora Property"** as the full brand with **"DP"** as the bold icon mark. The tagline carries the magazine identity.
**Tagline Options:**
1. *"Build. Invest. Own."* ← **Recommended** (bold, action-driven)
2. *"Invest in Home, from Anywhere"*
3. *"Own Kenya. From Anywhere."*
4. *"The Future of Diaspora Real Estate"*
---
## 3. Color Palette
### 3.1 Design Rationale
The palette is built on **maximum impact with minimum colors** — bold, high-contrast, modern:
1. **Charcoal Black** — Authority, power, sophistication, modern tech aesthetic
2. **Electric Orange** — Energy, ambition, action, boldness, impossible to ignore
3. **Pure White** — Clean space, breathing room, contrast amplifier
This is NOT a safe corporate palette. It's designed to command attention in a crowded feed.
### 3.2 Primary Colors
| Role | Color Name | Hex Code | RGB | Usage |
|------|-----------|----------|-----|-------|
| **Primary** | Obsidian | `#0D0D0D` | 13, 13, 13 | Headers, primary text, hero sections, nav |
| **Accent** | Electric Orange | `#FF5C00` | 255, 92, 0 | CTAs, highlights, badges, key interactions |
| **Base** | Clean White | `#FFFFFF` | 255, 255, 255 | Backgrounds, cards, content areas |
### 3.3 Supporting Colors
| Role | Color Name | Hex Code | RGB | Usage |
|------|-----------|----------|-----|-------|
| **Surface Dark** | Graphite | `#1A1A1A` | 26, 26, 26 | Dark sections, footer, premium areas |
| **Surface Light** | Snow | `#F7F7F7` | 247, 247, 247 | Alternate section backgrounds |
| **Text Primary** | Obsidian | `#0D0D0D` | 13, 13, 13 | Headlines, key text |
| **Text Secondary** | Steel | `#525252` | 82, 82, 82 | Body text, descriptions |
| **Text Tertiary** | Ash | `#8A8A8A` | 138, 138, 138 | Captions, metadata, placeholders |
| **Border** | Smoke | `#E5E5E5` | 229, 229, 229 | Cards, dividers, inputs |
| **Success** | Bold Green | `#00A63E` | 0, 166, 62 | Verified, success, active |
| **Error** | Signal Red | `#E5243B` | 229, 36, 59 | Errors, warnings, removals |
| **Info** | Deep Blue | `#0066FF` | 0, 102, 255 | Links, informational states |
### 3.4 Color Application Rules
```
┌─────────────────────────────────────────────────────────┐
│ HEADER — Obsidian (#0D0D0D) bg │
│ Logo (White + Orange mark) | Nav (White) | CTA Orange │
├─────────────────────────────────────────────────────────┤
│ HERO — White or full-bleed image with dark overlay │
│ Headlines: Obsidian | Accent: Orange | CTA: Orange bg │
├─────────────────────────────────────────────────────────┤
│ CONTENT — White (#FFFFFF) │
│ Body: Steel (#525252) | Links: Orange | Headings: Black│
├─────────────────────────────────────────────────────────┤
│ ALT SECTIONS — Snow (#F7F7F7) │
│ Subtle separation without color noise │
├─────────────────────────────────────────────────────────┤
│ DARK SECTIONS — Graphite (#1A1A1A) │
│ Premium content, magazine features, testimonials │
├─────────────────────────────────────────────────────────┤
│ FOOTER — Obsidian (#0D0D0D) │
│ Text: White | Links: Orange hover | Minimal │
└─────────────────────────────────────────────────────────┘
```
### 3.5 Dark Mode Variant
| Element | Light Mode | Dark Mode |
|---------|-----------|-----------|
| Background | `#FFFFFF` | `#0D0D0D` |
| Surface/Cards | `#F7F7F7` | `#1A1A1A` |
| Primary text | `#0D0D0D` | `#F5F5F5` |
| Secondary text | `#525252` | `#A3A3A3` |
| Orange accent | `#FF5C00` | `#FF7A2E` (slightly lighter for dark bg) |
| Borders | `#E5E5E5` | `#2E2E2E` |
### 3.6 Psychology Behind the Palette
| Color | Emotion Triggered | Why It Matters |
|-------|------------------|----------------|
| Obsidian Black | Power, authority, sophistication, luxury | Commands respect; signals this is a serious investment platform |
| Electric Orange | Energy, action, ambition, urgency, confidence | Drives conversions; impossible to scroll past; signals growth & opportunity |
| Clean White | Clarity, trust, professionalism, space | Lets property content breathe; clean reading experience |
| Bold Green | Trust, verification, success | "Verified" badges that mean something — trust is earned |
---
## 4. Typography
### 4.1 Font Strategy
A **single font family system** used at different weights creates maximum boldness and cohesion. The display font is distinctive and immediately recognizable — it stands out.
### 4.2 Primary Typeface System
| Role | Font | Weight | Source |
|------|------|--------|--------|
| **Display/Headlines** | **Syne** | ExtraBold 800 | Google Fonts (free) |
| **Subheadings** | **Syne** | Bold 700 | Google Fonts (free) |
| **Body/UI** | **Space Grotesk** | 300–700 (variable) | Google Fonts (free) |
### 4.3 Why These Fonts
**Syne (Display):**
- Neo-grotesque with **unconventional proportions** — letters have varying widths creating a unique, bold rhythm
- Tagged: Business, Competent, Loud — exactly what we need
- ExtraBold 800 at large sizes is **unmistakable** — no one scrolls past this
- Originally designed for the Synesthésie art center — artistic DNA
- Goes up to ExtraBold 800 — heavy impact for headlines
- Distinct character: the lowercase "a", "g", and "e" have unique geometry that makes it instantly recognizable
**Space Grotesk (Body/UI):**
- Neo-grotesque with **monospace DNA** (derived from Space Mono) — gives it a techy, distinctive edge
- Tagged: Techno, Business, Competent — professional but not boring
- The distinctive "g" (single-story), square dots, and geometric forms give it personality even at body sizes
- 5 weights (300–700) — enough range for hierarchy
- Excellent screen readability at all sizes
- Pairs perfectly with Syne — both geometric, both unconventional, but different enough to create hierarchy
### 4.4 Type Scale (Desktop)
| Element | Font | Size | Weight | Line Height | Letter Spacing |
|---------|------|------|--------|-------------|----------------|
| Hero/Display | Syne | 64px / 4rem | 800 | 1.0 | -0.03em |
| H1 | Syne | 48px / 3rem | 800 | 1.05 | -0.02em |
| H2 | Syne | 36px / 2.25rem | 700 | 1.1 | -0.01em |
| H3 | Syne | 24px / 1.5rem | 700 | 1.2 | 0 |
| H4 | Space Grotesk | 20px / 1.25rem | 700 | 1.3 | 0 |
| Body Large | Space Grotesk | 18px / 1.125rem | 400 | 1.7 | 0 |
| Body | Space Grotesk | 16px / 1rem | 400 | 1.6 | 0 |
| Body Small | Space Grotesk | 14px / 0.875rem | 400 | 1.5 | 0.01em |
| Caption | Space Grotesk | 12px / 0.75rem | 500 | 1.4 | 0.03em |
| Button | Space Grotesk | 14px / 0.875rem | 700 | 1.0 | 0.05em |
| Nav Link | Space Grotesk | 15px / 0.9375rem | 500 | 1.0 | 0.02em |
| Price/Number | Space Grotesk | varies | 700 | 1.0 | -0.02em |
| Overline/Label | Space Grotesk | 11px / 0.6875rem | 700 | 1.0 | 0.12em (uppercase) |
### 4.5 Type Scale (Mobile)
| Element | Size | Notes |
|---------|------|-------|
| Hero/Display | 40px / 2.5rem | Still bold, still commanding |
| H1 | 32px / 2rem | |
| H2 | 26px / 1.625rem | |
| H3 | 20px / 1.25rem | |
| Body | 16px (unchanged) | Minimum for mobile readability |
### 4.6 Font Loading Strategy (Performance)
```html
```
**CSS Font Stack (fallback):**
```css
:root {
--font-display: 'Syne', 'Arial Black', 'Helvetica Neue', sans-serif;
--font-body: 'Space Grotesk', 'SF Mono', 'Consolas', system-ui, sans-serif;
}
```
### 4.7 Typography Power Moves
These typographic techniques make the brand unforgettable:
| Technique | Application |
|-----------|-------------|
| **ALL CAPS + Wide Tracking** | Overlines, labels, nav links (Space Grotesk 700, +0.12em) |
| **Negative letter-spacing at large sizes** | Hero text (Syne 800, -0.03em) — tight, bold, impactful |
| **Mixed weight contrast** | Syne 800 headline directly above Space Grotesk 400 body — sharp hierarchy |
| **Large type as design element** | Section numbers, stats, prices shown oversized as visual anchors |
| **Uppercase accent phrases** | "VERIFIED" "FEATURED" "NEW" — always Space Grotesk 700, small size, wide tracking |
---
## 5. Logo Concept
### 5.1 Logo Structure
The logo is **bold, geometric, minimal** — a wordmark-first system:
```
FULL LOGO (horizontal):
┌────────────────────────────────────────────────────────┐
│ [DP MARK] DIASPORA PROPERTY │
│ ━━━━━━━━━━━━━━━━━━ (orange line) │
└────────────────────────────────────────────────────────┘
COMPACT LOGO:
┌──────────────────────────────┐
│ DIASPORA │ ← Syne ExtraBold 800
│ PROPERTY │ ← Syne ExtraBold 800
└──────────────────────────────┘
ICON ONLY (favicon, app icon, social avatar):
┌──────┐
│ DP │ ← Geometric, orange on black or black on white
└──────┘
```
### 5.2 Icon Mark Concept
**Concept: Bold Geometric "DP" Monogram**
- Letters "D" and "P" interlocked in a tight geometric form
- Sharp angles, no curves (or minimal) — modern architectural feel
- The negative space between D and P subtly forms a roofline/arrow pointing up
- Works as a **solid block** at small sizes — recognizable at 16px
**Style:** Geometric, heavy, architectural — feels like a building's blueprint symbol.
### 5.3 Logo Typography
- "DIASPORA PROPERTY" — **Syne, ExtraBold 800**, all caps, tight tracking (-0.02em)
- Optional descriptor "MAGAZINE" — **Space Grotesk, Bold 700**, all caps, very wide tracking (+0.15em), small size
The logo IS the typography. No decorative elements. The font's personality does the work.
### 5.4 Logo Color Variants
| Variant | Usage |
|---------|-------|
| Black wordmark + Orange "DP" mark | Primary (light backgrounds) |
| White wordmark + Orange "DP" mark | On dark backgrounds |
| All Black | Print, formal applications |
| All White | Dark overlays, video |
| Orange mark only | Favicon, watermark, app icon |
### 5.5 Logo Clear Space & Sizing
- Minimum clear space = cap-height of the "D" on all sides
- Minimum width: 120px (digital), 30mm (print)
- Never distort, rotate, add shadows, or outline the logo
---
## 6. Visual Language & Design System
### 6.1 Photography Style
| Element | Direction |
|---------|-----------|
| **Property photos** | High-contrast, architectural angles, dramatic lighting; dusk/dawn shots with warm interior glow |
| **People** | Confident, successful diaspora professionals; candid not posed; modern environments |
| **Landscapes** | Bold Kenyan scenery — Nairobi skyline at dusk, aerial shots, dramatic perspectives |
| **Color treatment** | High contrast, slightly desaturated with pops of warmth; bold blacks in shadows |
| **Aspect ratios** | Hero: 21:9 (cinematic) / Listings: 4:3 / Thumbnails: 1:1 / Magazine covers: 3:4 |
| **Overlay treatment** | Dark gradient overlays on images for text legibility |
### 6.2 Iconography
- **Style:** Solid geometric, 2px stroke weight, sharp corners (not rounded)
- **Size:** 24px base grid
- **Color:** Obsidian (`#0D0D0D`) default; Electric Orange (`#FF5C00`) for active/hover states
- **Source:** Lucide Icons (sharp variant) or custom geometric set
- **Distinctive feature:** Icons with cut corners / angular edges matching brand geometry
### 6.3 Card Design (Property Listings)
```
┌──────────────────────────────────────┐
│ [PROPERTY IMAGE - 4:3] │
│ │
│ ┌───────────────┐ │
│ │ ● FEATURED │ (orange) │
│ └───────────────┘ │
├──────────────────────────────────────┤
│ KSH 12,500,000 │ ← Space Grotesk 700, Black, 22px
│ ━━━━━━━━━━━━ (orange accent line) │
│ 3-Bed Villa, Karen │ ← Space Grotesk 500, Steel
│ │
│ 3 BED · 2 BATH · 2,400 SQFT │ ← Space Grotesk 500, Ash, uppercase
│ ─────────────────────────────────── │
│ ABC Properties → │ ← Space Grotesk 400 + arrow
└──────────────────────────────────────┘
```
### 6.4 Spacing System
Base unit: **8px** (larger base = more breathing room = more bold)
| Token | Value | Usage |
|-------|-------|-------|
| `space-1` | 4px | Tight inline spacing |
| `space-2` | 8px | Icon padding, inline gaps |
| `space-3` | 12px | Badge padding |
| `space-4` | 16px | Input padding, small gaps |
| `space-6` | 24px | Card padding, component gaps |
| `space-8` | 32px | Section padding (mobile) |
| `space-10` | 40px | Section gaps |
| `space-12` | 48px | Large section breaks |
| `space-16` | 64px | Section padding (desktop) |
| `space-20` | 80px | Hero padding |
| `space-24` | 96px | Major section separation |
| `space-32` | 128px | Page section hero areas |
### 6.5 Border Radius
| Element | Radius |
|---------|--------|
| Buttons | 0px (sharp/square) **OR** 4px (barely rounded) |
| Cards | 0px or 4px |
| Input fields | 4px |
| Tags/badges | 2px |
| Images | 0px (full bleed, sharp) |
| Avatar | 50% (circle — only exception) |
| Modal | 0px |
**Design Note:** Sharp corners = bold, architectural, modern. This brand does NOT use soft, rounded corners. Everything is precise and geometric.
### 6.6 Shadows & Elevation
```css
/* Minimal shadows — this brand uses borders and contrast instead */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
/* Preferred: Use border + background contrast instead of shadows */
--border-default: 1px solid #E5E5E5;
--border-hover: 1px solid #0D0D0D;
--border-active: 2px solid #FF5C00;
```
---
## 7. UI Component Styling
### 7.1 Buttons
| Type | Style |
|------|-------|
| **Primary** | Electric Orange bg (`#FF5C00`) + White text, bold 700, sharp corners |
| **Secondary** | Obsidian bg (`#0D0D0D`) + White text |
| **Outline** | Transparent bg + Obsidian 2px border + Obsidian text |
| **Ghost** | No border/bg + Obsidian text, hover: Snow bg |
| **Destructive** | Signal Red bg (`#E5243B`) + White text |
**Button States:**
- Default: As above
- Hover: Scale 1.02 + slight darken (Orange → `#E55200`)
- Active: Scale 0.98
- Disabled: 30% opacity, no pointer
- Focus: 3px Orange ring, 2px offset
**Button Sizing:**
| Size | Padding | Font Size | Height |
|------|---------|-----------|--------|
| Small | 8px 16px | 13px | 32px |
| Medium | 12px 24px | 14px | 40px |
| Large | 16px 32px | 16px | 48px |
| XL | 20px 40px | 18px | 56px |
### 7.2 Badges & Labels
```
┌──────────────────┐
│ ● VERIFIED │ ← Bold Green bg (#00A63E) + White text
└──────────────────┘
┌──────────────────┐
│ ● FEATURED │ ← Electric Orange bg (#FF5C00) + White text
└──────────────────┘
┌──────────────────┐
│ ● PREMIUM │ ← Obsidian bg (#0D0D0D) + White text
└──────────────────┘
┌──────────────────┐
│ ● NEW │ ← White bg + Obsidian border + Black text
└──────────────────┘
```
All badges: Space Grotesk 700, 11px, uppercase, +0.08em tracking, 2px radius.
### 7.3 Magazine Article Styling
```
Article pages — bold editorial, not soft magazine:
- Maximum content width: 680px (focused reading)
- Body font size: 18px Space Grotesk 400
- Line height: 1.7
- First paragraph: No drop cap — instead, BOLD FIRST LINE (Space Grotesk 700)
- Pull quotes: Syne 800, 28px, Obsidian, left-aligned with 4px Orange left-border
- Section breaks: ━━━ (orange horizontal rule, 40px width)
- Image captions: 12px, Space Grotesk 500, uppercase, wide tracking
- Article headline: Syne 800, 40px, tight letter-spacing
```
### 7.4 Navigation
```
┌─────────────────────────────────────────────────────────────┐
│ [DP] DIRECTORY MAGAZINE NEWS LISTINGS ADVERTISE [●] │
│ logo login │
└─────────────────────────────────────────────────────────────┘
- Background: White (scrolled) or Transparent (hero)
- Font: Space Grotesk 500, 14px, uppercase, +0.05em tracking
- Active state: Orange underline (2px, offset 8px below)
- Mobile: Full-screen overlay, Syne 800 links, 32px size
```
---
## 8. Patterns & Visual Devices
### 8.1 Geometric Grid Pattern
A bold geometric grid pattern as a brand signature element:
- Angular lines forming a subtle architectural grid
- Used at 5-8% opacity on dark sections
- Orange accent lines at intersections (sparingly)
- Think: blueprint/architectural drawing aesthetic
### 8.2 The Orange Line
A **signature design element** — a bold horizontal or vertical orange line (`#FF5C00`, 3-4px thick) used as:
- Section dividers
- Underline on active navigation
- Left-border on pull quotes and highlights
- Accent on cards (bottom border)
- Progress indicators
This one element ties the entire brand together.
### 8.3 Gradient Usage
```css
/* Hero overlay — dramatic, cinematic */
--gradient-hero: linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.9) 100%);
/* Dark premium sections */
--gradient-dark: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%);
/* Orange accent glow (subtle, for hover states or featured items) */
--gradient-orange-glow: radial-gradient(ellipse at center, rgba(255,92,0,0.15) 0%, transparent 70%);
/* NEVER: rainbow gradients, multicolor, or "shiny" effects */
```
---
## 9. Brand Applications
### 9.1 Email Templates
- Header: Obsidian strip with White logo + Orange mark
- Body: White bg, Space Grotesk 16px
- CTAs: Orange buttons (sharp corners)
- Headings: Syne 700
- Footer: Snow gray bg, minimal
### 9.2 Social Media
| Platform | Profile Photo | Cover/Banner |
|----------|--------------|-------------|
| All | Orange "DP" mark on Black circle | High-contrast property shot + bold Syne headline |
| Instagram | — | Dark bg, bold white type, orange accents, property carousels |
| X/Twitter | — | Minimal stat cards, orange accent data points |
| LinkedIn | — | Professional, clean, market reports |
| TikTok | — | Behind-the-scenes property tours, bold text overlays |
**Social Media Visual Rules:**
- Always use Syne ExtraBold for overlay text
- Dark backgrounds preferred (more scroll-stopping)
- Orange accent on one key data point per image
- Never more than 5 words of overlay text
### 9.3 Magazine Cover Template
```
┌────────────────────────────────────┐
│ │
│ [Full-bleed property photograph │
│ — dramatic, cinematic angle] │
│ │
│ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │ ← Dark gradient overlay bottom
│ │
│ EDITION 12 │ ← Space Grotesk 700, Orange, uppercase
│ │
│ INSIDE KAREN'S │
│ MOST EXCLUSIVE │
│ NEW DEVELOPMENT │ ← Syne 800, White, 36px, tight
│ │
│ ━━━━━━━━━━ (orange line) │
│ │
│ [DIASPORA PROPERTY logo - white] │
│ │
└────────────────────────────────────┘
```
---
## 10. Tailwind CSS Configuration
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
obsidian: {
DEFAULT: '#0D0D0D',
50: '#F5F5F5',
100: '#E5E5E5',
200: '#CCCCCC',
300: '#999999',
400: '#666666',
500: '#333333',
600: '#1A1A1A',
700: '#0D0D0D', // PRIMARY
800: '#080808',
900: '#030303',
},
orange: {
DEFAULT: '#FF5C00',
50: '#FFF3ED',
100: '#FFE2CC',
200: '#FFC299',
300: '#FF9E5C',
400: '#FF7A2E',
500: '#FF5C00', // PRIMARY
600: '#E55200',
700: '#CC4900',
800: '#993700',
900: '#662400',
},
steel: {
DEFAULT: '#525252',
},
ash: {
DEFAULT: '#8A8A8A',
},
snow: {
DEFAULT: '#F7F7F7',
},
smoke: {
DEFAULT: '#E5E5E5',
},
success: {
DEFAULT: '#00A63E',
},
error: {
DEFAULT: '#E5243B',
},
},
fontFamily: {
display: ['Syne', 'Arial Black', 'Helvetica Neue', 'sans-serif'],
body: ['Space Grotesk', 'SF Mono', 'Consolas', 'system-ui', 'sans-serif'],
},
fontSize: {
'display': ['4rem', { lineHeight: '1.0', letterSpacing: '-0.03em', fontWeight: '800' }],
'h1': ['3rem', { lineHeight: '1.05', letterSpacing: '-0.02em', fontWeight: '800' }],
'h2': ['2.25rem', { lineHeight: '1.1', letterSpacing: '-0.01em', fontWeight: '700' }],
'h3': ['1.5rem', { lineHeight: '1.2', fontWeight: '700' }],
'h4': ['1.25rem', { lineHeight: '1.3', fontWeight: '700' }],
'body-lg': ['1.125rem', { lineHeight: '1.7' }],
'body': ['1rem', { lineHeight: '1.6' }],
'body-sm': ['0.875rem', { lineHeight: '1.5', letterSpacing: '0.01em' }],
'caption': ['0.75rem', { lineHeight: '1.4', letterSpacing: '0.03em' }],
'overline': ['0.6875rem', { lineHeight: '1.0', letterSpacing: '0.12em', fontWeight: '700' }],
},
borderRadius: {
'none': '0px',
'sm': '2px',
'md': '4px',
},
boxShadow: {
'card': '0 4px 16px rgba(0, 0, 0, 0.10)',
'card-hover': '0 16px 48px rgba(0, 0, 0, 0.14)',
},
},
},
}
```
---
## 11. Competitor Differentiation
| Competitor | Their Brand | How We Differ |
|------------|------------|---------------|
| BuyRentKenya | Blue/white, functional, classifieds-feel | We are editorial-first, premium magazine aesthetic |
| Property24 Kenya | Red/white, utilitarian | We target diaspora specifically, trust-forward |
| Jiji Kenya | Green/yellow, mass market | We are curated/vetted, not open marketplace |
| HassConsult | Corporate blue | We are consumer-facing media brand, not consultancy |
**Our Unique Visual Position:** Premium editorial magazine meets modern proptech. Think *Architectural Digest* meets *Zillow* — but for Kenyans abroad.
---
## 12. Brand Do's & Don'ts
### Do's ✓
- Use DM Serif Display only for display/headlines (never body text)
- Maintain generous whitespace — let content breathe
- Use warm photography with natural light
- Apply Gold sparingly — it's the accent, not the base
- Keep verified/trust signals prominent
- Show real Kenyan properties and landscapes
### Don'ts ✗
- Don't use the Kenya flag literally (no flag overlays, no red-green-black stripes)
- Don't use Comic Sans, Papyrus, or "African-looking" novelty fonts
- Don't use stock photos of generic Western properties
- Don't overuse Gold — it becomes gaudy when oversaturated
- Don't use pure black (`#000000`) — always use Navy (`#0A1628`)
- Don't mix more than 2 typefaces on any single page
- Don't use low-contrast text (WCAG AA minimum: 4.5:1 ratio)
- Don't crowd the layout — property buyers need space to browse
---
## 13. Accessibility
| Requirement | Implementation |
|------------|----------------|
| Color contrast | Navy on Ivory = 16.2:1 ✓ (AAA) |
| Color contrast | Slate on White = 7.1:1 ✓ (AAA) |
| Color contrast | Gold on Navy = 5.8:1 ✓ (AA) |
| Focus states | 3px Gold ring, clearly visible |
| Font size minimum | 16px body text |
| Touch targets | 44px minimum (mobile) |
| Alt text | Required on all property images |
| Heading hierarchy | Sequential H1 → H6, no skipping |
---
## 14. Implementation Checklist
- [ ] Purchase domain(s): diasporaproperty.com / .co.ke
- [ ] Set up Google Fonts (DM Serif Display + Plus Jakarta Sans)
- [ ] Configure Tailwind with brand tokens (config above)
- [ ] Design logo in vector (SVG) — hire designer with brief above
- [ ] Create color/font tokens in CSS variables
- [ ] Build component library (buttons, cards, badges, nav)
- [ ] Set up brand photography guidelines for contributors
- [ ] Create social media templates (Canva/Figma)
- [ ] Design email templates with brand styling
- [ ] Create magazine cover template system
---
*This brand identity positions Diaspora Property Magazine as the premium, trustworthy destination for Kenyan diaspora real estate investment — sophisticated enough for London professionals, warm enough to feel like home.*