ROADMAP - Dual Mode Brand System
Light Mode (Default)
ROADMAP Logo
Dual Mode Brand System

Logo System

Compass Mark · Navigation · Direction

ROADMAP Logo Light
Light Background
ROADMAP Logo Dark
Dark Background
Logo Meaning
The compass symbolizes navigation, direction, and finding your way in international markets. Four cardinal points represent the four core systems: Offer, Funnel, Content, Backend. The broken circle indicates movement, progress, and the journey rather than a closed loop.

Color System

Light Mode Palette (Default)

Warm White
#FEFCF8
Primary background, warm base
Light Beige
#F5F1E8
Secondary background, cards
Pure White
#FFFFFF
Tertiary background, contrast
Deep Black
#0A0A0A
Primary text, headlines
Medium Grey
#4A4A4A
Secondary text
Light Grey
#6B6B6B
Tertiary text, captions

Dark Mode Palette

Pure Black
#000000
Primary background
Charcoal
#0A0A0A
Secondary background
Dark Grey
#1A1A1A
Tertiary background, cards
Pure White
#FFFFFF
Primary text, emphasis
Platinum
#E5E4E2
Secondary text
Silver
#C0C0C0
Tertiary text, labels

Accent Colors (Shared)

Navy Deep
#0F1E3D
Dark sections, depth
Yacht Club Navy
#1C3A57
Primary accent, borders
Navy Medium
#2C5F8D
Interactive elements
Steel Blue
#4A7C9E
Highlights, hover states
Champagne Gold
#D4A574
Premium accent (use sparingly)
Rose Gold
#B8956A
Secondary premium accent

Typography System

Unbounded + Inter

Unbounded Regular - Display H1
International Scale
Unbounded Light - Display H2
Premium Systems
Unbounded Regular - Display H3
Launch Framework
Inter Semibold - Section Headers
Core Components
Inter Regular - Body Text
This is body text optimized for readability. Inter maintains excellent legibility at all sizes while supporting the premium aesthetic. Line height and letter spacing are calibrated for comfortable reading across all devices and contexts.
Inter Semibold Small Caps - Labels
Module 01 - Foundation

Dual Mode System

Light vs Dark - When to Use

Light Mode (Default)
Use light mode as your default for maximum readability and approachability. The warm beige tones create an expensive, old-money feel without being cold or sterile.
Best for: Course content, landing pages, long-form reading, sales pages, educational materials
Dark Mode (Impact)
Use dark mode for impact moments, premium sections, and visual contrast. Creates drama and emphasizes key information without overwhelming the user.
Best for: Title slides, hero sections, pricing pages, testimonials, closing sections

Presentation Examples

Light and Dark Applications

Light Mode - Content Slide
Light Default
Build Systems That Scale
International launch framework for serious experts
Dark Mode - Impact Slide
Dark Impact
Your Expert Is Ready
The Market Isn't
Why Ukrainian products don't sell internationally
Warm Light - Premium Feel
Warm Premium
Four Core Systems
Offer · Funnel · Content · Backend

Usage Guidelines

When to Use Each Mode

Light Mode For
  • Course lessons and educational content
  • Landing pages and sales pages
  • Long-form reading materials
  • Detailed frameworks and diagrams
  • FAQ sections and support content
  • Default state for all pages
  • Mobile-first experiences
  • Accessibility priority
Dark Mode For
  • Hero sections and first impressions
  • Pricing pages and investment levels
  • Testimonial sections
  • Title slides in presentations
  • Closing/CTA sections
  • Premium tier highlights
  • Video backgrounds
  • Creating visual breaks

Pricing Display

Dual Mode Investment Levels

Level 01
Foundation
€497
  • Course access
  • Framework templates
  • Community access
  • Monthly Q&A calls
Level 04
Partner
€4,997
  • Everything in Master
  • Co-launch partnership
  • Revenue share model
  • Direct implementation
ROADMAP
Not For Everyone