Quiet Luxury Advisory Hero — Editorial Serif

# VERDANT — STRATEGIC GROWTH ADVISORY HERO

## AESTHETIC IDENTITY

BUILD A REFINED, EDITORIAL HERO SECTION FOR A HIGH-END STRATEGY ADVISORY FIRM NAMED **VERDANT**. THE DESIGN LANGUAGE IS "QUIET LUXURY CONSULTING": A CALM WHITE CANVAS, A SINGLE OVERSIZED FOREST-GREEN HERO CARD, SERIF DISPLAY TYPOGRAPHY PAIRED WITH A NEUTRAL GROTESQUE, AND GENEROUS NEGATIVE SPACE. THE MOOD IS COMPOSED, EXPENSIVE, AND TRUSTWORTHY — THE OPPOSITE OF FLASHY SAAS. EVERY ELEMENT FEELS DELIBERATELY PLACED, WITH SOFT ROUNDED CORNERS AND UNDERSTATED MOTION.

## COLOR PALETTE

- PAGE BACKGROUND: PURE WHITE `RGB(255, 255, 255)`.
- BRAND PRIMARY (HERO CARD): DEEP FOREST GREEN `RGB(31, 81, 76)` / `#1F514C`.
- BRAND GREEN DARKER ACCENT: `#163C38` FOR SUBTLE INNER GRADIENT DEPTH.
- BRAND DARK (TEXT ON WHITE): NEAR-BLACK `RGB(20, 20, 20)` / `#141414`.
- ON-CARD TEXT: WHITE `#FFFFFF` FOR HEADLINES, WHITE AT 80% OPACITY FOR BODY.
- MUTED LOGO TEXT: BRAND DARK AT 55–60% OPACITY.
- WARM PAPER TINT FOR SECONDARY SECTIONS: `#F6F4EF`.

## TYPOGRAPHY

- DISPLAY / HEADLINES: **HEDVIG LETTERS SERIF** (SERIF, 400). USED FOR THE WORDMARK, THE HERO H1, STAT NUMBERS, AND LOGO MARQUEE NAMES. TIGHT NEGATIVE TRACKING (`-1.6PX` AT LARGE SIZES).
- UI / BODY: **INTER** (400/500/600). USED FOR NAV LINKS, BUTTONS, BODY COPY, EYEBROWS, AND LABELS, WITH SLIGHTLY TIGHT TRACKING (`-0.2` TO `-0.6PX`).
- VENDOR BOTH FONT FAMILIES LOCALLY (WOFF2 + @FONT-FACE), NO REMOTE CDN AT RUNTIME.

## LAYOUT & SECTION BREAKDOWN

1. **STICKY NAVBAR** — WHITE BACKGROUND, MAX-WIDTH 1200PX, ~80PX TALL. LEFT: "VERDANT" SERIF WORDMARK WITH A SMALL GREEN DIAMOND/LEAF MARK. CENTER (DESKTOP ONLY): TEXT LINKS — FEATURES, APPROACH, PRICING, INSIGHTS. RIGHT: A PILL CTA "CONSULT WITH US" — GREEN BACKGROUND, WHITE TEXT, WITH A SMALL WHITE CIRCLE HOLDING A GREEN ARROW THAT NUDGES RIGHT ON HOVER. A HAMBURGER ON MOBILE TOGGLES A DROPDOWN MENU.

2. **HERO** — A LARGE ROUNDED (28PX) FOREST-GREEN CARD CENTERED IN A WHITE FRAME WITH SMALL OUTER PADDING. TWO-COLUMN ON DESKTOP:
   - LEFT COLUMN (TEXT): A 5-STAR ROW + "INDUSTRY-LEADING SATISFACTION" EYEBROW; A SERIF H1 ("STRATEGIC CLARITY FOR TOMORROW'S MARKET LEADERS") AT ~56PX/70PX LEADING; A WHITE/80% SUBHEAD PARAGRAPH; TWO CTAS — A WHITE PILL "START A CONVERSATION" (GREEN CIRCLE + ARROW) AND A TEXT LINK "OUR EXPERTISE".
   - RIGHT COLUMN (IMAGE): A TALL (~580PX) ROUNDED PHOTO OF A MODERN BOARDROOM / ADVISORY TEAM, OBJECT-COVER, SOFT SHADOW. ON DESKTOP THE PHOTO IS PARTIALLY INSET INTO THE CARD. ADD A SMALL FLOATING "GLASS" STAT CHIP OVERLAID ON THE PHOTO (E.G. "$4.2B ASSETS ADVISED").

3. **TRUST MARQUEE** — BELOW THE CARD, CENTERED LABEL "TRUSTED BY GLOBAL INDUSTRY LEADERS:" THEN AN INFINITE LEFT-SCROLLING ROW OF SERIF COMPANY NAMES (ORACLE, DELOITTE, MCKINSEY, ACCENTURE, GOLDMAN SACHS, MORGAN STANLEY) DUPLICATED FOR A SEAMLESS LOOP, WITH A LINEAR EDGE-FADE MASK ON LEFT AND RIGHT.

4. **STATS STRIP** — A ROW OF FOUR SERIF STAT NUMBERS WITH INTER LABELS ON THE WARM PAPER TINT (E.G. 240+ ENGAGEMENTS, 18 YRS, 32 COUNTRIES, 96% RETENTION), SEPARATED BY HAIRLINE DIVIDERS.

5. **APPROACH / FEATURE TRIO** — THREE CARDS DESCRIBING THE FIRM'S METHOD (DIAGNOSE, DESIGN, DEPLOY), EACH WITH A SMALL LINE ICON, A SERIF TITLE, AND INTER BODY. ONE CARD IS THE GREEN VARIANT FOR EMPHASIS.

6. **FOOTER CTA BAND** — A SLIM GREEN ROUNDED BAND REPEATING "READY TO BUILD STRATEGIC CLARITY?" WITH THE WHITE PILL CTA, PLUS A MINIMAL FOOTER ROW (WORDMARK, COPYRIGHT, SOCIAL LINKS).

## MOTION / ANIMATION / INTERACTION SPEC

- **ENTRANCE**: ELEMENTS WITH `data-animation-on-scroll` START AT OPACITY 0 / TRANSLATEY(20PX) AND ANIMATE TO VISIBLE VIA AN INTERSECTIONOBSERVER, USING `CUBIC-BEZIER(0.2, 0.8, 0.2, 1)` OVER 0.8S. STAGGER WITH DELAYS (200/300/400/600/800MS) SO THE EYEBROW, HEADLINE, SUBHEAD, BUTTONS, AND IMAGE CASCADE IN.
- **MARQUEE**: CONTINUOUS `TRANSLATEX(0 → -50%)` LINEAR INFINITE OVER ~22S; PAUSES ON HOVER.
- **HERO IMAGE**: A SLOW VERTICAL FLOAT (±8PX, 6S EASE-IN-OUT) AND THE GLASS STAT CHIP FLOATS ON AN OFFSET LOOP.
- **BUTTON HOVER**: ARROW INSIDE THE CIRCLE TRANSLATES RIGHT ~8PX WITH A SPRINGY `CUBIC-BEZIER(0.34, 1.56, 0.64, 1)`; PILL DARKENS/LIGHTENS SLIGHTLY.
- **NAV LINKS**: OPACITY DIP TO 70% ON HOVER.
- **STATS**: COUNT-UP FROM 0 TO TARGET WHEN THE STRIP SCROLLS INTO VIEW.
- RESPECT `PREFERS-REDUCED-MOTION` BY DISABLING LOOPS AND COUNT-UP.

## RESPONSIVE BEHAVIOR

- DESKTOP (≥1024PX): TWO-COLUMN HERO, CENTERED NAV LINKS VISIBLE, FOUR-UP STATS, THREE-UP FEATURES.
- TABLET (768–1023PX): HERO STACKS TO ONE COLUMN WITH IMAGE BELOW TEXT; STATS WRAP TO 2×2; FEATURES TO 1–2 COLUMNS.
- MOBILE (<768PX): HAMBURGER MENU, FULL-WIDTH STACKED HERO, REDUCED TYPE SCALE (H1 ~36–40PX), SINGLE-COLUMN EVERYTHING, CTA PILLS FULL-WIDTH WHERE NATURAL.

## TECH / DELIVERY

- SINGLE SELF-CONTAINED STATIC SITE (PLAIN HTML + CSS + VANILLA JS), NO BUILD STEP REQUIRED; RUNNABLE OFFLINE.
- ALL ASSETS (FONTS, HERO PHOTO) VENDORED LOCALLY UNDER `assets/`.
- ACCESSIBLE, SEMANTIC MARKUP; KEYBOARD-FOCUSABLE CTAS AND NAV.