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

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.

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

Payroll Specialist

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.

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/.