The Meridian Mind logo is a combination mark: a circular monogram "M" paired with the practice name set in Cormorant Garamond. Both elements may be used separately in contexts where space is limited.
Clear space rule: Maintain a minimum clear space equal to the cap-height of the "M" letterform on all four sides of the lockup.
The palette is rooted in a therapeutic green — calm, clinical without coldness, authoritative without severity. It pairs with neutral stone grays that recede and support the green's warmth.
Two typefaces in deliberate contrast: Cormorant Garamond carries editorial authority and warmth; DM Sans provides functional clarity. They never compete — one leads, the other supports.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & . , : ; ! ?
Google Fonts · Free · Variable available
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & . , : ; ! ?
Google Fonts · Free · Variable (opsz axis)
An 8px base unit. All spacing values are multiples thereof. Generous whitespace is a brand value — do not compress layouts.
All interactive components follow the same restrained aesthetic. Every state is defined — default, hover, focus, disabled, error.
Icons use 1.5px strokes, rounded line caps, and the green-700/green-500 palette. The Bauhaus geometric vocabulary — circles, lines, grids — underpins all illustrative elements.
The brand voice is calm, direct, and humane. It avoids clinical coldness and performative warmth in equal measure. Every word earns its place.
"Our state-of-the-art psychiatric facility leverages evidence-based clinical interventions to optimise patient outcomes across a broad spectrum of DSM-5 diagnoses."
Too clinical, jargon-heavy, dehumanising. Feels like a hospital brochure.
"We work with a range of mental health conditions — from anxiety and depression to ADHD and trauma. We start by listening, then we work out the right path together."
Human, clear, collaborative. Reassuring without being saccharine.
"We understand how HARD life can be 💚 You deserve to feel AMAZING and we're here for your healing journey every step of the way!"
Overly enthusiastic, infantilising. Wellness-culture clichés undermine trust.
"Reaching out is often the hardest part. We make everything else as straightforward as we can."
Acknowledges difficulty without dramatising it. Practical and grounded.
Calm
Never alarming. Never dismissive. The tone of a trusted professional who has heard it all before and isn't worried.
Direct
Short sentences. Plain language. Active voice. We say what we mean and mean what we say — no hedging, no filler.
Human
We acknowledge complexity without dramatising it. We don't pretend everything is simple — but we don't catastrophise either.
Animation is restrained and purposeful. It guides attention, confirms actions, and breathes life — it never distracts. One well-timed transition is worth ten decorative ones.
cubic-bezier(0.4, 0, 0.2, 1)
Used for all standard transitions. Starts fast, decelerates — feels natural and responsive.
cubic-bezier(0.25, 1, 0.5, 1)
For scroll-triggered fade-ups and page load reveals. Elegant deceleration into resting state.
200ms – 250ms
Button hovers, input focus rings, tag state changes. Never slower — faster would feel jarring.
300ms – 400ms
Nav scroll state, card lift effects, accordion open/close. The workhorse timing.
500ms – 700ms
Fade-up animations triggered by IntersectionObserver. With staggered delays (100ms increments) for grouped elements.
20s linear infinite
The hero's inner concentric circle rotates slowly. Subtle ambient motion only — never disorienting.
transform and opacity — never width, height, or margin. GPU composited properties only.
prefers-reduced-motion: wrap all non-essential animations in a media query. Fade/instant replace for motion-sensitive users.
translateY(-3px) + shadow increase. Max lift: 4px.
opacity:0; translateY(24px), end at natural position. Use IntersectionObserver with threshold:0.1.
Copy this :root block into your stylesheet. Every design decision flows from these variables — change here, change everywhere.
/* === MERIDIAN MIND · CSS CUSTOM PROPERTIES === */ :root { /* — Green Scale — */ --green-900: #1a2e25; --green-800: #223b2f; --green-700: #2d5040; /* Primary */ --green-600: #3a6b52; --green-500: #4d8a6a; /* Labels / action accent */ --green-400: #6daa89; --green-300: #9bc4ae; --green-200: #c5ddd1; /* Borders */ --green-100: #e4efe9; /* Tag/chip backgrounds */ --green-50: #f2f8f5; /* Section tints */ /* — Neutral Stone — */ --neutral-900: #111614; /* Headlines */ --neutral-800: #1e2420; /* Body text */ --neutral-700: #2e3530; --neutral-600: #4a5248; /* Secondary body */ --neutral-500: #6b736a; /* Muted text */ --neutral-400: #8e9590; /* Placeholders */ --neutral-300: #b8bdb9; /* Disabled states */ --neutral-200: #dde1de; /* Borders */ --neutral-100: #f0f2f1; --neutral-50: #f8faf9; /* Page background */ --white: #ffffff; /* — Typography — */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --font-mono: 'DM Mono', 'Fira Code', 'Courier New', monospace; /* — Border Radius — */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 999px; /* — Shadows — */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05); --shadow-lg: 0 12px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07); /* — Transitions — */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-entrance: cubic-bezier(0.25, 1, 0.5, 1); --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1); /* — Layout — */ --max-width: 1200px; --gutter: clamp(1.25rem, 5vw, 4rem); }
These are the non-negotiables. When in doubt, subtract rather than add.