Mindora
Register

Internal reference

Mindora
Design Guide

A living reference for Mindora's design system. Every swatch, typeface sample, and component shown here is pulled directly from production — so the guide always reflects the real system.

Premium Clinical meets Modern AI
Download tokens for Figma (.json)

Brand name

Mindora

One word. Capital M only. Never "MINDORA".

Tagline

ADHD Assessment & Support — done right.

UK's first platform combining clinical ADHD assessment with ongoing AI coaching.

Aesthetic

Premium Clinical meets Modern AI

Warm cream tones, grain texture, Fraunces serif headings, generous whitespace.

Visual identity

Color Palette

Click any swatch to copy the hex value. Use the palette consistently across web, decks, and marketing assets.

Filter by role
8 of 8 shown

Type system

Typography

HeadingsFraunces — variable, weights 200–900

Used for all major headings (H1–H3), display titles, and brand wordmark. Optical-size axis makes it legible from 14px to 120px+. Do not use for body copy or UI labels.

Display / Hero H1Mindora
Page title H1Mindora
Section heading H2Mindora
Card heading H3Mindora
Sub-heading H4Mindora
✓ Do Use Fraunces for H1–H3 and the logo wordmark.✗ Don't Use Fraunces for paragraphs, captions, or navigation labels.
Body / UIDM Sans — static, weights 200–900

The workhorse typeface. Used for all body text, UI labels, navigation, captions, form elements, and marketing copy. Optimised for screen legibility at small sizes.

Large body / leadThe UK's first platform combining clinical ADHD assessment with ongoing AI coaching and support.
Body regularThe UK's first platform combining clinical ADHD assessment with ongoing AI coaching and support.
Secondary / captionThe UK's first platform combining clinical ADHD assessment with ongoing AI coaching and support.
Label / overlineThe UK's first platform combining clinical ADHD assessment with ongoing AI coaching and support.
✓ Do Use DM Sans for all body copy, nav, and UI text.✗ Don't Mix other sans-serif families (e.g. Inter or Geist) with DM Sans.
AccentDancing Script — cursive, weights 400–700

Used sparingly as a handwritten accent above section headings. Adds personality and warmth without sacrificing legibility. Use at 20px–34px only. Never for full sentences.

Section accent (28px)Explore the Platform
Sub-accent (22px)Your Journey
Large accent (34px)Cost & Inclusions
✓ Do Use Dancing Script as a one-line accent above a Fraunces heading.✗ Don't Use Dancing Script for paragraphs, CTAs, or navigation.

Rhythm & geometry

Spacing & Layout

Mindora's design language relies on generous vertical rhythm. Sections breathe. Content doesn't feel cramped.

↕ 24px vertical padding

py-6

Compact section padding — tight info blocks.

↕ 48px vertical padding

py-12

Standard section padding — most content sections.

↕ 96px vertical padding

py-24

Generous vertical rhythm — primary page sections.

↕ 128px vertical padding

py-32

Hero / flagship section breathing room.

Border Radius Scale

rounded-lg

8px

Small UI chips, tags, inputs.

rounded-xl

12px

Feature cards and info panels.

rounded-2xl

16px

Primary cards and modal surfaces.

rounded-3xl

24px

Hero floating panels, large feature blocks.

rounded-full

9999px

Pill buttons, badges, avatar rings.

Live components

Components

Every demo below is a live, interactive render of the real production component.

Magnetic Button

Hover the button — it subtly follows your cursor. Tweak the props below to preview every variant live.

✓ Do Use showPulse on the primary waitlist / register CTA only.✗ Don't Add pulse to every button — it loses its urgency signal.

Glassmorphism Nav / Card

The scrolled-state header and floating UI cards use backdrop-blur with a semi-transparent dark teal background.

MindoraTeam · ADHD · Book
AI Confidence: 94%

Floating UI Cards

Cards with continuous, staggered float animations (float-card-a/b/c) surround the demo phone in the hero. Each card reinforces a trust or progress signal.

ADHD Trait Map

Inattentive · 87%

Ari says

Tell me more…

Report Ready

Download PDF →

Grain Overlay

A fixed-position, full-viewport noise layer (.grain-overlay-fixed) sits at z-index 9999 at 3.5% opacity with multiply blend mode. Applied once in the root layout — it naturally textres every surface on the site.

Cream + grain
Dark + grain

Animated Strike Pricing

Used on the pricing section to strike through NHS waiting-list comparisons. The strike animates in on scroll via IntersectionObserver (.strike-animated). Scroll this element into view to see it trigger.

NHS waiting time

2+ years

vs

Mindora

2 weeks

Conventions

UI Patterns

A

Ari

AI Clinical Guide

AI-Centric Imagery

Ari is Mindora's AI avatar. Always render Ari with a teal-to-sage gradient avatar, bold "A" monogram, and a subtitle label ("AI Clinical Guide"). Never substitute a stock-photo robot or generic icon for Ari.

Trust Indicators

Consultant PsychiatristGDPR CompliantMHRA RegisteredNHS-trained cliniciansICO Registered

Trust badges appear near CTAs and in the footer. Always include at minimum: "Consultant Psychiatrist", "GDPR Compliant", and "MHRA Registered". Hospital/NHS affiliation logos reinforce credibility and should be rendered in greyscale to keep visual harmony.

Scrolled-Header Transition

At top: transparent header
After 50px scroll: dark glass header

The header starts transparent over hero imagery. After scrolling 50px it transitions to bg-[#1a2a28]/95 with backdrop-blur and a drop shadow. Transition: 300ms all.

Gradient Shimmer Border

The .gradient-shimmer class adds an animated gradient border that cycles through the brand palette. Used on the hero primary CTA only.

Scroll Reveal

Elements with class .reveal start at opacity: 0; transform: translateY(28px). When they enter the viewport the .is-visible class is added (via Reveal.tsx or a custom hook), animating them in over 900ms with a cubic-bezier easing. This is used on feature cards and content sections throughout the site. Always respect prefers-reduced-motion.

Feature card A
Feature card B
Feature card C