/* ========================================================================== LeadSwarm design tokens - the one source of styling. Two consumers read this file: - the SPA: frontend/src/index.css imports it and re-exposes the semantic layer to Tailwind with `@theme inline` - the marketing site: links it as /site/tokens.css, published by prospect/web/build.py and served by prospect/web/app.py It is plain CSS on purpose - no `@theme`, no preprocessor - because the marketing pages load it straight from a . tests/test_design_tokens.py asserts the published copy is byte-identical to this file. Two layers, in order: 1. Campsite primitives, copied from docs/design/campsite/theme.css. This is the only file in the repository where a Campsite colour name or one of its hex values may appear. Non-colour primitives carry a `--campsite-` prefix so they cannot collide with the semantic names below (Campsite's `--radius-lg` is 8px; the product's is 12px). 2. The semantic layer. Feature code, primitives and the marketing stylesheet use these names and nothing else: `--canvas`, `--surface`, `--ink`, `--text-muted`, `--line`, `--accent`, ... Fonts: Inter, Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter). Licensed under the SIL Open Font License, Version 1.1 - the full text is in design/fonts/LICENSE.txt and at https://openfontlicense.org. The font is self-hosted from /site/fonts/ and no request is made to a font CDN from either surface. ========================================================================== */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/site/fonts/InterVariable.woff2") format("woff2") tech("variations"), url("/site/fonts/InterVariable.woff2") format("woff2-variations"), url("/site/fonts/InterVariable.woff2") format("woff2"); } /* -------------------------------------------------------------------------- 1. Campsite primitives (docs/design/campsite/theme.css, verbatim values) -------------------------------------------------------------------------- */ :root { color-scheme: light; /* Colours */ --campfire-orange: #ff6b1a; --ember-brown: #451a03; --sunlit-cream: #fef3c7; --forest-pulse: #22c55e; --ember-alert: #ef4444; --midnight-ink: #171717; --paper-white: #ffffff; --parchment: #fffdf9; --fog-gray: #f5f5f5; --linen: #f0f0f0; --ash-gray: #a3a3a3; --slate: #737373; --graphite: #525252; --stone: #8f7668; /* Typography - families. The reference also lists a monospace and an "emoji" family with no documented role; neither is carried. One typeface, Inter, everywhere - a second family used for texture rather than for meaning is decoration pretending to be information. */ --campsite-font-inter: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography - scale */ --campsite-text-caption: 12px; --campsite-leading-caption: 1.2; --campsite-tracking-caption: 0.3px; --campsite-text-body: 15px; --campsite-leading-body: 1.5; --campsite-text-subheading: 18px; --campsite-leading-subheading: 1.56; --campsite-text-heading-sm: 22px; --campsite-leading-heading-sm: 1.4; --campsite-tracking-heading-sm: -0.37px; --campsite-text-heading: 29px; --campsite-leading-heading: 1.2; --campsite-tracking-heading: -0.52px; --campsite-text-display: 58px; --campsite-leading-display: 1; --campsite-tracking-display: -1.8px; /* Spacing (4px base) */ --campsite-spacing-4: 4px; --campsite-spacing-8: 8px; --campsite-spacing-12: 12px; --campsite-spacing-16: 16px; --campsite-spacing-20: 20px; --campsite-spacing-24: 24px; --campsite-spacing-32: 32px; --campsite-spacing-48: 48px; --campsite-spacing-64: 64px; --campsite-spacing-72: 72px; --campsite-spacing-80: 80px; --campsite-spacing-96: 96px; --campsite-spacing-160: 160px; /* Border radius */ --campsite-radius-md: 4px; --campsite-radius-lg: 8px; --campsite-radius-xl: 12px; --campsite-radius-2xl: 18px; --campsite-radius-full: 9999px; /* Shadows */ --campsite-shadow-sm: rgba(0, 0, 0, 0.05) 0px 3px 6px -3px, rgba(0, 0, 0, 0.05) 0px 2px 4px -2px, rgba(0, 0, 0, 0.05) 0px 1px 2px -1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -1px, rgba(0, 0, 0, 0.05) 0px 1px 0px -1px; --campsite-shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px -1px, rgba(0, 0, 0, 0.08) 0px 2px 2px -1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgb(255, 255, 255) 0px 1px 0px 0px inset, rgb(255, 255, 255) 0px 1px 2px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px inset; --campsite-shadow-subtle-2: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; } /* -------------------------------------------------------------------------- 2. Semantic layer - the vocabulary the product is written in -------------------------------------------------------------------------- */ :root { /* Surfaces. Layers are separated by surface, never by a stronger border: canvas -> surface (card) -> surface-muted (inset) -> tint (callout). */ --canvas: var(--parchment); /* the page */ --surface: var(--paper-white); /* cards, the main column, dialogs */ --surface-muted: var(--fog-gray); /* hover, panels, input chrome */ --surface-soft: var(--linen); /* row hover wash, tag background */ --tint: var(--sunlit-cream); /* highlighted tags and callouts */ /* Text. Every level here except --text-faint clears 4.5:1 on --surface. --text-faint is for placeholders and disabled labels only - never copy. */ --ink: var(--midnight-ink); /* primary text, headings, icon strokes, primary fill */ --text-muted: var(--slate); /* secondary text, timestamps, metadata (4.74:1) */ --text-subtle: var(--graphite); /* tertiary text, muted icons (7.81:1) */ --text-faint: var(--ash-gray); /* placeholders and disabled ONLY (2.52:1) */ --on-ink: var(--paper-white); /* text on an ink fill */ /* Lines. There is one. */ --line: var(--linen); /* Brand. The mark and the marketing kicker pill; nothing else is orange. */ --accent: var(--campfire-orange); --accent-ink: var(--ember-brown); /* text on --tint (13.45:1) */ /* Status. Each passes 4.5:1 on --surface, on --surface-muted and on its own tint, and is always paired with a word or an icon. There is no info/blue: the cool accent is gone and the "info" tone is --neutral on --neutral-tint. frontend/tests/palette-contrast.test.ts measures every pair; --warning was #9a6512 until that measured 4.46:1 on its tint. */ --success: #2f7d4f; --success-tint: #eaf5ee; --success-line: #bfe0cb; --warning: #94600f; --warning-tint: #fbf2e3; --warning-line: #ecd7ab; --danger: #b3261e; --danger-tint: #fceceb; --danger-line: #f0c4c1; --neutral: var(--graphite); --neutral-tint: var(--fog-gray); /* Focus: 2px outline, 2px offset, in ink. */ --focus: var(--ink); /* Radii */ --radius-sm: var(--campsite-radius-md); /* 4px */ --radius: var(--campsite-radius-lg); /* 8px - inputs, small cards */ --radius-lg: var(--campsite-radius-xl); /* 12px - cards, dialogs */ --radius-xl: var(--campsite-radius-2xl); /* 18px */ --radius-pill: var(--campsite-radius-full); /* buttons, tags, avatars, nav rows, chips */ /* Elevation. 5%-black stacks; the inset highlights belong on filled buttons only. */ --shadow-card: var(--campsite-shadow-sm); --shadow-button: var(--campsite-shadow-subtle); --shadow-row: var(--campsite-shadow-subtle-2); --shadow-overlay: 0 12px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05); /* The same button, filled with ink. --shadow-button carries a white inset bevel, which is the point of it on a white pill and a blown halo inside a black one; a dark fill gets a plain drop and a dark edge instead. */ --shadow-button-ink: rgba(0, 0, 0, 0.16) 0px 1px 2px 0px, rgba(0, 0, 0, 0.12) 0px 2px 4px -1px, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px; /* Type. Inter only, self-hosted. */ --font-sans: var(--campsite-font-inter); --font-features: "ss01", "cv11"; --font-weight-regular: 400; /* body copy never goes above this */ --font-weight-medium: 500; /* metadata, labels, buttons */ --font-weight-semibold: 600; /* headings and display */ /* Type scale: size / line-height / letter-spacing. The `--name--line-height` form is what Tailwind v4 reads, so the SPA and the marketing site share one set of names. */ --text-caption: var(--campsite-text-caption); --text-caption--line-height: var(--campsite-leading-caption); --text-caption--letter-spacing: var(--campsite-tracking-caption); --text-body-sm: 13px; --text-body-sm--line-height: 1.5; --text-body: 14px; /* app default */ --text-body--line-height: 1.5; --text-body-lg: var(--campsite-text-body); /* marketing body */ --text-body-lg--line-height: var(--campsite-leading-body); --text-subheading: var(--campsite-text-subheading); --text-subheading--line-height: var(--campsite-leading-subheading); --text-heading-sm: var(--campsite-text-heading-sm); --text-heading-sm--line-height: var(--campsite-leading-heading-sm); --text-heading-sm--letter-spacing: var(--campsite-tracking-heading-sm); --text-heading: var(--campsite-text-heading); --text-heading--line-height: var(--campsite-leading-heading); --text-heading--letter-spacing: var(--campsite-tracking-heading); --text-display: var(--campsite-text-display); --text-display--line-height: var(--campsite-leading-display); --text-display--letter-spacing: var(--campsite-tracking-display); }