/* ============================================================================ MELON BRAND KIT — melon-tokens.css ---------------------------------------------------------------------------- Layer 1 (Reference) + Layer 2 (Brand ramp) + type + radii + spacing + motion. Load this FIRST — before melon-compat.css and melon-primitives.css, before the app's own stylesheet. Version: see ../VERSION. Full rationale: ../docs/DECISIONS.md ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap'); :root { /* ========================================================================== L1 — REFERENCE (immutable CI facts) Never themed. App CSS should not reference these directly — use the L2 brand ramp below, or the semantic aliases in melon-compat.css. ========================================================================== */ --melon-green: #52bf30; /* CI Primary Green — hero/decorative fills, NEVER small text/UI (2.42:1 on white, fails WCAG) */ --melon-red: #ed174c; /* CI Primary Red — accent, logo tab */ --melon-green-deep: #288c28; /* CI Deep Green — the one green fill safe for white text (4.36:1) */ --melon-green-light: #bbde61; /* CI Light Green — highlight boxes, chart accents */ --melon-green-pale: #e5ff9d; /* CI Pale Green — light accents, illustration highlights */ --melon-red-deep: #bc0c3b; /* CI Deep Red — depth/shadows on red elements */ --melon-pink: #f85078; /* CI Pink — illustration accents only */ --melon-grey-tagline: #58585a; /* CI Tagline Grey */ --melon-white: #ffffff; --melon-black: #000000; /* Signature gradient. CI spec: vertical, light-to-dark top-to-bottom, white text only. NOTE: the two live Melon Online surfaces each render a DIFFERENT gradient (dashboard: 105deg #288a28->#80cf25; devices: 180deg #83c33e->#3a7d30, baked into raster art). This token is the CI PDF's version, pending a brand-owner ruling — see DECISIONS.md #1. */ --melon-grad-from: #80cf25; --melon-grad-to: #288a28; --melon-gradient: linear-gradient(180deg, var(--melon-grad-from) 0%, var(--melon-grad-to) 100%); /* Product UI palette — sage-tinted neutrals, measured from the Melon Online Figma (colors_and_type.css) and confirmed live on devices.melontech.online (body text renders at exactly #060902). This is a better neutral ramp than plain grey and should be the estate default, not just Melon Online's. */ --melon-ink: #060902; /* body text */ --melon-ink-muted: #686b64; /* secondary/helper text */ --melon-ink-placeholder: #a9aca6; /* input placeholder */ --melon-ink-on-lime: #26491c; /* dark-green label on the lime CTA — 6.69:1, comfortably AA */ --melon-cta-lime: #a1e55c; /* accessible CTA fill — confirmed live as the devices-journey primary button */ --melon-cta-lime-bright: #c7fa5a; --melon-surface: #ffffff; --melon-surface-raised: #fafcf8; --melon-surface-sunken: #f1f5ee; /* input + segmented track background */ --melon-surface-grey: #eaeee7; /* secondary/neutral button fill */ --melon-canvas: #e7e7e7; /* page canvas behind a rounded shell */ --melon-hairline: #dee2d9; /* card borders + dividers */ /* ========================================================================== L2 — BRAND RAMP (the one switch) Default is TRUE CI GREEN — new sites are on-brand with zero configuration. Legacy portals opt DOWN to the de-facto estate green by adding class="melon-legacy-green" to when they first adopt this kit, so adoption is a zero-visual-change PR. Removing that class later is the one-line flip to true CI. ========================================================================== */ --brand-primary: var(--melon-green); --brand-primary-deep: var(--melon-green-deep); --brand-primary-light: var(--melon-green-light); --brand-primary-bg: var(--melon-green-pale); --brand-primary-wash: #f4fce9; --brand-primary-rgb: 82 191 48; /* space-separated triplet, for rgb(var(--brand-primary-rgb) / ) */ --brand-cta: var(--melon-cta-lime); /* accessible CTA pair — do not use --brand-primary as a button fill with white text */ --brand-on-cta: var(--melon-ink-on-lime); /* ========================================================================== TYPE Figtree for product/portal UI. Poppins for marketing/docs (separate token, load Poppins yourself only where you need it — it is not imported above). Americane is NOT included: no verified webfont licence (see DECISIONS.md #2). --melon-font-display falls back to Figtree with a weight/tracking substitution tuned to match Americane's measured set width on the live devices-journey H1 (775px @ 40px/700, confirmed by direct measurement). ========================================================================== */ --melon-font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; --melon-font-marketing: 'Poppins', 'Montserrat', Arial, sans-serif; --melon-font-display: var(--melon-font-ui); --melon-font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace; --melon-display-weight: 800; --melon-display-tracking: -0.015em; /* Type scale (px), product-measured */ --text-display: 88px; --text-h1: 40px; --text-h2: 24px; --text-h3: 20px; --text-body: 16px; --text-sm: 14px; --text-xs: 12px; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --lh-tight: 1.0; --lh-display: 1.15; --lh-snug: 1.32; --lh-body: 1.4; /* ========================================================================== RADII — console/admin default. See .melon-consumer below for the second preset. ========================================================================== */ --r-sm: 6px; --r-btn: 6px; --r-input: 6px; --r-card: 8px; --r-chip: 12px; --r-pill: 999px; /* Logo tab radius — confirmed live on BOTH Melon Online surfaces (dashboard 0 0 14px 14px, devices 0 0 16px 16px). Standardise on 16px; it is already doing more cross-surface recognition work than anything else in the estate. */ --r-logo-tab: 0 0 16px 16px; /* ========================================================================== SPACING — 4px base grid ========================================================================== */ --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; /* ========================================================================== MOTION ========================================================================== */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; /* ========================================================================== STRUCTURAL — chrome dimensions shared by both sanctioned shell families ========================================================================== */ --header-h: 64px; --footer-h: 40px; --sidebar-w: 260px; /* ========================================================================== SHADOWS — flat, border-led system. Reserve for floating elements only. ========================================================================== */ --shadow-card: 0 1px 2px rgba(6, 9, 2, 0.04); --shadow-float: 0 -2px 24px rgba(0, 0, 0, 0.12); } /* ---------------------------------------------------------------------------- Legacy estate green. Add class="melon-legacy-green" to when an EXISTING portal first adopts this kit, to reproduce its current colour with zero visual change. Remove the class later to flip to true CI green in one line. New sites should never add this class. ---------------------------------------------------------------------------- */ :root.melon-legacy-green { --brand-primary: #16a34a; --brand-primary-deep: #14532d; --brand-primary-light: #86efac; --brand-primary-bg: #dcfce7; --brand-primary-wash: #f0fdf4; --brand-primary-rgb: 22 163 74; --brand-cta: var(--brand-primary); --brand-on-cta: #ffffff; } /* ---------------------------------------------------------------------------- Non-prod environment signal. Declared on body (not :root) so it beats the html-level brand ramp by inheritance — matching how Assets/Toolbox/Kiosk portals already do this. Demoted to ONE token axis deliberately: environment should signal via a chip/watermark, not by recolouring the whole product. ---------------------------------------------------------------------------- */ body[data-env="uat"], body[data-env="dev"] { --brand-primary: #ff6b35; --brand-primary-deep: #c2410c; --brand-primary-rgb: 255 107 53; } /* ---------------------------------------------------------------------------- Consumer surface preset — the SECOND radius/type aesthetic. Add class="melon-consumer" to for customer-facing flows (signup, checkout, self-service). Leave it off for console/admin surfaces — that is the default above. This is observed reality on the two live Melon Online surfaces (console: 4-12px radii; consumer: 12-100px radii, confirmed on devices.melontech.online), not an invention. ---------------------------------------------------------------------------- */ :root.melon-consumer { --r-btn: var(--r-pill); --r-input: 12px; --r-card: 20px; --r-sheet: 32px; --text-body: 16px; }