Logo Lockups

TMG Books primary logo and parent brand mark. The logo has a black background baked into the asset.

Primary Logo (desktop: 222px, mobile: 121px)

Parent Brand Mark

<img src="assets/tmg-books-logo.png" alt="TMG Books logo" class="tmg-header__logo">

Color Palette

Every color in the system, its hex value, CSS variable, and intended role.

Brand Colors

Primary

#000000

--color-brand-primary

Accent (Gold)

#DDD68C

--color-brand-accent

Accent Hover (Green)

#31A050

--color-brand-accent-hover

White

#FFFFFF

--color-brand-white

Background Colors

Dark

#000000

--color-bg-dark

Light

#FFFFFF

--color-bg-light

Muted

#EBEBEB

--color-bg-muted

Accent Wash

rgba(222,215,140,0.76)

--color-bg-accent-wash

Cream

#F2F1E6

--color-bg-cream

Header Contrast

#1F1F1F

--color-bg-header-contrast

Text Colors

Heading

#0D141A

--color-text-heading

Body

#0A1015

--color-text-body

Body Alt

#1B1F1C

--color-text-body-alt

Muted

#4D5156

--color-text-muted

Accent

#DDD68C

--color-text-accent

On Dark

#FFFFFF

--color-text-on-dark

Border Colors

Input

#B8C0CC

--color-border-input

Input Hover

#0D141A

--color-border-input-hover

State / System

Hover

#1D1E20

--color-state-hover

Success

#00b090

--color-system-success

Danger

#fc5185

--color-system-danger

Warning

#ffcd35

--color-system-warning

Typography

Roboto (headings + body, 400/500/600) and Montserrat (display CTAs, 700). Full type scale with desktop sizes shown.

Heading Scale

H1 — 64px / 40pxThe quick brown fox

H2 — 56px / 36pxThe quick brown fox

H3 — 48px / 32pxThe quick brown fox

H4 — 40px / 24pxThe quick brown fox

H5 — 26px / 20pxThe quick brown fox

H6 — 18px / 18pxThe quick brown fox

Body Scale

Body Large — 18pxProfessional bookkeeping and tax services for growing businesses.

Body — 16pxProfessional bookkeeping and tax services for growing businesses.

Body Small — 14pxProfessional bookkeeping and tax services for growing businesses.

Display (Montserrat 700)

Display — 26px boldMeet Your Team

Utility Classes

Muted textSecondary information shown in a quieter tone.

Accent textGold highlights for emphasis or navigation states.

<h1 class="tmg-h1">Page Title</h1>
<h2 class="tmg-h2">Section Title</h2>
<p class="tmg-body">Body paragraph text.</p>
<p class="tmg-body-sm tmg-text-muted">Small muted text.</p>
<span class="tmg-display">Display CTA Label</span>

Spacing Scale

Consistent spacing tokens used throughout. All reference CSS custom properties.

2xs: 4px

xs: 8px

sm: 16px

md: 24px

lg: 32px

xl: 40px

2xl: 54px

3xl: 56px

Use via CSS variables: padding: var(--space-md); gap: var(--space-sm); etc.

Buttons

All button variants with default, hover (visible on hover), and disabled states. Pill-shaped by default (999px radius).

Primary (black fill, white text)

Hover: background shifts to #1D1E20.

Secondary (white fill, dark text)

CTA (gold fill, dark text)

Default CTA hovers to dark (#1D1E20 bg, white text). The green variant hovers to #31A050.

Ghost (transparent, white border, on dark)

Ghost Dark (transparent, dark border, on light)

Display (Montserrat 700, hero-level CTA)

<button class="tmg-btn tmg-btn--primary">Book a Meeting</button>
<button class="tmg-btn tmg-btn--secondary">Learn More</button>
<button class="tmg-btn tmg-btn--cta">Sign Up for Services</button>
<button class="tmg-btn tmg-btn--cta tmg-btn--cta-green">Green Hover</button>
<button class="tmg-btn tmg-btn--ghost">Send Message</button>
<button class="tmg-btn tmg-btn--ghost-dark">View Details</button>
<button class="tmg-btn tmg-btn--display">Meet Your Team</button>
<button class="tmg-btn tmg-btn--primary" disabled>Disabled</button>

Input Fields

Text inputs, textareas, and select fields. 10px border-radius, 1px border, darker border on hover/focus.

Default Input

Full Name

Focused Input (click to see)

Email Address

Error State

Phone Number

This field is required.

Select Dropdown

Service Needed

Textarea

Message

<label class="tmg-label">Full Name</label>
<input type="text" class="tmg-input" placeholder="Enter your full name">

<!-- Error state -->
<input type="tel" class="tmg-input tmg-input--error">
<p class="tmg-error-text">This field is required.</p>

<!-- Select -->
<select class="tmg-input">
  <option value="">Select a service...</option>
  <option>Bookkeeping</option>
</select>

<!-- Textarea -->
<textarea class="tmg-input" placeholder="Tell us..."></textarea>

Header / Navigation

Black background, gold hover on nav links, language switcher. Full-width with content capped at 1224px.

Nav links turn gold (#DDD68C) on hover. Active link is also gold. The language switcher inverts on hover (white bg, black text).

<header class="tmg-header">
  <div class="tmg-header__inner">
    <img src="assets/tmg-books-logo.png" alt="TMG Books" class="tmg-header__logo">
    <ul class="tmg-header__nav">
      <li><a href="#" class="tmg-nav-link tmg-nav-link--active">Home</a></li>
      <li><a href="#" class="tmg-nav-link">Services</a></li>
      <li><a href="#" class="tmg-nav-link">About</a></li>
      <li><a href="#" class="tmg-nav-link">Contact</a></li>
      <li><button class="tmg-lang-switch">EN / IT</button></li>
    </ul>
  </div>
</header>

Hero Section

Split layout: content on the left (heading, subtext, inline form), image on the right. Dark background.

Professional Bookkeeping Made Simple

Focus on growing your business while we handle the numbers. Expert accounting services tailored to your needs.

500+

Clients

15

Years

99%

Satisfaction

<section class="tmg-hero">
  <div class="tmg-hero__inner">
    <div class="tmg-hero__content">
      <h1 class="tmg-hero__title">Professional Bookkeeping Made Simple</h1>
      <p class="tmg-hero__subtitle">Focus on growing your business...</p>
      <div class="tmg-inline-form">
        <input type="email" class="tmg-input" placeholder="Enter your email">
        <button class="tmg-btn tmg-btn--ghost">Get Started</button>
      </div>
    </div>
    <div class="tmg-hero__image">
      <img src="assets/tmg-books-hero-photo.jpg" alt="TMG Books team">
    </div>
  </div>
</section>

Stat Counters

Large numbers with labels. Gold numbers on dark backgrounds, dark numbers on light backgrounds.

On Dark

500+

Clients Served

15

Years Experience

99%

Client Satisfaction

24/7

Support

On Light

500+

Clients Served

15

Years Experience

99%

Client Satisfaction

<div class="tmg-stats">
  <div class="tmg-stat">
    <div class="tmg-stat__number">500+</div>
    <div class="tmg-stat__label">Clients Served</div>
  </div>
  <!-- repeat for each stat -->
</div>

Services Grid / Cards

Cards with translucent gold wash background, 20px radius. Auto-fit grid layout.

Monthly Bookkeeping

Complete monthly reconciliation, financial statements, and reporting for your business.

$299/mo

Bank reconciliation
P&L statements
Balance sheet
Monthly reports

Tax Preparation

Professional tax filing for individuals and businesses. We maximize your deductions.

$499

Personal or business returns
Deduction optimization
Filing and compliance

Payroll Services

Automated payroll processing, tax withholding, and compliance for your team.

$149/mo

Payroll processing
Tax withholding
Direct deposit

<div class="tmg-services-grid">
  <div class="tmg-service-card">
    <span class="tmg-badge">Most Popular</span>
    <h3 class="tmg-service-card__title">Monthly Bookkeeping</h3>
    <p class="tmg-service-card__description">Complete monthly...</p>
    <div class="tmg-service-card__price">$299/mo</div>
    <ul class="tmg-service-card__list">
      <li>Bank reconciliation</li>
      <li>P&amp;L statements</li>
    </ul>
    <button class="tmg-btn tmg-btn--cta">Get Started</button>
  </div>
</div>

"Most Popular" Badge

Pill-shaped highlight badge, gold or dark variant.

Testimonial Block

Star rating, quote, and attribution. Works on light and muted backgrounds.

★★★★★

"TMG Books transformed our financial operations. Their team is responsive, thorough, and genuinely invested in our growth."

Sarah Mitchell — CEO, Mitchell Design Co.

★★★★★

"Switching to TMG was one of the best business decisions we made. Clean books, on-time filings, zero stress."

James Rivera — Founder, Rivera Electrical

<div class="tmg-testimonial">
  <div class="tmg-testimonial__stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
  <p class="tmg-testimonial__quote">"TMG Books transformed our..."</p>
  <p class="tmg-testimonial__attribution">
    <strong>Sarah Mitchell</strong> — CEO, Mitchell Design Co.
  </p>
</div>

FAQ Accordion

Interactive accordion with smooth open/close. Click any question to toggle. Plus icon rotates 45 degrees to become X on open.

TMG Books provides comprehensive bookkeeping, tax preparation, payroll processing, and financial advisory services. Our packages are designed for small to mid-size businesses that need reliable, professional financial management without the overhead of an in-house team.

Getting started is straightforward. Book a meeting through our website, and we will walk you through our onboarding process. We will assess your current financial setup, recommend the right service package, and have you up and running within two weeks.

Yes. You can upgrade, downgrade, or customize your plan at any time. We scale with your business, so as your needs change, your service package changes with you. There are no long-term lock-in contracts.

<div class="tmg-faq">
  <div class="tmg-faq__item">
    <button class="tmg-faq__question" onclick="this.parentElement.classList.toggle('is-open')">
      What services does TMG Books offer?
      <span class="tmg-faq__icon">+</span>
    </button>
    <div class="tmg-faq__answer">
      <div class="tmg-faq__answer-inner">
        TMG Books provides comprehensive bookkeeping...
      </div>
    </div>
  </div>
</div>

<!-- Add "is-open" class to default-open items -->

Contact Form

Full contact form with textarea, select, and gold submit button. 20px radius container.

On Light Background

First Name

Last Name

Email

Service Needed

Message

On Dark Background (hero-style)

Email

Message

<form class="tmg-form">
  <div class="tmg-form__row">
    <div>
      <label class="tmg-label">First Name</label>
      <input type="text" class="tmg-input" placeholder="First name">
    </div>
    <div>
      <label class="tmg-label">Last Name</label>
      <input type="text" class="tmg-input" placeholder="Last name">
    </div>
  </div>
  <div>
    <label class="tmg-label">Service Needed</label>
    <select class="tmg-input">
      <option value="">Select a service...</option>
      <option>Bookkeeping</option>
    </select>
  </div>
  <div>
    <label class="tmg-label">Message</label>
    <textarea class="tmg-input" placeholder="Tell us..."></textarea>
  </div>
  <button class="tmg-btn tmg-btn--cta">Send Message</button>
</form>

Footer CTA Section

Dark section with centered heading and gold CTA buttons. Typical page closer before the footer.

Footer Bar

<section class="tmg-footer-cta">
  <div class="tmg-container">
    <h2 class="tmg-footer-cta__title">Ready to Get Your Books in Order?</h2>
    <p class="tmg-body-lg" style="color:rgba(255,255,255,0.7)">Let our team...</p>
    <div class="tmg-footer-cta__actions">
      <a href="#" class="tmg-btn tmg-btn--cta">Book a Meeting</a>
      <a href="#" class="tmg-btn tmg-btn--ghost">Contact Us</a>
    </div>
  </div>
</section>

<footer class="tmg-footer">
  <div class="tmg-footer__inner">
    <img src="assets/tmg-books-logo.png" alt="TMG Books" style="width:100px;">
    <span class="tmg-footer__text">2026 TMG Books. All rights reserved.</span>
  </div>
</footer>

Section Wrappers

Background variants for full-width page sections. Apply to a wrapper element and nest .tmg-container inside.

.tmg-section--light — White background (#FFFFFF). Default content sections.

.tmg-section--muted — Light gray background (#EBEBEB). Alternating sections for visual separation.

.tmg-section--cream — Warm cream background (#F2F1E6). Softer alternative to white.

.tmg-section--accent-wash — Translucent gold wash. Used for services/pricing highlight blocks.

.tmg-section--dark — Black background (#000000). Hero, header, footer, and dark content sections.

<section class="tmg-section tmg-section--cream">
  <div class="tmg-container">
    <h2 class="tmg-h2">Section Title</h2>
    <p class="tmg-body">Content here.</p>
  </div>
</section>

<!-- Variants: --light, --dark, --muted, --cream, --accent-wash -->

TMG Books — Brand Component Library

Contents

Logo Lockups

Color Palette

Typography

Spacing Scale

Buttons

Input Fields

Header / Navigation

Hero Section

Professional Bookkeeping Made Simple

Stat Counters

Services Grid / Cards

Monthly Bookkeeping

Tax Preparation

Payroll Services

"Most Popular" Badge

Testimonial Block

FAQ Accordion

Contact Form

Footer CTA Section

Ready to Get Your Books in Order?

Section Wrappers