Flycast Media Design System

Overview

Flycast Media's visual identity operates in the rarefied space between fintech authority and creative agency exuberance. The system is defined by its willingness to deploy saturated color at full bleed—the hero band arrives in an unapologetic cerulean ({colors.surface-soft} — #34aadc) that fills viewport edge-to-edge, while the brand's call-to-action vocabulary lives entirely in a golden-yellow register ({colors.accent} — #ffb100) that feels simultaneously premium and approachable. This is not a conservative financial-services palette; it's a deliberate signal that Flycast occupies the intersection of serious capital markets thinking and modern digital craft.

The typography architecture rests on one of the more distinctive pairings in contemporary agency design: Trade Gothic Next Condensed rendered at hairline weight ({typography.title-md} — 300) carries all headline responsibility, producing tall, narrow letterforms that feel architectural and authoritative without ever tipping into corporate sterility. Body copy counterbalances this with Proxima Nova at a surprisingly bold weight ({typography.body-md} — 700, 20px)—a choice that ensures even supporting text commands attention and reads clearly against saturated backgrounds. The result is a system where hierarchy is negotiated through extreme weight differential (300 vs 700) rather than size alone.

Shape language tilts decisively toward the pill: {rounded.pill} (60px border-radius) appears on every interactive surface from primary buttons to active navigation states, creating a visual vocabulary of friendliness and approachability that tempers the seriousness of the financial sector positioning. Meanwhile, the 3D illustration program—visible here as a candy-colored abacus-like form in signature red—introduces playful geometric depth that prevents the saturated-color environment from feeling oppressive.

Sub-systems observed include a main editorial dialect (hero + value prop), a services navigation dialect (pill-shaped category links), and what appears to be a WordPress-driven content management layer beneath the custom design skin.

Key Characteristics:

• Hero surfaces use full-bleed {colors.surface-soft} cerulean; never white or gradient-washed
• All primary CTAs render in {colors.accent} gold with {colors.on-accent} near-black text and {rounded.pill} geometry
• Headlines enforce {typography.title-md} Trade Gothic at 300 weight—never bolder, never a different family
• Body text maintains {typography.body-md} Proxima Nova at 700 weight, ensuring readability on colored backgrounds
• Active navigation items receive {colors.accent} background fill with pill rounding
• Signature illustration uses {colors.secondary} red as the brand's third voltage color
• Chat widget floats in bottom-right corner as a {component.chat-widget-button} circle
• Transitions default to 300ms ease-in-out across color, transform, and opacity properties

Colors

Brand & Accent

• Primary ({colors.primary} — #0095eb): Electric blue used for semantic links, hover states, and secondary brand moments where {colors.accent} would be too visually heavy.
• Primary Hover ({colors.primary-hover} — #35abf0): Lightened blue state for interactive elements on hover/focus.
• Primary Active ({colors.primary-active} — #007acc): Deepened blue for pressed/active states.
• Accent ({colors.accent} — #ffb100): Golden-yellow brand voltage color. Primary CTA background, active nav state background, chat widget fill, and the designated canvas token for thematic warmth.
• Accent Hover ({colors.accent-hover} — #ffbd33): Brightened gold for hover interactions on accent-colored surfaces.
• Accent Active ({colors.accent-active} — #e69500): Darkened amber for pressed accent buttons.
• Secondary ({colors.secondary} — #e6002c): Signal red reserved for 3D illustration program and error semantics. Never used for UI chrome.

Surface

• Canvas ({colors.canvas} — #ffb100): Thematic base surface—here mapped to the accent gold, reflecting the brand's warm-toned DNA even when overridden by section-specific backgrounds like the hero's cerulean.
• Surface Soft ({colors.surface-soft} — #34aadc): Cerulean blue serving as the hero band background and primary sectional surface color. This is the dominant background color users encounter first.
• Surface Strong ({colors.surface-strong} — #4db8e5): Lighter sky-blue variant used for subtle surface differentiation within blue-toned sections.
• Surface Dark ({colors.surface-dark} — #484848): Charcoal gray used for inverted-scheme surfaces like potential dark footer sections or modal backdrops.
• Surface Elevated ({colors.surface-elevated} — #fcfcfc): Near-white for cards, dropdowns, or content panels that need subtle lift from pure white.
• Surface White ({colors.surface-white} — #ffffff): Pure white for header backgrounds, content containers, and maximum-contrast text environments.
• Overlay ({colors.overlay} — rgba(0, 0, 0, 0.5)): Semi-transparent black for modal overlays, image captions, and focus-dimming treatments.

Text

• Ink ({colors.ink} — #484848): Medium-charcoal primary text color for body copy, descriptions, and general UI labeling. The most frequently occurring text color in the DOM (141 instances).
• Body ({colors.body} — #292929): Near-black for emphasis text, button labels on accent backgrounds, and high-priority body content (50 instances).
• Dark ({colors.dark} — #1f1f1f): Deepest black variant for headlines on light backgrounds (15 instances).
• Muted ({colors.muted} — #707070): Mid-gray for secondary information, timestamps, and de-emphasized metadata (17 instances).
• Muted Soft ({colors.muted-soft} — #a6a6a6): Light-gray for placeholder text, disabled hints, and tertiary information (2 instances).
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed AA-compliant against {colors.primary} blue backgrounds.
• On Accent ({colors.on-accent} — #292929): Near-black text for all {colors.accent} gold backgrounds—CTA buttons, active nav items, chat widget icon.
• On Dark ({colors.on-dark} — #ffffff): White text for {colors.surface-dark} charcoal backgrounds.
• On Surface ({colors.on-surface} — #292929): Default text color for neutral/elevated surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(0, 0, 0, 0)): Transparent default border—buttons and many components explicitly set borders to fully transparent rather than removing the property, suggesting a borderless design philosophy.
• Border Subtle ({colors.border-subtle} — #e0e0e0): Inferred light gray for any necessary dividers not visible in the current view but likely present in forms or card systems below the fold.

Semantic

• Link ({colors.link} — #0095eb): Aligned with {colors.primary}—all inline links render in electric blue.
• Link Active ({colors.link-active} — #007acc): Deepened blue for visited or active link states.
• Error ({colors.error} — #e6002c): Signal red for validation errors, aligned with {colors.secondary}.
• Success ({colors.success} — #0095eb): Blue reused for success states, maintaining the brand's cool-toned semantic palette.

Typography

Font Family

The type system is built on three proprietary font families, each playing a strictly delineated role. Trade Gothic Next Condensed (trade-gothic-next-condensed, sans-serif) owns all headline territory—from the 48px hero declaration down through sub-section titles. Its condensed proportions allow dramatic size without horizontal space consumption, while the 300 weight keeps it elegant rather than aggressive. Proxima Nova (proxima-nova, sans-serif) handles everything else: body copy, UI labels, button text, navigation, and metadata. Notably, the body role pushes Proxima Nova to 700 weight—a bold choice that ensures legibility against the saturated cerulean hero background. Soleil (soleil, sans-serif) appears sparingly (8 instances) for caption-level micro-copy, likely deployed for its refined geometric qualities at small sizes. A fallback to Inter, Arial, sans-serif exists for system-edge cases.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 300 | 1.1 | 0.96px | Hero-scale declarations (inferred larger breakpoint) | | {typography.title-md} | 48px | 300 | 1.08 | 0.96px | Main hero headline | | {typography.display-lg} | 36px | 300 | 1.15 | 0.72px | Section headings | | {typography.heading-md} | 24px | 700 | 1.3 | 0 | Sub-section titles, feature names | | {typography.body-md} | 20px | 700 | 1.2 | 0 | Primary body copy, hero description | | {typography.body-sm} | 16px | 400 | 1.5 | 0 | Standard body, paragraph text | | {typography.body-xs} | 16px (or 14px) | 400 | 1.43 | 0 | Secondary body, list items | | {typography.caption} | 13px | 400 | 1.38 | 0.02em | Fine print, metadata, timestamps | | {typography.label-md} | 12px | 700 | 1.33 | 0.08em | Uppercase labels, category tags | | {typography.button} | 16px | 400 | 1.25 | 0 | CTA button text | | {typography.nav-link} | 14px | 400 | 1.4 | 0.02em | Navigation menu items (uppercase) |

Principles

The typographic philosophy centers on weight-as-hierarchy over size differentiation. Where most systems separate headline from body by both scale (32px vs 16px) and weight (600 vs 400), Flycast compresses the weight range to two extremes—300 for all Trade Gothic headlines, 700 for all Proxima Nova body—and lets size handle the rest. This creates a binary visual rhythm: either you're reading a tall, thin, architectural statement (headlines) or a compact, confident, bold assertion (body). There is no middle ground of "medium" or "semibold" in this system.

Letter-spacing receives surgical application: Trade Gothic headlines carry +0.96px tracking (proportional to their 48px size) to prevent the condensed face from feeling claustrophobic at large scale. Navigation links employ +0.02em combined with uppercase transformation, giving menu items a slightly expanded, editorial-label quality. Labels push further to +0.08em uppercase, creating clear visual separation from sentence-case body text.

Color also participates in hierarchy: {colors.dark} (#1f1f1f) is reserved for headlines on light backgrounds, while {colors.ink} (#484848) handles body—this ~20% luminance difference reinforces the size/weight distinction without requiring additional font machinery.

Note on Font Substitutes

Trade Gothic Next Condensed and Proxima Nova are commercial fonts (Linotype/Monotype and Mark Simonson Studio respectively). For open-source implementation:

• Trade Gothic Next Condensed → Substitute with Roboto Condensed (Google Fonts, weight 300) or Oswald (weight 300) for similar narrow geometric character. Define CSS variable: --font-headline: 'Roboto Condensed', sans-serif.
• Proxima Nova → Substitute with Inter (Google Fonts, weights 400/700) for nearly identical metrics and excellent screen rendering. Already present as fallback in the source. Define: --font-body: 'Inter', sans-serif.
• Soleil → Substitute with DM Sans (Google Fonts, weight 400) for comparable geometric humanism at caption sizes.

Layout

Spacing System

• Base unit: The spacing vocabulary clusters around multiples of 5, with {spacing.sm} (10px) as the atomic increment.
• Tokens: {spacing.xxs} (2px — micro-adjustments), {spacing.xs} (6px — tight internal gaps), {spacing.xs-alt} (8px — icon padding), {spacing.sm} (10px — most common spacing, 34 instances), {spacing.sm-alt} (12px — button vertical padding), {spacing.sm-alt2} (14px — alternate tight spacing), {spacing.md} (15px — second-most-common, 33 instances), {spacing.md-alt} (20px — standard component gap), {spacing.lg} (25px — section-internal spacing), {spacing.lg-alt} (30px — major element separation), {spacing.xl} (40px — large gaps), {spacing.xl-alt} (50px — section-padding candidate).
• Section padding (vertical): Inferred {spacing.section} (80px) for major band transitions; hero uses full viewport height or significant vertical padding.
• Card internal padding: {spacing.lg} (25px) to {spacing.xl} (40px) depending on card density.
• Gutters: Container max-width appears to be ~1440px (header width from extracted data); content sits centered within with fluid gutters.

Grid & Container

• Max content width: 1440px for the header/navigation shell. Inner content wrapper likely constrains to 1200px or less for readable line lengths.
• Density choice: Editorial density—generous whitespace around the hero headline block, single-column text column (approximately 50-55% of viewport width) paired with illustration occupying the remaining visual field.
• Desktop grid behavior: The hero uses a asymmetric two-column layout: illustration anchors the left ~50%, text column flows right with internal padding. Navigation spans full-width with logo flush-left and menu distributed rightward.
• Hero column splits: Approximately 45% illustration / 55% text (or inverse depending on breakpoint), with the text column vertically-centered within the hero band.

Whitespace Philosophy

Whitespace is deployed as active compositional element, not passive margin. The cerulean hero surface breathes around both the 3D illustration (which has its own negative-space platform) and the headline block—there's no cramping despite the bold colors. Vertical rhythm between the uppercase label ("FLYCAST IS AN AGENCY..."), the multi-line Trade Gothic headline, the body sentence, and the CTA button uses {spacing.lg-alt} (30px) increments. The system resists marketplace-density patterns; this is agency-airy whitespace that signals confidence and budget.

Header Architecture

+------------------------------------------------------------------+
| [FLYCASTMEDIA]          [HOME] ABOUT SERVICES HUB CASE STUDIES... |
|   (logo, left)              (nav links, right, spaced)           |
+------------------------------------------------------------------+
|  max-width: 1440px (header container)                             |
|  nav container: ~704px                                            |
|  Background: {colors.surface-white}                               |
+------------------------------------------------------------------+

The navigation bar features a white background that overrides whatever section color lies beneath (floating nav behavior). The "HOME" item renders as an active state with {colors.accent} gold background and {rounded.pill} shape. Remaining nav items are uppercased {typography.nav-link} in {colors.ink}, horizontally spaced with approximately {spacing.md-alt} (20px) gaps.

Hero Section

+------------------------------------------------------------------+
|                                                                  |
|  +-------------------+  +--------------------------------------+ |
|  |                   |  |  FLYCAST IS AN AGENCY SPECIALISING.. | |
|  |   [3D RED         |  |  (label-md, uppercase, muted)        | |
|  |    ABACUS]        |  |                                      | |
|  |    ILLUSTRATION   |  |  AWARD WINNING                      | |
|  |    ON BLUE        |  |  DIGITAL MARKETING FOR               | |
|  |    PLATFORM       |  |  ASSET MANAGERS,                    | |
|  |                   |  |  FINTECH & HEDGE FUNDS              | |
|  |                   |  |  (title-md, Trade Gothic, dark)     | |
|  |                   |  |                                      | |
|  |                   |  |  We can get you more clients...     | |
|  |                   |  |  (body-md, Proxima Nova 700, ink)   | |
|  |                   |  |                                      | |
|  |                   |  |  [ FIND OUT MORE ]                  | |
|  |                   |  |  (button-primary, pill, gold bg)    | |
|  +-------------------+  +--------------------------------------+ |
|                                                                  |
|  Background: {colors.surface-soft} (cerulean #34aadc)            |
|  Full viewport height or close to it                             |
+------------------------------------------------------------------+

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Header bar, hero band, flat buttons | | 1 — Hairline | Transparent border (explicitly set) | Buttons, inputs (borderless aesthetic) | | 2 — Soft drop | 0 2px 8px rgba(0,0,0,0.08) | Cards, dropdown panels, chat widget | | 3 — Modal | 0 8px 24px rgba(0,0,0,0.12) | Modals, mega-menu flyouts | | 4 — Illustration | 3D rendered depth (not CSS shadow) | Hero illustration, signature visual elements |

The elevation philosophy is intentionally flat for UI chrome—buttons cast no shadow, borders are explicitly transparent, and depth comes from color-layering (cerulean surface → white header → gold button) rather than z-axis translation. The only dimensional depth in the system lives in the 3D illustration program, which introduces physical geometry, soft ambient occlusion, and material differentiation (matte red frame, glossy pink bars) that exists outside the flat-design component system. This creates a striking juxtaposition: flat, confident UI surrounding a tactile, toy-like object that feels almost touchable.

If decorative depth exists beyond the 3D illustration (gradient washes, noise textures, photographic parallax layers), it was not extractable from the current viewport. The hero appears to use solid {colors.surface-soft} fill with zero gradient.

Decorative Depth

The 3D illustration is the sole decorative-depth element in view: a red rectangular device (resembling an abacus or chart-frame) containing hanging pink cylindrical bars of varying heights, resting on a stepped cerulean platform with a rolled cylinder accent. Rendered in a soft, clay-like material language with subtle global illumination. Color palette within the illustration: {colors.secondary} red (frame), pastel pink (bars), {colors.surface-soft}-family blues (platform/environment).

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 20px | Cards, content panels, moderate rounding | | {rounded.DEFAULT} | 8px | Default component rounding (inputs, generic containers) | | {rounded.md} | 12px | Medium emphasis containers | | {rounded.lg} | 16px | Large cards, featured elements | | {rounded.pill} | 60px | Primary buttons, active nav items, fully pill-shaped interactives | | {rounded.full} | 9999px | Circular elements (avatar placeholders, icon buttons) | | {rounded.circle} | 50% | Perfect circles (chat widget, status indicators) |

Photography Geometry

No photography is present in the current viewport—the imagery system is entirely 3D illustration. When photography is introduced elsewhere on the site (case studies, team headshots), the rounded scale suggests {rounded.sm} (20px) corners for image containers, consistent with the card rounding vocabulary.

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.top-nav} — Fixed or sticky navigation header spanning full viewport width. Background {colors.surface-white}, height approximately 64-80px (inferred). Contains {component.logo-text} flush-left and {component.nav-links} container flush-right. No visible border-bottom; relies on background-color separation from page content. Z-index elevated above hero content.

{component.logo-text} — "FLYCASTMEDIA" wordmark rendered in {colors.dark} (#1f1f1f), likely using {typography.heading-md} or a custom logotype treatment. Uppercase, tight letter-spacing, positioned at the left edge of the nav container with {spacing.md} (15px) left padding.

{component.nav-link} — Individual navigation menu item. Text {colors.ink}, typography {typography.nav-link} (14px, uppercase, +0.02em tracking), padding approximately {spacing.sm} (10px) horizontal × {spacing.xs-alt} (8px) vertical. Transparent background in default state. Transition on background-color: 100ms ease-in-out.

{component.nav-link-active} — Active/selected navigation state as seen on "HOME". Background {colors.accent} (gold), text {colors.on-accent} (near-black), rounded {rounded.pill} (60px). Same padding as {component.nav-link}. This is the highest-fidelity interactive element in the nav system.

{component.button-primary} — The workhorse CTA component. Background {colors.accent} (#ffb100), text {colors.on-accent} (#292929), typography {typography.button} (16px, 400 weight), rounded {rounded.pill} (60px), padding 12px 50px for wide CTAs ("FIND OUT MORE", "CONTACT US NOW") or 20px 25px for service-category buttons ("INBOUND MARKETING →", "GOOGLE ADS →", "WEB DESIGN →"). Border explicitly set to 0px solid rgba(0,0,0,0). Box-shadow: none. Text-transform: none (sentence case for main CTAs). Transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, border-color 0.1s ease-in-out. Appears in hero context and services listing areas.

{component.button-primary-active} — Pressed/active state for primary button. Background shifts to {colors.accent-active} (#e69500), maintaining all other properties (text color, radius, padding, border). Implement fast transition (100ms) for tactile response.

{component.button-primary-hover} — (Inferred) Background {colors.accent-hover} (#ffbd33), slight lift or scale transform optional per stack convention. Cursor: pointer.

{component.button-service} — Variant of {component.button-primary} used for service category links with arrow suffix ("INBOUND MARKETING →"). Tighter padding 20px 25px (more square proportion), same gold background, same pill radius. The trailing arrow (→) is part of the text content, not a separate icon element in the extracted markup.

Hero & Content Bands

{component.hero-band} — Full-viewport hero section. Background {colors.surface-soft} (#34aadc) cerulean, extending edge-to-edge with no border or shadow. Contains two-column layout: left column holds {component.hero-illustration}, right column holds {component.hero-content} block. Vertical padding substantial (inferred 80-120px). No gradient wash or texture overlay—solid color fill.

{component.hero-illustration} — 3D rendered illustration element occupying ~45% of hero width. Features red abacus-like device on stepped blue platform. Positioned with left alignment and natural bottom-weighting (illustration sits on visual "ground" within the hero). No border, no shadow (self-contained depth via 3D rendering). Aspect ratio approximately 4:3 or 1:1.

{component.hero-content} — Right-column content container. Vertically centered within hero band. Internal spacing between child elements follows {spacing.lg-alt} (30px) rhythm. Contains four stacked children top-to-bottom: {component.hero-label}, {component.hero-headline}, {component.hero-body}, {component.button-primary}. Text alignment left. Max-width constraint on text column (~560px) for optimal line length.

{component.hero-label} — Uppercase introductory label: "FLYCAST IS AN AGENCY SPECIALISING IN THE FINANCIAL SECTOR". Typography {typography.label-md} or {typography.caption} (12-13px), color {colors.muted} (#707070), letter-spacing expanded (+0.08em or similar), uppercase transform. Precedes headline with {spacing.md-alt} (20px) spacing after.

{component.hero-headline} — Primary hero declaration: "AWARD WINNING DIGITAL MARKETING FOR ASSET MANAGERS, FINTECH & HEDGE FUNDS". Typography {typography.title-md} (Trade Gothic Next Condensed, 48px, 300 weight, +0.96px tracking), color {colors.dark} (#1f1f1f). Multi-line (4 lines), line-height ~52px (1.08 ratio). No text-shadow. Maximum visual weight in the composition.

{component.hero-body} — Supporting sentence: "We can get you more clients and revenue now." Typography {typography.body-md} (Proxima Nova, 20px, 700 weight), color {colors.ink} (#484848), line-height 24px. Single line or two lines max. Provides actionable promise beneath the aspirational headline.

{component.chat-widget-button} — Floating action button fixed to bottom-right viewport corner. Background {colors.accent} (gold), rounded {rounded.circle} (50%), size approximately 56×56px or 60×60px. Contains speech-bubble/chat icon (custom SVG or icon font) in {colors.on-accent}. Shadow {extensions.shadows.sm} for lift from page content. Z-index very high (overlay level). Always accessible regardless of scroll position.

Cards & Containers (Inferred)

{component.card} — Generic content card for services, case studies, or team members (inferred from typical agency site structure, not visible in current viewport). Background {colors.surface-elevated} (#fcfcfc) or {colors.surface-white}, rounded {rounded.sm} (20px), padding {spacing.lg} (25px) to {spacing.xl} (40px). Shadow {extensions.shadows.sm} on hover. Text color {colors.ink}.

{component.card-featured} — Highlighted card variant with border or background accent in {colors.primary} or {colors.accent}.

{component.text-input} — Form input field (inferred for contact forms). Background {colors.surface-white}, border 1px {colors.border-subtle}, rounded {rounded.DEFAULT} (8px), padding 12px 14px, typography {typography.body-sm} (16px), text color {colors.body}. Height approximately 44-48px.

{component.text-input-focus} — Focused input state. Border color shifts to {colors.primary} (blue), optional subtle ring/shadow in {colors.primary} at 20% opacity. Background remains white.

Footer (Inferred)

{component.footer} — Site footer (inferred). Background likely {colors.surface-dark} (#484848) or black for inversion. Text {colors.on-dark} (white) for primary footer content, {colors.muted-soft} for legal/copyright. Multi-column layout with sitemap links, contact info, social icons. Generous vertical padding {spacing.xl-alt} (50px) or greater.

Do's and Don'ts

Do

• Do use {colors.surface-soft} cerulean as the hero band background for all landing-page entry points—it's the brand's signature first-impression color.
• Do apply {rounded.pill} (60px) to every primary button and active navigation state; this shape is non-negotiable for interactive elements carrying {colors.accent}.
• Do maintain {typography.title-md} at weight 300 for all Trade Gothic headlines—never increase to 400 or 700, as the hairline weight is the defining characteristic of the voice.
• Do use {typography.body-md} at weight 700 for body copy on colored backgrounds; this bold weight is intentional for legibility against saturated surfaces.
• Do reserve {colors.secondary} red exclusively for the 3D illustration program and error states—never introduce it into UI chrome or navigation.
• Do apply uppercase + expanded letter-spacing (+0.02em to +0.08em) to all label-sized text (nav items, category tags, overline labels).
• Do keep button borders explicitly set to transparent (0px solid rgba(0,0,0,0)) rather than omitting the border property—this matches the extracted CSS pattern.
• Do use {colors.accent} gold for exactly three surface types: primary CTA backgrounds, active nav indicators, and the floating chat widget.
• Do allow generous vertical rhythm ({spacing.lg-alt}: 30px) between headline → body → CTA within the hero content block.
• Do treat the 3D illustration as a full visual equal to the headline text—never shrink it below 40% of hero width or relegate it to thumbnail status.

Don'ts

• Don't substitute {colors.primary} blue for {colors.accent} gold on primary CTAs—the gold button is a hard brand rule visible on every conversion point.
• Don't apply gradients or texture overlays to the {colors.surface-soft} hero background; the solid cerulean fill is intentional and high-impact.
• Don't round corners to values outside the defined scale—particularly avoid intermediate radii between {rounded.pill} (60px) and {rounded.sm} (20px) that would create visual inconsistency.
• Don't use font weights between 300 and 700 for primary content (no 400/500/600 for headlines or body)—the binary weight system is core to the typographic identity.
• Don't place {colors.ink} (#484848) text directly on {colors.surface-soft} (#34aadc) without verifying contrast; prefer {colors.dark} (#1f1f1f) or {colors.body} (#292929) for critical text on blue.
• Don't add box-shadows to {component.button-primary}—the flat, borderless aesthetic is deliberate and matches the extracted boxShadow: "none" value.
• Don't convert navigation items from uppercase to sentence case; the {typography.nav-link} uppercase treatment is consistent across all menu items including "HOME".
• Don't expand the color palette with additional saturations beyond the defined 25+ tokens—if a new context requires color, compose from existing tokens (e.g., {colors.primary} at reduced opacity for hover rings).
• Don't allow the hero headline to break such that "FINTECH & HEDGE FUNDS" orphans on a final line with insufficient visual weight; manage line-breaks in Trade Gothic's narrow measure carefully.
• Don't implement hover states with durations longer than 300ms—the system's motion tokens favor snappy, confident transitions ({extensions.motion.duration-fast}: 100ms for color changes).

Motion & Animation

Transition Tokens

/* Core transition — used on buttons, nav items, color-changing elements */
--transition-colors: color 0.1s ease-in-out, 
                     background-color 0.1s ease-in-out, 
                     border-color 0.1s ease-in-out;

/* General transition — used on structural transforms, reveals */
--transition-base: all 0.3s ease-in-out;

Two distinct transition durations were extracted from the CSS: a fast 100ms transition for color/border changes (buttons, nav active states) and a moderate 300ms transition for broader property transitions (layout shifts, opacity fades, transform animations). Both use ease-in-out timing function—no custom cubic-bezier curves were detected, suggesting the system prefers browser-default easing over choreographed motion curves.

Keyframe Animations

The extracted keyframe inventory reveals a WordPress/Theme Fusion animation library underpinning the site:

• components-animate__appear-animation — Fade-in entrance for content blocks as they scroll into viewport.
• components-animate__slide-in-animation — Directional slide reveal (likely slide-up for hero content, slide-left/right for columns).
• fade-in / fade-out — Simple opacity transitions for modal or overlay appearance.
• slide-in-left / slide-in-right / slide-out-left / slide-out-right — Directional panel transitions for off-canvas navigation or slide-over content.
• components-modal__appear-animation / components-modal__disappear-animation — Modal enter/exit with scale or fade.
• components-button__busy-animation — Loading/spinner state for buttons during async actions.
• loadingpulse — Pulse animation for skeleton loading states.

These suggest the site employs scroll-triggered reveal animations for the hero content (headline and illustration likely animate in on load or scroll), directional transitions for any slide-out navigation panel, and standard modal choreography for contact forms or case study lightboxes.

Interaction Patterns

• Scroll-triggered reveals: Hero headline, body text, CTA button, and 3D illustration likely animate in sequence (staggered 100-150ms delays) using components-animate__slide-in-animation or appear-animation classes.
• Nav item hover: Background-color transition from transparent to subtle tint (or to {colors.accent} for active state mimicry) over 100ms.
• Button press: Fast background-color shift to {colors.accent-active} on :active pseudo-class, 100ms duration.
• Chat widget: Persistent fixed-position element; may include a pulse or bounce animation on initial page load (using loadingpulse or similar) to attract attention.
• Focus rings: Inputs and buttons likely receive outline or box-shadow ring in {colors.primary} on keyboard focus (not extractable from static screenshot but inferable from accessibility best practices given the financial-services audience).
• Modal/dropdown: If present, these use appear-animation with opacity + slight translateY(10px→0) over 300ms ease-in-out.

No parallax scrolling, magnetic cursor effects, or complex GSAP-style timeline animations were detected in the CSS. The motion level is moderate—polish without theatricality.

Imagery Style

• Dominant medium: 3D rendered illustration (clay/plastic material language, soft ambient lighting, global illumination).
• Subject matter: Abstracted business metaphor—in the viewport, an abacus/chart-frame device suggesting data, measurement, finance, or growth. The hanging pink bars evoke bar charts without being literal.
• Color treatment: Illustration uses a curated subset of brand colors: {colors.secondary} red for the primary frame, pastel rose/pink for internal elements, and {colors.surface-soft}-family blues for environmental platforms. This creates visual cohesion between illustration and UI.
• Geometry: Rectangular devices with heavily rounded corners (matching {rounded.pill} or {rounded.lg} proportions), cylindrical forms, stepped platforms. Everything feels manufactured but soft—not sharp or mechanical.
• Depth style: Shallow depth-of-field suggestion (though likely full-focus for web delivery), soft drop shadows between illustration parts (frame casting shadow on platform), no hard edges.
• Role in layout: Illustration is co-equal with headline text—receives roughly 45% of hero width, is not relegated to background-watermark status. It's a protagonist, not atmosphere.
• Lighting: Top-down or slightly angled studio lighting with soft shadows. No dramatic chiaroscuro—friendly, approachable illumination.
• Style consistency: If additional illustrations exist on the site (services icons, about-section imagery), they likely share this 3D clay-render aesthetic, material palette, and color discipline.
• Photography: None visible in current viewport; if present on inner pages, expected to be candid/business-editorial with similar color grading toward the brand's blue/yellow spectrum.

Icon System

• Library: Custom SVG + icon fonts detected. The extracted CSS references multiple icon font families: eg-font (Essential Grid plugin), mfn-icons (Theme Fusion/BeTheme), revicons (Slider Revolution), plus a fontello font-face linked externally. This indicates a composite icon strategy: plugin-provided icons for functional UI, potentially custom SVGs for brand-specific marks.
• Specific icons observed:
  • Speech bubble / chat icon (inside {component.chat-widget-button})
  • Arrow-right symbol (→) as text suffix on service buttons ("INBOUND MARKETING →")
  • Likely hamburger/menu icon (for mobile nav, not visible in desktop viewport)
  • Social media icons (referenced in .social class in DOM structure)
• Treatment: Icons within buttons appear to use currentColor inheritance, matching {colors.on-accept} (near-black on gold buttons) or {colors.on-dark} (white on dark surfaces). The chat widget icon appears to be a stroke-based or filled bubble shape.
• Size: Chat icon estimated at 24×28px within a 56-60px circular button. Service-arrow icons are text characters (Unicode arrows), not icon-font glyphs, sized with parent {typography.button} (16px).
• Alignment: Icons center-aligned within their containers (chat button: perfectly centered; button arrows: inline with text baseline).

Recommended Frontend Stack

- Framework:      Next.js 14 (React) or Astro (if content-heavy/marketing-focused)
                 Current site runs on WordPress; rebuild recommendation favors 
                 modern SSG for performance matching the polished design.
- Styling:        Tailwind CSS v3.4+ (utility-first maps cleanly to token system)
                 or CSS Modules with design-token CSS custom properties
- Fonts:          Self-hosted Trade Gothic Next Condensed + Proxima Nova 
                 (via Fontsource npm package or subsetted WOFF2);
                 Google Fonts fallback: Roboto Condensed (300) + Inter (400/700)
- Animation:      Framer Motion (React) or vanilla CSS @keyframes 
                 (matches extracted animation library complexity)
- Icons:          Lucide React (for UI icons) + custom SVGs for brand marks;
                 replace legacy font-icon dependencies (eg-font, mfn-icons, revicons)
- Component lib:  Radix UI Primitives (for accessible Dropdown/Modal/Dialog) 
                 + custom components for branded Button, Nav, Hero
- Build tool:     Vite or Next.js built-in bundling

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column hero (illustration stacks above or below text); hamburger nav replaces horizontal menu; chat widget reduces to 48×48px; button padding compresses to 12px 30px; {typography.title-md} scales down to ~32-36px. | | Tablet | 768px – 1024px | Two-column hero maintained but with tighter proportions (40/60 or 35/65 split); navigation may collapse to hamburger or abbreviated links; illustration scales to ~40% width. | | Desktop | 1025px – 1440px | Full design as captured: asymmetric hero, horizontal nav, 48px headlines, 60px pill buttons. | | Wide | > 1440px | Content constrains to 1440px max-width (per header container); hero background continues full-bleed; additional horizontal padding in content column. |

Touch Targets

• {component.button-primary}: Padding 12px 50px yields minimum touch height of ~44px (meets WCAG AAA). Wide format (50px horizontal padding) exceeds 44px minimum comfortably.
• {component.chat-widget-button}: Estimated 56–60px diameter circle—exceeds 44×44mm minimum significantly. Easy thumb-reach target in bottom-right zone.
• {component.nav-link}: Padding ~10px × 8px may fall slightly under 44px height on mobile; recommend increasing to 12px 16px minimum for mobile touch compliance.
• {component.nav-link-active}: Same consideration as nav-link—ensure pill-shaped active indicator maintains ≥44px height on touch screens.

Collapsing Strategy

• Navigation: Horizontal nav collapses to hamburger menu (< 1024px or < 768px depending on implementation). Hamburger icon triggers slide-in-right panel (keyframe slide-in-right detected in CSS) with vertical nav link stack. Active state (HOME) retains {colors.accent} pill background in vertical format.
• Hero columns: At mobile breakpoint, the two-column hero stacks vertically. Most likely order: (1) headline/content block, (2) 3D illustration—putting textual value proposition first for mobile scanners. Alternative: illustration first for visual impact. Both valid; test with analytics.
• Illustration sizing: 3D asset scales down to ~80% viewport width on mobile, maintaining aspect ratio. May switch to a simplified 2D graphic or cropped version if 3D file size is prohibitive.
• Chat widget: Maintains fixed bottom-right position across all breakpoints. Reduces from 60px to 48px diameter on mobile to minimize screen real estate consumption. Always visible (no hide-on-scroll behavior detected).
• Buttons: Service-category buttons ("INBOUND MARKETING →") likely wrap to full-width or stack vertically on mobile. Primary CTA ("FIND OUT MORE") remains full-width or centered with compressed horizontal padding (12px 30px).
• Type scale: {typography.title-md} drops from 48px to approximately 32px (mobile) and 40px (tablet). {typography.body-md} may reduce from 20px to 18px or 16px on smallest screens. Line-heights remain generous (1.2–1.4).

Image Behavior

• Hero illustration: Scales responsively with width: 100%; height: auto; object-fit: contain. On mobile, may shift to object-fit: cover with constrained height if stacking order places it in a banner slot. Consider providing a mobile-cropped version focusing on the central abacus device rather than full platform context.
• Logo: Vector SVG (or high-res PNG with transparent background). Scales down proportionally in collapsed mobile nav. Minimum 120px wide on mobile, 180px on desktop.

Iteration Guide

1. Start with the hero band. Build the {component.hero-band} first with its {colors.surface-soft} background filling full viewport width. Implement the two-column layout (illustration left ~45%, content right ~55%) using flexbox or CSS grid. Get the Trade Gothic headline rendering correctly at 48px/300 weight before adding anything else.

2. Implement the typography token cascade. Define CSS custom properties for every {typography.*} token. Ensure Trade Gothic loads with font-display: swap and has a Roboto Condensed 300 fallback. Set Proxima Nova (with Inter fallback) as the default body font. Verify the 700 weight body text reads well on the blue background—this is the most unconventional choice in the system.

3. Build the button system from YAML. Create {component.button-primary} with exact specs: background: {colors.accent}, color: {colors.on-accent}, borderRadius: {rounded.pill}, padding: 12px 50px, border: none. Then create the -active and -hover variants as separate CSS classes (or Tailwind variants) referencing {colors.accent-active} and {colors.accent-hover}. Test that the transparent border (0px solid rgba(0,0,0,0)) is explicitly set.

4. Construct the navigation. White-background header ({colors.surface-white}) spanning full width with inner container at 1440px max. Logo left, nav links right. Style {component.nav-link-active} (HOME) as a pill with gold background. Ensure uppercase + letter-spacing on all nav items. Plan the mobile hamburger variant using the slide-in-right keyframe pattern.

5. Layer in the 3D illustration. Position the hero illustration as a direct child of the hero-band flex container. Use an optimized WebP or AVIF with PNG fallback. If rebuilding the 3D asset isn't feasible, source a placeholder from a 3D stock library matching the clay-render aesthetic (red frame, pink elements, blue platform).

6. Add scroll-triggered animations. Using Framer Motion (React) or Intersection Observer (vanilla), implement staggered fade-slide-up entrances for: (a) hero label, (b) headline, (c) body text, (d) CTA button, (e) illustration. Stagger delay by 100-150ms per element. Duration: 500-700ms. Easing: ease-out.

7. Implement the chat widget. Fixed-position circle, bottom-right, z-index: 9999, {colors.accent} background, 60px diameter, chat-bubble icon centered. Add a subtle loadingpulse or bounce animation on initial load (3 seconds, then stop). Link to contact form or live chat service.

8. Run linting and contrast checks. Execute npx @google/design.md lint DESIGN.md to catch broken token references, orphaned components, or contrast-ratio warnings. Pay special attention to {colors.ink} on {colors.surface-soft} combinations—verify WCAG AA compliance for all text-on-color pairings.

9. Font setup for development. Map proprietary fonts to Google Fonts equivalents during development:

   :root {
     --font-headline: 'Roboto Condensed', 'Trade Gothic Next Condensed', sans-serif;
     --font-body: 'Inter', 'Proxima Nova', sans-serif;
     --font-accent: 'DM Sans', 'Soleil', sans-serif;
   }
   

   Replace with self-hosted .woff2 files for production deployment.

10. Extend to inner pages. Once the hero system is pixel-perfect, replicate the token usage patterns for Services, Case Studies, About, and Contact pages. Each page should reuse {component.hero-band} (possibly with different background colors), {component.button-primary}, {component.card}, and the typography scale. Maintain the illustration style consistency if additional 3D assets are commissioned.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred rather than extracted. Button hover likely uses {colors.accent-hover}; nav link hover likely shows subtle background tint or underline.
• Loading/skeleton states: While loadingpulse and components-animate__loading keyframes exist in the CSS, the actual skeleton component markup and styling weren't visible in the viewport. Shape, color, and animation parameters for loading placeholders are unknown.
• Form validation states: Beyond {component.text-input-focus}, the error state ({colors.error} border/text), success state, and disabled input styling are inferred from the color palette, not extracted from live form elements.
• Mobile navigation detail: The hamburger icon design, slide-out panel width (280px? 320px?), backdrop overlay treatment, and close-button placement are extrapolated from common patterns and the slide-in-* keyframes, not observed.
• Footer complete specification: Footer structure, column layout, social icon treatment, newsletter signup (if present), and legal text formatting are entirely inferred—footer falls below the visible viewport.
• Case study / portfolio cards: The card component system for showcasing client work (likely a major site section) wasn't in view. Card image treatments, hover reveals, title/body typography within cards, and tag/category styling are unknown.
• Dark mode or theme switching: Despite extensions.mode: "dark" assignment (derived from the saturated canvas color), no actual dark-mode toggle or alternative color palette was detected. The site may operate in a permanent "vibrant mode" rather than offering traditional light/dark switching.
• WordPress-specific class semantics: Many extracted classes (home, wp-singular, page-template-default, wp-theme-flycast) indicate WordPress + BeTheme/Theme Fusion framework. Some design decisions may reflect CMS template constraints rather than intentional design choices.
• Exact 3D illustration specifications: The 3D model's original dimensions, camera angle, light rig, and material properties (PBR roughness/metalness values) aren't recoverable from a raster screenshot. Rebuilding or commissioning matching illustration will require artistic interpretation of the visible style.