Brand Style Guide | Smith & Eulo Law Firm

Smith & Eulo — Brand Style Guide

Smith & Eulo Law Firm · Brand Style Guide

Document Version Version 1.0 · May 2026
For internal & vendor use
smithandeulo.com

Section 01

Logo & Brand Mark

Primary Logos — On Dark

White with Gold Stripe

Preferred · Dark backgrounds · Hero / Header

View Download

White on Black

Dark backgrounds · No stripe variant

View Download

No Stripe

Clean minimal usage · Digital UI elements

View Download

Alternate Logos — On Light

All Black

Light backgrounds · Print documents · Letterhead

View Download

Black with Gold Stripe

Preferred on light · Gold accent retained

View Download

📋 How to publish this page on smithandeulo.com

In WP Admin → Pages → Add New
Title it Brand Style Guide and set the slug to style-guide
Switch the editor to Code Editor (⋮ menu top-right in Gutenberg)
Paste the full HTML of this file as a single Custom HTML block
Set Page Template to Elementor Full Width (no header/footer) or Canvas
Publish — the page will live at smithandeulo.com/style-guide/

The logo images and download links use root-relative paths (/wp-content/uploads/…) so they resolve correctly once hosted on smithandeulo.com.

Logo Usage Rules

✓ Correct Usage

✓

Use "White with Gold Stripe" on all dark/navy backgrounds.

✓

Use "Black with Gold Stripe" on white or off-white backgrounds.

✓

Maintain clear space equal to the height of the "S" in Smith on all sides.

✓

Scale the logo proportionally — never stretch or skew.

✓

Minimum digital size: 120px wide. Minimum print size: 1.25 inches wide.

✗ Incorrect Usage

✗

Don't place the white logo on light or busy backgrounds.

✗

Don't recolor the logo — use only the approved file variants.

✗

Don't apply drop shadows, outlines, or effects to the logo.

✗

Don't place the logo on gold backgrounds — insufficient contrast.

✗

Don't crop, rotate, or rearrange logo elements.

Section 02

Color Palette

Primary Brand Colors

Gold

#D4A017 Primary Accent · CTAs · Highlights

Gold Light

#F0C040 Hover State · Emphasis

Gold Dark

#A07810 Active State · Underlines

Navy

#0A0E1A Backgrounds · Header · Footer

Extended Navy Scale

Navy Mid

#131929 Secondary Bg · Navbars

Navy Light

#1C2540 Cards on Dark · Hover Bg

Slate

#2A3550 Borders on Dark · Dividers

Off-White

#F4F2EE Light Page Backgrounds

Neutral & Semantic Colors

Gray Light

#C8C8C0 Body text on dark

Gray Mid

#7A7A72 Captions · Metadata

Alert Red

#C0392B Errors · Warnings

Success Green

#1A7A4A Confirmations · Success

CSS — Variables

/* ── Smith & Eulo Color Tokens ── */
:root {
  /* Brand */
  --gold:        #D4A017;
  --gold-light:  #F0C040;
  --gold-dark:   #A07810;

  /* Navy Scale */
  --navy:        #0A0E1A;  /* backgrounds, header, footer */
  --navy-mid:    #131929;  /* navbars, secondary bg */
  --navy-light:  #1C2540;  /* hover states, dark cards */
  --slate:       #2A3550;  /* borders on dark */

  /* Neutrals */
  --off-white:   #F4F2EE;
  --gray-light:  #C8C8C0;  /* body text on dark */
  --gray-mid:    #7A7A72;  /* captions, metadata */

  /* Semantic */
  --danger:      #C0392B;
  --success:     #1A7A4A;
}

Section 03

Typography

Type Scale — Light Background

Heading 1 / Hero

Playfair Display · 52px · 900 · LS -1px h1 / .hero-title

Heading 2 / Section Title

Playfair Display · 38px · 700 h2

Heading 3 / Card Title

Playfair Display · 28px · 600 h3

Heading 4 / Lead text that introduces a section or feature area of the website clearly.

Source Sans 3 · 18px · 400 h4 / .lead

Body copy — We have handled crimes such as first-degree murder, capital sex battery, burglary, theft, violations of probation, domestic violence, traffic offenses, and DUI offenses. Our team of experienced attorneys is here to fight for your rights.

Source Sans 3 · 15px · 400 · LH 1.7 p / body

Caption / metadata text used for dates, author names, footnotes, and other secondary information on the page.

Source Sans 3 · 13px · 400 · Gray .caption / small

Section Label / Eyebrow Text

Source Sans 3 · 11px · 700 · LS 3px · UPPERCASE .eyebrow / .label

Type on Dark Backgrounds

Fighting For Your Rights

Available 24/7 · Hablamos Español

Our experienced criminal defense attorneys are available around the clock to help protect your freedom and your future.

Font Families

Role	Family	Weights	Use Case
Display	`Playfair Display`	400, 600, 700, 900	Headlines, hero text, section titles, attorney names
Body	`Source Sans 3`	300, 400, 600, 700	Body copy, navigation, buttons, labels, forms
Fallback	`Georgia, Arial`	—	System fallback stack

HTML + CSS — Typography

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=Source+Sans+3:wght@300;400;600;700&display=swap');

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Source Sans 3', Arial, sans-serif;
}

/* ── Usage ── */
h1 { font-family: var(--font-display); font-size: 52px; font-weight: 900; letter-spacing: -1px; }
h2 { font-family: var(--font-display); font-size: 38px; font-weight: 700; }
h3 { font-family: var(--font-display); font-size: 28px; font-weight: 600; }
p  { font-family: var(--font-body);    font-size: 15px; line-height: 1.7; }

/* Eyebrow / label */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--gold-dark);
}

/* HTML example */
<span class="eyebrow">Criminal Defense</span>
<h2>Fighting For Your Rights</h2>
<p>Body copy text goes here.</p>

Section 04

Buttons

Primary / On Light Background

Free Consultation Call Now Get Help Now

Secondary / Outline

Learn More View Case Results

On Dark Background

Free Consultation View Practice Areas Read More →

Button Specifications

Variant	Background	Text Color	Border	Font
Primary	`#D4A017`	`#0A0E1A`	None	Source Sans 3 · 13px · 700 · UPPERCASE · LS 1px
Secondary	Transparent	`#D4A017`	2px solid #D4A017	Source Sans 3 · 13px · 700 · UPPERCASE · LS 1px
Dark Fill	`#0A0E1A`	`#D4A017`	None	Source Sans 3 · 13px · 700 · UPPERCASE · LS 1px
Text / Link	None	`#D4A017`	1px underline	Source Sans 3 · 13px · 700 · UPPERCASE · LS 1px

⚠ Buttons use no border-radius (sharp corners) to reinforce the firm, authoritative brand character. Padding sizes: Small — 9×18px; Default — 14×28px; Large — 18×40px.

HTML + CSS — Buttons

/* ── Button Base ── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  padding: 14px 28px; border-radius: 0;
  border: none; cursor: pointer; text-decoration: none;
}

/* Primary — gold bg, navy text */
.btn-primary { background: var(--gold); color: var(--navy); }
.btn-primary:hover { background: var(--gold-light); }

/* Secondary — outline */
.btn-secondary { background: transparent; color: var(--gold); border: 2px solid var(--gold); }
.btn-secondary:hover { background: rgba(212,160,23,0.1); }

/* Dark fill */
.btn-dark { background: var(--navy); color: var(--gold); }

/* Sizes */
.btn-sm { padding: 9px 18px;  font-size: 11px; }
.btn-lg { padding: 18px 40px; font-size: 15px; }

/* HTML examples */
<a class="btn btn-primary" href="/free-consultation/">Free Consultation</a>
<a class="btn btn-secondary" href="/practice-areas/">Practice Areas</a>
<a class="btn btn-primary btn-lg" href="/contact/">Get Help Now</a>

Section 05

Form Elements

First Name

Last Name

Phone Number

Practice Area

Tell Us About Your Case

Submit for Free Consultation

HTML — Contact Form

<div class="form-wrap">
  <div class="form-group">
    <label class="form-label">Full Name</label>
    <input class="form-input" type="text" placeholder="John Smith">
  </div>
  <div class="form-group">
    <label class="form-label">Phone Number</label>
    <input class="form-input" type="tel" placeholder="(407) 555-0100">
  </div>
  <div class="form-group">
    <label class="form-label">Practice Area</label>
    <select class="form-select">
      <option>Select a practice area…</option>
      <option>Criminal Defense</option>
      <option>DUI / DWI</option>
    </select>
  </div>
  <div class="form-group">
    <label class="form-label">Tell Us About Your Case</label>
    <textarea class="form-input" rows="4"></textarea>
  </div>
  <a class="btn btn-primary" href="#">Submit for Free Consultation</a>
</div>

/* ── Form CSS ── */
.form-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--navy); display: block; margin-bottom: 6px;
}
.form-input, .form-select {
  width: 100%; padding: 12px 14px;
  font-size: 15px; border: 1px solid #CCC;
  border-radius: 0; background: white;
}
.form-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,160,23,0.15);
  outline: none;
}

Section 06

Cards

Practice Area Cards — Light

Criminal Defense

Representing clients facing charges ranging from misdemeanors to serious felonies throughout Florida.

Explore Practice →

DUI / DWI Defense

Experienced representation for all types of driving under the influence charges in Florida courts.

Explore Practice →

Immigration Law

Comprehensive immigration services including asylum, deportation defense, and visa assistance.

Explore Practice →

Practice Area Cards — Dark

Criminal Defense

Representing clients facing charges ranging from misdemeanors to serious felonies throughout Florida.

Explore Practice →

DUI / DWI Defense

Experienced representation for all types of driving under the influence charges in Florida courts.

Explore Practice →

Immigration Law

Comprehensive immigration services including asylum, deportation defense, and visa assistance.

Explore Practice →

Stat Cards

15+

Years of Experience

5,000+

Cases Litigated

500+

Taken to Trial

24/7

Available to You

HTML — Cards

/* ── Practice Area Card (Light) ── */
<div class="card">
  <div class="card-title">Criminal Defense</div>
  <div class="card-body">Description text here.</div>
  <a class="card-cta" href="#">Explore Practice →</a>
</div>

/* ── Practice Area Card (Dark) ── */
<div class="card-dark">
  <div class="card-title">DUI / DWI Defense</div>
  <div class="card-body">Description text here.</div>
  <a class="card-cta" href="#">Explore Practice →</a>
</div>

/* ── Stat Card ── */
<div class="stat-card">
  <div class="stat-number">15+</div>
  <div class="stat-label">Years of Experience</div>
</div>

/* ── Card CSS ── */
.card {
  background: white; border: 1px solid #E0DDD8;
  border-top: 3px solid var(--gold);
  border-radius: 0; padding: 28px;
}
.card-title  { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.card-body   { font-size: 14px; color: var(--gray-mid); line-height: 1.7; }
.card-cta    { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }

Section 07

Badges & Alerts

Badges

Board Certified Available 24/7 Free Consultation Florida Bar Case Won Urgent

Alert / Callout Bars

Important: If you have been arrested, do not speak to law enforcement without an attorney present. Call us immediately — 24/7.

Español: Nuestros abogados hablan español y están disponibles para ayudarle en su idioma nativo.

Case Dismissed: All charges against the client were dropped following our Motion to Suppress hearing.

Act Fast: You have only 10 days after a DUI arrest to request a DMV hearing to protect your driver's license.

HTML — Badges & Alerts

/* ── Badges ── */
<span class="badge badge-gold">Board Certified</span>
<span class="badge badge-navy">Available 24/7</span>
<span class="badge badge-outline">Free Consultation</span>
<span class="badge badge-success">Case Won</span>
<span class="badge badge-danger">Urgent</span>

/* ── Alerts ── */
<div class="alert alert-gold">
  <strong>Important:</strong> Message text here.
</div>
<div class="alert alert-danger">
  <strong>Act Fast:</strong> Urgent message here.
</div>

/* ── Badge CSS ── */
.badge         { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; }
.badge-gold    { background: var(--gold); color: var(--navy); }
.badge-navy    { background: var(--navy); color: var(--gold); }
.badge-outline { border: 1.5px solid var(--gold); color: var(--gold-dark); }
.badge-success { background: rgba(26,122,74,0.12); color: var(--success); border: 1px solid rgba(26,122,74,0.3); }
.badge-danger  { background: rgba(192,57,43,0.10); color: var(--danger);  border: 1px solid rgba(192,57,43,0.3); }

/* ── Alert CSS ── */
.alert         { padding: 14px 20px; border-left: 4px solid; font-size: 14px; border-radius: 0 4px 4px 0; }
.alert-gold    { border-color: var(--gold); background: rgba(212,160,23,0.08); color: #7A5800; }
.alert-info    { border-color: #2980B9;    background: rgba(41,128,185,0.07);  color: #1A5278; }
.alert-success { border-color: var(--success); background: rgba(26,122,74,0.07);   color: var(--success); }
.alert-danger  { border-color: var(--danger);  background: rgba(192,57,43,0.07);  color: var(--danger); }

Section 08

UI Components

CTA Bars

Ready to fight your charges? Free consultation · Available 24/7 · Hablamos Español

Call 407-930-8912

Schedule Your Free Case Evaluation No obligation · Confidential · Same-day response

Get Started

Dividers

Content above the gold divider

Content below the gold divider

Content separated by a thin neutral rule

Spacing Scale

Token	Value	Usage
`space-xs`	4px	Icon gaps, tight badge padding
`space-sm`	8px	Button icon gap, inline element gap
`space-md`	16px	Card internal gap, form row gap
`space-lg`	28–32px	Card padding, section internal padding
`space-xl`	48px	Page padding, major section spacing
`space-xxl`	72–80px	Section top margin, hero padding

HTML — CTA Bar & Dividers

/* ── CTA Bar (Light) ── */
<div class="cta-bar">
  <div class="cta-bar-text">
    Ready to fight your charges?
    <small>Free consultation · Available 24/7</small>
  </div>
  <a class="btn btn-dark" href="tel:+14079308912">Call 407-930-8912</a>
</div>

/* ── Gold Divider ── */
<hr class="divider-gold">

/* ── Thin Divider ── */
<hr class="divider-thin">

/* ── CTA Bar CSS ── */
.cta-bar {
  background: var(--gold); padding: 20px 32px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.cta-bar-text       { font-size: 16px; font-weight: 600; color: var(--navy); }
.cta-bar-text small { display: block; font-size: 13px; font-weight: 400; opacity: 0.75; }

/* ── Divider CSS ── */
.divider-gold { border: none; border-top: 2px solid var(--gold); margin: 24px 0; }
.divider-thin { border: none; border-top: 1px solid #E0DDD8; margin: 24px 0; }

Section 09

Do's & Don'ts

✓ Do

✓

Use Playfair Display for all headings and display text on the website.

✓

Use #D4A017 gold as the primary CTA button color on dark backgrounds.

✓

Keep buttons sharp-cornered (border-radius: 0) for an authoritative look.

✓

Use uppercase letter-spacing on labels, eyebrows, and button text.

✓

Apply the 3px gold top border to all cards and section dividers.

✓

Pair dark navy backgrounds with gold accents and off-white text for contrast.

✓

Use Source Sans 3 at weight 300 for large hero subheadings on dark backgrounds.

✗ Don't

✗

Don't use generic sans-serif fonts (Roboto, Inter, Arial) for headings.

✗

Don't use rounded pill-shaped buttons — they conflict with the brand character.

✗

Don't place gold text on white backgrounds (low contrast) — use navy instead.

✗

Don't use more than two accent colors in a single component or section.

✗

Don't use the logo on busy photo backgrounds without a dark overlay.

✗

Don't use purple gradients, pastel palettes, or "techy" design aesthetics.

✗

Don't center-align body copy blocks longer than two sentences.

Section 10

Sample Page Patterns

Hero Banner

Orlando's Premier Criminal Defense Firm

Your Freedom.
Our Fight.

Experienced criminal defense attorneys serving Florida — available 24 hours a day, 7 days a week.

Free Consultation Our Practice Areas

Page Section with Stat Bar

Why Choose Smith & Eulo

A Firm Built on Results, Not Promises

We offer client-centered focus and reasonable pricing based on actual work done, along with flexible payment plans. When it comes to criminal defense, our experienced and compassionate attorneys have in-depth expertise covering all areas of criminal law.

Meet Our Attorneys

HTML — Hero Banner

<section class="hero">
  <p class="eyebrow">Orlando's Premier Criminal Defense Firm</p>
  <h1>Your Freedom. Our Fight.</h1>
  <p class="hero-sub">Available 24/7 across Florida.</p>
  <div class="hero-ctas">
    <a class="btn btn-primary btn-lg" href="/free-consultation/">Free Consultation</a>
    <a class="btn btn-secondary btn-lg" href="/practice-areas/">Practice Areas</a>
  </div>
</section>

/* ── Hero CSS ── */
.hero {
  background: var(--navy); padding: 80px 48px;
  text-align: center; border-top: 3px solid var(--gold);
}
.hero h1       { font-family: var(--font-display); font-size: 56px; font-weight: 900; color: white; }
.hero .eyebrow { color: var(--gold); margin-bottom: 16px; }
.hero .hero-sub{ font-size: 18px; font-weight: 300; color: var(--gray-light); margin: 16px 0 32px; }
.hero-ctas     { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }