/* ========================================================================== Flip — colors_and_type.css (THE Flip design system) -------------------------------------------------------------------------- Single source of truth. Tokens are identical across all surfaces; the only thing that switches is the TYPE TRACK, decided by output format: Track A ── Print / digital image (PDF, PNG, JPG, on-screen) Headlines: Clash Grotesk Medium 500 Body: Inter 400 / 500 → set (or omit — this is the default) Track B ── Slides / docs / office (PPTX, Google Slides, Word, GDocs, email) Headlines & Body: Arial — Bold + Regular → set ALWAYS ASK at the start of a task which one applies. Never assume. ========================================================================== */ /* --- Self-hosted Clash Grotesk (headlines, Track A) --------------------- */ @font-face { font-family: "Clash Grotesk"; src: url("assets/fonts/ClashGrotesk-Variable.ttf") format("truetype-variations"), url("assets/fonts/ClashGrotesk-Medium.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Grotesk"; src: url("assets/fonts/ClashGrotesk-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } /* --- Inter from Google Fonts (body, Track A) ---------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); :root { /* ============================================================ 1. BRAND COLOR TOKENS Per brand.getflip.com. Color prominence target: White 50% · Flip Swirl 30% · Black 15% · Green 5%. ============================================================ */ /* --- PRIMARY --- */ --flip-swirl: #2151F5; /* Pantone 285 C · the brand */ --flip-blue: #2151F5; /* alias — same color, alt name */ --white: #FFFFFF; /* --- SECONDARY --- */ --black: #000000; --sky: #5FCDFD; /* --- ACCENT (small splashes only — never as a background) --- */ --green: #65DB91; --accent-green: #65DB91; /* --- GRAYSCALE --- */ --gray-20: #F7F7F5; --gray-40: #D9D9D6; --gray-60: #7A7A74; --gray-80: #3A3A36; /* --- BLUESCALE (product UI only) --- */ --blue-sky: #5FCDFD; --blue-flip: #2151F5; /* --- Extended grayscale (UI helpers) --- */ --gray-50: #F7F7F5; --gray-100: #F2F2F2; --gray-200: #EAEAEA; --gray-300: #D9D9D6; --gray-400: #B5B5AE; --gray-500: #7A7A74; --gray-700: #444444; --gray-800: #3A3A36; --gray-900: #191919; --gray-950: #141010; /* Semantic destructive */ --state-urgent: #D50636; /* ============================================================ 2. SEMANTIC COLOR TOKENS ============================================================ */ --bg: var(--white); --bg-alt: var(--gray-20); --bg-inverse: var(--black); --bg-brand: var(--flip-swirl); --fg-1: var(--black); --fg-2: var(--gray-80); --fg-3: var(--gray-60); --fg-inverse: var(--white); --fg-brand: var(--flip-swirl); --fg-on-brand: var(--white); --border: var(--gray-200); --border-strong: var(--gray-40); --divider: rgba(0,0,0,0.08); --focus-ring: 0 0 0 3px rgba(33,81,245,0.35); /* ============================================================ 3. OFFICIAL GRADIENTS (only three — do not invent new ones) ============================================================ */ --gradient-custom: url("assets/textures/custom-gradient.png") center/cover no-repeat; --gradient-blue-to-green: linear-gradient(90deg, #2151F5 0%, #65DB91 100%); --gradient-blue-to-sky: linear-gradient(90deg, #2151F5 0%, #5FCDFD 100%); /* PRODUCT UI ONLY */ /* ============================================================ 4. TYPE FAMILIES — TWO TRACKS, ONE TOKEN The default --font-display / --font-body resolve to TRACK A (Clash + Inter). Setting swaps them to Arial-only — see the override block below. ============================================================ */ /* Track A — print / image (default) */ --font-display: "Clash Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-product: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Always-Arial (used for the office track + as a fallback alias) */ --font-office: "Arial", "Helvetica Neue", Helvetica, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Weight tokens — Track A uses Clash 500 + Inter 400/500 */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-display: 500; /* Clash Medium for headlines */ /* ============================================================ 5. TYPE SCALE (Track A — Clash + Inter, per brand guide) ============================================================ */ /* Display — Clash Grotesk 500, tight tracking */ --display-xl-size: 120px; --display-xl-lh: 0.95; --display-xl-track: -0.035em; --display-l-size: 82px; --display-l-lh: 1.00; --display-l-track: -0.030em; --display-m-size: 48px; --display-m-lh: 1.00; --display-m-track: -0.025em; --display-s-size: 32px; --display-s-lh: 1.05; --display-s-track: -0.020em; /* Headings */ --h1-size: 44px; --h1-lh: 1.10; --h1-track: -0.020em; --h2-size: 36px; --h2-lh: 1.15; --h2-track: -0.015em; --h3-size: 28px; --h3-lh: 1.20; --h3-track: -0.010em; --h4-size: 22px; --h4-lh: 1.30; --h4-track: 0; --h5-size: 18px; --h5-lh: 1.35; --h5-track: 0; --h6-size: 15px; --h6-lh: 1.40; --h6-track: 0; /* Body — Inter */ --body-lede: 18px; --body-lede-lh: 1.55; --body-md: 16px; --body-md-lh: 1.60; --body-sm: 14px; --body-sm-lh: 1.55; --meta: 12px; --meta-lh: 1.50; --eyebrow: 11px; --eyebrow-track: 0.14em; /* Display fluid helpers (responsive previews) */ --display-1-size: clamp(56px, 8vw, 120px); --display-1-lh: 0.95; --display-1-track: -0.035em; --display-2-size: clamp(44px, 5.5vw, 82px); --display-2-lh: 1.00; --display-2-track: -0.030em; /* ============================================================ 6. SPACING SCALE (4px base grid) ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ============================================================ 7. RADII The brand's primary shape is a square with 25% rounded corners. ============================================================ */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 35px; --radius-2xl: 60px; /* phone / app frame */ --radius-square: 25%; /* PRIMARY brand shape */ --radius-picture: 304px; --radius-pill: 9999px; --radius-round: 9999px; /* ============================================================ 8. ELEVATION ============================================================ */ --shadow-sm: 0 1px 2px rgba(23,23,23,0.06), 0 1px 1px rgba(23,23,23,0.04); --shadow-md: 0 6px 16px rgba(23,23,23,0.08), 0 2px 4px rgba(23,23,23,0.04); --shadow-lg: 0 18px 40px rgba(23,23,23,0.12), 0 4px 12px rgba(23,23,23,0.06); --shadow-device: 3px 3px 9px rgba(0,0,0,0.25); } /* ============================================================ TRACK B ── OFFICE / SLIDES OVERRIDE Switch the page to Arial-everywhere by setting on the root: This is the rule the Flip brand prescribes for PPTX / Google Slides / Word / GDocs / email — fonts that are guaranteed not to break. ============================================================ */ [data-type-track="office"] { --font-display: var(--font-office); --font-body: var(--font-office); --font-product: var(--font-office); /* Arial reads ~12% heavier than Clash at the same size; trim display sizes one notch to keep the visual weight aligned. */ --display-xl-size: 104px; --display-xl-track: -0.020em; --display-l-size: 72px; --display-l-track: -0.018em; --display-m-size: 44px; --display-m-track: -0.015em; --display-s-size: 28px; --display-s-track: -0.010em; /* Arial only ships Regular / Bold — collapse mid-weights up to Bold on display, and down to Regular on body. */ --fw-display: 700; --fw-medium: 700; --fw-semi: 700; } /* ============================================================ 9. BASE ELEMENT STYLING ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; font-family: var(--font-body); color: var(--fg-1); background: var(--bg); font-size: var(--body-md); line-height: var(--body-md-lh); } /* All headings use the display family (Clash on Track A, Arial Bold on B) */ h1, .h1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-track); margin: 0; color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-track); margin: 0; color: var(--fg-1); text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-track); margin: 0; color: var(--fg-1); } h4, .h4 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-track); margin: 0; color: var(--fg-1); } h5, .h5 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--h5-size); line-height: var(--h5-lh); margin: 0; color: var(--fg-1); } h6, .h6 { font-family: var(--font-body); font-weight: 700; font-size: var(--h6-size); line-height: var(--h6-lh); margin: 0; color: var(--fg-1); text-transform: uppercase; letter-spacing: 0.06em; } .display-xl { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-xl-size); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-track); margin: 0; text-wrap: balance; } .display-l { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-l-size); line-height: var(--display-l-lh); letter-spacing: var(--display-l-track); margin: 0; text-wrap: balance; } .display-m { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-m-size); line-height: var(--display-m-lh); letter-spacing: var(--display-m-track); margin: 0; text-wrap: balance; } .display-s { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-s-size); line-height: var(--display-s-lh); letter-spacing: var(--display-s-track); margin: 0; text-wrap: balance; } /* Backwards-compatible aliases */ .display-1 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-1-size); line-height: var(--display-1-lh); letter-spacing: var(--display-1-track); margin: 0; text-wrap: balance; } .display-2 { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--display-2-size); line-height: var(--display-2-lh); letter-spacing: var(--display-2-track); margin: 0; text-wrap: balance; } p { margin: 0 0 1em; color: var(--fg-2); font-size: var(--body-md); line-height: var(--body-md-lh); text-wrap: pretty; } .lede { font-size: var(--body-lede); line-height: var(--body-lede-lh); color: var(--fg-1); } .meta { font-size: var(--meta); line-height: var(--meta-lh); color: var(--fg-3); } a { color: var(--fg-brand); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } /* ============================================================ 10. COMMON PATTERNS ============================================================ */ .eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--eyebrow); letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--fg-brand); } /* The signature shape — a square with 25% rounded corners. */ .flip-square { border-radius: 25%; background: var(--flip-swirl); aspect-ratio: 1; } .flip-square-top { border-radius: 25% 25% 0 0; background: var(--flip-swirl); aspect-ratio: 2/1; } .flip-square-side { border-radius: 0 25% 25% 0; background: var(--flip-swirl); aspect-ratio: 1/2; } .flip-dotgrid { background-image: radial-gradient(currentColor 1.2px, transparent 1.2px); background-size: 14px 14px; color: var(--gray-40); opacity: 0.9; } /* ============================================================ 11. BUTTONS (pill, Clash Medium / Arial Bold) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 16px; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; transition: filter 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1); } .btn:hover { filter: brightness(0.92); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--flip-swirl); color: #fff; } .btn-dark { background: #000; color: #F5F5F3; } .btn-green { background: var(--green); color: #000; } .btn-ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--border); } /* Gradient-stroke variants — gradient lives in the BORDER, fill is solid. */ .btn-grad-stroke-dark { background: linear-gradient(#000, #000) padding-box, linear-gradient(90deg, #65DB91, #2151F5) border-box; border: 2px solid transparent; color: #fff; } .btn-grad-stroke-white { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #65DB91, #2151F5) border-box; border: 2px solid transparent; color: #000; }