Brand Guidelines
& Design System
The complete visual and component reference for all Real Estate Moguls pages, templates, and assets. Every color, type scale, component, and voice principle in one place.
Logo System
Two logo versions — dark and light. Use the dark logo on light backgrounds and the light logo on dark backgrounds. Never place the dark logo on a dark surface or the light logo on a light surface.
Clear space
Maintain clear space equal to the height of the "M" in MOGULS on all sides. No text, icons, or other elements may enter this zone.
Minimum size
Never render the logo smaller than 120px wide on screen or 1.25 inches in print. Below this threshold the stacked type becomes illegible.
Do not modify
Never rotate, stretch, recolor, add effects to, or rearrange the logo. Use only the provided dark and light files exactly as supplied.
Color System
Seven CSS custom properties power the entire platform. Never introduce colors outside this system. Consistency is the brand.
Type Scale
Two font families. Afacad for display — headlines, buttons, and pull quotes. Avenir Next for body — paragraphs, eyebrows, labels, and UI text. Weight and size do all the work.
real estate deserve a platform worthy of them.
Button System
Three core button styles. All share the same padding, border-radius, and font treatment. The difference is context — where it appears and what it needs to do.
| Style | Class | Background | Text | Border | Hover |
|---|---|---|---|---|---|
| .btn-p | Primary | #29ABE2 | #fff | #29ABE2 | --blue-dk fill |
| .btn-g | Ghost Light | transparent | #fff | rgba(255,255,255,.55) | Blue border + text |
| .btn-o | Ghost Blue | transparent | #29ABE2 | #29ABE2 | Blue fill, white text |
/* All buttons share these base properties */
font-family: var(--font-body) | padding: 16px 34px | font-size: 15px | font-weight: 700
letter-spacing: .06em | text-transform: uppercase | border-radius: 3px | border: 2px solid transparent
Section Backgrounds
Five section types. They alternate to create rhythm and visual breathing room. Never stack two dark sections without a light or alt section between them.
| Class | Background | Text Color | Usage |
|---|---|---|---|
| .sec | #ffffff (white) | --authority / body text | Primary content sections. Default. |
| .sec-alt | --background / #F2F4F7 | --authority / body text | Alternating sections. Cards, features, specs. |
| .sec-dark | --authority / #0D1B2A | #fff / rgba(255,255,255,.65) | High-impact sections. Progression, stats, closing. |
| .offer-block | --authority + 5px blue top/bottom | #fff / --primary | Featured announcement block. |
| .fnd | --authority + 5px blue top | #fff / rgba(255,255,255,.38) | Final CTA section. Always last before footer. |
Every member. One professional
identity.
The .offer-block uses a dark background with 5px blue border top and bottom, centered text, and a blue subhead. Reserve for featured announcements only.
UI Components
Every repeating element in the system. Use these exactly. Build new pages by combining these components — never by inventing new patterns.
Cards — Light & Dark
Used in 3-column grids. Light on .sec and .sec-alt backgrounds. Dark (.card-dk) inside .sec-dark sections.
Light card — .card
Border: 1px solid --bdr. Background: white. Used on light and alt section backgrounds.
Second card in the grid.
Cards always sit in a 3-column grid with 22px gap. On mobile they stack to 1 column.
Third card closes the thought.
The three-card structure is: what it is, what it builds, what it makes you. Follow this logic.
Dark card — .card-dk
Border: 1px solid rgba(41,171,226,.2). Background: rgba(255,255,255,.04). Use inside .sec-dark sections.
The blue border glows subtly.
Card headings are white. Body text is rgba(255,255,255,.55). Label stays --primary.
Three cards. One idea each.
Never four cards in a row. Never two. The rhythm is always three.
Series Block — Highlight Callout
Used to isolate the single most important supporting statement in a section. Always immediately after the opening body paragraph.
This is the .series-block component. Blue-lt background, 4px left border in --primary, border-radius on right side only. Used for the one sentence in a section that the reader must not miss. Never use more than one per section.
Pull Quotes
Two pull quote styles. One for light sections, one for dark.
Steps
Used for process flows. Blue circle number, 2-column grid, border-separated rows.
You build presence.
Every episode, reel, and article is produced once and distributed everywhere. It's structured to be found by the referral partners who need to know your name.
Your name is recognized.
Consistent content builds the visibility that makes referral partners confident sending clients your way.
Referrals become structural.
The professionals inside the platform know, trust, and send each other business because they've watched each other work.
Split Layout — Image + Copy
Always 50/50. Image fills its column via object-fit: cover. Copy column has padding: 72px 64px. Three copy variants: white, .alt (--background), .dk (--authority).
The room that changes how your market sees you.
Copy column always starts with an eyebrow, then H2 or H3, then body, then .spts if needed.
You arrive prepared.
This is a .spt — left border 3px --primary. Title is 700 weight. Body is 15px #666.
Your guest feels the difference.
Use .spts inside split copy sections only. Never more than three per column.
Progression Grid
Used inside .sec-dark sections only. Three columns, separated by subtle blue borders. Large ghost number, prog-tag eyebrow, white heading, muted body.
Content produced. Network activated.
Large ghost numbers at 15% opacity. Blue prog-tag above heading. White heading. Muted rgba body text.
Referral partners find you first.
Columns separated by 1px rgba(41,171,226,.2) border. Never use on light backgrounds.
The network compounds permanently.
Always three cards. Always inside sec-dark. Always follows this structure: number, tag, heading, body.
Clarity Bar
A single-sentence statement immediately below the hero. Bold opener, supporting context. No background, just border separation.
Host Card Grid
3-column grid with 3px gap (tight, no breathing room between images). 240–280px tall. Gradient overlay fades from bottom. Name and title at lower left.
Spacing & Layout Tokens
The exact values that govern layout, spacing, and structure across every page. Never approximate these.
| Token | Value | Usage |
|---|---|---|
| --rad | 6px | All border-radius values across all components |
| max-width full | 1100px | Primary content containers — .inn |
| max-width mid | 840px | Mid-width prose and featured blocks — .mid |
| max-width narrow | 700px | Narrow prose, offer copy, CTA explanations |
| section padding | 90px 40px | All sections, desktop |
| section padding mobile | 64px 24px | All sections, max-width 960px |
| hero height | 680px | Full-bleed hero with image |
| card gap | 22px | All 3-column card grids |
| host card gap | 3px | Host card grid only — intentionally tight |
| split copy padding | 72px 64px | Copy column in all split layouts |
| step grid | 60px 1fr | Step number column : content column |
| step-n size | 48px circle | Blue circle step number |
| btn padding | 16px 34px | All button variants |
| btn border-radius | 3px | All button variants — slightly less than --rad |
| hero overlay | linear-gradient(100deg, rgba(13,27,42,.88) 0%, rgba(13,27,42,.62) 42%, rgba(13,27,42,.12) 100%) | All full-bleed hero image overlays |
| offer border | 5px solid --primary | Top and bottom of .offer-block and .fnd |
| pull border | 4px solid --primary | Left border of all .pull components |
| spt border | 3px solid --primary | Left border of .spt inside split copy |
| series-block border | 4px solid --primary | Left border of .series-block highlight |
| image row tall | 320px | Full-bleed image row — tall variant |
| image row short | 240px | Full-bleed image row — short variant |
Voice & Tone
The writing is as much the brand as the color. These principles govern every headline, button label, eyebrow, and body paragraph written for the platform.
Short. Observational. Never sell.
“The Series.” “What changes.” “Already in the room.” “Where this leads.” These are observations, not pitches. Keep them under five words.
One idea. Split across two lines.
The best headlines break at a natural pause and use the second line to complete or subvert the first. The em color on one word does the emotional work.
Action plus the outcome. Not the ask.
“Book your introduction call →” not “Submit.” “Let's Connect →” not “Contact Us.” The arrow implies momentum. Always include it.