Brand System
A scholarly system for Understanding Neurodiversity
A mini style guide for anyone building, designing, or partnering with the platform. Use these rules to keep the brand dignified, accessible, and unmistakable across every surface.
01 — Logo
Logo usage
Primary lockup on deep indigo — the preferred presentation.
Meaning
The dual-tone brain represents difference held in unity. The ribbons signal infinity and belonging. The book grounds the mark in research and education. The heart centers human dignity. Never reinterpret or modify the symbol.
Clear space
Maintain a clear margin equal to the height of the heart on all sides. Nothing — type, imagery, or UI chrome — may enter this zone.
Minimum size
Digital: 32 px height for the mark alone; 56 px when paired with the wordmark. Print: 0.4 in / 10 mm minimum height.
Do
- • Place on deep indigo, parchment, or photographic backgrounds with sufficient contrast.
- • Pair the mark with the wordmark in the official Fraunces display face.
- • Pair the wordmark with the qualifier "An educational initiative of God's Diamonds" in primary contexts.
- • Use the supplied PNG asset; request vector files for print at large scale.
Don't
- • Recolor, outline, drop-shadow, or stretch the mark.
- • Replace the brain with puzzle-piece imagery or medical iconography.
- • Crop the book or heart out of the lockup.
- • Set the mark on busy, low-contrast, or fearful imagery.
02 — Color
Color tokens
All color in the platform is expressed through semantic CSS tokens defined insrc/styles.css. Never hard-code hex values in components — reference the token so the system stays accessible in light and dark themes.
Core surface palette
Ink (primary text)
--foreground
Headings, body copy on parchment.
Parchment (background)
--background
Default page surface.
Primary (deep indigo)
--primary
Buttons, focus rings, scholarly accents.
Secondary (warm linen)
--secondary
Quiet panels, hover states.
Accent (gold wash)
--accent
Soft highlights, callouts.
Muted
--muted
Subdued surfaces; pair with muted text.
Neurodiversity spectrum accents
Use spectrum tones for category accents, charts, and gradient text. Reserve full saturation for intentional moments — they should feel like a chord, not constant noise.
Spectrum 1 — Violet
--spectrum-1
Neurodivergent identity anchor.
Spectrum 2 — Magenta
--spectrum-2
Lived experience.
Spectrum 3 — Coral
--spectrum-3
Care & relationships.
Spectrum 4 — Amber
--spectrum-4
Strengths, optimism.
Spectrum 5 — Teal
--spectrum-5
Calm, regulation.
Spectrum 6 — Azure
--spectrum-6
Research & data.
Signature gradient
--gradient-spectrum
Use sparingly for hero accents, the AI Companion CTA, and the wordmark. Never as full-page background — it overpowers content.
03 — Typography
Type system
Display — Fraunces
Research. Education. Belonging.
Used for H1–H4. Set weight 500, tracking -0.02em. Scholarly serif with warmth — keeps the platform from feeling clinical.
Body — Inter Tight
Understanding Neurodiversity translates scholarly research into practical guidance for families, employers, educators, and faith communities.
Used for paragraph copy, navigation, UI labels, and forms. Line-height 1.6–1.7 for long-form reading. Enable ss01 and cv11 features.
| Role | Family / size | Notes |
|---|---|---|
| H1 | Fraunces · text-4xl → text-6xl | One per page. Pair with eyebrow tag. |
| H2 | Fraunces · text-3xl → text-4xl | Opens each Section component. |
| H3 | Fraunces · text-xl → text-2xl | Card titles and subsection heads. |
| Body | Inter Tight · text-base | Paragraph copy, default ~16px. |
| Lede | Inter Tight · text-lg → text-xl | Supporting paragraph beneath H1. |
| Eyebrow | Inter Tight · text-xs · uppercase · tracking-[0.2em] | Section labels. |
| Caption | Inter Tight · text-sm · muted | Source lines, citations, disclaimers. |
04 — Spacing
Spacing & layout
The system uses Tailwind's 4 px base scale. Prefer the tokens below over arbitrary values so rhythm stays predictable across pages.
| Token | Value | Where to use it |
|---|---|---|
| Section (desktop) | py-16 md:py-24 | Standard vertical rhythm between major sections. |
| Card padding | p-6 | Default interior padding for content cards. |
| Page gutter | container-page (px 1.25rem, max-w 80rem) | Horizontal page constraint. |
| Stack gap (cards) | gap-6 | Grid spacing for card collections. |
| Heading lede | mt-6 | Space between H1 and supporting paragraph. |
| Radius | rounded-xl / rounded-2xl | Soft, scholarly corners — never sharp. |
4px · space-1
8px · space-2
12px · space-3
16px · space-4
24px · space-6
32px · space-8
05 — Accessibility
Accessibility rules
Contrast
All text must meet WCAG 2.2 AA: 4.5:1 for body, 3:1 for large display type. Spectrum accents on parchment do not pass for body copy — reserve them for graphics, icons, and decorative type set at 24 px+ bold.
Focus visibility
Every interactive element keeps a visible focus ring using--ring. Never remove outlines without replacing them. The skip-link at the top of every page is required.
Motion
Use motion to invite attention, never to demand it. Honourprefers-reduced-motion. Avoid parallax, autoplay, and flashing content — many neurodivergent users are sensitive to both.
Language
Plain language first, scholarly definition second. Use identity-first language by default (autistic person), respecting individual preference. Avoid deficit framing, fear imagery, and puzzle-piece symbolism.
Targets & inputs
Tap targets ≥ 44×44 px. Every form input has a visible label. Icon-only buttons require an aria-label.
Imagery
Always provide meaningful alttext. Decorative imagery uses alt="". Prefer diverse, dignified human-centered illustration; never medical-fear imagery.