/* ========================================================================== TOKENS — the swappable brand layer -------------------------------------------------------------------------- Every visual decision lives in this file. No other stylesheet may contain a literal colour, radius, shadow, or font stack. That rule is what lets a moodboard direction be evaluated as a block of values rather than a rewrite. Layer 1 scales that hold across every direction (space, measure, ratio) Layer 2 semantic roles, referenced by every component Layer 3 theme blocks that bind roles to actual values To try a direction: copy a theme block, rename it, fill it in, then switch with or the picker on styleguide.html. ========================================================================== */ /* ---------------------------------------------------------------- LAYER 1 */ /* Structural scales. These are deliberately theme-independent: if a direction needs a different rhythm it should say so explicitly, not drift. */ :root { --logo-in: var(--logo-mint); /* AdPilot core on dark grounds; light grounds override */ /* Page frame — see "Layout" in base.css for the three-wrapper pattern. */ --container: 80rem; /* 1280px — the content grid's outer width */ --pad-x: 5%; /* viewport gutter, ratio-based */ --section-pad: 80px; /* every section's vertical rhythm */ --gutter: 20px; /* the container's own inner padding: clears the rails */ --bleed: var(--gutter); /* what .bleed gives back; 0 once the rails come off */ --nav-h: 64px; --nav-float: 0px; /* flat full-width bar (neon.com); >0 floats it off the top */ /* The x-offset of the content column's left/right edge, measured from a full-viewport-width element. Only valid on such elements, because both 50% and 5% must resolve against the same width the gutter used. */ --frame-x: max(var(--pad-x), calc(50% - var(--container) / 2)); --measure: 66ch; /* max line length for running text */ --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: 80px; --space-10: 112px; /* Type scale (29 Sep): H1 64 · H2 48 · H3 24 at desktop; body 16. Each clamps down on small screens so headings survive a phone. The display size is the H1 (the hero headline is the page's only h1). */ --size-h1: clamp(40px, 8vw, 64px); --size-h2: clamp(30px, 4.4vw, 48px); --size-h3: clamp(20px, 2.2vw, 24px); --size-display: var(--size-h1); --size-body-lg: 18px; --size-body: 16px; --size-small: 13px; --size-label: 12px; /* DM Mono labels (29 Sep); never below 9px */ --leading-display: 0.94; --leading-heading: 1.08; --leading-body: 1.65; --motion-fast: 120ms; --motion-base: 200ms; --motion-ease: cubic-bezier(0.2, 0, 0.2, 1); } @media (max-width: 768px) { :root { --section-pad: 56px; } } /* Phones take a flat gutter instead of the ratio: 5% of 390px is ~19.5px but keeps shrinking, and this is the last side margin the layout has. */ @media (max-width: 640px) { :root { --pad-x: 20px; } } /* The rails come off below 992px, so nothing needs giving back. */ @media (max-width: 991px) { :root { --bleed: 0px; } } /* Structured (ember) takes neon.com's frame (6 Oct): a 1600px container with 32px gutters (20px on phones). The content runs 32px from the screen edge until the viewport passes 1600, then centres at 1536 wide. Below 992 the container drops its gutter (base.css), so the 32/20 moves to --pad-x. */ html[data-theme="ember"] { --container: 100rem; --pad-x: 0px; --gutter: 32px; } @media (max-width: 991px) { html[data-theme="ember"] { --pad-x: 32px; --bleed: 0px; } } @media (max-width: 640px) { html[data-theme="ember"] { --pad-x: 20px; } } /* ---------------------------------------------------------------- LAYER 2 */ /* Semantic roles. Components reference ONLY these names, never a theme value. A role describes a job, not an appearance — "ground-inverse" not "dark". */ /* --ground page surface --ground-2 secondary surface: bands, form panels, table stripes --ground-tint a saturated brand-coloured block. Feature panels only, never the page ground. Must carry --ink at 4.5:1+. --ground-tint-alt its counterpart at matched lightness, for pairing two blocks side by side without one dominating. --ground-inverse the opposite-weight surface used for full-bleed panels --ground-raised a plate sitting on top of ground-inverse --heading headings on --ground. Often a different, deeper value than body text; on inverse surfaces the section rule wins. --ink primary text on --ground --ink-muted secondary text on --ground --ink-inverse primary text on --ground-inverse --ink-inverse-muted secondary text on --ground-inverse --brand the signature colour. Often a fill only: check it. --brand-on text that sits ON a brand fill --brand-on-dark the brand made visible on --ground-inverse --accent the one marker colour, on light surfaces --accent-on text/icon colour that sits ON --accent --accent-text accent used AS text where contrast permits (may differ) --accent-dark the accent's form on --ground-inverse. A single accent value rarely survives both grounds; this is the other half. --accent-wash a light tint of the accent, for highlight bands and active washes that must carry --ink on top --line hairline on --ground --line-inverse hairline on --ground-inverse --ok --pending --risk semantic status only, never decorative --radius corner treatment for STRUCTURE: bands, panels, chips --radius-control corner treatment for CONTROLS: buttons, badges, inputs. Split from --radius so a direction can round its controls while keeping the grid hard-edged, or the reverse. --border-w hairline weight --shadow-panel the large decorative shadow, if the direction has one --shadow-button the small one --control-offset the 2D shadow's offset. Hover steps it down by 1px and press flattens it, so the motion is derived, not authored. --shadow-control-color the 2D shadow's colour. It must stay distinguishable from BOTH the page ground and every fill it sits under — using the dark green here makes the shadow vanish beneath the dark button at 1.00:1. --shadow-control resting shadow on buttons and menus, composed from the two tokens above. --badge-shade overlay that recesses a chip inside a control. Darken for light-on-dark controls, lighten for dark-on-light ones. --font-display --font-body --font-label --font-mono --font-control typeface for interactive controls: buttons, nav links, key badges. Split from --font-body so a direction can set its controls in mono without monospacing the prose. --font-serif the stylized display serif. Used for emphasis by face, and for display lines that want editorial weight. --label-transform --label-tracking --label-weight */ /* ---------------------------------------------------------------- LAYER 3 */ /* ===== THEME: drafting ===================================================== The system currently shipped on the live site. Kept as the control to measure new directions against — NOT as the baseline to preserve. Engineering drawing, cool paper, one amber marker. ========================================================================= */ [data-theme="drafting"] { --ground: #eceef0; --ground-2: #e1e4e8; --ground-tint: #e1e4e8; /* this direction has no saturated block */ --ground-tint-alt: #e1e4e8; --ground-inverse: #141c26; --ground-raised: #1a2431; --heading: #0f1720; --ink: #0f1720; --ink-muted: #5a6472; --ink-inverse: #c4ccd4; --ink-inverse-muted: #98a3ae; --accent: #f2b23a; --accent-on: #0f1720; /* amber fills always carry ink, never white */ --accent-text: #8a5a00; /* amber is 1.6:1 on paper — this is the text form */ --line: #c3c9d0; --line-inverse: rgba(255,255,255,0.14); --ok: #3d6b4b; --pending: #8a6612; --risk: #9c3a2c; --radius: 0; --radius-control: 0; --control-offset: 4px; --shadow-control-color: var(--accent); --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--accent); --shadow-button: 4px 4px 0 var(--accent); --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --raster-cell: 4px; --font-serif: "IBM Plex Serif", Georgia, serif; --font-control: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, monospace; --label-transform: uppercase; --label-tracking: 0.09em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.065em; --brand: #f2b23a; --brand-on: #0f1720; --brand-on-dark: #f2b23a; --accent-dark: #f2b23a; --accent-wash: #f2b23a; } /* ===== THEME: a ============================================================ MOODBOARD SLOT — unfilled. Fill every role below. Before committing to an accent, check its contrast on --ground: anything under 4.5:1 can only ever be a fill, never text. That single number is what forced the current system's amber to be fill-only. ========================================================================= */ [data-theme="a"] { --ground: #ffffff; /* TODO */ --ground-2: #f4f4f4; /* TODO */ --ground-tint: #f4f4f4; /* TODO */ --ground-tint-alt: #f4f4f4; /* TODO */ --ground-inverse: #111111; /* TODO */ --ground-raised: #1d1d1d; /* TODO */ --heading: #111111; --ink: #111111; /* TODO */ --ink-muted: #666666; /* TODO */ --ink-inverse: #eeeeee; /* TODO */ --ink-inverse-muted: #999999; /* TODO */ --accent: #ff4a1c; /* TODO */ --accent-on: #ffffff; /* TODO — must pass 4.5:1 on --accent */ --accent-text: #c4360f; /* TODO — must pass 4.5:1 on --ground */ --line: #dddddd; /* TODO */ --line-inverse: rgba(255,255,255,0.16); --ok: #2f6b45; --pending: #8a6612; --risk: #9c3a2c; --radius: 0; /* TODO — the single biggest tell of a direction */ --radius-control: 0; --control-offset: 3px; --shadow-control-color: #111111; --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: none; /* TODO */ --shadow-button: none; /* TODO */ --font-display: Georgia, serif; /* TODO */ --font-body: system-ui, sans-serif; /* TODO */ --font-label: system-ui, sans-serif; /* TODO */ --raster-cell: 4px; --font-serif: "IBM Plex Serif", Georgia, serif; --font-control: var(--font-body); --font-mono: ui-monospace, monospace; /* TODO */ --label-transform: uppercase; --label-tracking: 0.08em; --label-weight: 600; --display-weight: 400; --display-tracking: -0.02em; --brand: #ff4a1c; --brand-on: #ffffff; --brand-on-dark: #ff4a1c; --accent-dark: #ff4a1c; --accent-wash: #ff4a1c; } /* ===== THEME: b ============================================================ MOODBOARD SLOT — unfilled. Duplicate this block for further directions. ========================================================================= */ [data-theme="b"] { --ground: #0d0d0f; --ground-2: #151518; --ground-tint: #151518; --ground-tint-alt: #151518; --ground-inverse: #f5f5f2; --ground-raised: #1e1e22; --heading: #f0f0ee; --ink: #f0f0ee; --ink-muted: #8b8b93; --ink-inverse: #16161a; --ink-inverse-muted: #5c5c66; --accent: #c6f24a; --accent-on: #0d0d0f; --accent-text: #a8d132; --line: rgba(255,255,255,0.12); --line-inverse: rgba(0,0,0,0.12); --ok: #4caf7d; --pending: #d4a12c; --risk: #e06055; --radius: 10px; --radius-control: 8px; --control-offset: 0px; --shadow-control-color: transparent; --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: none; --shadow-button: none; --font-display: system-ui, sans-serif; --font-body: system-ui, sans-serif; --font-label: ui-monospace, monospace; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: ui-monospace, monospace; --label-transform: uppercase; --label-tracking: 0.06em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.03em; --brand: #c6f24a; --brand-on: #0d0d0f; --brand-on-dark: #c6f24a; --accent-dark: #c6f24a; --accent-wash: #c6f24a; } /* ===== THEME: sage ========================================================= Extracted from the Ease Health reference, 23 Sep 2026. What the reference actually does — and the part worth stealing — is NOT "a green website". The page ground is off-white. Green appears as large flat saturated blocks, with one very deep forest doing every piece of text and every fill on every surface. Measured from the screenshot: #1d3d1c forest 12.00:1 on white · 7.97:1 on sage · 7.37:1 on blue-grey #badabb sage the warm tint block #bbcdd4 blue-grey the cool tint block, matched in lightness (.64 vs .59) #fffefc off-white page and cards #bae6b9 mint status pills only Two consequences for this product specifically, both handled below: 1. Amber survives as the marker. 6.45:1 on forest, fill-only on the light surfaces — identical behaviour to the current system, so "amber means a person is needed here" transfers unchanged. 2. --ok cannot be green. In a green brand a green status dot stops being a signal. So the resting state carries no colour of its own: ok is just ink. Amber is the only colour that asks for attention, which is what it is for. ========================================================================= */ [data-theme="sage"] { --ground: #fbfcfa; --ground-2: #e8f0e7; --ground-tint: #badabb; --ground-tint-alt: #bbcdd4; --ground-inverse: #1d3d1c; --ground-raised: #2a4f28; --heading: #173016; --ink: #173016; --ink-muted: #4c5e4b; /* darkened from the reference: muted text must clear 4.5:1 on --ground-tint, not only on --ground */ --ink-inverse: #d6e6d5; --ink-inverse-muted: #9db79b; --accent: #f2b23a; --accent-on: #173016; --accent-text: #6d4a00; --line: #cdddcb; --line-inverse: rgba(255,255,255,0.16); --ok: #173016; /* deliberately ink: the resting state */ --pending: #8a6612; --risk: #9c3a2c; --radius: 0; --radius-control: 0; --control-offset: 3px; --shadow-control-color: #0d1a0c; --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--accent); --shadow-button: 4px 4px 0 var(--accent); --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --raster-cell: 4px; --font-serif: "IBM Plex Serif", Georgia, serif; --font-control: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, monospace; --label-transform: uppercase; --label-tracking: 0.09em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.055em; --brand: #f2b23a; --brand-on: #173016; --brand-on-dark: #f2b23a; --accent-dark: #f2b23a; --accent-wash: #f2b23a; } /* ===== THEME: cream ======================================================== Cream ground, forest ink, sage and blue-grey as the two tint blocks. Amber retained as the marker: 6.45:1 on the inverse panel, fill-only on every light surface — the same behaviour it has everywhere else, so "amber means a person is needed here" survives the palette change. Measured on this ground: ink 12.4:1 · muted 6.1:1 · accent-text 7.0:1. ========================================================================= */ [data-theme="cream"] { --ground: #f4efe3; --ground-2: #ebe4d4; --ground-tint: #badabb; --ground-tint-alt: #bbcdd4; --ground-inverse: #1d3d1c; --ground-raised: #2a4f28; --heading: #173016; --ink: #173016; --ink-muted: #4c5e4b; --ink-inverse: #e6efe1; --ink-inverse-muted: #9db79b; --accent: #f2b23a; --accent-on: #173016; --accent-text: #6d4a00; --line: #d9d0bd; --line-inverse: rgba(255,255,255,0.16); --ok: #173016; --pending: #8a6612; --risk: #9c3a2c; --radius: 0; --radius-control: 0; --control-offset: 3px; --shadow-control-color: #12100b; --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--accent); --shadow-button: 4px 4px 0 var(--accent); --font-display: "IBM Plex Sans", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --raster-cell: 4px; --font-serif: "IBM Plex Serif", Georgia, serif; --font-control: var(--font-body); --font-mono: "IBM Plex Mono", ui-monospace, monospace; --label-transform: uppercase; --label-tracking: 0.09em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.055em; --brand: #f2b23a; --brand-on: #173016; --brand-on-dark: #f2b23a; --accent-dark: #f2b23a; --accent-wash: #f2b23a; } /* ===== THEME: brand ======================================================== The palette from Colours.pdf, bound to roles. Page ground is B50 and every heading is D900, as specified. Named picks and where each one landed: B50 page ground -> --ground D900 headings -> superseded. See the note on --heading below. B700 primary brand -> --brand. 3.84:1 on B50, so it is a FILL and large-display colour. It can never be body text. C900 complementary -> --accent / --accent-text D800 (from D ramp) -> --ink-muted and --ok T100 triadic teal -> --ground-tint-alt, lightness-matched to B100 (.725 vs .720) so the warm and cool blocks pair P800, L800 -> not bound. Available in palette.css when a third and fourth category colour are needed. Three things this palette forces, all resolved above: 1. Nothing in the palette clears 4.5:1 on the B700 fill. White reaches 4.33, which passes the LARGE-text threshold only. Brand fills carry bold labels and buttons, never prose. --brand-on is white on that basis. 2. The accent cannot be one value. C900 is 6.87:1 on cream but 1.05:1 on the dark panel — invisible exactly where the gate badge and active node live. So: --accent for light surfaces, --accent-dark (C100, 5.37:1 on B900) for dark ones, and --accent-wash for highlight bands, which need a light ground under dark text. 3. The palette contains no warning and no error colour. --pending and --risk are therefore still from outside it. That is a real gap to close. 4. Headings are near-black #0B1410, not D900. Colouring headings with the brand makes one colour carry both identity and hierarchy, and it caps the headline at 8.45:1. Near-black reaches 16.61:1, holds 11.10:1 even over the densest part of a dithered background, and — the actual point — leaves the accent as the only saturated thing on the page, so it lands harder. The near-black is hue-tinted toward the family rather than a neutral grey. To revert: --heading: #144F38. 5. Muted text does not go on --ground-tint. D800 on B200 is 3.80:1. The saturated block carries --heading or --ink only. Every other surface takes the full text set. ========================================================================= */ [data-theme="brand"] { --ground: #E7F5E9; --ground-2: #C4E5C9; --ground-tint: #9FD4A8; --ground-tint-alt: #86D5EE; --ground-inverse: #095B21; --ground-raised: #1E7A33; --heading: var(--grey-900); /* #15141C · 16.2:1 on ground */ --ink: var(--grey-700); /* #53525B · 6.8:1 ground, 5.7:1 band */ --ink-muted: var(--grey-600); /* #66656F · 5.1:1 ground; band overrides below */ --ink-inverse: #E7F5E9; --ink-inverse-muted: #9FD4A8; --brand: #288B3D; --brand-on: #FFFFFF; --brand-on-dark: #9FD4A8; --accent: #8B2876; --accent-on: #FAE7F4; --accent-text: #8B2876; --accent-dark: #F4C1E4; --accent-wash: #F4C1E4; --line: #9FD4A8; --line-inverse: rgba(255,255,255,0.16); --ok: #1D6B52; --pending: #8A6612; --risk: #9C3A2C; --radius: 0; --radius-control: 0; --control-offset: 3px; --shadow-control-color: var(--grey-900); --shadow-control: var(--control-offset) var(--control-offset) 0 var(--shadow-control-color); --badge-shade: rgba(0, 0, 0, 0.24); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--brand); --shadow-button: 4px 4px 0 var(--brand); --font-display: "Instrument Serif", Georgia, serif; --font-body: "Host Grotesk", system-ui, sans-serif; --font-label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --label-transform: uppercase; --label-tracking: 0.09em; --label-weight: 500; --display-weight: 400; --display-tracking: -0.02em; } /* G600 drops to 4.21:1 on the band (#C4E5C9), under body-text minimum, so muted text there takes the body grey. */ [data-theme="brand"] .section--band { --ink-muted: var(--grey-700); } /* ===== THEME: ember ======================================================== v2 homepage. The AdPilot product's own dark colour theme (swatches shared 29 Sep, tokens in palette.css). Direction refs: neon.com, developers.databricks.com, unkey.com — dark ground, grotesk display, mono controls, one hot accent. Contrast, worst cases: cream on black 16.13 · stone on black 9.37 · muted #948B7B on black 6.2 · black on orange 8.80 · bark on cream 10.63. TODO ok/pending/risk are outside the supplied palette (same gap as brand). ========================================================================== */ /* ===== THEME: slate ======================================================== v1 homepage, after "too much green" (29 Sep). developers.databricks.com rhythm: near-black hero (grey-900), a --paper section, then a --deep-teal closing band + footer (page-level section overrides). No green surfaces; ember orange is the only accent (gates, drawer dots). Contrast: paper on grey-900 17.10 · grey-400 ink 8.24 · grey-500 muted 5.53 (4.76 on the drawer card) · grey-900 on paper (primary) 17.10. ========================================================================== */ [data-theme="slate"] { color-scheme: dark; --ground: var(--grey-900); --ground-2: #23222A; /* fill only: grey-800 45% over grey-900 */ --ground-tint: var(--grey-800); --ground-tint-alt: var(--grey-700); --ground-inverse: var(--paper); --ground-raised: var(--grey-800); --heading: var(--paper); --ink: var(--grey-400); --ink-muted: var(--grey-500); --ink-inverse: var(--grey-900); --ink-inverse-muted: var(--grey-700); --brand: var(--paper); /* primary control is the white */ --brand-on: var(--grey-900); --brand-on-dark: var(--paper); --accent: var(--ember-orange); /* gates only — never buttons or h1 */ --accent-on: var(--ember-black); --accent-text: var(--ember-orange); --accent-dark: var(--ember-orange); --accent-wash: rgba(241, 160, 75, 0.16); --line: var(--grey-800); --line-inverse: rgba(21, 20, 28, 0.14); --ok: var(--grey-400); --pending: var(--ember-orange); --risk: #E06C4F; /* TODO outside palette */ --radius: 0; --radius-control: 0; /* boxy controls on every page (29 Sep) */ --control-offset: 0px; --shadow-control-color: var(--grey-800); --shadow-control: none; --badge-shade: rgba(0, 0, 0, 0.2); --border-w: 1px; --shadow-panel: none; --shadow-button: none; /* Type roles: DM Sans headings, Inter body, nav and buttons. */ --font-display: "DM Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-label: "DM Mono", ui-monospace, monospace; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-nav: "Inter", system-ui, sans-serif; --font-button: "Inter", system-ui, sans-serif; --btn-size: 16px; --btn-weight: 500; --mega-dot: var(--ember-orange); --label-transform: uppercase; --label-tracking: 0.08em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.02em; } /* ===== THEME: pine ========================================================= v1 homepage, recoloured to the neon.com scheme: near-black green ground, mist text, white-style primary control, green night art. Keeps v1's serif display and 3D controls — only the colour world changes. Contrast: mist on forest 14.82 · lichen 9.20 · muted #8FA593 6.37 · forest on mist (primary button) 14.82. TODO pending/risk outside palette. ========================================================================== */ [data-theme="pine"] { color-scheme: dark; --ground: var(--sage-forest); --ground-2: #11331E; /* fill only: between forest and green */ --ground-tint: var(--sage-green); --ground-tint-alt: var(--sage-lichen); --ground-inverse: var(--sage-mist); --ground-raised: var(--sage-green); --heading: var(--sage-mist); --ink: var(--sage-lichen); --ink-muted: #8FA593; /* dimmed lichen · 6.37:1 on forest */ --ink-inverse: var(--sage-forest); --ink-inverse-muted: var(--sage-moss); --brand: var(--sage-mist); /* neon.com: the primary button is white */ --brand-on: var(--sage-forest); --brand-on-dark: var(--sage-mist); --accent: var(--sage-mist); /* human gates: mist chip, forest H */ --accent-on: var(--sage-forest); --accent-text: var(--sage-lichen); --accent-dark: var(--sage-lichen); --accent-wash: rgba(31, 109, 56, 0.35); --line: #2C4433; --line-inverse: rgba(11, 34, 16, 0.18); --ok: #8FA593; --pending: #C9B37A; /* TODO outside palette */ --risk: #E06C4F; /* TODO outside palette */ --radius: 0; --radius-control: 0; /* boxy controls on every page (29 Sep) */ --control-offset: 0px; /* flat: offset 0 also zeroes the hover/press motion */ --shadow-control-color: var(--sage-green); --shadow-control: none; --badge-shade: rgba(0, 0, 0, 0.18); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--sage-green); --shadow-button: none; /* Type roles (29 Sep): DM Sans headings, Inter body and buttons. */ --font-display: "DM Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-label: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-nav: "Inter", system-ui, sans-serif; /* header links, buttons, drawer */ --font-button: "Inter", system-ui, sans-serif; --btn-size: 16px; --btn-weight: 500; --mega-dot: var(--sage-green); /* drawer card dot field */ --label-transform: uppercase; --label-tracking: 0.09em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.02em; } /* ===== THEME: ember-light ================================================== v2 homepage, recoloured to the developers.databricks.com scheme: warm cream ground, near-black text, orange action. Keeps v2's DM Sans display and flat controls. Contrast: black on cream 16.13 · bark 10.63 · muted #6B6157 5.21 · black on orange 8.80 · accent-text #8F4E12 5.54 on cream. ========================================================================== */ [data-theme="ember-light"] { color-scheme: light; --ground: var(--ember-cream); --ground-2: #ECE1D4; /* fill only: warm band tone */ --ground-tint: var(--ember-stone); --ground-tint-alt: var(--ember-orange); --ground-inverse: var(--ember-black); --ground-raised: var(--ember-coal); --heading: var(--ember-black); --ink: var(--ember-bark); --ink-muted: var(--ember-muted); /* dimmed bark · 5.21:1 on cream */ --ink-inverse: var(--ember-cream); --ink-inverse-muted: var(--ember-stone); --brand: var(--ember-orange); --brand-on: var(--ember-black); --brand-on-dark: var(--ember-orange); --accent: var(--ember-orange); --accent-on: var(--ember-black); --accent-text: var(--ember-orange-ink); /* orange, darkened for text on cream */ --accent-dark: var(--ember-orange-ink); --accent-wash: rgba(241, 160, 75, 0.25); --line: #D9CDBD; --line-inverse: rgba(244, 237, 229, 0.16); --ok: var(--sage-green); --pending: var(--ember-orange-ink); --risk: #9C3A2C; /* TODO outside palette */ --radius: 0; --radius-control: 0; --control-offset: 0px; /* flat controls, as on ember */ --shadow-control-color: var(--ember-bark); --shadow-control: none; --badge-shade: rgba(0, 0, 0, 0.26); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--ember-stone); --shadow-button: none; --font-display: "DM Sans", "Host Grotesk", system-ui, sans-serif; --font-body: "Host Grotesk", system-ui, sans-serif; --font-label: "IBM Plex Mono", ui-monospace, monospace; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-nav: "Inter", system-ui, sans-serif; /* header links, buttons, drawer */ --mega-dot: var(--ember-orange); /* drawer card dot field */ --label-transform: uppercase; --label-tracking: 0.14em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.02em; } [data-theme="ember"] { color-scheme: dark; --ground: var(--ember-black); --ground-2: var(--ember-coal); --ground-tint: var(--ember-bark); --ground-tint-alt: var(--ember-stone); --ground-inverse: var(--ember-cream); /* inverse = the LIGHT band here */ --ground-raised: var(--ember-bark); --heading: var(--ember-cream); --ink: var(--ember-stone); --ink-muted: #948B7B; /* dimmed stone · 6.2:1 on black */ --ink-inverse: var(--ember-coal); --ink-inverse-muted: var(--ember-bark); /* Primary control is the theme white (cream) on black, Neon-style; the orange stays for gates, dots and marks — never buttons or the h1. */ --brand: var(--ember-cream); --brand-on: var(--ember-black); --brand-on-dark: var(--ember-orange); --accent: var(--ember-orange); --accent-on: var(--ember-black); --accent-text: var(--ember-orange); --accent-dark: var(--ember-orange); --accent-wash: rgba(241, 160, 75, 0.16); --line: var(--ember-bark); --line-inverse: rgba(19, 18, 16, 0.18); --ok: #9CC08F; /* TODO outside palette */ --pending: var(--ember-orange); --risk: #E06C4F; /* TODO outside palette */ --radius: 0; --radius-control: 0; /* Flat box controls (ref: unkey-style filled rectangles). Offset 0 also zeroes the hover/press motion in components.css. */ --control-offset: 0px; --shadow-control-color: var(--ember-stone); --shadow-control: none; --badge-shade: rgba(0, 0, 0, 0.26); --border-w: 1px; --shadow-panel: 22px 22px 0 var(--ember-coal); --shadow-button: none; /* Geometric sans display (DM Sans), per the flat-hero reference. Pages on this theme must load DM Sans in their font link. */ --font-display: "DM Sans", "Host Grotesk", system-ui, sans-serif; /* Type roles (29 Sep): DM Sans headings, Inter body and buttons. */ --font-body: "Inter", system-ui, sans-serif; --font-label: "DM Mono", ui-monospace, monospace; --raster-cell: 4px; --font-serif: "Instrument Serif", Georgia, serif; --font-control: "IBM Plex Mono", ui-monospace, monospace; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --font-nav: "Inter", system-ui, sans-serif; /* header links, buttons, drawer */ --font-button: "Inter", system-ui, sans-serif; --btn-size: 16px; --btn-weight: 500; --mega-dot: var(--ember-orange); /* drawer card dot field */ --label-transform: uppercase; --label-tracking: 0.08em; --label-weight: 500; --display-weight: 500; --display-tracking: -0.02em; } /* Default when no data-theme is set. */ :root { color-scheme: light; } /* Mobile H2 (1 Oct): 24px on phones. Both rule-sets that define the type scale are matched so no theme block wins over it. */ @media (max-width: 640px) { :root, [data-theme] { --size-h2: 24px; } }