FlowMapp

:root {
  /_ === COLORS === _/

  /_ Backgrounds _/
  --color-bg-base:        #0D0D10;
  --color-bg-elevated:    #1A1A1F;
  --color-bg-card:        #1E1E24;
  --color-bg-overlay:     rgba(30, 30, 36, 0.85);

  /_ Brand / Accent _/
  --color-accent-primary: #6C7FFF;   /_ electric indigo-blue _/
  --color-accent-hover:   #5B6EF5;
  --color-accent-cta:     #FFD040;   /_ amber-yellow CTA _/
  --color-accent-cta-hover: #F5C518;
  --color-accent-glow:    rgba(108, 127, 255, 0.25);

  /_ Text _/
  --color-text-primary:   #F0F0F5;
  --color-text-secondary: #A0A0B0;
  --color-text-muted:     #6B6B7E;
  --color-text-inverse:   #0D0D10;

  /_ Borders / Strokes _/
  --color-border-subtle:  #2A2A35;
  --color-border-default: #3A3A48;
  --color-border-strong:  #5A5A6E;

  /_ Semantic _/
  --color-success:        #34C78A;
  --color-success-bg:     rgba(52, 199, 138, 0.12);
  --color-warning:        #FFD040;
  --color-error:          #FF5C5C;

  /_ === TYPOGRAPHY === _/
  --font-family-base:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono:     'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:         0.75rem;   /_ 12px _/
  --font-size-sm:         0.875rem;  /_ 14px _/
  --font-size-base:       1rem;      /_ 16px _/
  --font-size-md:         1.125rem;  /_ 18px _/
  --font-size-lg:         1.25rem;   /_ 20px _/
  --font-size-xl:         1.5rem;    /_ 24px _/
  --font-size-2xl:        2rem;      /_ 32px _/
  --font-size-3xl:        2.5rem;    /_ 40px _/
  --font-size-4xl:        3rem;      /_ 48px _/
  --font-size-hero:       4rem;      /_ 64px _/

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:    1.2;
  --line-height-snug:     1.375;
  --line-height-base:     1.6;
  --line-height-relaxed:  1.75;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide:  0.05em;
  --letter-spacing-wider: 0.1em;

  /_ === SPACING === _/
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  /_ === BORDER RADIUS === _/
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /_ === SHADOWS === _/
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-glow-primary: 0 0 40px rgba(108, 127, 255, 0.3);
  --shadow-glow-cta:     0 0 30px rgba(255, 208, 64, 0.25);
  --shadow-card:  0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.05);

  /_ === LAYOUT === _/
  --container-max-width: 1280px;
  --container-padding:   24px;
  --nav-height:          68px;
  --grid-columns:        12;
  --grid-gap:            24px;

  /_ === TRANSITIONS === _/
  --transition-fast:     150ms ease;
  --transition-base:     250ms ease;
  --transition-slow:     400ms ease;
  --transition-spring:   300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/\* Dark mode is the default — no separate dark override needed.
   Light surfaces appear only as card elevations within the dark canvas. \*/

@media (prefers-color-scheme: light) {
  /\* FlowMapp's marketing site does not expose a public light mode.
     The app (app.flowmapp.com) may implement its own light theme. \*/
  :root {
    --color-bg-base:        #F5F5F8;
    --color-bg-elevated:    #FFFFFF;
    --color-bg-card:        #FFFFFF;
    --color-text-primary:   #111114;
    --color-text-secondary: #4A4A5A;
    --color-text-muted:     #8C8C9E;
    --color-border-subtle:  #E0E0EB;
    --color-border-default: #C8C8D8;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
  }
}

Color Tokens

Spacing Tokens

Typography Tokens

Border Radius Tokens

Shadow Tokens

Framework: The FlowMapp marketing site (flowmapp.com) is built entirely on Webflow, identifiable by the CDN domain cdn.prod.website-files.com and the Webflow-standard CSS/asset naming conventions. The product app (app.flowmapp.com) is a separate SPA, likely React or Vue-based, with its own design system that is not publicly inspectable.

Theme Support: The marketing site is dark-only. No prefers-color-scheme light mode is implemented on the public site. The dark canvas is intentional — it positions FlowMapp as a modern, professional tool and provides strong contrast for product screenshots and UI previews displayed throughout the page.

Data Confidence:

• High confidence: Dark background palette, amber/yellow CTA color, indigo-blue accent, Webflow platform, pill-shaped buttons, large section padding, card border-radius range, grid-based layout with ~1280px container.
• Medium confidence: Exact color hex values (derived from visual analysis; actual Webflow variables may differ by 1–2 shades). Font family identified as Inter-like geometric sans-serif — Webflow defaults and common SaaS choices strongly suggest Inter.
• Lower confidence: Precise font-size scale (estimated from visual proportions); exact shadow values; any tokens for the product app UI.

Notable Patterns:

• Glow / halo decoratives: SVG radial eclipse shapes are layered behind hero content to create atmospheric depth — a contemporary SaaS marketing pattern.
• Amber CTA contrast: The warm yellow CTA (#FFD040) creates a deliberate warm/cool contrast against the cool indigo accent and dark background, maximizing button visibility.
• Step / badge labels: Pill-shaped badges with bold uppercase step numbers ("STEP 1", "+15% IN SALES") use the same pill radius as buttons, maintaining visual consistency.
• Marquee ticker: The rotating audience-type animation (agencies, studios, UX/UI designers, freelancers…) is implemented as a CSS marquee, common in modern Webflow builds.
• Social proof stacking: Avatar circles with overlap (-8px margin) are used in the hero and testimonial sections — a trust-building pattern emphasizing community size ("400,000 users").
• Feature icon system: Consistent SVG feature icons in a 40–48px container with a dark rounded background appear throughout feature lists, reinforcing visual consistency across all feature sections.
• No custom web fonts loaded via Google Fonts detected in the fetched markup — fonts are likely self-hosted via Webflow's font hosting or loaded via a Webflow font embed that was not present in the static HTML response.