/* ============================================================ FLOWIFY DESIGN SYSTEM — Colors & Type ============================================================ Brand: Flowify. AI Agent for Closing. Anchored on the brand mint (#39FFD9) sampled from the logo. Pair: deep ink for contrast, off-white surfaces, warm semantic accents that suit a sales/closing context (hot leads, urgency). FONTS • Brand script (logo + display) → Gelato Luxe Regular (Adobe Fonts) Confirmed by brand owner. Needs the Adobe Fonts kit URL (https://use.typekit.net/XXXXXX.css) wired below. Until then, Pacifico loads as the nearest free fallback. • UI / Body → Geist (Google Fonts) — substitution, pending confirmation of the brand UI face. • Mono / numeric → Geist Mono — substitution. ============================================================ */ /* Adobe Fonts kit — loads Gelato Luxe Regular for the brand script. */ @import url('https://use.typekit.net/xar2hqp.css'); @import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* ---------- BRAND ---------- */ --flow-mint: #39FFD9; /* primary brand, sampled from logo bg */ --flow-mint-bright: #5CFFE0; /* hover lift on dark surfaces */ --flow-mint-deep: #1FE5BD; /* press / interactive emphasis */ --flow-mint-ink: #00997D; /* mint readable on white (AA body) */ --flow-mint-soft: #C7FFEF; /* tinted bg, success bg */ --flow-mint-wash: #ECFFFA; /* lightest mint surface */ /* ---------- INK (TEXT) ---------- */ --flow-ink: #0A1F1A; /* primary text, near-black w/ teal warmth */ --flow-ink-2: #3D4D48; /* secondary text */ --flow-ink-3: #6B7A75; /* muted, captions */ --flow-ink-4: #A6B0AC; /* placeholder, disabled label */ /* ---------- SURFACES ---------- */ --flow-bg: #FFFFFF; --flow-bg-alt: #F5FAF8; /* page tint */ --flow-surface: #FFFFFF; /* card */ --flow-surface-raised: #FFFFFF; --flow-surface-inset: #F2F6F4; /* inputs, code blocks */ --flow-overlay: rgba(10, 31, 26, 0.55); /* ---------- DARK MODE INK SURFACES ---------- */ --flow-night: #07120F; /* darkest, panel base */ --flow-night-2: #0E1F1A; /* card on night */ --flow-night-3: #16302A; /* hover on night */ /* ---------- BORDERS ---------- */ --flow-border: #E6EDEA; --flow-border-strong: #C7D2CD; --flow-border-mint: #8BFFE3; /* focus ring tint */ --flow-divider: #EEF2F0; /* ---------- SEMANTIC ---------- */ --flow-success: #00B07F; /* deeper green for legibility on white */ --flow-success-bg: #DCFBEC; --flow-warn: #F5A524; /* deal-at-risk */ --flow-warn-bg: #FFF3D6; --flow-danger: #E5484D; /* lost / blocked */ --flow-danger-bg: #FEE5E6; --flow-info: #0B7A8F; --flow-info-bg: #DFF4FA; /* ---------- ACCENTS ---------- */ --flow-hot: #FF6B57; /* hot lead / urgency / streaks */ --flow-hot-bg: #FFE6E0; --flow-cool: #7B5BFF; /* data viz secondary */ --flow-cool-bg: #ECE5FF; --flow-gold: #E0B341; /* won / commission */ /* ---------- TYPE FAMILIES ---------- */ --flow-font-script: 'gelato-luxe', 'Gelato Luxe', 'Pacifico', 'Lobster', 'Brush Script MT', cursive; --flow-font-sans: 'Geist', ui-sans-serif, -apple-system, 'Segoe UI', sans-serif; --flow-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---------- TYPE SCALE (modular 1.22) ---------- */ --flow-fs-xs: 11px; --flow-fs-sm: 13px; --flow-fs-base: 15px; --flow-fs-md: 17px; --flow-fs-lg: 20px; --flow-fs-xl: 24px; --flow-fs-2xl: 30px; --flow-fs-3xl: 38px; --flow-fs-4xl: 48px; --flow-fs-5xl: 64px; --flow-fs-6xl: 84px; /* ---------- LINE HEIGHTS ---------- */ --flow-lh-tight: 1.05; /* @kind other */ --flow-lh-snug: 1.2; /* @kind other */ --flow-lh-body: 1.5; /* @kind other */ --flow-lh-loose: 1.65; /* @kind other */ /* ---------- WEIGHTS ---------- */ --flow-fw-light: 300; /* @kind other */ --flow-fw-regular: 400; /* @kind other */ --flow-fw-medium: 500; /* @kind other */ --flow-fw-semibold: 600; /* @kind other */ --flow-fw-bold: 700; /* @kind other */ --flow-fw-black: 800; /* @kind other */ /* ---------- TRACKING ---------- */ --flow-tr-tight: -0.02em; /* @kind other */ --flow-tr-snug: -0.01em; /* @kind other */ --flow-tr-normal: 0; /* @kind other */ --flow-tr-wide: 0.04em; /* @kind other */ --flow-tr-eyebrow: 0.12em; /* @kind other */ /* ---------- SPACING (4pt) ---------- */ --flow-s-1: 4px; --flow-s-2: 8px; --flow-s-3: 12px; --flow-s-4: 16px; --flow-s-5: 20px; --flow-s-6: 24px; --flow-s-7: 32px; --flow-s-8: 40px; --flow-s-9: 56px; --flow-s-10: 72px; --flow-s-11: 96px; /* ---------- RADII ---------- */ --flow-r-xs: 4px; --flow-r-sm: 6px; --flow-r-md: 10px; --flow-r-lg: 14px; --flow-r-xl: 20px; --flow-r-2xl: 28px; --flow-r-pill: 999px; /* ---------- SHADOWS (mint-tinted for warmth) ---------- */ --flow-shadow-1: 0 1px 2px rgba(10, 31, 26, 0.06), 0 1px 1px rgba(10, 31, 26, 0.04); --flow-shadow-2: 0 2px 6px rgba(10, 31, 26, 0.06), 0 4px 14px rgba(10, 31, 26, 0.06); --flow-shadow-3: 0 6px 16px rgba(10, 31, 26, 0.08), 0 18px 48px rgba(10, 31, 26, 0.08); --flow-shadow-mint: 0 8px 28px rgba(57, 255, 217, 0.35), 0 2px 6px rgba(31, 229, 189, 0.25); --flow-shadow-press: inset 0 2px 4px rgba(10, 31, 26, 0.10); /* ---------- FOCUS RING ---------- */ --flow-focus: 0 0 0 3px rgba(57, 255, 217, 0.45), 0 0 0 1px var(--flow-mint-deep); /* ---------- MOTION ---------- */ --flow-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ --flow-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --flow-dur-fast: 120ms; /* @kind other */ --flow-dur-base: 200ms; /* @kind other */ --flow-dur-slow: 360ms; /* @kind other */ } /* ============================================================ SEMANTIC TYPE — apply these directly to elements ============================================================ */ .flow-script { font-family: var(--flow-font-script); font-weight: 400; letter-spacing: 0; line-height: 1; } .flow-eyebrow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-xs); font-weight: var(--flow-fw-semibold); letter-spacing: var(--flow-tr-eyebrow); text-transform: uppercase; color: var(--flow-ink-3); } .flow-h1, h1.flow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-5xl); font-weight: var(--flow-fw-bold); letter-spacing: var(--flow-tr-tight); line-height: var(--flow-lh-tight); color: var(--flow-ink); } .flow-h2, h2.flow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-3xl); font-weight: var(--flow-fw-bold); letter-spacing: var(--flow-tr-tight); line-height: var(--flow-lh-snug); color: var(--flow-ink); } .flow-h3, h3.flow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-2xl); font-weight: var(--flow-fw-semibold); letter-spacing: var(--flow-tr-snug); line-height: var(--flow-lh-snug); color: var(--flow-ink); } .flow-h4, h4.flow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-xl); font-weight: var(--flow-fw-semibold); letter-spacing: var(--flow-tr-snug); line-height: var(--flow-lh-snug); color: var(--flow-ink); } .flow-lead { font-family: var(--flow-font-sans); font-size: var(--flow-fs-lg); font-weight: var(--flow-fw-regular); line-height: var(--flow-lh-body); color: var(--flow-ink-2); } .flow-body, p.flow { font-family: var(--flow-font-sans); font-size: var(--flow-fs-base); font-weight: var(--flow-fw-regular); line-height: var(--flow-lh-body); color: var(--flow-ink); } .flow-small { font-family: var(--flow-font-sans); font-size: var(--flow-fs-sm); font-weight: var(--flow-fw-regular); line-height: var(--flow-lh-body); color: var(--flow-ink-2); } .flow-caption { font-family: var(--flow-font-sans); font-size: var(--flow-fs-xs); font-weight: var(--flow-fw-medium); line-height: var(--flow-lh-body); color: var(--flow-ink-3); } .flow-mono, code.flow { font-family: var(--flow-font-mono); font-size: 0.92em; font-weight: var(--flow-fw-medium); font-feature-settings: 'ss01', 'tnum'; color: var(--flow-ink); } .flow-numeric { font-family: var(--flow-font-sans); font-feature-settings: 'tnum', 'ss01'; font-variant-numeric: tabular-nums; }