Brand Guide: Atlas Accounting Group

Colors

Contrast rules: raw Sky and Accent are backgrounds/dark-surface colors only. Any orange or blue text on white/cream must use the Ink variants. Text on orange fills is navy, never white.

Logos

Color SVG on light surfaces (header); light SVG on navy (footer, dark panels). Files: src/assets/images/branding/

Typography — Sofia Pro (self-hosted)

Buttons

Square corners, uppercase, navy text on orange fills. Text link pattern: Learn More →

Motion

One global timing: 0.33s ease-in-out, set via Tailwind v4's --default-transition-duration / --default-transition-timing-function tokens in global.css. Every transition-* utility and every component class inherits it, so hovers and accordions feel the same everywhere. The one exception is press feedback (--duration-press, 120ms) — a slow :active nudge reads as lag. Only transform, opacity, colour, size and shadow are animated; never transition-all.

Layout Tokens

--header-h — 5.75rem

Sticky header height. The mobile menu panel and every scroll-mt anchor offset by it, so changing the logo size means changing this one value.

--hero-pad-y / --hero-pad-y-lg — 3.5rem / 5rem

Internal padding for .hero-copy. Hero grids carry no vertical padding of their own — the copy column supplies it and .hero-media stretches to the full row, so the photo always meets the sections above and below however long the copy grows.

Accordion — .accordion

One treatment for every <details> on the site. The panel animates open on the global timing via interpolate-size + ::details-content; the .accordion-icon rotates 45° to an ×. Older browsers snap open instead of animating.

Form Elements

Section Heading Pattern

Testimonial

Photo testimonial - PhotoTestimonial

Client photo with the name over a dark gradient, beside a large pull quote and the full quote. The homepage and landing-page treatment; service pages use it when their testimonial has a photo. With quoteMarks (landing page v2) the quote column centres between the brand's orange quote mark, enlarged, above and turned 180° below; the headline then drops its own quotation marks. Sample text below.

Sample client

Role, Company

“Pull quote with one highlight.”

The full quote sits under the pull quote in body type.

Cards

Tile card — .card-tile

The site's primary card: square, white, hairline border. On hover/focus it scales to 1.04, the border goes brand orange, and a layered navy + orange shadow lifts it. Used for the homepage industry grid, the trade-page service cards, and the step/option cards. Render it as an <a> so the whole tile is the target — it already sets display:flex; flex-direction:column, so only padding and alignment utilities need adding.

Orange tile - .card-tile.card-tile-accent

The orange variant, for the one highlighted service card (Financial Advisory on the construction page). Navy text. On hover the fill lightens to accent-light and the border goes navy, since an orange border disappears on an orange fill.

Partner logo - PartnerLogo (.logo-mask)

A partner's wordmark in a card, opposite the card's icon (the DIY Gusto card on Payroll). The logo file is a CSS mask over the text colour, so the white Gusto logo made for the dark marquee shows on white in a token colour (text-secondary here). Set a height (h-9); the width follows the logo. Use alt="" when the card's heading already names the partner. Not interactive, so no hover or focus state.

DIY Gusto

One or two sentences.

Other card surfaces

Team Headshot — .team-headshot

Round headshot with an orange disc offset behind it. Used by TeamRoundup on landing pages, on a navy .team-roundup band (sky glow). Always round: two source headshots are pre-cropped circles with transparent corners. Not interactive, so no hover or focus state. The roster itself lives in src/data/team.ts.

Chris Lewis, CPA

CEO

Jenny Page

Senior Accountant

Nicole Orlando

Senior Accountant

Liz Collazo

Senior Accountant & Payroll Specialist

Review Slider - ReviewSlider

Short review snippets in the landing page v2 hero, one at a time: stars and source, the snippet, the reviewer's name, and an optional title and company line under it. Navy panel with the step badge's hard orange offset; orange stars on navy (4.67:1), white text, sky name and source. Phones swipe it (scroll snap); the arrows loop and the counter updates for screen readers. No autoplay. Snippets are verbatim (an ellipsis marks any cut), and stars only go on reviews that carry them on the source. Arrows: white outline at rest, white fill on hover, shrink on press, white focus ring.

Plan List - .plan-item

The example plan in landing page v2's "Only the Services You Need" card, under a small "Example plan" label that names the list. A static list, not controls: each service is navy with white text (12.6:1) and a ticked white box. No hover, focus or press states, since nothing is clickable.

• Monthly bookkeeping
• Payroll setup

Static Tile - Reasons cards

The tile card when it is not a link (the "Reasons" cards on landing page v2): white, square, hairline border-base-300, on a cream section, with no hover lift, since a tile that reacts reads as clickable. Icon at the shared .service-icon size, display heading, one or two lines, then optional partner logos. Utilities: flex flex-col bg-base-100 border border-base-300 p-6 md:p-7.

Team Strip - .team-strip / .team-headshot-light

The roster as one row of small headshots with names (TeamStrip), under a centred eyebrow and heading. Scrolls sideways and snaps on a phone; from lg the headshots grow and the row sits centred. .team-headshot-light lightens the headshot shadow for cream and white surfaces. On the pale peach band (tone="peach", landing page v2) all text is navy, since the orange-ink eyebrow falls to 4.37:1 on peach, and the headshots keep their orange disc, as below.

• 

  Chris Lewis, CPA

• 

  Jenny Page

• 

  Nicole Orlando

• 

  Liz Collazo

• 

  Zach German

• 

  Madison Maxwell

• 

  Chris Lewis, CPA

• 

  Jenny Page

• 

  Nicole Orlando

• 

  Liz Collazo

Scheduler Notice - .scheduler-notice

The status line over the Calendly calendar (LeadFormCta scheduler) when the calendar hasn’t loaded after 10 seconds: blocked, held by the consent manager, or a very slow connection. Cream band, navy-black semibold text; a "Send your details instead" button that opens the form below, and the phone number, both styled as accent-ink links (4.56:1 on cream) with hover, active and focus states. The script fills it (it is a role="status" region, empty and hidden otherwise) and shrinks the frame; the form stays closed until the visitor opens it. If Calendly arrives late the notice clears itself.

Numbered Steps — .steps / .step / .step-number

Process steps for HowItWorks on landing pages. Navy square, sky numeral, the same offset orange block as the team headshot, and a dashed orange connector to the next step (vertical on a phone, horizontal from md). Use on an <ol> and keep the numerals aria-hidden: the list already announces the order. In HowItWorks the numbers fade in and the connectors draw, one step at a time, once the steps are fully on screen (the whole row from md, each step as it arrives on a phone). Reduced motion shows them static. The sample below does not animate.

1. 01

   First step

   One or two sentences on what happens at this step.

2. 02

   Second step

   One or two sentences on what happens at this step.

3. 03

   Third step

   One or two sentences on what happens at this step.

Header Dropdown - .nav-dropdown-panel

Desktop main nav (Nav.astro). A trade is a split control: its label links to the pillar page and a narrow chevron button opens its services; About and Toolbox are a single button. The panel opens from the button's aria-expanded (click, Enter or Space) and on mouse hover, fades down in 180ms, and closes on Escape, an outside click, or tabbing out. White panel, hairline border, orange top lip, navy-tinted shadow. Items reuse the .menu link states. A trade's panel leads with its own pillar page ("Construction overview"), matching the mobile accordion, and every panel has an aria-label ("Construction services") so repeated labels like "Payroll Setup" keep their trade for screen-reader users. Entries come from NAV in constants.ts; trade dropdowns are built from src/data/trades.ts and list only live pages.

Service Page Sections

Building blocks of the shared service-page template (src/layouts/ServicePage.astro). The full template, with sample copy, is at the template preview.

Icon cards - .service-cards + .service-icon

Centered icon, title and copy, three across from lg; flex, so a short last row centres instead of leaving a gap. Used for both "Sound familiar?" and "What's included". Icons are the site's black + orange line set (the Payroll and Tax page treatment), all at the one .service-icon size, decorative (alt="", aria-hidden).

• 

  First card

  One or two sentences.

• 

  Second card

  One or two sentences.

• 

  Third card

  One or two sentences.

Photo cards - .card-tile.photo-card

The closing "Everything else we handle" cards on every industry-service page (TradeServices), and the guide cards (RelatedPosts, 16:9 with .photo-card-media-wide). Each service card shows the hero photo of the page it links to, registered in src/data/trades.ts; each guide card shows the post's featured graphic. A navy wash from the bottom ties the photo to the palette; on hover the tile lifts and the photo eases in.

ConstructionPayroll Setup

Worked example ledger - .ledger

A real table comparing two states of the same job. Numbers right-aligned in tabular figures, the "after" column tinted sky, totals double-underlined the way an accountant marks a final figure. White card with the orange lip; built for a navy section.

Text link - .service-text-link

Secondary action beside a button. Underline and arrow nudge on hover, navy on press, navy focus ring. Not currently used on any page (the service pages' pricing links were removed 2026-10-20); kept as a pattern.

Bridge band - BridgeBand

Full-width orange band between "Sound familiar?" and "What's included" on every service page. Navy text and a navy button on orange (4.7:1), never white (2.6:1). Copy left and photo right from lg, stacked below; a labelled placeholder renders when a draft has no photo yet.

Sample bridge heading

One or two sentences that turn the page from the problem to the answer.

Schedule Free Assessment

CTA Band

Blog posts use this navy band. Every other page closes with LeadFormCta instead — the same orange duotone photo band, carrying the lead form on a white card. It replaced the Calendly embed sitewide on 2026-08-12; the retired components are in src/components/_archive/.