Brand Guidelines — Chris Villar

01 — Color

Color Palette

Six tokens define the entire palette. Dark, warm, restrained — with a single point of heat. Ember is the only chromatic color; use it sparingly and with intention.

Primary

Ink

#0d0d0b

Primary background. The dominant surface across all pages.

Primary text

Bone

#f5f0e8

Primary text, headlines. Warm off-white — never pure white.

Accent

Ember

#c94f2a

CTAs, kickers, accent lines, section labels. The brand's single point of warmth and energy.

Secondary

Ash

#c8c0b4

Body text, secondary copy, italic subtexts. The voice of warmth without demand.

Surface

Smoke

#2a2a26

Alternate section backgrounds, borders, dividers. Subtle depth without contrast.

Tertiary

Warm-Mid

#8a7f70

Navigation labels, metadata, monospace UI elements. The quiet infrastructure.

02 — Typography

Three Typefaces, Three Roles

Each typeface carries a distinct energy. Display commands attention. Serif carries soul. Mono provides structure. They never compete — they take turns.

Bebas Neue Display · Headlines · Numbers

COACHING FOR THE
NEW TOMORROW

Weight: 400 (single weight) · Size: clamp(3rem, 6vw, 6.5rem) · Line-height: 0.92 · Letter-spacing: 0.01–0.02em
Usage: Hero headlines, stat numbers, section headers. Always uppercase by nature. Used for bold, architectural statements.

Cormorant Garamond Serif · Body · Section Titles

What if sustainable growth came from coherence, not control?

Weights: 300 (body), 400 (default), 600 (bold emphasis) · Italic: 300i, 400i (for subtext, quotes)
Base size: 20px · Line-height: 1.7 (body), 1.15 (titles) · Fallback: Georgia, serif
Usage: Body copy, section titles, testimonials. The voice of the brand. Carries warmth, authority, and humanity.

DM Mono Monospace · UI · Labels

01 — The Landscape Coaching for the New Tomorrow Explore →

Weights: 300, 400 · Size: 0.65–0.88rem · Letter-spacing: 0.15–0.3em · Transform: uppercase (always)
Usage: Navigation, kickers, section labels, metadata, CTAs. The structural scaffolding — precise, quiet, never the star.

03 — Voice & Tone

How the Brand Speaks

The voice is grounded, clear, and warm without being soft. It speaks to high-achieving people with depth — never talking down, never performing. Intimacy over perfection. Share what's real before it's polished.

Grounded Clarity

Direct, concrete, rooted in lived experience. No buzzwords, no jargon, no motivational poster energy. Say what you mean with precision and warmth.

Poetic Realism

Metaphor and rhythm are welcome, but only in service of truth. Language can be beautiful and still be precise. The goal is resonance, not decoration.

Invitational, Not Performative

The brand opens a door. It doesn't push anyone through it. No urgency tactics, no scarcity pressure, no manufactured authority. Confidence without volume.

Depth Without Weight

This work touches serious human territory — trauma, identity, power, intimacy. The tone holds that seriousness without becoming heavy or clinical. Light enough to breathe, deep enough to mean something.

The Brand Says

Sustainable growth comes from coherence, not control.
When people become emotionally resourced, life gets simpler.
You already know what needs to change. Let's build the capacity to do it.
This work is about becoming more true, not more productive.

The Brand Never Says

10X your results with this one mindset shift!
Unlock your ultimate potential today.
Limited spots available — act now!
I'll show you the secret to success.

04 — Photography

Image Treatment

All photography is rendered in full grayscale with an optional warm radial overlay. This creates visual cohesion, removes the distraction of color, and lets the imagery support the typography rather than compete with it.

Portrait — Grayscale + ember overlay

Environment — Grayscale + ember overlay

Property	Value	Notes
Filter	`grayscale(100%)`	Applied to all images via CSS
Overlay	`radial-gradient(ellipse at 30% 40%, rgba(201,79,42,0.09), transparent 55%)`	Applied via ::after pseudo-element on the container
Object-fit	`cover`	Images always fill their container
Object-position	`center top`	Portraits favor the face; landscapes center

05 — Layout

Layout & Spacing

Generous space is the brand's most important design element. The restraint in spacing communicates the same thing the voice does: confidence without crowding.

01

Hero Grid

60/40 split on desktop (1fr 40%). Content left, full-bleed image right. Single column on mobile below 768px.

02

Section Padding

Desktop: 7rem 4rem. Tablet: 5rem 2.5rem. Mobile: 3rem 1.75rem. Sections breathe. Nothing is cramped.

03

Content Width

Body text maxes at 640px. Section titles at 700px. This keeps line lengths comfortable and reading effortless.

04

Alternating Backgrounds

Sections alternate between var(--ink) and var(--smoke), creating depth and rhythm without additional elements.

05

Section Label Pattern

Every section begins with: DM Mono kicker in ember + a thin rule line. This establishes hierarchy before the title appears.

06

Fluid Typography

Headlines use clamp() for fluid scaling. Example: clamp(3rem, 6vw, 6.5rem). No breakpoint jumps — smooth scaling.

06 — Motion

Animation & Transitions

Motion is subtle and purposeful. Elements arrive gently — never bounce, never overshoot. The feeling is a quiet reveal, not a performance.

Fade In

0.8s

ease timing
translateY(20px) → 0

Stagger Delay

0.15s

between sibling
elements

Hover

0.2s

all transitions
ease timing

Expand

0.5s

max-height
ease timing

Animation	CSS	Usage
Fade up on scroll	`@keyframes fadeUp { from { opacity: 0; translateY(20px) } }`	All content entering the viewport
Staggered entry	`animation-delay: calc(0.15s * var(--i))`	Card grids, list items, sibling elements
Hover lift	`transform: translateY(-1px)`	CTA buttons only
Color transition	`transition: color 0.2s, background 0.2s`	Links, interactive elements

07 — CSS Reference

Quick Reference

Copy-paste ready. These are the CSS custom properties and font imports that power the entire site.

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400&family=Bebas+Neue&display=swap');

/* Brand Tokens */
:root {
  --ink: #0d0d0b;      /* Primary background */
  --bone: #f5f0e8;     /* Primary text */
  --ash: #c8c0b4;      /* Secondary text */
  --ember: #c94f2a;    /* Accent — CTAs, highlights */
  --smoke: #2a2a26;    /* Alt backgrounds, borders */
  --warm-mid: #8a7f70; /* Labels, metadata */
}

/* Base Typography */
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  line-height: 1.7;
  background: var(--ink);
  color: var(--bone);
}
  

AI Brand Prompt

Paste this into any AI tool to apply the VILLAR brand to generated content — artifacts, HTML, presentations, or design assets.

Apply the VILLAR Coaching brand style to this output. Here are the guidelines:

COLOR PALETTE
Use these exact CSS custom properties:
  --ink: #0d0d0b       (primary background, dark surfaces)
  --bone: #f5f0e8      (primary text, headlines — warm off-white, never pure white)
  --ash: #c8c0b4       (body text, secondary copy, italic subtexts)
  --ember: #c94f2a     (accent ONLY — CTAs, kickers, section labels, highlights. Use sparingly.)
  --smoke: #2a2a26     (alternate section backgrounds, borders, dividers)
  --warm-mid: #8a7f70  (navigation labels, metadata, monospace UI elements)

TYPOGRAPHY
Three typefaces, three roles — they never compete:
  Bebas Neue          — Display headlines, stat numbers. Always uppercase. Size: clamp(3rem, 6vw, 6.5rem). Line-height: 0.92.
  Cormorant Garamond  — Body copy, section titles, testimonials. Weights: 300 (body), 400 (default), 600 (bold). Base: 20px. Line-height: 1.7.
  DM Mono             — Navigation, kickers, section labels, metadata, CTAs. Size: 0.65-0.88rem. Letter-spacing: 0.15-0.3em. Always uppercase.

VOICE & TONE
  - Grounded clarity: direct, concrete, rooted in lived experience. No buzzwords or motivational poster energy.
  - Poetic realism: metaphor is welcome but only in service of truth. Resonance, not decoration.
  - Invitational, not performative: opens a door without pushing anyone through it. Confidence without volume.
  - Depth without weight: holds serious territory without becoming heavy or clinical.

PHOTOGRAPHY
  All images: filter: grayscale(100%). Overlay: radial-gradient(ellipse at 30% 40%, rgba(201,79,42,0.09), transparent 55%).

LAYOUT PRINCIPLES
  - Generous whitespace is the most important design element
  - Section padding: 7rem 4rem (desktop), scaling down on mobile
  - Body text max-width: 640px. Section titles max-width: 700px
  - Every section begins with a DM Mono kicker in ember + thin rule line
  - Headlines use clamp() for fluid scaling — no breakpoint jumps
  - Backgrounds alternate between --ink and --smoke for depth

MOTION
  Subtle, purposeful. Fade-in: 0.8s ease, translateY(20px). Stagger: 0.15s between siblings. Hover: 0.2s ease. Never bounce or overshoot.