Visual Identity & Design System

This guide outlines the aesthetic foundation of MindfulHeads. Our goal is to create a digital space that feels like a “deep breath”—clean, light, and grounded—using our brand orange as a spark of motivation rather than a source of noise.

1. The Color Palette

We follow the 60-30-10 Rule to maintain visual balance.

Layer	Role	Hex	Visual
Primary Canvas	Background / Space	#FAF9F6
Primary Text	Readability	#2D2D2D
Brand Accent	Action / Energy	#ED7014
Secondary Accent	Grounding / Calm	#5B6D5B
Neutral Divider	Structure	#E5E5E5
Soft Tint	Contrast / Cards	#FEF1E7

2. Typography

A balance between the “wisdom” of serifs and the “modernity” of sans-serifs.

Headings: Lora

• Vibe: Thoughtful, traditional, calm.
• Use for: Page titles (H1) and section headers (H2).
• Styling: Bold (700).

Body Text: Inter

• Vibe: Clean, accessible, modern.
• Use for: All paragraph text, menus, and buttons.
• Styling: Regular (400) with a line-height of 1.6 for readability.

3. The “Orange” Rule

#ED7014 is a high-vibration color. To keep the site “Mindful,” we treat this color as a surgical tool.

• Never use orange for large background blocks.
• Always use orange for the primary “Call to Action” (CTA).
• Contextual use: Use for progress bars, active navigation states, or a single meaningful word in a headline.
• Contrast: Ensure white text on orange buttons uses a thick enough weight to remain accessible.

4. Design Principles

Whitespace (The Breath)

Avoid clutter. Every section should have generous padding (minimum 60px vertical margin on desktop). If a page feels “busy,” add more whitespace.

Softened Corners

To maintain an approachable and “human” feel, avoid 90-degree sharp corners on UI elements.

• Buttons: 6px border-radius.
• Cards/Images: 12px border-radius.

Elevation

Use “Flat-plus” design. Elements shouldn’t look like they are floating high above the page, but a very subtle shadow can be used to distinguish cards from the canvas.

• Shadow setting: 0 4px 12px rgba(0, 0, 0, 0.05)

5. UI Component Standards

Note to Developers: > When building Hugo shortcodes for this site, ensure the Primary Button class defaults to the Brand Orange with a hover state that slightly darkens the shade.

• Buttons: 16px font size, Bold, White text on Orange.
• Alerts/Notes: Use the Soft Tint (#FEF1E7) as the background color with a Sage Green (#5B6D5B) left-border for a calming “Pro-tip” look.