/* ============================================================ Finds — Colors & Type Source-of-truth tokens. Import this file in any HTML in the design system. All values are also documented in README.md. ============================================================ */ /* ---- Webfonts ---------------------------------------------- Display: Poppins — geometric sans, used at heavy weights (600–800) for headlines and the wordmark. UI/Body: Poppins — same family, weights 400–500 for product surfaces and long copy. Mono: Geist Mono — metadata, prices, coordinates. NOTE: Single-family system by design. Brand has no first-party fonts shipped; Poppins is the closest free match to the wordmark's geometric character. ----------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400..600&display=swap"); :root { /* ============================================================ CORE PALETTE — the three brand swatches from cores.svg ============================================================ */ --finds-green: #1D9E75; /* primary — the logo field */ --finds-ink: #0D1F1A; /* near-black, green-tinted */ --finds-mint: #5DCAA5; /* accent / hover-lift */ /* Derived greens — extended scale built on --finds-green hue */ --green-50: #E8F5F1; /* sampled from logo F. */ --green-100: #CCEADC; --green-200: #9FD9C0; --green-300: #5DCAA5; /* = --finds-mint */ --green-400: #2FB389; --green-500: #1D9E75; /* = --finds-green */ --green-600: #178062; --green-700: #13634C; --green-800: #0F4636; --green-900: #0D1F1A; /* = --finds-ink */ /* Warm neutrals — paper/ink scale, slightly green-shifted */ --paper: #FAF8F4; /* default warm page bg */ --paper-2: #F2EFE9; /* card-on-paper, hover row */ --paper-3: #E6E2D9; /* divider on paper */ --stone-100: #D8D3C7; --stone-200: #B4ADA0; --stone-300: #8A8478; --stone-400: #5E5A52; --stone-500: #3A3733; --stone-600: #23211E; --stone-900: #11100E; /* Status colors — kept low-chroma so green stays the hero */ --status-success: #1D9E75; /* same as brand green */ --status-warning: #C98A2B; /* amber, warm */ --status-danger: #B8493C; /* clay red, not fire-engine */ --status-info: #3A6B8A; /* slate-blue */ /* ============================================================ SEMANTIC TOKENS — use these in components, not raw palette. ============================================================ */ /* Surfaces */ --bg: var(--paper); --bg-elevated: #FFFFFF; --bg-sunken: var(--paper-2); --bg-inverse: var(--finds-ink); /* Foreground (text/icon) */ --fg-1: var(--finds-ink); /* primary body */ --fg-2: var(--stone-400); /* secondary */ --fg-3: var(--stone-300); /* tertiary / hint */ --fg-disabled: var(--stone-200); --fg-on-green: #FFFFFF; --fg-on-ink: var(--green-50); --fg-link: var(--green-700); /* Lines */ --border-1: var(--paper-3); /* hairline */ --border-2: var(--stone-100); /* clearer rule */ --border-strong: var(--finds-ink); /* Accent */ --accent: var(--finds-green); --accent-hover: var(--green-600); --accent-press: var(--green-700); --accent-soft: var(--green-50); /* Focus */ --focus-ring: var(--green-400); --focus-ring-offset: var(--bg); /* ============================================================ TYPOGRAPHY — families + roles ============================================================ */ --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Modular scale — 1.200 (minor third) anchored at 16px */ --t-xs: 12px; --t-sm: 14px; --t-base: 16px; --t-md: 19px; --t-lg: 23px; --t-xl: 28px; --t-2xl: 34px; --t-3xl: 48px; --t-4xl: 64px; --t-5xl: 88px; --lh-tight: 1.08; --lh-snug: 1.22; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.12em; /* ============================================================ SPACING — 4px base, named for purpose ============================================================ */ --space-0: 0; --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; /* ============================================================ RADII — generous on cards, hairline on inputs ============================================================ */ --radius-xs: 2px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --radius-circle: 50%; /* ============================================================ ELEVATION — soft, low-contrast; never blue-tinted ============================================================ */ --shadow-0: none; --shadow-1: 0 1px 2px rgba(13, 31, 26, 0.06), 0 1px 1px rgba(13, 31, 26, 0.04); --shadow-2: 0 2px 6px rgba(13, 31, 26, 0.06), 0 4px 12px rgba(13, 31, 26, 0.05); --shadow-3: 0 8px 20px rgba(13, 31, 26, 0.10), 0 2px 4px rgba(13, 31, 26, 0.04); --shadow-inset: inset 0 0 0 1px rgba(13, 31, 26, 0.08); /* ============================================================ MOTION ============================================================ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 440ms; } /* ============================================================ SEMANTIC TYPE ROLES — use as class on text elements. These pair with raw-element styles below so plain

… also look correct in unstyled contexts. ============================================================ */ .t-display { font-family: var(--font-display); font-weight: 500; font-size: var(--t-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); } .t-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); color: var(--fg-1); } .t-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--t-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h3 { font-family: var(--font-sans); font-weight: 700; font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-snug); color: var(--fg-1); } .t-h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-lg); line-height: var(--lh-snug); color: var(--fg-1); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-base); line-height: var(--lh-normal); color: var(--fg-1); } .t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-md); line-height: var(--lh-normal); color: var(--fg-1); } .t-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-2); } .t-caption { font-family: var(--font-sans); font-weight: 500; font-size: var(--t-xs); line-height: var(--lh-normal); letter-spacing: var(--tracking-wide); color: var(--fg-2); } .t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-xs); line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-2); } .t-quote { font-family: var(--font-display); font-weight: 500; font-size: var(--t-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-normal); color: var(--fg-1); } /* ============================================================ RAW-ELEMENT DEFAULTS — apply on any page that imports this stylesheet, so unstyled markup still feels on-brand. ============================================================ */ html, body { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font: 700 var(--t-4xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); margin: 0 0 var(--space-4); } h2 { font: 700 var(--t-3xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); } h3 { font: 700 var(--t-2xl)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); } h4 { font: 600 var(--t-xl)/var(--lh-snug) var(--font-sans); margin: 0 0 var(--space-2); } h5 { font: 600 var(--t-lg)/var(--lh-snug) var(--font-sans); margin: 0 0 var(--space-2); } p { margin: 0 0 var(--space-3); max-width: 64ch; } a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-press); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--space-8) 0; } ::selection { background: var(--green-200); color: var(--finds-ink); } /* Focus ring — visible, never blue */ :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }