The MindfulHeads Style Guide

MindfulHeads Style Guide — A Living Visual Identity

How we design calm clarity.

1. The Spirit of the Brand

MindfulHeads is built on a simple principle: clarity is calming.

We avoid clutter, hype, mysticism, and clinical coldness.
Everything is intentional: warm, modern, minimal, human.

2. Typography

Primary Typeface — Inter

This article is rendered in Inter, our core typeface for UI and body content:
clean, modern, and easy to read for long-form material and interfaces.

Secondary Typeface — Cormorant Garamond

For certain moments — quotes, key lesson titles, reflective lines — we use Cormorant Garamond.
It adds a subtle, human warmth without turning the brand into something ornamental or nostalgic.

We use serif accents sparingly.
Most of the time, Inter carries the work.

3. Core Color Palette

Each color is used with intention. Below are the palette cards using our standard components.

Primary Neutrals

**Ink Black** `#0D0D0D` Text, strong contrast, key structural elements.

**Off-White** `#F7F7F5` Base background for pages and cards; calm, non-stark white.

**Sand** `#E6E2DA` Soft panels, subtle emphasis blocks, section backgrounds.

Accent Palette

**Calm Blue** `#3A668B` Primary accent for links, buttons, and key highlights.

**Earth Clay** `#B26E47` Secondary accent for small emphasis and graphic details.

**Soft Olive** `#6E7F5F` Used in progress markers, quotes, and certain course elements.

4. How Colors Interact

We use accents deliberately: one primary accent per page, two at most.

### Example: Calm Blue on Off-White

This card shows our main contrast relationship:

Background uses Off-White.
Headings and key actions use Calm Blue.
Body text stays in Ink Black for readability.

This combination is used heavily across the Mindfulness Course.

### Example: Sand + Soft Olive

Here we use a Sand background with Soft Olive for headings or accents.
This pairing supports “quiet emphasis” — places where we want attention without urgency.

5. Cards and Layout Components

The brand prefers simple, flat cards with clear separation and generous padding.

### Mindful Card

A standard content card:

Rounded corners
Light border
Neutral background
One accent color for the heading

This pattern is reused across blog posts, lessons, and UI panels.

6. Quotes and Reflective Blocks

We use serif typography and Soft Olive for quotes and reflective blocks.

“Clarity is not a special state.
It’s what appears when noise is removed.”

Quotes are used sparingly, and always with a clear purpose — to highlight something that changes how the reader sees the work, not to decorate.

7. Implementation Rule: No Inline Styles

A core technical rule in the MindfulHeads brand system:

No inline styles in content.
All styling must be done through CSS classes in the shared stylesheet.

This keeps the brand consistent, maintainable, and easy to evolve.
If a visual treatment is needed more than once, it gets a class, not a one-off inline style.

8. Closing

This style guide is a living document.

As more lessons, tools, and experiences are added to MindfulHeads, the visual identity will continue to evolve — but always around the same axis:

Calm. Clear. Human. Precise.