Internal Reference

Brand Guide: Atlas Accounting Group

The living reference for every visual decision on this site. If a style isn't here, add it here first — then use it in the build.

Colors

Primary

Deep navy — dark sections, hero, footer

#003954 · bg-primary

Secondary

Near-black — display headings on light

#181818 · bg-secondary

Accent

Orange — CTA fills, orange sections

#F4832B · bg-accent

Accent Light

Accent + 20% white — orange button hover fill + border

#F69C55 · bg-accent-light

Accent Ink

Orange TEXT on light surfaces (AA-safe)

#B4540A · text-accent-ink

Sky

Light blue — highlight words on navy only

#79CAE9 · text-sky

Sky Ink

Blue highlight TEXT on light surfaces + navy button hover fill (AA-safe)

#1E7AA8 · text-sky-ink

Input Border

Boundary for inputs & steppers — 3:1 per WCAG 1.4.11 (base-300 is decorative only)

#8A8A8A · border-input-border

Cream

Warm off-white section surface

#F7F5F4 · bg-cream

Cream Dark

Pale peach — chips, newsletter band

#FFEDDF · bg-cream-dark

Base 100

Page surface — the white sections alternate with cream

#FFFFFF · bg-base-100

Base 200

Subtle fill — inline code, chips (same value as Cream)

#F7F5F4 · bg-base-200

Base 300

Decorative hairline borders only — 1.59:1 on white, never a control boundary

#CDCDCD · border-base-300

Base Content

Default body text — 9.59:1 on white (8.82:1 on cream)

#454545 · text-base-content

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)

Display heading — .heading-display (700, uppercase, 1.06 lh, -0.01em tracking)

Built for the trades

Eyebrow — .eyebrow (600, uppercase, accent-ink on light; add text-sky on navy)

Who we serve

Body — 'Sofia Pro', sans-serif, weights 400/500/600/700 + italics

The quick brown fox jumps over the lazy dog. Italic, bold, medium.

Buttons

Primary CTA Navy Button Outline Ghost

On Dark: Accent On Dark: Outline

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

Orange hover (.btn-accent): fill and border both go to accent-light (accent + 20% white), navy text stays put at 5.7:1, plus a soft navy shadow.

Navy hover (.btn-primary): fill and border both go to sky-ink with the same shadow. White on sky-ink measures 4.77:1 — clears the 4.5:1 AA floor for the 15px button label since sky-ink was darkened to #1E7AA8.

Dark-surface outline (.btn-outline-light): white text and a white border, inverting to a white fill with navy text on hover. Use this instead of .btn-outline on navy — that variant draws itself in base-content grey, which sits at 1.6:1 on navy and fails the 3:1 WCAG 1.4.11 asks of a control boundary.

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.

What does this component look like?

Exactly like this — details/summary accordion with an animated plus icon, used for all FAQ sections.

Does it emit schema?

Pass schema={true} on one list per page (or emit a combined FAQPage JSON-LD at page level, as /frequently-asked-questions/ does).

Form Elements

Text / number input — .input

Stepper — .stepper-btn

Section Heading Pattern

Eyebrow label

Section heading with a highlight

Intro copy sits under the heading with relaxed leading. Use align='center' for centered sections.

Testimonial

This is the reusable testimonial treatment — peach panel, orange quote mark, attribution line.

Component Sample — Brand Guide

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.

Construction

Hover me — scale, orange border, layered shadow.

Learn More

Plumbers

Hover me — scale, orange border, layered shadow.

Learn More

HVAC

Hover me — scale, orange border, layered shadow.

Learn More

Other card surfaces

Card on white

Rounded .card variant — used for panels, not for link tiles.

Card on cream

Shadowed white card on cream section.

Card on navy

Translucent card, hover:border-sky.

CTA Band

Reusable closing CTA band

Navy band with radial sky glow — ends most pages.

Sample CTA

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