Skip to content

Design.md

Latest commit

 

History

History
691 lines (522 loc) · 20.9 KB

Design.md

File metadata and controls

691 lines (522 loc) · 20.9 KB
Raw
title Brandon: Architect of Discovery
slug brandon-architect-of-discovery
version 1.0.0
description A cinematic editorial design system for decks, websites, posters, social assets, and campaign materials based on Brandon: Architect of Discovery.
theme Futuristic Human Development
formats
slide_deck website poster phone_wallpaper social_post story_reel
16:9
responsive
4:5
1440x3168
4:5
9:16
tokens
colors typography spacing borders radius imagery
paper_background warm_cream ink_black deep_charcoal signal_gold muted_red deep_blue_green soft_tan
value role
#E5DAC6
Main canvas, slide backgrounds, website sections
value role
#F0E8D6
Cards, callouts, text box fills
value role
#12110F
Title bars, outlines, primary type
value role
#1F1D19
Secondary dark blocks
value role
#B68D47
Highlights, lines, annotations, icons
value role
#892620
Rebellion, creative signal, key emphasis
value role
#25475B
Systems, technology, discipline markers
value role
#D5C6A9
Dividers, secondary panels
font_families type_scale
display accent_hand editorial_serif body mono
value role
DIN Condensed Bold, Bebas Neue, Oswald, Arial Narrow, sans-serif
Hero titles, black title bars, cinematic section labels
value role
Bradley Hand, Marker Felt, Caveat, handwritten
Human annotations, subtitles, journal-like emphasis
value role
New York, Georgia, Times New Roman, serif
Short editorial taglines and reflective copy
value role
Trebuchet MS, Helvetica Neue, Arial, sans-serif
Readable paragraphs, bullets, website body text
value role
SF Mono, Menlo, Courier New, monospace
Production labels, shot notes, metadata, coordinates
hero title section_label body caption metadata
size line_height weight letter_spacing transform
96-132px
0.9
800
0
uppercase
size line_height weight letter_spacing transform
48-64px
1.0
800
0
uppercase
size line_height weight letter_spacing transform
24-34px
1.0
800
0
uppercase
size line_height weight letter_spacing
18-24px
1.35
400
0
size line_height weight letter_spacing
14-18px
1.25
400
0
size line_height weight letter_spacing transform
12-16px
1.2
400
0.02em
uppercase
hairline grid_gap panel_padding page_margin
1px
24-32px
24-40px
64-96px
hairline panel artboard
1px solid #12110F
4px solid #12110F
6px solid #12110F
default image_panel button
0-8px
0-4px
4px
lighting texture treatment
Dramatic but clean cinematic lighting
Natural skin texture, subtle paper grain, realistic proportions
Editorial documentary realism with grounded near-future details

Brandon: Architect of Discovery

Core Concept

Brandon: Architect of Discovery is a cinematic human-development world where sports, music, street culture, wellness, learning, community, and AI merge into one mission: helping people become more integrated versions of themselves.

The design language should feel like a premium editorial storyboard board, a film planning document, and a future-facing personal brand system. It should be polished and grounded, not overly glossy or sci-fi. The future should feel like the modern East Coast evolving naturally into something smarter, warmer, and more intentional.

Positioning

Short description:
A cinematic character-world and design system for a builder who translates movement, reflection, culture, and technology into human development.

Tagline options:

  • A field guide for motion, meaning, and mastery.
  • Where discipline becomes discovery.
  • Building spaces where people remember who they can become.
  • Sports, story, wellness, and AI for the future of human growth.
  • Translate possibility into action.

Narrative Thesis

Brandon begins with many separate identities: trainer, facilitator, builder, creative, learner, coach, and technologist. The deeper realization is that these are not separate lanes. They are all expressions of the same mission: human development.

The villain is fragmentation:

  • Work separated from purpose
  • Wellness separated from success
  • Technology separated from humanity
  • Creativity separated from leadership
  • Discipline separated from joy

The resolution is integration: spaces, systems, and rituals where people train, learn, create, reflect, and build together.

Mood

Use this emotional palette across decks, websites, posters, thumbnails, and campaign materials:

  • Futuristic
  • Heroic
  • Reflective
  • Rebellious
  • Hopeful
  • Grounded
  • Editorial
  • Community-centered
  • Quietly cinematic

Avoid making the world feel cold, sterile, corporate, or fake-hustle motivational. The tone should feel disciplined but human.

Visual Identity

Overall Style

The visual system should feel like:

  • Premium editorial character sheet
  • Film production storyboard
  • Vintage magazine layout
  • Urban planning board
  • Personal operating system
  • Near-future wellness lab

The best visual reference is a single unified art board: one dominant hero panel, supporting storyboard panels, structured notes, labels, metrics, and environment thumbnails.

Color Palette

Use a restrained print-inspired palette with black structure and warm paper tones.

Role Color Usage
Paper background #E5DAC6 Main canvas, slide backgrounds, website sections
Warm cream #F0E8D6 Cards, callouts, text box fills
Ink black #12110F Title bars, outlines, primary type
Deep charcoal #1F1D19 Secondary dark blocks
Signal gold #B68D47 Highlights, lines, annotations, icons
Muted red #892620 Rebellion, creative signal, key emphasis
Deep blue-green #25475B Systems, technology, discipline markers
Soft tan #D5C6A9 Dividers, secondary panels

Use black generously for structure. Use gold and red sparingly so they feel intentional.

Texture

Use a subtle paper grain or scan texture. Add thin black grid lines in the background. The texture should support the editorial mood, not make text harder to read.

Good texture cues:

  • Paper grain
  • Faint production grid
  • Registration marks
  • Thin technical lines
  • Slightly imperfect print feel

Avoid:

  • Heavy grunge
  • Neon cyberpunk glow
  • Plastic gradients
  • Overly glossy sci-fi UI panels

Typography

Use bold condensed display type for titles, clean readable text for body copy, and a small amount of hand-drawn type for human energy.

Type Roles

Hero title:
Bold, condensed, cinematic, all caps.

Examples:

  • BRANDON
  • ARCHITECT OF DISCOVERY
  • HUMAN DEVELOPMENT LAB

Secondary handwritten accent:
Use for personal phrases, subtitles, or annotations.

Examples:

  • Architect of Discovery
  • translate possibility into action
  • journal + habit watch

Body copy:
Readable editorial sans or serif. Keep lines short and structured.

Technical labels:
Monospace or small uppercase labels.

Examples:

  • CAMERA / MOVE
  • MUSIC
  • SOUND
  • FIELD PROFILE
  • WARDROBE AND GEAR
  • LOCATIONS AND CONDITIONS

Layout Principles

Every layout should feel structured, cinematic, and intentional.

Core Layout Pattern

Use this whenever possible:

  1. One dominant hero section or character panel
  2. A grid of supporting scenes, proof points, or story beats
  3. A bottom or side information strip with structured details
  4. Black title bars for hierarchy
  5. Thin black grid lines and borders
  6. Small labels, annotations, and production notes

The design should feel like one unified board, not separate random cards.

Ratio Guidance

Use these formats:

  • Slide deck: 16:9
  • Website hero: full viewport with a visible hint of the next section
  • Poster: 4:5 vertical
  • Phone wallpaper: 1440 x 3168 for OnePlus 13
  • Social post: 4:5 vertical
  • Story/Reel: 9:16 vertical

Character System

Main Character

Name: Brandon
Role: Architect of Discovery
Archetype: Builder, translator, coach, creative technologist, community guide
Identity: A future-facing human-development strategist rooted in sports, street culture, wellness, learning, and AI.

Hero Prop

The journal is the primary identity prop. It should feel used, personal, and full of ideas.

Show it with:

  • Framework sketches
  • Habit notes
  • Story fragments
  • Training plans
  • AI prompts
  • Questions
  • Maps of people, places, and systems

The smartwatch is the secondary prop. It symbolizes self-mastery, feedback loops, habit tracking, and body awareness.

Wardrobe

Wardrobe should blend sports utility, street polish, and soft futurism.

Good wardrobe cues:

  • Varsity jacket
  • Hoodie
  • Black cap
  • Clean sneakers
  • Utility vest
  • Training clothes
  • Minimal tech accessories
  • Warm layers

Avoid costumes that feel too superhero, too corporate, or too futuristic.

World And Setting

The world starts in the present and gradually becomes near-future.

Use modern East Coast locations:

  • Gyms
  • Community centers
  • Wellness spaces
  • Training rooms
  • Classrooms
  • Creative studios
  • Cafes
  • Rooftops at night
  • AI-powered workspaces
  • Museums and cultural spaces
  • Basketball arenas
  • Riverfronts and city edges

The future should emerge through subtle details:

  • Habit dashboards
  • AI-assisted workstations
  • Smart mirrors
  • Wellness data overlays
  • Learning pods
  • Community lab signage
  • Digital notebooks
  • Ambient light panels

Storyboard Beats

Use these as a recurring narrative sequence for decks, landing pages, or videos.

1. Arrival At The Edge

Brandon enters the city-world at a threshold: riverfront, street corner, car, train platform, or rooftop.

Meaning: The search begins.
Camera: Wide low angle, slow push-in.
Sound: City air, car door, distant bass.

2. The Public Spark

He moves through music, culture, and social energy.

Meaning: Creativity and identity are alive in public.
Camera: Handheld medium shot, rhythm cut.
Sound: Crowd, fabric, club brass, applause.

3. Knowledge Systems

He studies, maps, reads, tracks, and organizes.

Meaning: The many interests begin forming a system.
Camera: Overhead insert, graphic snap zoom.
Sound: Timer ticks, keyboard taps, page turns.

4. Wellness Reset

He slows down through meditation, breathwork, movement, or therapy-aware reflection.

Meaning: The work is not only productivity. It is regulation.
Camera: Still close-up, breath-held pause.
Sound: Street hum, soft synth, breathing.

5. Arena Of Practice

He enters a sports or training environment.

Meaning: Discipline becomes embodied.
Camera: Telephoto portrait, match cut.
Sound: Drums, court roar, sneakers, whistle.

6. Community Lab

He facilitates, teaches, or builds with others.

Meaning: Personal development becomes shared infrastructure.
Camera: Warm medium shot, gentle orbit.
Sound: Room tone, conversation, neo-soul keys.

7. The Integrated Future

The final world appears: part wellness center, part learning lab, part creative studio, part community hub.

Meaning: The dream is an environment where transformation happens every day.
Camera: Hero wide shot, sunrise or city night glow.
Sound: Choir pad, footsteps, voices, calm machinery.

Slide Deck Direction

Recommended Deck Structure

  1. Cover: Brandon: Architect of Discovery
  2. Thesis: The mission is human development through integration
  3. The Fragmentation Problem: Why people feel split across work, wellness, creativity, and technology
  4. The Pattern: Sports, music, wellness, learning, community, and AI are connected
  5. The Character: Brandon as translator and builder
  6. The World: East Coast spaces evolving into near-future learning environments
  7. The System: Journal, habit tracking, AI tools, community practice
  8. The Experience: What people do inside this ecosystem
  9. The Future Space: Wellness center x learning lab x creative studio x community hub
  10. Closing: He built a place where people remembered who they could become

Slide Design Rules

  • Use black title bars at the top of important slides.
  • Use a beige paper background with subtle grid lines.
  • Mix large cinematic images with structured labels.
  • Use diagrams sparingly but make them feel like field notes.
  • Keep body text short and declarative.
  • Use repeated labels like FIELD NOTE, SYSTEM, SHOT, SIGNAL, and RITUAL.
  • Include one strong image or diagram per slide whenever possible.

Slide Types

Hero slide:
Large image, black title bar, one sentence thesis.

Storyboard slide:
Three to six frames with shot labels and short notes.

System slide:
Diagram showing how movement, learning, wellness, creativity, community, and AI connect.

Profile slide:
Character sheet with name, role, prop, quote, style, and mission.

Environment slide:
Grid of spaces with small captions and conditions.

Closing slide:
Minimal, cinematic, quote-led.

Website Direction

Website Goal

The website should feel like entering Brandon's world. It should not feel like a generic personal portfolio. It should feel like a cinematic field guide for a human-development lab.

Suggested Navigation

  • World
  • Story
  • Method
  • Spaces
  • Journal
  • Projects
  • Contact

Homepage Structure

  1. Hero

    • Full-viewport cinematic image or poster crop
    • Main title: Brandon: Architect of Discovery
    • Supporting copy: A field guide for motion, meaning, and mastery
    • Small production labels or coordinates

  2. The Thesis

    • Explain fragmentation vs integration
    • Use a simple split layout: fragmented living / integrated becoming

  3. Storyboard Sequence

    • Six or seven panels showing the journey
    • Each panel has a shot title and short caption

  4. The System

    • Visual map of sports, music, wellness, learning, community, and AI
    • Show the journal as the organizing object

  5. Spaces

    • Grid of environments: gym, classroom, studio, rooftop, wellness room, AI workspace
    • Each location includes conditions and emotional function

  6. Field Notes

    • Journal-style entries, questions, frameworks, and reflections

  7. Projects

    • Habit tracker
    • AI assistant / Jarvis concept
    • Writing chapters
    • Community experiences
    • Learning systems

  8. Closing Call

    • A quiet invitation: build, collaborate, learn, or enter the lab

Website UI Rules

  • Use full-width sections, not many floating cards.
  • Let black bars and grid lines create structure.
  • Keep corners mostly square or subtly rounded.
  • Use high-contrast labels.
  • Avoid generic tech gradients.
  • Use real images and textured editorial layouts.
  • Make the first viewport clearly signal Brandon and the world.

Poster And Social Direction

Poster Formula

Use the original storyboard-poster structure:

  • Large character profile panel on the left
  • Multi-panel storyboard grid on the right
  • Full-width information strip at the bottom

Social Adaptations

4:5 post:
Use the full storyboard board.

9:16 story:
Stack the system vertically:

  1. Title bar
  2. Hero image
  3. Three storyboard frames
  4. Quote or field note
  5. Footer label

Carousel:
Turn each storyboard beat into one slide:

  • Slide 1: Cover
  • Slide 2: Fragmentation
  • Slide 3: Arrival
  • Slide 4: Public Spark
  • Slide 5: Knowledge Systems
  • Slide 6: Wellness Reset
  • Slide 7: Arena Of Practice
  • Slide 8: Community Lab
  • Slide 9: Integrated Future
  • Slide 10: Quote / invitation

Copy Bank

Short Lines

  • The future begins as a practice.
  • Discipline is not the destination. It is the doorway.
  • Wellness, learning, creativity, and AI are not separate.
  • The journal is the lab.
  • The body keeps the score. The system keeps the promise.
  • Build the place you needed.
  • Translate possibility into action.
  • Integration is the rebellion.

Longer Lines

  • He spent years thinking his value came from doing. Training, teaching, creating, building. Eventually he realized the deeper work was helping people become.
  • Everyone saw separate interests. He saw one pattern: human development.
  • The dream was never a perfect job. It was an environment where transformation could happen every day.
  • Some people build companies. Some build careers. Some build audiences. He built a place where people remembered who they could become.

Content Modules

Use these reusable modules across decks and websites:

Field Profile

  • Name: Brandon
  • Role: Architect of Discovery
  • Profession: Learning strategist, coach, creative technologist
  • Hometown: East Coast / NYC orbit
  • Style: Sports utility, street polish, clean futurism
  • Quote: Translation is the gift: possibility into action
  • Mission: Build where people become

Wardrobe And Gear

  • Journal
  • Smartwatch
  • Varsity jacket
  • Hoodie
  • Cap
  • Sneakers
  • iPad or Kindle
  • Water bottle
  • AI workspace

Personality And Skills

  • Translates complexity into action
  • Systems-minded without losing humanity
  • Sports discipline and creative intuition
  • Therapy-aware and community-first
  • Rebellious against fragmented living
  • Skilled in coaching, facilitation, storytelling, AI prompts, and habit design

Locations And Conditions

  • River edge: dusk clarity
  • Wellness lab: future merge
  • Community room: shared becoming
  • Training space: embodied discipline
  • Rooftop: night signal
  • Creative studio: ideas in motion
  • Classroom: learning as transformation
  • AI workspace: systems become visible

Vision Source Assets

Use the curated resources/vision/ image set when expanding Brandon's world beyond the On retail training deck.

Asset Narrative use
storyboard-poster.jpg Canonical poster board and master composition reference
oneplus-wallpaper.jpg 9:16 phone wallpaper adaptation of the poster system
waterfront-arrival.jpg Arrival at the edge, identity, threshold, East Coast grounding
arena-practice.jpg Arena of practice, sports discipline, embodied development
community-staff.jpg Community proof, facilitation, shared learning environments
wellness-street-cue.jpg Wellness reset, therapy-aware reflection, public-life signal
arrival-car.jpg Arrival sequence, polish, threshold, aspirational environment
headshot.jpg Compact profile and contact use
productivity-map.jpg Habit system, mental rewiring, athlete-like productivity

Image Direction

Images should be realistic, cinematic, and emotionally grounded.

Use:

  • Natural skin texture
  • Realistic proportions
  • Dramatic but clean lighting
  • Documentary/editorial framing
  • City light, gym light, studio light, rooftop night light
  • Consistent wardrobe and character identity

Avoid:

  • Plastic AI sheen
  • Inconsistent face or body design
  • Overly fantasy sci-fi armor
  • Random futuristic gadgets
  • Stock-photo smiles
  • Chaotic collage layouts

Prompt Template

Use this prompt when generating new visuals:

Create a cinematic editorial image for "Brandon: Architect of Discovery," a future-facing human-development strategist rooted in sports, music, street culture, wellness, learning, community, and AI.

Style: premium film production storyboard, urban editorial design, clean beige paper palette, black title bars, subtle grid lines, realistic lighting, natural skin texture, grounded near-future atmosphere.

Subject: Brandon, a confident Black male creative technologist and coach with sports-street style, carrying or writing in a journal filled with ideas, stories, sketches, frameworks, and AI prompts. Include a smartwatch as a subtle symbol of habit tracking and self-mastery.

Setting: modern East Coast city evolving into a near-future human-development lab. Use gyms, community centers, wellness spaces, training rooms, classrooms, creative studios, AI-powered workspaces, or rooftop conversations at night.

Mood: futuristic, heroic, reflective, rebellious, hopeful.

Avoid: cold corporate tech, generic sci-fi armor, plastic-looking skin, random panels, cluttered text, inconsistent character design.

Production Checklist

Before finalizing any deck, website, poster, or social asset, check:

  • Does Brandon appear as the central signal?
  • Does the piece show integration, not random interests?
  • Is the journal or system-building idea visible?
  • Is the design structured with clear hierarchy?
  • Are black title bars, beige paper, grid lines, and editorial labels used consistently?
  • Does the mood feel heroic, reflective, rebellious, and hopeful?
  • Is the future grounded in modern life rather than fantasy sci-fi?
  • Does the final piece feel like one unified board or world?