The Secret Buddha – Brand Design and Formatting Guide

This public guide outlines the core visual language of The Secret Buddha, including colors, typography and layout principles used across our website, products and communication.

1. Color System

1.1 System Colors

• Primary: #000000 – Base system color.
• Secondary: #020101 – Deep near black used in selected UI elements.
• Text: #020101 – Default dark text on light backgrounds.
• Accent: #000000 – Accent where Elementor expects a system accent color.

1.2 Custom Brand Colors

• White: #FFFFFF – Primary page background, text on brand blue, logo Enso and lightning.
• Light Grey Container: #FAFAFA – Light card and section backgrounds.
• Thin Grey Line: #E9E9E9 – Hairline borders and subtle separators.
• Transparent: #00000000 – Transparent swatch for overlays and gradients.
• Genuine Sky Blue: #155696 – Deep blue accent for strong calls to action or key headings.
• Genuine Sky Blue Light (Primary Brand Blue): #4279B2 – Main brand background for hero areas, key sections and logo background.
• Blue Light Cart: #8DBEE7 – Light blue for soft highlights, badges and supportive elements.
• Dark Red: #A52A2A – Warm accent for important warnings and critical highlights.
• Dull Red: #E75D5D – Softer red for emotional emphasis and supportive alerts.
• Red Brick Text: #B24242 – Red text color for key phrases that need strong emphasis.
• Light Grey Background: #F0F0F0 – Neutral background for forms, sidebars and support areas.
• The Mind Brown: #4D4848 – Dark brownish grey for text or headings in reflective “mind” content.
• Almost Black Background: #272424 – Very dark background band for high contrast sections.
• Grey Border Color: #E5E5E5 – Standard border color for cards, boxes and form fields.
• Light Grey Text: #A9A9A9 – Secondary or muted text (helper copy and meta information).
• Background Beigeish: #F8F3EF – Warm off white for story sections and human centered content.
• Light Purple: #F7F7FB – Very soft tint for calm, reflective sections.

1.3 Color Usage Principles

• Use #4279B2 as the primary brand background for hero sections, key calls to action and logo placement.
• Use white text on dark or blue backgrounds, and #020101 text on light backgrounds.
• Keep reds (#A52A2A, #E75D5D, #B24242) for clear emphasis, warnings and emotionally intense messages.
• Use light greys and warm off white tones (#FAFAFA, #F0F0F0, #F8F3EF, #F7F7FB) to separate sections without heavy borders.

2. Typography

• Primary font: Montserrat, sans serif.
• Fallback fonts: system sans serif stack.
• Body text: Montserrat regular (weight around 400) in a comfortable reading size.
• Section titles and emphasis: Montserrat semi bold or bold (600–700), often implemented as paragraphs with <strong>.
• Buttons and interface labels: Montserrat medium or semi bold, usually in title case or uppercase for shorter labels.

3. Layout and Spacing

• Use full width sections with a centered content area defined in Elementor.
• Top hero section: strong, emotionally honest copy with one or more clear calls to action.
• Typical page flow:
  • Hero section
  • Core resources grid (Diary X, Courses, AI Advisor, Literary Collection)
  • Topic overview (Mind, Body, Nutrition, Spirit, Living)
  • Articles, stories and learning resources
• Use generous vertical spacing between major sections for a calm, readable experience.
• Use moderate inner padding in cards and content boxes, especially on colored backgrounds.
• On mobile, stack content in a single column and ensure buttons and links are easy to tap.

4. Buttons and Calls to Action

• Use Elementor Button widgets with Montserrat labels.
• Primary buttons: background #4279B2 or #155696, white text, subtle corner rounding.
• Secondary buttons: white background, dark text #020101 and thin grey border #E5E5E5.
• Use short, direct labels such as “Join the Community”, “Start the Course”, “Talk to the Advisor”.
• Maintain consistent spacing above and below buttons to keep the layout clean.

5. Imagery and Iconography

• Main logo: white Enso brush circle with a central white lightning bolt, typically on brand blue #4279B2 or on transparent background over that blue.
• Use high resolution PNG or SVG versions of the logo for sharp rendering on all displays.
• Hero and article images should be clean, high contrast and relevant to human wellbeing, philosophy and practical change.
• Avoid heavy frames; images usually sit flush in sections or within light, rounded cards.

6. Elementor Content Formatting

• Use Heading widgets for hero questions and main section titles.
• Use Text Editor widgets for paragraphs, explanations and bullet lists.
• Use columns and inner sections to build two or four column grids for key resources and topic overviews.
• Apply section backgrounds using the brand palette (for example #4279B2 for hero, #FAFAFA or #F8F3EF for softer content areas).
• Use #E9E9E9 or #E5E5E5 for subtle dividers and card borders.

7. WordPress Editor and Course Content

• Write main content as simple paragraphs; the theme applies Montserrat automatically.
• Use <strong> inside paragraphs for section titles and headline sentences instead of oversized headings.
• Use <em> for important nuances and reflective thoughts.
• Use <ul> and <ol> for:
  • Action steps and protocols
  • Checklists and inspiration tracker bullet points
• Avoid heavy <blockquote> styling; represent quotes through inline <em> and <strong> within normal paragraphs.

8. BuddyBoss / Diary X Styling

• Use BuddyBoss defaults for the social feed layout, mapped to the The Secret Buddha color palette.
• Member avatars are circular; post content uses the same Montserrat body style as the main site.
• System actions like “Report”, “Block” and “Guidelines” use the default dark text color #020101.
• Community guidelines and policy pages follow the same formatting rules as course content: bold inline headings and lists, no heavy quote boxes.

9. Logo Usage

• Ensure strong contrast: white logo on dark or blue backgrounds, darker logo only on very light backgrounds.
• Keep clear space around the logo at least equal to the thickness of the Enso stroke.
• Do not stretch, distort or recolor the Enso and lightning symbol outside the defined brand palette.
• For small sizes and favicons, use the Enso plus lightning symbol without text.