Every learning board opens as a pannable, zoomable mind map. History boards follow a horizontal era spine; other boards branch from a central question. Focus moves the camera without hiding the rest of the map. Reading view is optional—not the default.
Spatial grammar
360px notes, 760px evidence cards, 40px column gaps, 56px vertical card gaps and at least 160px between branches. Numbered lavender hubs use 28px headings. Edge-anchored arrows describe reading relationships, not causality.
Camera, not scroll
Drag to pan, pinch or use +/− to zoom. Fit shows the structure; Start returns to the central question. Sections and shared note links move the camera. Mobile keeps the canvas and offers a separate reading mode.
Acceptance tests
Check actual wires, two-dimensional placement, no overlaps, pan/zoom, visible context in Focus, deep links and reversible reading mode. Attractive screenshots alone do not establish a working mind map.
Board and page design system · Version 2.0
A shared visual language. Room for different ideas.
This guide defines how to plan, write, draw, and review every page and learning board. The goal is a research publication with the openness of a mind map: useful connections, trustworthy evidence, and enough quiet space to think.
Every visual choice should help someone understand.
01 · Why this website is a map
Creator marketing joins a brand objective, agency coordination, creator voice, audience attention, platform distribution, money, and measurement. A stack of generic service cards hides those relationships. A spatial board can make them visible—provided every group, route, and annotation has a clear purpose.
Orient
Give a newcomer a clear first question, while keeping search and direct routes available for a practitioner who already knows what they need.
Show the reasoning
Place ideas and evidence together. A line has a meaning; it should never be visual decoration or a stronger claim than the source supports.
Earn trust
Separate fact, estimate, example, and interpretation. Keep source, date, author, and important limitations close to the learning.
The detailed guide explains how these principles came from the subject, reader questions, evidence standards, and the need for calm exploration. It also specifies page roles, board shapes, interaction behaviour, image integrity, mobile layout, accessibility, and review.
02 · Indigo + coral, on the original warm canvas
Indigo#6554C0 · identity and actions
Coral#E9785B · small emphasis
Pale lavender#F0EDFA · section groups
Warm canvas#F5F5EF · stays quiet
Ink#252A28 · text and anchor
Keep the familiar warm dotted workspace and neutral paper cards. Indigo belongs on the mark, links, active controls, and section markers. Coral is a sparing highlight. The canvas and central idea do not become large blue panels.
Use one tinted group surface in a typical frame. Two is the maximum when comparison requires it. Colour never carries meaning alone: pair it with a label, number, or line treatment.
03 · Consider the content before you design
Name the primary reader and the question that brought them here.
Write what they should understand or do next in one sentence.
Define scope, geography, time period, definitions, and exclusions.
Inventory claims, sources, dates, examples, caveats, and missing evidence.
Choose one thesis and a map shape that matches the material: sequence, comparison, ecosystem, timeline, decision tree, or atlas.
Outline three to six frames. For each: claim, evidence, example, limitation, and bridge to the next.
Set desktop and phone reading order before drawing the spatial layout.
Remove or defer anything that neither answers, supports, clarifies, guides, nor changes a decision.
Use the detailed importance test in the full specification to decide what belongs in the main path, a secondary note, a related board, or nowhere. Caveats that change the meaning of a claim always remain beside it.
04 · Type, sizes, and spacing
Manrope · 48–58 px Board question
What are you paying for?
Manrope · 22–28 px Frame heading
Follow the money
DM Sans · 17–19 px Learning content
A quote is easier to understand when the deliverable, usage rights and exclusivity are listed separately.
Caveat · 26–34 px Short aside only
Read the small print, too.
DM Sans · 12–14 px Source or caveat
Illustrative example. Actual terms depend on the agreement.
Inside a card
24–32 px padding. Keep comparable cards the same width. Paragraphs have 12–20 px separation.
Between cards
32–48 px for related cards; 48–72 px if a connector runs between them. Heading to first card: at least 24 px.
Between frames
96–144 px, with more room for long wires. Give the board edge 96–144 px of breathing space.
The full specification also defines reading card widths, connector clearance, source proximity, touch control sizes, typography weights/line heights, and a phone-size type floor. Do not shrink text to cram in more.
05 · Frames and boxes have distinct jobs
The main question
What does the fee include?
One heading, one or two short sentences, one clear next step.
The evidence
Define the scope
One idea, a concrete example, and its nearby source or limitation.
The margin note
One more thing to ask.
A question or practical warning—not a source, data table, or hidden caveat.
A frame heading has a two-digit order marker, meaningful title, pale lavender surface, indigo leading edge, consistent padding, and space for a wrapped title. Artefacts, metric cards, comparisons, caveats, and next-board cards each have separate anatomy in the full guide.
06 · An arrow is a claim
Solid arrow
Directed sequence, transfer, or evidenced influence. Neutral 1.5–2 px stroke at board scale. Label the verb when direction is ambiguous.
Dashed arrow
Optional or qualified relationship. Keep it neutral and add a label such as “related reading” or “may influence”.
Plain line / feedback
No arrowhead means shared association. A loop means real feedback and says what returns. Use coral only for one focal, evidenced transition.
Connect at card edges; keep at least 8 px from the arrowhead to the box and a clear corridor for the wire. No line through text. Avoid crossings, unlabelled parallel lines, and more than about three obvious outgoing paths per node. Use “is associated with” where evidence does not establish causation.
07 · Every click should have a clear result
Control
Expected behaviour
Must remain clear
Card / board link
Open the named destination
Use a descriptive title and real link
Search / filters
Find boards or show a selected category
Keyboard access, visible selected state, result count, reset
Sections
Focus a named group; move previous/next; exit to full board
Announce section position, disable end arrows, restore focus
Zoom / pan / minimap
Change map scale or position
Never trap reading; offer keyboard routes
Notes
Create personal browser-local note
Say where stored; label editor and removal
Reading view
Reflow the same content into a linear path
Keep all essential claims, sources, and links
Use links for navigation and buttons for actions. Touch areas target at least 44 × 44 px. Visible hover is supplementary; keyboard focus is visible. Escape closes a modal predictably; focus returns to the opener. Shortcuts never fire while typing.
08 · Evidence, images, and trust
Claims
Separate fact, market estimate, hypothetical example, and author interpretation. Add date, population, denominator, definition, and caveat as relevant.
Images
Every image has a job, source, rights record, caption, and contextual alt text. AI illustration never pretends to be a real campaign or result.
Changing facts
Check platform and regulatory claims before publication. An elegant diagram must not make an uncertain claim look settled.
09 · What matters, and what creates clutter
Prioritise content that answers the main question, changes understanding or a decision, is supported or qualified, belongs on this page, and is not duplicated. Demote useful context that is not needed in the main route. Keep interpretation-changing caveats in view regardless of their visual priority.
When a board feels crowded: trace the path; count strong highlights; give every object a role; read every arrow aloud; separate core from optional; edit prose; add room or split a frame; then inspect fitted, focused, reading, and phone views. Do not make everything colourful, rotate analytical cards, shrink type, add decorative arrows, repeat the hero, or hide sources on hover.
“Interesting” means a meaningful connection, a useful tension, a surprising sourced example, or an actionable consequence. Novel shapes alone do not add value.
10 · Specific direction for all ten boards
Board
Suggested structure
Key check
Beginners
Orientation → participants → campaign → decisions
Fewer spokes; define terms; add one real example.
Brands follow attention
Distribution → participants → value shift
Use dated media artefacts; avoid repeated beginner material.
Creator pricing
Quote anatomy → rate bands → rights → checks
Separate sourced rates from assumptions and illustrative multipliers.
Barter trap
Exchange → hidden costs → suitable cases → limits
Show both sides; qualify legal statements.
Cold outreach
Target → delivery → response → conversation
Keep study populations and outcomes distinct.
Views vs reach
Definitions → counted example → changes → decision
Show repeat views versus unique people; date platform definitions.
Marketing history
Era spine → milestones → interpretation
Authentic artefacts, dates, captions, credits.
Social platforms
Chronological platform lanes
Separate launch dates from feature dates.
Algorithm updates
Announcements → effects → implications
Label sourced announcements separately from inference.
India language map
National orientation → regional detail → briefing
State is not language; include a text/table alternative.
11 · Repeatable workflow
Inventory current page, content, links, assets, and interactions.
Write reader, question, outcome, scope, and a content outline.
Review source quality and stale or missing claims before visual design.
Select a fitting board shape; assign a plain-language meaning to each arrow.
Wireframe in neutral boxes and agree the reading order.
Prioritise, remove duplication, split crowded frames, then set dimensions.
Apply typography, palette, spacing, and card roles; add sourced images last.
Build semantic controls and keyboard behaviour alongside layout.
Record date, open issues, asset rights, and justified exceptions.
Download the full working specification for the detailed pre-design and handoff checklists, responsive/accessibility acceptance criteria, interaction contracts, map-shape selection guide, and the complete set of board briefs.
12 · Implemented across the local website
All ten learning boards now have tailored introductions, numbered frames, evidence cards, a useful takeaway and related reading. Home, About and the atlas retain their connected maps with larger text and measured card spacing. Legal and the missing-page experience share the same brand language.
Predictable reading
Sections, focus, reading view, search and stable note links. Zoom and Fit change the view without changing completion.
Clear personal tools
Private notes stay in this browser and can be exported. Downloads identify the original reference PDF; Print saves the redesigned page.
Evidence in context
Sources and credits stay visible. The India map has region selection and a text list. The measurement board distinguishes repeated plays from unique accounts.