Components

Colour

Six brand values. Everything else is an opacity modifier — bg-atg-gray-50/80 (form panel), bg-tertiary/15 and /20 (photo tints), text-white/85 (review count). Adding a palette entry is almost always the wrong fix.

Contrast audit

Three pairings in the design as drawn fall below the WCAG AA 4.5:1 floor for normal-size text. They are shipped as designed — these are brand colours and changing them is the client's call, not ours. The -700 tokens are defined and ready if that call is made.

Type scale

Poppins throughout — the design uses exactly one family, in five weights (300 / 400 / 500 / 600 / 700), no italics. ⚠ H1 and H2 are the same size. There is no larger display step anywhere in the design; both render at 36px/42px. The scale is deliberately flat: 36 / 24 / 16, plus 14 and 12 for forms.

Uppercase is global on headings — every heading in every frame is set that way, including blog post titles (12946:3313), so there is no blog exemption. The .h1–.h6 aliases exist so a template can take a size without breaking semantic order:

An <h3> carrying .h2

Body copy

Poppins Light 300 at 16px/24px with 0.03em tracking — ✓ read from every paragraph in the design (10911:76, 128). That tracking is tokenised as tracking-body rather than repeated as an arbitrary value. Here is an inline link, some bold text, some emphasis, and inline code.

• Unordered list item with a primary marker
• Second item

1. Ordered list item
2. Second item

A blockquote — ~ theme-authored. No frame in the design contains one.

// preformatted block
.btn { background: #E4462B; }

Section heading block

✓ Eyebrow is Poppins Regular 16px uppercase in primary, 10px above the heading, no tracking (10911:125). Five uses across the homepage, all identical. This design has no decorative rule flanks, so there are no has-lines-* modifiers.

Accent words are marked by colour only — no weight or style change (10911:75). Editors produce them by wrapping in <span>, which is why headings are echoed through wp_kses_post().

Buttons and links

✓ #E4462B fill and border, 10px radius, 19/12 padding, Poppins Medium 16px, label #F3F8FA, sentence case (10911:78). Four identical instances across the homepage. ~ Hover is theme-authored — the design shows resting states only, for every interactive element on the page.

✓ Text link with trailing arrow — Poppins Medium 16px, underlined at rest, −0.1px tracking (10911:147). The underline is why hover shifts the gap and the colour rather than adding one.

✓ Phone pairing — 46px circular glyph + Poppins Bold 20.6px number (10911:82). Shared partial, reused by the hero, every inner banner and the cta_band module.

Service card

✓ Full-bleed photo under two stacked gradients — a vertical black wash (16% → 80%, stop at 82%) for legibility, plus a flat tertiary/15 tint that unifies the six photos (10911:141). No radius, no border in the design.

Grid

Flex-wrap with negative-margin gutters — house convention, not CSS Grid, even though the Figma uses auto-layout. Row -mx-3 xl:-mx-4, cell px-3 xl:px-4.

Accordion

✓ Used twice in the design — the About page mission/vision/values panel over a photo (12946:99), and the FAQs page as a two-column list with circular +/− buttons (12946:2408). Markup uses the shared JS hook classes; no new JavaScript.

Editor output (.default-block)

Wraps WYSIWYG and Gutenberg content in modules and pages. Distinct from Tailwind Typography's prose — never both on one element. The blog single (12946:3313) leans on this heavily: colour-coded tables, nested lists, inline links.

Icon list

• Storefront glass installation
• Storefront glass repair
• Custom mirrors

Icon set

Forms

Pagination

Breadcrumbs

Spacing rhythm

Measured section gaps on the 1440 frame run 120–160px, roughly 1.5× the canonical house rhythm, which tops out at 80px. Rather than replace the canonical strings, a 2xl step was added:

my-9 sm:my-12 lg:my-16 xl:my-20 2xl:my-30   /* container section */
py-12 lg:py-16 xl:py-20 2xl:py-30           /* full-bleed section */
-mx-3 xl:-mx-4                              /* grid row gutter */
gap-y-6 xl:gap-y-8                          /* grid row wrap */

Outstanding before sign-off

1. No mobile or tablet frames exist. The Figma has one 1440 frame. Every sub-1440 value in this theme is derived, and marked ~ in the CSS. One mobile frame removes all of it.
2. No hover or focus states anywhere in the design. House defaults applied and labelled.
3. Icomoon set not exported. Blocks the glyph map.
4. Sticky header undefined, and two unexplained near-identical nav frames.
5. Three AA contrast failures — see the audit above. Decision needed.
6. Copy errors to fix at source: “At Atlantis Glass” (10911:129), “WILMINGTON, NCLUSION” (FAQs CTA), and “Glassolutions” — another company's name — in the footer form's SMS consent text.