/* ============================================================ Pagelove Design System — shared design tokens Source: claude.ai/design "Pagelove Design System" bundle. STEP 1 of the design migration: token DEFINITIONS only. Nothing here is consumed yet — it is linked before each page's existing CSS, so current (dark) values still win for any colliding names (--accent, --text-muted). Fonts + base rules arrive in later steps. Purely additive / visually inert. ============================================================ */ /* ---- Colours ---- */ /* ============================================================ Pagelove — Color tokens A near-monochrome slate ramp, a warm brand gradient, and a legacy sky-blue ramp kept only for pages that still ask for it. The slate ramp is identical to the values pagelove.com ships in css/foundations.css, so the console and the site share one ramp. ============================================================ */ :root { /* ---- Neutral (Slate) — the workhorse ramp -------------------- */ --colours-neutral-100: #F8FAFC; /* page background, light text on dark */ --colours-neutral-200: #E2E8F0; /* hairline borders, dividers */ --colours-neutral-300: #90A1B9; /* subtle / placeholder text, disabled */ --colours-neutral-400: #45556C; /* secondary text, captions */ --colours-neutral-500: #1D293D; /* primary surfaces (buttons), strong text */ --colours-neutral-600: #020618; /* near-black: display headings, pressed */ /* ---- Brand — the site's gradient and its two stops ---------- pagelove.com carries all of its colour in one gradient rather than an accent ramp: purple at the start, olive at the end. Both stops are useful on their own, so they are named here. Source: css/foundations.css on pagelove.com (--gradient-main). */ --colours-brand-purple: #7B6BB5; /* gradient start; solid accent on the site's hero */ --colours-brand-olive: #646444; /* gradient end */ --colours-brand-warm: #65644A; /* the site's warm text colour */ --colours-brand-lilac: #9FABDD; /* the site's secondary-button border */ --gradient-main: linear-gradient(95.1deg, #7B6BB5 0%, #646444 100%); /* The shared hover glow. The site paints this behind a button, blurred and at 60% opacity, for both its primary and secondary variants. */ --colours-glow-start: #6D66CB; --colours-glow-end: #9F6467; --gradient-glow: linear-gradient(157.71deg, #6D66CB 2.31%, #9F6467 97.12%); --blur-glow: 11.5px; --opacity-glow: 0.6; /* A hairline that dissolves at both ends. */ --gradient-divider: linear-gradient( 90deg, rgba(226, 232, 240, 0) 0%, rgba(226, 232, 240, 1) 15%, rgba(226, 232, 240, 1) 50%, rgba(226, 232, 240, 1) 85%, rgba(226, 232, 240, 0) 95% ); /* ---- Blue (Sky) — legacy ramp ------------------------------ Nothing in the console reaches for these any more. The signed-out landing page (index.css) and the WebDAV browser's own defaults still do, so the ramp stays defined until those follow. */ --colours-blue-100: #F0F9FF; --colours-blue-200: #B8E6FE; --colours-blue-300: #00BCFF; --colours-blue-400: #0084D1; /* primary accent / links-in-color */ --colours-blue-500: #00598A; --colours-blue-600: #052F4A; /* The site's background.mask: a white surface at 70% meant to sit over content behind a backdrop blur, used for sticky bars and overlays. */ --colours-background-mask: rgba(255, 255, 255, 0.7); /* ---- Pure -------------------------------------------------- */ --colours-white: #FFFFFF; --colours-black: #000000; /* ========================================================= SEMANTIC ALIASES — reach for these in product code ========================================================= */ /* Surfaces */ --surface-page: var(--colours-neutral-100); --surface-card: var(--colours-white); --surface-raised: var(--colours-white); --surface-inverse: var(--colours-neutral-600); --surface-sunken: var(--colours-neutral-200); /* Translucent surfaces (frosted) — used on forms & footers */ --surface-glass: rgba(248, 250, 252, 0.80); --surface-glass-strong: rgba(255, 255, 255, 0.72); /* Text */ --text-display: var(--colours-neutral-600); /* serif headlines */ --text-strong: var(--colours-neutral-600); --text-body: var(--colours-neutral-500); --text-muted: var(--colours-neutral-400); --text-subtle: var(--colours-neutral-300); --text-inverse: var(--colours-neutral-100); --text-link: var(--colours-neutral-600); --text-accent: var(--colours-neutral-500); --text-warm: var(--colours-brand-warm); /* identifiers, references */ /* Borders & lines */ --border-subtle: var(--colours-neutral-200); --border-strong: var(--colours-neutral-300); --border-focus: var(--colours-neutral-300); /* Accent — slate, the same colour the site gives its primary button. Colour on the site arrives as a gradient, never as a flat accent hue, so the flat accent here is a neutral and the gradient above does the expressive work. */ --accent: var(--colours-neutral-500); --accent-hover: var(--colours-neutral-400); --accent-soft: var(--colours-neutral-100); /* Interactive — primary action (dark slate) */ --btn-primary-bg: var(--colours-neutral-500); --btn-primary-bg-hover: var(--colours-neutral-400); --btn-primary-bg-active: var(--colours-neutral-600); --btn-primary-fg: var(--colours-neutral-100); /* Focus ring */ --ring: var(--colours-neutral-300); /* ---- Washes of the accent ---------------------------------- The only way to reach a tint of the accent. A rule that writes its own rgba() of it puts a second source of truth in the ramp. */ --accent-wash: color-mix(in srgb, var(--accent) 4%, transparent); --accent-tint: color-mix(in srgb, var(--accent) 7%, transparent); --accent-tint-strong: color-mix(in srgb, var(--accent) 12%, transparent); --accent-line: color-mix(in srgb, var(--accent) 40%, transparent); --accent-glow: color-mix(in srgb, var(--accent) 10%, transparent); /* ---- Reference (warm) -------------------------------------- The gradient's far end, for identifiers and references — the one second colour on these surfaces that is not slate. */ --ref: var(--colours-brand-warm); --ref-tint: color-mix(in srgb, var(--ref) 8%, transparent); --ref-line: color-mix(in srgb, var(--ref) 35%, transparent); /* ---- Status ------------------------------------------------- --danger is the colour of a destructive ACTION: a filled rose button, the rose outline on a delete. --danger-text is for a sentence that reports a failure, where rose on white is too light to read. */ --danger: #f43f5e; --danger-tint: color-mix(in srgb, var(--danger) 8%, transparent); --danger-line: color-mix(in srgb, var(--danger) 45%, transparent); --danger-text: #B91C1C; --success: #047857; /* a save landed */ --success-text: var(--success); --warning: #B45309; /* unsaved changes, a conflict */ --warning-line: color-mix(in srgb, var(--warning) 35%, transparent); /* ---- The site's hover glow, as a box-shadow ---------------- The site paints --gradient-glow behind a button, blurred at 60% opacity, using two pseudo-elements: one for the glow and one for the solid face, because a box's own background always paints above its children. Our buttons carry bare text with no wrapped label span, so a solid face on ::after would cover the label. A two-colour halo reads the same from the outside — the glow only ever shows beyond the button's edge anyway — and needs no markup at all. */ --glow: 0 3px 14px -3px color-mix(in srgb, var(--colours-glow-start) 50%, transparent), 0 8px 26px -8px color-mix(in srgb, var(--colours-glow-end) 50%, transparent); --glow-soft: 0 2px 10px -3px color-mix(in srgb, var(--colours-glow-start) 32%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--colours-glow-end) 32%, transparent); } /* ---- Typography scale (families/weights/sizes; no @font-face yet) ---- */ /* ============================================================ Pagelove — Typography tokens Two families do all the work: • Source Serif Pro — expressive display headlines only • Inter — every piece of UI text, body & labels • Fira Code — code, technical/mono accents Scale + metrics mirror the Figma "Typography" variable collection, which defines responsive headline sizes for desktop/tablet/mobile. ============================================================ */ :root { /* ---- Families ------------------------------------------------ */ --font-display: "Source Serif Pro", "Source Serif 4", ui-serif, Georgia, "Times New Roman", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Figma aliases */ --family-primary: var(--font-display); --family-secondary: var(--font-sans); /* ---- Weights ------------------------------------------------ */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Display / Headline — Source Serif Pro, regular --------- Responsive: desktop → tablet → mobile. letter-spacing is tight & negative; line-height < font-size. */ --fs-headline-d-primary: 96px; --lh-headline-d-primary: 84px; --ls-headline-d-primary: -4px; --fs-headline-d-secondary: 56px; --lh-headline-d-secondary: 48px; --ls-headline-d-secondary: -2.5px; --fs-headline-t-primary: 76px; --lh-headline-t-primary: 68px; --ls-headline-t-primary: -3.5px; --fs-headline-t-secondary: 44px; --lh-headline-t-secondary: 36px; --ls-headline-t-secondary: -2px; --fs-headline-m-primary: 56px; --lh-headline-m-primary: 48px; --ls-headline-m-primary: -2.5px; --fs-headline-m-secondary: 32px; --lh-headline-m-secondary: 24px; --ls-headline-m-secondary: -1.5px; /* ---- Body — Inter regular ----------------------------------- */ --fs-body: 16px; --lh-body: 26px; --ls-body: -0.4px; /* ---- Title — Inter (section/card heads) ---------------------- */ --fs-title: 16px; --lh-title: 24px; --ls-title: -0.6px; /* ---- Label — Inter medium (buttons, nav, inputs) ------------ */ --fs-label-primary: 16px; --lh-label-primary: 24px; --ls-label-primary: -0.6px; --fs-label-secondary: 14px; --lh-label-secondary: 22px; --ls-label-secondary: -0.4px; /* ---- Caption — Inter (legal, meta, footnotes) --------------- */ --fs-caption-primary: 14px; --lh-caption-primary: 22px; --ls-caption-primary: -0.2px; --fs-caption-secondary: 12px; --lh-caption-secondary: 20px; --ls-caption-secondary: -0.2px; } /* ---- Spacing, radius, shadow, blur, motion ---- */ /* ============================================================ Pagelove — Spacing, radius, shadow, blur, motion Spacing follows a 4px base grid (observed gaps: 4·8·10·12·16·20·32·64). ============================================================ */ :root { /* ---- Spacing scale (4px base) ------------------------------- */ --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; /* Page gutter — generous side margin on the marketing site */ --gutter-desktop: 120px; --gutter-tablet: 64px; --gutter-mobile: 24px; --content-max: 1150px; /* The site's own responsive grid margin and gutter, at the site's own breakpoints: 24px on mobile, 48px on tablet, 64px from 901px up. Anything laying content out against the page edge should use these, so the console and the site indent by the same amount at each width. */ --grid-margin: 24px; --grid-gutter: 16px; /* ---- Radius ------------------------------------------------- */ --radius-sm: 8px; /* links / small focus chips */ --radius-md: 12px; /* buttons, icon buttons, favicon */ --radius-lg: 16px; /* inputs, fields */ --radius-xl: 24px; /* large cards */ --radius-2xl: 32px; /* feature panels */ --radius-full: 999px; /* ---- Borders ------------------------------------------------ */ --border-width: 1px; --border-hairline: 1px solid var(--border-subtle); /* ---- Focus ring (2px slate halo — used across all controls) -- */ --focus-ring: 0 0 0 2px var(--ring); /* ---- Shadows — soft, low-contrast, slate-tinted ------------- */ --shadow-xs: 0 1px 2px rgba(2, 6, 24, 0.05); --shadow-sm: 0 1px 3px rgba(2, 6, 24, 0.06), 0 1px 2px rgba(2, 6, 24, 0.04); --shadow-md: 0 8px 24px rgba(2, 6, 24, 0.08); --shadow-lg: 0 24px 60px rgba(2, 6, 24, 0.12); --shadow-inset-border: inset 0 0 0 1px rgba(0, 0, 0, 0.10); /* hairline ring on white cards */ /* A floating surface (dialog, notice) and a draggable one (tile). */ --shadow-panel: 0 24px 60px -24px rgba(2, 6, 24, 0.18); --shadow-tile: 0 8px 24px -16px rgba(2, 6, 24, 0.18); /* ---- Blur (frosted glass) ---------------------------------- */ --blur-glass: 20px; /* fields, floating UI */ --blur-strong: 24px; /* footer / sticky bars */ /* ---- Motion ------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ } /* ---- Responsive grid margin (the site's breakpoints) ---- */ @media (min-width: 700px) { :root { --grid-margin: 48px; } } @media (min-width: 901px) { :root { --grid-margin: 64px; --grid-gutter: 24px; } }