Be More Human — Visual Identity Guide
Be More Human
Visual Identity Guide
v1.0 · 2026

Design that feels
human.

01 — Colour 02 — Typography 03 — Spacing 04 — Usage Rules 05 — Live Preview

01 — Colour

The Brand Palette

Foundations

Charcoal
#1E1E1C
Primary text, nav, buttons, dark sections, footers
Ivory
#F9F7F4
Primary page background, light card fill, reversed text on dark
Ivory Deep
#F0EDE8
Alternating section backgrounds, input fields, sidebar tints
Charcoal Mid
#3A3A38
Body text, readable copy, card headings

Brand Accent — Sage

Sage
#5C7A6A
Primary brand accent. Hover states, italics, section labels, CTAs on hover, links
Sage Light
#EAF0EC
Pill badges, icon backgrounds, outcome cells on hover, step-active tint
Sage Mid
#8AA898
Decorative accents on dark backgrounds, large quotation marks, secondary highlights

Secondary Accent — Gold

Gold
#B8934A
Credibility callouts, book reference block borders, special emphasis — use sparingly
Gold Light
#F5EDD8
Fill for credibility/partnership callout blocks. Pairs with Gold border.

Text & Border Utilities

Text Muted
#7A7A76
Subheadings, descriptions, caption text, secondary body copy
Border
rgba(30,30,28,0.1)
Card borders, dividers, form inputs. Never use a hard grey — always semi-transparent.

02 — Typography

Font System

Display · Serif
Playfair Display
Headlines, section titles, pull quotes, hero text
Aa Bb Cc
Transform the way
you think, lead, and live.
Weight 400 — RegularLeadership
Weight 500 — MediumLeadership
Weight 400 Italiclead and live
Body · Sans-Serif
DM Sans
Body copy, navigation, buttons, labels, captions, UI text
Aa Bb Cc
Evidence-based tools.
Human-first results.
Weight 300 — LightSubheadings & leads
Weight 400 — RegularBody copy & descriptions
Weight 500 — MediumButtons & labels
Hero H1
Font: Playfair Display
Size: clamp(38px → 60px)
Weight: 500
Line-height: 1.12
Letter-spacing: −0.02em
Use once per page — the single biggest statement. Often includes an italic Sage-coloured phrase.
Stop waiting years.
Transform how you lead and live.
Section H2
Font: Playfair Display
Size: clamp(28px → 44px)
Weight: 500
Line-height: 1.15
Letter-spacing: −0.02em
Opens each page section. Often split across two lines with a line-break after the comma or "and".
Evidence-based tools.
Human-first results.
Card H3
Font: Playfair Display
Size: 17–22px
Weight: 500
Line-height: 1.2
Letter-spacing: −0.01em
Card titles, feature headings, testimonial headings, "About" panel names. Never bold DM Sans at this scale.
C-Suite & YPO/WPO Executives
Discovery Call — Free, no obligation.
Section Label
Font: DM Sans
Size: 11px
Weight: 500
Transform: UPPERCASE
Letter-spacing: 0.16em
Colour: Sage #5C7A6A
Always appears above an H2 to orient the reader. "01 — Colour", "Who works with Ran", "The methodology". Never on a dark background.
Who works with Ran
The Foundation Package
Lead / Intro
Font: DM Sans
Size: 18px
Weight: 300 (Light)
Line-height: 1.65
Colour: Text Muted #7A7A76
The paragraph directly beneath an H1 or H2. Max-width ~580px. Sets tone before bullet lists or cards appear.
Ran Elfassy works one-on-one with executives, professionals, and achievers to break through self-limiting beliefs and unlock joyful, purposeful performance.
Body Copy
Font: DM Sans
Size: 16px
Weight: 300–400
Line-height: 1.75
Colour: Text Muted #7A7A76
Long-form paragraphs in the About section, FAQ answers, step descriptions, and method explanations. Use weight 300 for warmth, 400 for clarity.
For over two decades, Ran Elfassy has worked at the intersection of human performance, leadership science, and mindset transformation—supporting C-Suite executives and young adults alike.
UI / Small Body
Font: DM Sans
Size: 13–14px
Weight: 400
Line-height: 1.6
Colour: Text Muted
Card descriptions, bullet list items, FAQ answers, form notes, credential items, nav links. The workhorse of the UI.
  • ●Realign your purpose and vision
  • ●Express calm confidence in high-stakes situations
  • ●Build a high-trust culture that delivers
Caption / Meta
Font: DM Sans
Size: 11–12px
Weight: 400–500
Colour: Text Muted or Sage
Dates, roles under testimonial names, form labels (uppercase), footer links, nav eyebrow text, "Step 1" labels. Never use below 11px.
Co-Founder & Chairman Emeritus, DHL International · Hong Kong
Email Address
🔒 Your information is completely confidential.

03 — Spacing & Layout

Space Scale

Token Value Visual Use case
space-1 4px
Icon-to-label gap, pill internal gap, dot spacing
space-2 8px
Inline gap (button icon to text), small list item gap
space-3 12px
Card grid gap (compact), between bullet items, form field gap
space-4 16px
Standard form group gap, between stat cards, tag row gap
space-5 20px
Between eyebrow label and H1/H2, method item padding
space-6 24px
Card padding (compact cards), between body paragraphs
space-8 32px
Card body padding, between card and next element
space-10 40px
Card padding (primary cards), contact form padding
space-12 48px
Stepper content padding, hero actions bottom margin, section head to grid
space-16 64px
Section padding top/bottom (mobile), between major blocks
space-20 80px
Two-column grid gap (desktop), hero column gap
space-25 100px
Full section vertical padding (desktop). Sections breathe — never tighter than this.

Border Radius

Pill / Tag20px
Button4px
Small card / Input6–8px
Standard card12px
Primary card / Hero16px

Grid Layout

Max content width1200px
Page gutter (desktop)48px
Page gutter (mobile)20–24px
2-col gap80px
Card grid gap24px

04 — Usage Rules

When & How to Use Each Element

🖊

Playfair Display — When to use

Use exclusively for page-level headlines (H1, H2), card titles (H3), named sections, and pull quotes. Italic weight in Sage is reserved for the most emotionally resonant phrase in a headline — never use italic for full sentences.

📝

DM Sans — When to use

All body copy, navigation, buttons, form labels, badges, captions, list items, and any UI element. Never use Playfair Display for anything interactive or informational — it belongs to the "feeling", not the "function".

🌿

Sage — When to use

Section labels, italic hero emphasis, hover states on buttons and links, pill badges, progress indicators, list bullet dots, step active states, and LinkedIn/external link text on dark backgrounds. Never use as primary text colour on white.

✨

Gold — When to use

Use sparingly and with intention. Only for credential callout blocks (the Po Chung/DHL partnership reference), left-border accents on achievement or award copy, and the "Book" CTA in the interactive stepper. Never use Gold as a general accent — it signals authority and rarity.

🔘

Buttons

Primary: Charcoal background, Ivory text. Hover → Sage background. Used for the single most important CTA per section. Ghost: Transparent background, Charcoal border and text. Used for secondary actions (e.g. "See how it works" beside the primary CTA).

🃏

Cards

Primary card (hero sidebar, contact form): White bg, 16px radius, 1px border, 40px padding. Content card (who-grid, testimonials): White bg, 12px radius, 1px border, 32px padding, hover lift effect. Metric/stat card: Ivory bg, no border, 8px radius, 14–16px padding.

🏷

Badges & Pills

Sage pill (Sage Light bg + Sage text): Category labels, methodology tags, step labels, "Section Label" equivalents within cards. Gold pill: Credibility or award-level callouts only. All pills: 11px, weight 500, uppercase, 0.06em letter-spacing, 20px border-radius.

📐

Section Alternation

Sections alternate between three backgrounds to create rhythm without visual noise: Ivory Deep (#F0EDE8) → White (#FFFFFF) → Ivory Deep. Dark sections (Charcoal) are used only for the Contact/CTA section and the footer. Never two adjacent dark sections.

Do & Don't

✓ Do
  • Use Playfair Display with a line-break after the comma or "and" — two-line headlines read better
  • Use italic Sage for the most meaningful phrase in a hero headline only
  • Use Section Labels (UPPERCASE, Sage, 11px) above every H2
  • Keep Lead text at weight 300 — warmth comes from lightness
  • Use the word "joyful" and "human" — they are core to the brand voice
  • Let white space breathe — 100px vertical padding on desktop sections
  • Keep the primary CTA ("Book Your Discovery Call") consistent across every section
✕ Don't
  • Don't use Playfair Display for body copy, captions, buttons, or UI labels
  • Don't use italic Playfair for whole paragraphs or blockquotes — only short phrases
  • Don't use Gold as a decorative accent — reserve it for credibility callouts only
  • Don't stack two Charcoal-background sections back to back
  • Don't use hard grey (#999) for borders — always use the semi-transparent border token
  • Don't write headings in ALL CAPS — only Section Labels are uppercase
  • Don't reduce page gutter below 20px on any screen size

05 — Live Preview

The System in Context

All type styles, colours, and spacing shown together as they appear on the actual site.

be-more-human-consulting.com
Executive & Leadership Mindset Consulting
Stop waiting years.
Transform how you lead and live—now.
Ran Elfassy works one-on-one with executives, professionals, and achievers to break through self-limiting beliefs and unlock joyful, purposeful performance—with results in days and weeks, not months.
Book Your Free Discovery Call See how it works →
The methodology
Evidence-based tools.
Human-first results.
Ran draws from well-established, scientifically-grounded disciplines—not trendy frameworks. Every approach is tailored to your situation and built around your values, not a one-size-fits-all programme.
Cognitive Behavioral Therapy (CBT)
Identify and restructure the thought patterns that are quietly blocking your performance and joy. Used in every engagement as a foundational tool.
Methodology tags
CBT Hypnotherapy SNL Framework Socratic Co-author — DHL
Caption / meta text
Po Chung · Co-Founder & Chairman Emeritus, DHL International · Hong Kong
🔒 Your information is completely confidential. Ran replies within one business day.
Approved colour pairings
On Charcoal
Ivory text ✓
Sage Mid accent ✓
On White
Charcoal text ✓
Sage accent ✓
Text Muted ✓
On Ivory Deep
Charcoal text ✓
Sage accent ✓
On Sage Light
Sage text ✓
Charcoal text ✓
On Gold Light
Charcoal text ✓
Gold accent ✓