Identity: logo, color, type, and voice — pulled directly from global.css
and the live site, not a redesign. For how these apply to buttons, cards, nav, and other UI,
see the companion Design System.
This block is a live specimen of the real homepage hero pattern — dark background, grain texture, eyebrow label, uppercase Marcellus headline.
See It LiveTwo lockups. The header mark sits in a dark panel that bleeds below the nav bar (188px tall full-size, scaling ~45% to 60px on scroll). The footer badge is the standalone icon mark, used at 202px tall in the footer brand column.
Footer badgeTwo marks — the standalone icon and the full logo lockup (icon + wordmark) — each in three colorways. Every SVG below is the real master file; PNG, print-ready JPG/PDF, and vector EPS are one click away for anyone who needs a non-web format.
REV has no JPG/PDF master — it's built for screen and single-color dark-ground use,
not CMYK print separations. Need a size or format that isn't here? The source files live in
brand/ at the repo root.
Three distinct treatments coexist, each with its own place, not interchangeable:
Hand-built SVGs, Brand-light fill + Brand stroke. Trust badges, Clean Worksite Promise. Illustrative, not a generic icon set.
Thin (1.6px) stroke, no fill. Value proposition grid only — the one place this weight appears.
2px stroke or filled silhouette, currentColor, 14–24px. Nav, footer, forms, buttons, socials. See Design System.
A brand flourish for the seam between two light sections that would otherwise blend together: the icon mark, two-tone, flanked by hairlines.
Three are Tailwind theme tokens in @theme (generate utilities like
bg-brand); the rest are literal hex values used directly as Tailwind
arbitrary values (bg-[#486493]) throughout components — that's the
majority of actual color usage on the site today. Counts are live occurrences of that
exact utility across src/components, src/layouts, and
src/pages in the main repo.
src/pages/blog/[id].astro off this.
Three faces, self-hosted (no Google Fonts round-trip). The specimens below render the
actual production .woff2 files.
Heads up: global.css sets h2–h4 to
font-weight: 700, but Marcellus is only shipped at 400 — browsers
synthesize (faux-bold) every heading on the site. It's consistent everywhere, so not a
bug in practice, just worth knowing if a designer ever compares a mockup against a real
700-weight serif.
Base font-size is 18px on html, so Tailwind's rem-based scale runs slightly
larger than its defaults sitewide. Ranked by how often each size actually appears in
components.
| Utility | Occurrences | Typical use |
|---|---|---|
| text-sm | 231 | Body copy, nav links, form labels |
| text-xs | 90 | Meta text, eyebrow labels, badges |
| text-3xl | 42 | Section H2s |
| text-base | 37 | Default paragraph text |
| text-4xl | 31 | Hero H1 (mobile), large section headers |
| text-lg | 26 | Hero subhead, card titles |
| text-2xl | 26 | Sub-section headers, stat numbers |
| text-xl | 21 | Card titles, larger stat labels |
| text-5xl | 12 | Large hero-scale headlines |
| text-6xl | 1 | Homepage hero H1 (desktop) |
Primary and outline patterns, exactly as they render on CTABlock.astro and the homepage hero.
Both use rounded-lg (8px), px-7/8 py-3.5/4, font-semibold. Outline variant flips to solid brand on hover.
Radius scale in use across cards, images, and pills:
The uppercase label-plus-underline pattern used above every major section heading and
hero. Centered by default (.eyebrow); .eyebrow-left aligns the
rule to the start for left-aligned layouts.
@theme tokens (brand, brand-light, surface) when a plain Tailwind utility covers it — reach for the arbitrary hex only when you need a shade that isn't tokenized yet, like hover or tint states.#7BA3D4 already covers "brand, but visible on dark," and a second tint just fragments the palette.#FEF3C7 amber going forward — use #FDF1E4 / #b5570c for any caution callout.Resolved from draft review:
#FDF1E4 / #b5570c (more visually urgent); #FEF3C7 is deprecated.#D99A3E (oklch(0.72 0.13 75)) replaces the borrowed dashboard yellow, see Color above.