Zilnuit Design System

Overview

Zilnuit presents itself as a private financial institution of considerable heritage and institutional weight, communicating generational wealth preservation through a visual language that merges traditional banking gravitas with contemporary digital clarity. The design rests on a deep slate-cyan canvas ({colors.canvas} — #162a33) that evokes midnight ocean depths and boardroom authority, punctuated by a luminous teal brand accent ({colors.primary} — #82c8e5) that functions as the system's sole source of color voltage. This palette choice signals both stability (the near-black foundation) and forward momentum (the bright cyan call-to-action surfaces), a duality appropriate for an institution claiming lineage "since the 1800s."

The typography system centers entirely on Plus Jakarta Sans, deployed with aggressive weights at display scale — {typography.display-lg} arrives at 60px with a full 700 weight, refusing the thin-weight trend common in fintech startups. This is not a playful challenger brand; it is an established institution speaking in authoritative tones. The single most distinctive typographic moment visible in the hero is the inline color span within the headline — the word "Wealth" rendered in {colors.heading-accent} while surrounding words remain {colors.body}, a subtle but effective emphasis technique that draws the eye without breaking reading rhythm.

Shape language reveals deliberate restraint: primary action buttons carry {rounded.DEFAULT} (sharp corners, 0px radius), projecting precision and seriousness, while floating interactive elements like the WhatsApp trigger and video play button employ {rounded.full} (perfect circles). This bifurcation — rectangular for committed actions, circular for ambient utilities — creates a clear visual grammar. The overall mood is cinematic and aspirational, leveraging dramatic low-angle architectural photography as its hero backdrop rather than abstract gradients or illustrations, reinforcing the tangible assets (land, buildings, gold) central to Zilnuit's value proposition.

Key Characteristics:

• Deep slate-cyan canvas ({colors.canvas}) provides institutional darkness without pure-black harshness
• Single brand voltage color {colors.primary} applied sparingly to CTAs, accents, and active states
• Bold display type at 60px/700 weight ({typography.display-lg}) commands immediate attention
• Sharp-cornered buttons ({rounded.DEFAULT}) signal precision; circles reserved for ambient tools
• Hero photography uses dramatic architectural perspective to convey scale and permanence
• Top bar in brand color ({colors.top-bar}) creates immediate visual signature above navigation
• Video play button with circle treatment ({rounded.circle}) invites engagement softly
• Floating WhatsApp widget in success green (#5dccb4) provides always-available contact channel
• Generous vertical rhythm with {spacing.section} (70px) and {spacing.hero} (100px) creating editorial breathing room
• Two-button CTA system: solid primary ({component.button-primary}) paired with outline ghost ({component.button-outline})

Colors

Brand & Accent

• Primary ({colors.primary} — #82c8e5): The system's sole brand voltage — a luminous teal-cyan used for primary buttons, top bar background, headline accent spans, links, and active navigation states. Carries the entire color energy of the design.
• Primary Active ({colors.primary-active} — #6bb8d9): Pressed/hover state for primary buttons, approximately 8% darker than base.
• Primary Hover ({colors.primary-hover} — #96d0ea): Hover state slightly lighter than base, providing tactile feedback.
• Success Green ({colors.success} — #5dccb4): Reserved for the WhatsApp floating action button, indicating availability and positive action.

Surface

• Canvas ({colors.canvas} — #162a33): The dominant page background — a deep desaturated blue-green slate that serves as the primary viewing surface for all content. Dark enough to make white text pop, warm enough to feel organic rather than mechanical.
• Surface Soft ({colors.surface-soft} — #82c8e5): Used for the top utility bar spanning full width above navigation. Same value as primary, functioning as a branded band.
• Surface Dark ({colors.surface-dark} — #0f2027): Deepest surface tone, likely for footer regions or deeply nested containers requiring visual recession.
• Surface Elevated ({colors.surface-elevated} — #1e3a47): Slightly lighter than canvas, used for input fields and cards that need subtle lift from background.
• Surface Card ({colors.surface-card} — #1a2f39): Intermediate elevation between canvas and elevated, for content cards and panels.

Text / Ink

• Ink ({colors.ink} — #1e293b): Near-black slate used for text on light backgrounds (primary button text, top bar content).
• Body ({colors.body} — #ffffff): Primary text color on dark canvas — pure white for maximum legibility against {colors.canvas}.
• Body Secondary ({colors.body-secondary} — #ebf6fb): Very pale cyan-white, used for hero description text to create subtle hierarchy below pure white headlines.
• Muted ({colors.muted} — #94a3b8): Medium cool gray for secondary information, captions, and footer content.
• Muted Soft ({colors.muted-soft} — #64748d): Darker gray for tertiary text or placeholder content.
• On Primary ({colors.on-primary} — #1e293b): Text color on primary-colored backgrounds — matches ink for AA contrast compliance.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface (buttons, floats).
• Heading Accent ({colors.heading-accent} — #82c8e5): Inline highlight color for emphasized words within otherwise-white headlines, matching primary exactly.

Hairlines & Borders

• Hairline ({colors.hairline} — #2d4a56): Subtle divider lines barely visible against canvas, for structural separation without visual noise.
• Hairline Soft ({colors.hairline-soft} — #3d5a66): Slightly more visible borders for input fields and contained elements.
• Border Strong ({colors.border-strong} — #82c8e5): Brand-color borders for outline buttons and focused states.

Semantic

• Error ({colors.error} — #ef4444): Red for validation errors and destructive actions (not observed in screenshot but standard).
• Warning ({colors.warning} — #f59e0b): Amber for caution states.
• Info ({colors.info} — #82c8e5): Informational notes, matches primary.
• Link ({colors.link} — #82c8e5): Inline links use brand color.
• Link Active ({colors.link-active} — #96d0ea): Visited/hovered link state.

Typography

Font Family

Zilnuit's typographic voice is carried entirely by Plus Jakarta Sans, a geometric humanist sans-serif designed for screens with excellent legibility at both display and text sizes. The font family is loaded from Google Fonts with the full weight range (200–800), though the live deployment restricts usage to 400 (regular), 500 (medium), 600 (semibold), and 700 (bold). Fallback is sans-serif. A secondary icon font, Font Awesome 6, provides UI iconography in both Free (solid/regular) and Brands variants. No serif or monospace faces are employed in the current design.

Plus Jakarta Sans was chosen for its "corporate yet approachable" character — clean geometric construction conveys institutional competence while slightly open apertures and humanist proportions prevent coldness. At 700 weight in display contexts, the face gains significant presence without the aggression of Impact-style grotesques.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 60px | 700 | 1.2 | -0.02em | Reserve for future larger hero treatments | | {typography.display-lg} | 60px | 700 | 1.2 | -0.02em | Main hero headline ("Building Wealth That Endures Time") | | {typography.title-md} | 46px | 700 | 1.2 | -0.01em | Section headings on interior pages | | {typography.title-sm} | 24px | 600 | 1.35 | 0 | Card titles, subsection headers | | {typography.label-md} | 16px | 500 | 1.3 | 0 | Form labels, fieldset legends | | {typography.body-md} | 16px | 400 | 1.7 | 0 | Paragraph text, hero descriptions, general prose | | {typography.body-sm} | 14px | 400 | 1.6 | 0 | Secondary text, metadata, small paragraphs | | {typography.caption} | 13px | 400 | 1.5 | 0 | Fine print, timestamps, legal text | | {typography.button} | 14px | 600 | 1.25 | 0 | All button labels, CTA copy | | {typography.overline} | 12px | 600 | 1.3 | 0.08em uppercase | Category labels, breadcrumbs, tags |

Principles

The typography hierarchy trusts size and weight equally to establish order. Display text at 60px/700 dominates through sheer mass, while the step down to {typography.title-md} at 46px maintains the same weight class, ensuring sectional breaks command similar authority to the hero. Body text at 16px/400 with generous line-height (1.7) prioritizes readability over density — this is not a dashboard interface cramming data tables; it is a narrative landing page where each paragraph has room to breathe.

A signature technique visible in the hero is the inline color accent: the word "Wealth" within the headline switches from {colors.body} (white) to {colors.heading-accent} (brand teal) while maintaining identical type properties. This draws the eye to the conceptual core of the message without resorting to italic, underline, or size changes that would disrupt the line's optical rhythm. It is a sophisticated move suggesting attention to micro-copy craft.

Button text uses 14px/600 — smaller than body text but bolder — creating a distinct "UI voice" separate from editorial content. This convention ensures buttons read as interactive elements rather than continuations of prose.

Note on Font Substitutes

Plus Jakarta Sans is available via Google Fonts at no cost and should be used directly in production implementations. For offline environments or restricted networks, Inter or DM Sans serve as acceptable substitutes sharing similar geometric-humanist DNA. If substitution is necessary, define CSS variables --font-heading and --font-body both pointing to the substitute family, as Zilnuit does not differentiate heading and body faces.

Layout

Spacing System

• Base unit: 5px (the smallest atomic spacing token {spacing.xs}).
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (5px — tight gaps), {spacing.sm} (14px — compact internal padding), {spacing.md} (15px — standard gutters, most frequent), {spacing.lg} (20px — component spacing), {spacing.xl} (30px — section internal), {spacing.section-xl} (40px — major gaps), {spacing.section} (70px — between sections), {spacing.xxl} (80px — large separators), {spacing.hero} (100px — hero vertical padding).
• Section padding (vertical): {spacing.hero} (100px) for the hero band; {spacing.section} (70px) for content sections below.
• Card internal padding: {spacing.xl} (30px) per {component.card-surface}.
• Gutters: Container horizontal padding uses {spacing.md} (15px) within the responsive grid system.

Grid & Container

The layout employs a max-width container at 1440px centered horizontally, consistent with Bootstrap's .container class behavior. Within this container, a 12-column flex/grid system manages content distribution. The hero section uses a row-based alignment (align-items-center) to vertically center text content against the viewport height minus header offset.

Editorial density is low-to-moderate — this is a narrative landing page optimized for message absorption rather than feature comparison or marketplace scanning. The hero occupies nearly the full first viewport with generous whitespace around the headline block. Specific grid behaviors observed: single-column text block in hero (centered or left-aligned within the row), no multi-column body text visible in the fold.

Whitespace Philosophy

Zilnuit employs generous, confident whitespace that signals institutional composure. The hero alone claims 100px of vertical padding above and below content. Line heights exceed 1.5 for all text sizes, and paragraph margins likely fall into the 20–30px range. This is not a cramped fintech dashboard; it is a digital brochure where silence between elements carries as much meaning as the elements themselves.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [✉ support@zilnuit.com]          [+1 567 494 8145]             │  ← top-bar (36px, surface-soft bg)
├─────────────────────────────────────────────────────────────────┤
│ [⛰ Zilnuit]   Home  AboutUs  Services▾  Overview▾  ContactUs   │
│                                           [ Get Started ]       │  ← main-header (90px, canvas bg)
└─────────────────────────────────────────────────────────────────┘
                              ↑ max-width: 1440px, centered

The two-tier header structure separates utility contacts (top bar in brand color) from primary navigation (dark bar with logo and menu). CTA button lives flush-right in the nav bar.

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│                    [Full-viewport Architectural Photo BG]        │
│                                                                  │
│     ┌──────────────────────────────────────────────────┐        │
│     │                                                  │        │
│     │  Building Wealth That Endures Time               │        │
│     │  (display-lg, white, "Wealth" in accent color)   │        │
│     │                                                  │        │
│     │  A private financial institution rooted in...    │        │
│     │  (body-md, pale white)                           │        │
│     │                                                  │        │
│     │  [Open Account]  ▶ Watch Our Presentation        │        │
│     │  (primary btn)    (ghost/video button pair)      │        │
│     │                                                  │        │
│     └──────────────────────────────────────────────────┘        │
│                                                                  │
│                                    [💬 Chat]  [📱 WhatsApp]     │
└─────────────────────────────────────────────────────────────────┘

The hero centers content vertically with a left-biased column. Background is photographic (low-angle skyscraper shot) with likely subtle darkening overlay to ensure text legibility. Two CTA variants sit side-by-side: solid primary button and ghost video-trigger with circular play icon.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Page body, header bands, footer | | 1 (Subtle) | {extensions.shadows.sm} — 2px 2px 3px rgba(153,153,153,0.5) | Decorative elements, legacy browser compatibility | | 2 (Raised) | {extensions.shadows.md} — dual-layer soft shadow | Cards, dropdowns, modals | | 3 (Floating) | {extensions.shadows lg} — 16px 48px deep shadow | Toast notifications, persistent overlays |

The system favors color-block layering over shadow depth for its primary elevation model — cards and containers distinguish themselves from the canvas through background color shifts ({colors.surface-card} vs {colors.canvas}) rather than drop shadows. When shadows do appear, they are neutral-cooled (gray tints rather than brand-colored), preventing muddy combinations with the already-complex dark palette.

The hero photograph provides decorative depth through atmospheric perspective — the building facades recede into misty distance, creating natural z-depth behind the flat foreground text. This photographic depth substitutes for gradient overlays or abstract shapes, keeping the aesthetic grounded in physical reality (tangible assets).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | Input fields, subtle containment | | {rounded.DEFAULT} | 0px | Primary buttons, cards, nav items — sharp corners dominate | | {rounded.md} | 4px | Minor UI elements, badges | | {rounded.lg} | 8px | Larger cards, modals | | {rounded.xl} | 12px | Featured content panels | | {rounded.pill} | 9999px | Chat widget capsule shape | | {rounded.full} | 50% / 9999px | Circular buttons (video play, WhatsApp float) | | {rounded.circle} | 50% | Perfect circle for icon-only buttons |

The dominance of {rounded.DEFAULT} (0px) across primary interactive surfaces is a deliberate statement: Zilnuit's design language rejects the "friendly roundness" trend of consumer apps in favor of architectural precision. Buttons look machined, not padded. Circles appear only where the interaction paradigm demands them (play button = circle universally; messaging triggers = circle by platform convention).

Photography Geometry

Hero imagery is full-bleed, edge-to-edge covering the entire viewport behind overlaid content. Aspect ratio is cinematic wide (likely 16:9 or 21:9 source cropped to fill). No corner rounding is applied to photographs — they meet edges at hard 90° angles. Future imagery throughout the site would presumably follow this full-bleed or contained-rectangular pattern without mask shapes or blob treatments.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.button-primary} — The primary call-to-action button seen as "Get Started" in the navigation and "Open Account" in the hero. Solid {colors.primary} background with {colors.on-primary} (dark slate) text. Uses {typography.button} (14px/600), sharp corners ({rounded.DEFAULT}), and generous padding 18px 30px creating a substantial click target. No box-shadow in default state; transitions affect color properties over ~300ms. State variant: {component.button-primary-active} deepens background to {colors.primary-active} on press.

{component.button-outline} — Ghost/secondary button variant with transparent background, {colors.primary} text, and optional 1px {colors.border-strong} border. Identical dimensions and typography to primary. Used for secondary actions or "Watch Presentation" style video triggers. On activation ({component.button-outline-active}), inverts to solid primary fill. This outline pattern is critical for the two-button CTA pairs where visual hierarchy must distinguish primary from secondary commitment levels.

{component.video-play-button} — Circular button containing a play triangle icon, positioned adjacent to outline buttons in the hero. {rounded.circle} geometry (56px diameter), transparent background with {colors.primary} icon stroke. Triggers video modal or presentation playback.

Navigation & Header

{component.top-bar} — Full-width utility strip at the very top of the viewport. {colors.surface-soft} (brand teal) background makes it immediately distinctive. Contains contact email and phone in {typography.body-sm} with {colors.ink} text. Height constrained to 36px — minimal presence, high information density.

{component.main-header} — Primary navigation bar below top bar. {colors.canvas} background (dark), 90px tall, containing logo (left), navigation links (center-left), and primary CTA (flush-right). Logo uses custom mountain/wave mark plus wordmark. Nav links use {component.nav-link} styling — white text, transparent background, with {component.nav-link-active} state showing {colors.primary} text for current page indication.

Hero Components

{component.hero-band} — Full-viewport container for hero content. Transparent background allowing photograph to show through, with vertical padding of {spacing.hero} (100px). Contains the centered/left-aligned content column.

{component.hero-headline} — The main H1 "Building Wealth That Endures Time". {typography.display-lg} (60px/700) in {colors.body} (white). Notable for the inline accent span on "Wealth" rendered via {component.hero-accent-text}.

{component.hero-accent-text} — The highlighted word "Wealth" within the headline. Shares all typographic properties with parent headline but overrides color to {colors.heading-accent} (brand teal). This is achieved via <span> or <mark> element with color property override only.

{component.hero-description} — Subheading paragraph below main headline. {typography.body-md} (16px/400) in {colors.body-secondary} (pale cyan-white), creating visual hierarchy beneath the bold headline without competing for attention.

Floating Elements

{component.chat-widget} — Fixed-position bottom-right chat trigger. Capsule-shaped ({rounded.pill}) with {colors.canvas} background, {colors.body} text label "Chat", and speech bubble icon. Small footprint (caption-sized text) indicating persistent availability without intrusion.

{component.whatsapp-float} — Fixed-position floating action button for WhatsApp contact. Perfect circle ({rounded.full}, 56px) in success green ({colors.success} — #5dccb4), white WhatsApp icon center. Positioned bottom-left (opposite quadrant from chat widget) to provide multiple contact entry points.

Surfaces & Containers

{component.card-surface} — Generic content card container for interior sections. {colors.surface-card} background (slightly lighter than canvas), white text, {spacing.xl} internal padding. Sharp corners maintain the system's angular vocabulary. Would house service descriptions, team bios, or testimonial blocks below the fold.

{component.footer} — Page footer region. {colors.surface-dark} (deepest shade) background, muted text color, {typography.body-sm} sizing. Spans full width with {spacing.section} vertical padding.

Form Elements

{component.input-text} — Text input field. {colors.surface-elevated} background (lighter than page), white text, 48px height for comfortable touch/click targets, {rounded.sm} (2px) subtle rounding. State variant {component.input-text-focus} would add {colors.border-strong} focus ring.

Do's and Don'ts

Do

• Use {colors.primary} exclusively for interactive highlights, CTAs, and the single accent word in headlines — never for large background areas except {component.top-bar}.
• Maintain {typography.display-lg} at 60px/700 for hero headlines; this weight is non-negotiable for establishing institutional authority.
• Keep primary buttons sharp-cornered ({rounded.DEFAULT}) — the 0px radius is intentional and communicates precision.
• Apply {typography.body-md} with 1.7 line-height for all paragraph text; the generous leading is essential for readability on dark backgrounds.
• Reserve {colors.body-secondary} (#ebf6fb) for descriptive text below headlines, creating a clear two-level hierarchy against {colors.body}.
• Use the inline accent span technique ({component.hero-accent-text}) for emphasizing one key word within headlines rather than bolding or enlarging.
• Ensure floating elements ({component.whatsapp-float}, {component.chat-widget}) remain accessible at 44×44px minimum touch targets.
• Layer photography at full-bleed behind hero content with subtle dark overlay if needed for text contrast — never place photos inside bordered frames.
• Apply {spacing.hero} (100px) vertical padding to hero sections to achieve the cinematic, unhurried pacing the design intends.
• Use {colors.success} green only for the WhatsApp float or confirmed-state indicators — keep brand communication in the teal family.

Don't

• Don't introduce rounded corners ({rounded.md} or greater) to primary buttons — the sharp rectangle is a deliberate brand choice separating Zilnuit from consumer-grade fintech.
• Don't lighten {colors.canvas} significantly for interior sections; the dark continuity is core to the atmosphere.
• Don't substitute {colors.link} for {colors.primary} in non-link contexts, or vice versa — they share values semantically but should remain distinct tokens.
• Don't reduce headline weight below 700 for display roles; the system's authority derives from bold display type.
• Don't add gradient backgrounds to the hero or any section — the design relies on solid color blocks and photography, not color transitions.
• Don't use shadows on cards unless elevation exceeds level 2; prefer background-color shifts ({colors.surface-card}) for subtle layering.
• Don't mix font families beyond Plus Jakarta Sans and Font Awesome — the monolithic typeface approach is intentional.
• Don't crowd the hero with more than one headline + one subhead + two CTAs; the spacious composition requires discipline.
• Don't apply {rounded.circle} to non-icon elements (like text buttons) — circles are reserved for iconic triggers only.
• Don't let the top bar ({component.top-bar}) exceed 36px height; it must remain a slim utility strip, not a second navigation tier.

Motion & Animation

Transition Tokens

--transition-color: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
--transform-base: transform 0.3s ease-in-out;
--opacity-fast: opacity 0.15s linear;
--transition-all: all 0.4s ease-in-out;

Keyframe Animations

• fa-spin — Loading spinner rotation for preloader and async states.
• fa-beat / fa-beat-fade — Pulse animations for notification icons.
• bounce / pulse — Attention-drawing micro-animations for floating triggers.
• progress-bar-stripes — Animated striped overlay for loading progress bars.
• swiper-preloader-spin — Custom spinner for image carousel loading states.

Interaction Patterns

• Color transitions on hover: All interactive elements (buttons, links, nav items) transition background-color and text-color over 300ms with ease-in-out timing, providing smooth but decisive feedback.
• Parallax scrolling: The hero background photograph likely implements subtle parallax movement (class parallaxie detected) creating depth illusion as user scrolls.
• Float entrance: The WhatsApp and Chat widgets may animate in (bounce/pulse keyframes available) after page load completes.
• Video modal reveal: Clicking the play button probably triggers a modal with opacity fade-in transition.
• Focus rings: Input fields gain border-color shift (to {colors.border-strong}) on focus, likely with 200–300ms transition.
• Preloader screen: Full-page loading animation (detected .preloader container) using spinner or custom animation before content reveals.

Overall motion philosophy is subtle and purposeful — no gratuitous particle effects or complex scroll-jacking. Transitions exist to confirm interactions occurred, not to entertain.

Imagery Style

• Photographic, architectural, dramatic perspective: The hero features a low-angle shot looking up at glass-and-steel skyscrapers, conveying monumentality, permanence, and urban financial power.
• Cool color temperature with desaturation: The building photograph leans toward blue-gray tones, harmonizing with the {colors.canvas} palette without clashing.
• Atmospheric depth: Distant buildings fade into mist, creating natural z-axis layering that complements the flat UI elements overlaid on top.
• Full-bleed, no framing: Images extend edge-to-edge with no border, radius, or shadow treatment — raw photographic presence.
• Subject matter implies tangibility: Skyscrapers represent real estate and physical assets, aligning with Zilnuit's "real assets" value proposition (land, gold, infrastructure).
• Darkened overlay likely applied: A semi-transparent black or dark-blue gradient probably sits between photo and text to ensure {colors.body} white text remains legible.
• No illustration, 3D render, or abstract art detected: The visual strategy relies on photography's documentary credibility rather than stylized graphics.
• Future sections would likely continue photographic approach: Team headshots, office interiors, asset photography (gold bars, land tracts, buildings) expected below fold.

Icon System

• Library: Font Awesome 6 (Free solid/regular weights, plus Brands subset for social icons).
• Specific icons observed: Envelope (contact email), phone (contact number), play-circle (video trigger), whatsapp-brands (WhatsApp float), comment/chat bubble (chat widget), angle-down (dropdown carets in Services/Overview menus), mountain/wave (logo mark).
• Treatment: Icons use currentColor inheriting from parent text color. Stroke-based for outlines (play button circle), filled for utility icons (envelope, phone).
• Size alignment: 16px for inline icons (nav, top bar), 24px for standalone icon buttons (WhatsApp, play), scaled proportionally to adjacent text.
• Weight consistency: Most icons appear to use Font Awesome's Solid (900 weight) style for strong visibility against dark backgrounds.

Recommended Frontend Stack

- Framework:      Next.js 14+ or Astro (SSG-friendly for static landing pages)
- Styling:        Bootstrap 5 (customized theme) or Tailwind CSS with custom config mirroring these tokens
- Fonts:          Google Fonts: Plus Jakarta Sans:wght@400;500;600;700;800
- Animation:     Vanilla CSS transitions + GSAP for parallax/scroll effects
- Icons:          Font Awesome 6 (CDN or self-hosted)
- Component lib:  Custom components (no heavy UI library needed; Bootstrap utilities suffice)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 576px | Single-column hero text, stacked CTAs, hamburger menu, hidden top bar text (icons only), reduced heading size (~32px) | | Tablet | 576px – 991px | Two-column potential for some sections, condensed nav, maintained hero photo (cropped) | | Desktop | 992px – 1199px | Full nav visible, proper container width, hero headline at 48-52px | | Wide | ≥ 1200px | Max container 1440px, full 60px headline, all spacing tokens at specified values |

Touch Targets

• {component.button-primary}: 18px × 58px minimum (padding 18px × 30px plus text) — exceeds 44×44px WCAG AAA requirement comfortably.
• {component.whatsapp-float}: 56px × 56px circle — excellent touch target for mobile thumb reach.
• {component.video-play-button}: 56px × 56px circle — same excellent target sizing.
• {component.input-text}: 48px height — meets mobile touch standards.
• {component.nav-link}: Approximately 40px+ height with horizontal padding — adequate for desktop, may need increased tap area on mobile.

Collapsing Strategy

• Navigation: Collapses to hamburger menu (.slicknav_btn detected in CSS) below lg breakpoint, sliding drawer from right or dropdown panel.
• Top bar: Contact details collapse to icon-only (envelope/phone symbols) on mobile; full text hidden to save vertical space.
• Hero headline: Scales down from 60px → 36–40px on mobile using responsive font sizing (Bootstrap fs-1 to fs-3 equivalent).
• CTA buttons: Stack vertically on mobile (primary above outline) rather than side-by-side; full-width or near-full-width within container.
• Hero photograph: Maintains full-bleed coverage but focal point shifts (building tops crop differently); parallax effect disabled on mobile for performance.
• Floating widgets: Maintain position but may shift inward from extreme edges to avoid thumb-zone interference on mobile.

Iteration Guide

1. Build a landing page closely mimicking this design system using Next.js or Astro with Bootstrap 5 or Tailwind CSS. Initialize your theme configuration with every color, font, radius, and spacing value from the YAML frontmatter via their {section.token} paths — never hard-code a hex or px value that has a corresponding token.
2. Establish the dark-mode-first architecture: set background-color: {colors.canvas} on <body>, default text to {colors.body}, and build upward. The {extensions.mode}: dark flag means all component designs assume dark context.
3. Implement the two-tier header structure first: {component.top-bar} (36px, teal) above {component.main-header} (90px, dark). Get the logo placement, nav link spacing, and flush-right CTA positioning pixel-matched to the screenshot before proceeding.
4. Construct the hero section with full-viewport photograph background (use a CC0 licensed architectural photo), dark overlay (rgba(22,42,51,0.6) suggested), and the centered content column. Implement the inline accent span on "Wealth" using a <span> with color: {colors.heading-accent}.
5. Build both CTA variants immediately: {component.button-primary} (solid teal) and {component.button-outline} (ghost). Add {component.video-play-button} as their neighbor. Test that primary visually dominates the pair.
6. Add floating elements last: WhatsApp button bottom-left ({component.whatsapp-float}), chat widget bottom-right ({component.chat-widget}). These should be position: fixed with appropriate z-index.
7. When adding new components beyond those documented, decide whether they belong to the editorial dialect (hero, about, values) or utility dialect (forms, dashboard previews). Editorial uses display type and generous spacing; utility uses body text and tighter grids.
8. Run accessibility audits focusing on contrast ratios: {colors.primary} on {colors.canvas} backgrounds, {colors.body-secondary} readability, and focus-visible states on all interactive elements.
9. For any motion additions, cap duration at 400ms and prefer ease-in-out or cubic-bezier(0.45, 0.05, 0.55, 0.95) — match the {extensions.motion.level}: subtle directive.

Font Setup: Import Plus Jakarta Sans from Google Fonts with weights 400, 500, 600, 700. Define CSS variables:

:root {
  --font-family: 'Plus Jakarta Sans', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

Apply font-family: var(--font-family) globally. No substitutions required — Plus Jakarta Sans is freely available and matches the production site exactly.

Known Gaps

• Hover state specifics: While {component.button-primary-hover} and active states are defined, exact shadow/transform changes on hover cannot be determined from static screenshot. Implement subtle brightness increase or 1px translateY lift per your stack's conventions.
• Loading/skeleton states: Preloader markup exists in DOM but visual appearance (spinner style, backdrop color, branding integration) is inferred rather than captured.
• Form validation states: Beyond {component.input-text-focus}, error ({colors.error}) and success border/background treatments for form fields are not present in the visible page.
• Dropdown menu styling: Navigation items "Services" and "Overview" show dropdown arrows, but the expanded menu panel styling (background, shadow, item spacing) is unobserved.
• Video modal/presentation player: The "Watch Our Presentation" trigger implies a modal or lightbox video player, whose chrome (close button, progress bar, overlay darkness) is not captured.
• Interior page sections: Content below the hero fold (services grid, about content, team, testimonials, contact form) is not visible and thus undocumented — assume continuation of established patterns.
• Mobile hamburger menu contents: The collapsed mobile nav structure and animation are referenced in CSS classes but not visually verified.
• Exact overlay opacity on hero photo: The darkness level applied between photograph and text is estimated; fine-tune for optimal WCAG contrast ratio with white text.
• Footer detailed layout: Footer columns, sitemap structure, and legal links are not in view; only background color and text color are documented from partial extraction.