Canvas Design System
Main Site Tokens

Facilitator's DNA

A self-discovery microsite that helps facilitators uncover their natural style through a 15-question quiz. Five DNA profiles -- Energizer, Architect, Connector, Explorer, and Sage -- with shareable results, radar charts, and personalized growth insights.

App Identity

Phase
Discover
Primary Color
#E54D4D
Font Stack
Fraunces + System Sans

Design Philosophy

DNA is a self-discovery tool. Every design choice should feel warm, inviting, and personal -- like a guided conversation, not a clinical assessment.

self_improvement
Warmth over clinical
This is self-discovery, not a test. The warm paper background (#FAF7F2), Fraunces display font, and borders-only depth strategy create an approachable, journal-like feel. No heavy shadows.
palette
Single red accent
All five profiles share one Learn red (#E54D4D) rather than distinct colors. This keeps the brand unified and avoids implying any profile is "better" than another. Deliberate exception (June 2026): the DNA app ships Learn red; the Reflect phase token (--phase-reflect) remains #10B981.
linear_scale
Guided progression
The quiz flow (landing → quiz → results → profile) uses a narrow, centered container (600px quiz, 680px results) to maintain focus. Progress bars and step numbers provide orientation.
share
Shareable by design
Results are built for social sharing. Each profile has OG-optimized badge images, pre-written share text, and a share modal with LinkedIn/Twitter/copy-link options.

Color Tokens

DNA uses a Learn red palette representing growth and discovery. Deliberate exception (June 2026): the DNA app ships Learn red; the Reflect phase token (--phase-reflect) remains #10B981. All tokens are defined in css/dna/styles.css.

Accent Palette

Accent
--accent
#E54D4D
Hover
--accent-hover
#C73E3E
Light
--accent-light
#FCA5A5
Very Light
--accent-very-light
#FEE2E2
Background
--accent-bg
#FEE2E2

Surface & Text

Page
#FAF7F2
Surface
#ffffff
Muted
#F0EBE3
Text Primary
#0f172a
Text Secondary
#475569
Text Muted
#64748b
/* DNA app tokens -- Deliberate exception (June 2026): DNA ships Learn red;
   the Reflect phase token (--phase-reflect) remains #10B981. */
--accent: #E54D4D;
--accent-hover: #C73E3E;
--accent-dark: #C73E3E;
--accent-light: #FCA5A5;
--accent-very-light: #FEE2E2;
--accent-bg: #FEE2E2;
--accent-border: rgba(229, 77, 77, 0.3);

/* All 5 DNA profiles share Learn red */
--energizer: #E54D4D;
--architect: #E54D4D;
--connector: #E54D4D;
--explorer: #E54D4D;
--sage: #E54D4D;

/* Warm paper foundation */
--bg-page: #FAF7F2;
--bg-surface: #ffffff;
--bg-muted: #F0EBE3;

/* Borders-only depth */
--border: rgba(0, 0, 0, 0.08);
--shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* minimal */

The 5 DNA Profiles

Each profile represents a facilitation archetype. All share the red accent -- identity comes from icon and description, not color.

bolt
The Energizer
High-energy, keeps momentum and engagement through dynamic activities
architecture
The Architect
Methodical, designs structured experiences with clear outcomes
diversity_3
The Connector
Relationship-focused, creates safety and brings out every voice
explore
The Explorer
Curious, thrives in ambiguity and discovers unexpected insights
self_improvement
The Sage
Wisdom-focused, creates space for deep reflection and dialogue

Layout Patterns

Each page in the DNA flow has a focused layout optimized for its purpose.

Page Max Width Key Pattern
Landing 1080px 2-col hero grid, 5-card profile row, 3-step how-it-works, dark CTA
Quiz 600px Centered card, progress bar, single-select options, back/forward nav
Results 680px Badge + title, radar chart, 2-col insights grid, match bars, share modal
Profile 720px Hero with badge, stacked info sections, bulleted lists, CTA banner
About 720px Content page explaining the methodology

Key Components

DNA-specific UI patterns. The app is a standalone microsite with its own CSS rather than the shared component library.

Quiz Card + Options
DNA-specific
White card (.quiz-card) with Fraunces question text and stacked option buttons. Options highlight with red border and background on hover/selection. Single-select only.
<div class="quiz-card">
  <h2 class="quiz-question">...</h2>
  <div class="quiz-options">
    <button class="quiz-option">Option text</button>
    <button class="quiz-option selected">Selected</button>
  </div>
</div>
Progress Bar
DNA-specific
Thin 4px red bar with animated fill transition. Header shows "Question X of 15" left-aligned and percentage right-aligned in muted text.
Radar Chart + Skill Scores
DNA-specific
SVG radar chart (280px wide) showing scores across all 5 profiles. Below the chart, a 5-column grid displays tabular-nums scores with uppercase labels using monospace font.
Share Modal
DNA-specific
Centered overlay with backdrop blur and animated entrance (scale + translateY). Pre-written share text preview, copy-to-clipboard button, and circular social buttons (LinkedIn, Twitter, email).
Profile Badge Cards
DNA-specific
5-column grid of clickable profile cards with badge images, names, and taglines. All cards share the same red hover state. On mobile, the grid stays 5-wide with reduced padding.

Do / Don't

Do: Use warm, encouraging language
This is self-discovery, not evaluation. "Your superpower" and "growth edge" rather than "strengths" and "weaknesses".
Don't: Rank or compare profiles
No profile is better than another. Avoid language or design that implies hierarchy. All five use the same red accent intentionally.
Do: Keep the quiz flow focused
Narrow containers (600px), no sidebar, one question at a time. The user should feel guided, not overwhelmed.
Don't: Show multiple questions per screen
Even if faster, multi-question layouts feel like a form. One question per card maintains the conversational feel.
Do: Use borders-only depth strategy
Cards use 1px solid var(--border) with no box-shadow. This keeps visual weight light and consistent with the paper aesthetic.
Don't: Add heavy shadows or elevation
The DNA app avoids shadow-based depth. Only use --shadow for modals and tooltips, never for static cards.
Do: Make sharing frictionless
Pre-write share text, include OG images per profile, and offer one-click copy. Social proof drives quiz completions.
Don't: Require login to see results
DNA is a top-of-funnel tool. No gates before results. Capture emails optionally afterward, not before.

File Reference

File Purpose
dna/index.php Landing page with hero, profile cards, how-it-works, and CTA
dna/quiz.php 15-question guided quiz (client-side scoring, no server round-trips)
dna/results.php Personalized results with radar chart, insights, and share modal
dna/profile.php Deep-dive profile pages (?type=energizer)
dna/about.php Methodology explanation page
css/dna/styles.css All DNA styles and tokens (~1400 lines, standalone from platform-tokens)
images/dna/badges/ Profile badge images (display + LinkedIn OG variants)