Standards for color, type, components, and motion — defined once in Elementor Site Settings & the child theme, referenced everywhere via globals and CSS variables.
This page is the source of truth.
/* —- Text —- */
–text-light: #F0EEE9; /* body on dark */
–text-light-dim: #A8B0B7; /* dimmed body on dark */
–text-light-faint: #6A7179; /* tertiary on dark */
–text-dark: #0a0b0c; /* body on light */
–text-dark-dim: #37393C; /* dimmed body on light */
–text-dark-faint: #8B9199; /* tertiary on light */
/* —- Lines —- */
–line-on-dark: rgba(255, 255, 255, 0.08);
–line-on-dark-strong: rgba(255, 255, 255, 0.18);
–line-on-light: rgba(10, 11, 12, 0.08);
–line-on-light-strong: rgba(10, 11, 12, 0.18);
/* —- Type —- */
–font-display: ‘Fraunces’, Georgia, serif;
–font-sans: ‘Geist’, -apple-system, ‘Segoe UI’, sans-serif;
–font-mono: ‘Geist Mono’, ‘SF Mono’, Consolas, monospace;
/* —- Brand colors —- */
:root {
–teal: #008264;
–teal-bright: #29C5B6;
–teal-deep: #004D3A;
–teal-glow: rgba(41, 197, 182, 0.35);
–teal-glow-soft: rgba(0, 130, 100, 0.25);
/* —- Accents —- */
–navy: #173F5B;
–taupe: #BBAF95; /* primary CTA fill */
–taupe-2: #CDC2AA; /* primary CTA hover */
–taupe-dark: #9A8D70;
–goldenrod: #DABF96; /* cursor accent on light sections */
/* —- Silver / Chrome —- */
–silver-1: #F2F4F6;
–silver-2: #D8DDE2;
–silver-3: #B3BAC1;
–silver-4: #7C858D;
–silver-5: #4A5158;
/* —- Dark surfaces —- */
–ink: #0a0b0c; /* base near-black */
–ink-2: #111314; /* card on dark */
–ink-3: #37393C; /* lifted gray (also dim text on light) */
/* —- Light surfaces —- */
–white: #FFFFFF;
–mint: #F1F8F6; /* teal-leaning off-white */
–mint-2: #E8F2EF;
Twenty named colors organized into six families. Each swatch shows the named color as the headline (this is the name we use everywhere — in code, in conversation, in Site Settings), the literal hex value, and the Elementor Global Color ID (in teal mono when confirmed, TBD when still to be mapped).
The wordmark uses a slightly brightened teal — Advantax Teal II #1FA99C — on dark backgrounds to keep the mark from fading into the background. On light backgrounds, the standard Brand Teal #008264 is used.
Three font families: Fraunces for display (with italic accent words), Geist for body and subheads, Geist Mono for eyebrows and UI labels. Headings 4–6 reuse Geist Light uppercase with letter-spacing — the same style as eyebrows but heavier.
Body 24px Geist. The quick brown fox jumps over the lazy dog. The five boxing wizards jumped quickly.
Body 22px Geist. The quick brown fox jumps over the lazy dog. The five boxing wizards jumped quickly.
Body 20px Geist. The quick brown fox jumps over the lazy dog. The five boxing wizards jumped quickly.
Body 18px Geist. Standard interior body size. The five boxing wizards jumped quickly.
Every content section opens with a 72px taupe rule or an eyebrow (Geist Mono uppercase, 2px tracking), then the Fraunces heading. Eyebrows on cycle pages use the numbered “01 · Label” prefix.
Six recurring section stages: Ink (hero), White (editorial), Mint (Bottom Line), Taupe (tax cycle pages only), Taupe wash (Approach/Questions on cycle), Ink 2 (form CTA).
Homepage hero, dark CTA. Eyebrows Teal Bright. Body Text Light.
Interior body content. Eyebrows taupe. Body Ink. The cleanest stage.
Recurring close-out section. Eyebrows in Brand Teal — mint reads green-leaning enough to support it.
Approach / Questions sections on cycle pages. Referenced via global ID 4cf06f8.
Approach / Questions sections on cycle pages. Referenced via global ID 4cf06f8.
Dark contact section. Lifted slightly so cards inside read distinct. Form panel sits on taupe.
.btn-cta taupe pill (primary). .btn-link animated underline (secondary). .btn-ghost ink outline (tertiary). All share an arrow-nudge microanimation.
Taupe pill fill, ink text. Hovers to lighter taupe + taupe glow. Used for the main CTA on every page.
No fill, no border. Underline animates left-to-right on hover. Color shifts to teal. The lower-priority second action.
Transparent fill, ink border. Inverts to ink fill on hover. Used inside cards or for in-content actions.
Two grounded shadows for card resting/hover states, plus two accent glows that carry the brand’s warmth — taupe for buttons, teal for cards and cursor.
Default card resting state. Used on .adv-card.
Card hover lift. Combined with -4px translateY.
Primary CTA hover. Warm directional glow.
Card hover accent + cursor highlight.
Cinematic skyscraper photography with teal sky tones.
Attachment ID: 578https://advantax.com/wp-content/uploads/2026/04/img-adv-vert-business-skyscraper-to-the-sky.jpg
Attachment ID: 593https://advantax.com/wp-content/uploads/2026/04/img-adv-wide-commercial-building-detail-glass-surface.jpg
Direction: high-contrast architectural photography, teal-leaning sky tones, glass and steel surfaces, dramatic upward/downward perspective.
This palette is calm, sharp, powerful, professional, and “techy” — with Advantax Teal as the principal color.
Goldenrod, bright teal, or even dark navy or black can be used as CTA fills.
Goldenrod jives nicely with the teal family; without it the scheme feels too monochromatic.
Hierarchy. Fraunces for display (h1–h3). Geist Light uppercase tracked for h4–h6. Geist 18–24px for body. Geist Mono uppercase tracked for eyebrows and UI labels. Italic Fraunces is the brand’s accent voice — used sparingly on key words within headlines.
Section rhythm. Every content section opens with a 72px taupe rule and/or an eyebrow, then a Fraunces heading, then body. Sections alternate light and slightly-tinted backgrounds (white → mint → taupe wash → ink) for vertical rhythm without screaming.
Motion is minimal and slow. Long easing curves (cubic-bezier(0.22, 1, 0.36, 1)), subtle lifts, gentle glow accents. Nothing snaps or bounces quickly. The site moves the way a confidence-restored client feels about their books — settled.
