/* ============================================================================ GENERATED — do not edit. Source of truth: the BD Realty Design System (Claude Design project), tokens/{colors,typography,spacing,effects,product}.css. Regenerate the bundle there after any change. Generated 2026-07-30. ============================================================================ */ /* ============================================================ BD Realty — Color tokens Three brand backgrounds are the whole system: Cream #FFF1E2 — the default page / calm ground Hickory #38251E — the anchor; dark warm brown Mint #D6FF99 — the single, loud accent (use sparingly) USAGE RATIO (from the book's pie): ~45% Hickory, ~45% Cream, ~10% Mint. Mint is the loud minority accent — tabs, key words, SOLD blocks — never big fields behind body copy. Adjacency: avoid same/similar colours touching (no cream on beige imagery, no cream tab on mint); pair mint with hickory. Everything else is a tint/shade of these three, tuned in oklch so the warmth carries through neutrals and states. ============================================================ */ :root { /* ---- Brand core (exact, from brand .ase swatches) ---- */ --bd-cream: #FFF1E2; /* RGB 255 241 226 */ --bd-hickory: #38251E; /* RGB 56 37 30 */ --bd-mint: #D6FF99; /* RGB 214 255 153 */ /* ---- Cream family (warm off-whites & paper) ---- */ --cream-50: #FFFAF3; /* lightest paper */ --cream-100: #FFF1E2; /* brand cream */ --cream-200: #F6E7D6; /* hairline on cream / subtle fill */ --cream-300: #EAD8C4; /* borders on cream */ --cream-400: #D8C3AC; /* disabled fill / faint rules */ /* ---- Hickory family (text, panels, shadow) ---- */ --hickory-900: #241713; /* deepest — near-black brown */ --hickory-800: #2E1D18; /* panel shadow base */ --hickory-700: #38251E; /* brand hickory */ --hickory-600: #4A342B; /* hover on hickory surfaces */ --hickory-500: #5F4639; /* muted brown text on cream */ --hickory-400: #8A6E5E; /* secondary / caption text */ --hickory-300: #B49F92; /* placeholder / faint text */ /* ---- Mint family (accent + states) ---- */ --mint-600: #A9E85C; /* mint pressed / on-cream legible */ --mint-500: #C4F57D; /* mint hover */ --mint-400: #D6FF99; /* brand mint */ --mint-300: #E4FFC0; /* mint tint fill */ --mint-200: #F0FFDD; /* faintest mint wash */ /* ---- Functional (kept warm, used rarely) ---- */ --success: #6FA84B; --warning: #E0A100; --danger: #C0492F; /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ /* Surfaces */ --surface-page: var(--cream-100); /* default background */ --surface-raised: var(--cream-50); /* cards on cream */ --surface-sunken: var(--cream-200); /* wells / insets */ --surface-invert: var(--hickory-700);/* dark panels */ --surface-invert-2: var(--hickory-800);/* darker dark panel */ --surface-accent: var(--mint-400); /* the loud block */ /* Text on light (cream) surfaces */ --text-strong: var(--hickory-700); --text-body: var(--hickory-700); --text-muted: var(--hickory-500); --text-subtle: var(--hickory-400); --text-faint: var(--hickory-300); /* Text on dark (hickory) surfaces */ --text-on-dark: var(--cream-100); --text-on-dark-muted: #C9B4A5; --text-on-dark-accent: var(--mint-400); /* Text on accent (mint) — always hickory */ --text-on-accent: var(--hickory-700); /* Lines & borders */ --border-subtle: var(--cream-300); --border-default: var(--cream-400); --border-strong: var(--hickory-700); --border-on-dark: rgba(255, 241, 226, 0.18); /* Interactive */ --focus-ring: var(--mint-600); } /* ============================================================ BD Realty — Typography tokens One family: Galano Grotesque Alt (websafe fallback Arial). Body = Regular. Headlines = Medium/SemiBold, SENTENCE CASE, near-normal tracking, full stops. Big numerals (stats, chapter numbers) = Bold/ExtraBold. Small labels = Medium, sentence case. Uppercase is display-only (wordmark, SOLD). ============================================================ */ :root { /* Family */ --font-sans: "Galano Grotesque Alt", "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --font-body: var(--font-sans); /* Weights */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ /* headlines, labels, tabs */ --fw-semibold: 600; /* @kind font */ /* emphasis headlines, buttons */ --fw-bold: 700; /* @kind font */ /* stats, SOLD */ --fw-extrabold: 800; /* @kind font */ /* chapter numerals, big figures */ /* ---- Type scale (px) ---- */ --fs-display-xl: 96px; /* chapter numerals, giant figures */ --fs-display-lg: 72px; --fs-display-md: 56px; --fs-h1: 44px; --fs-h2: 34px; --fs-h3: 26px; --fs-h4: 21px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-eyebrow: 13px; /* small labels: Medium, sentence case */ /* Line heights */ --lh-tight: 1.02; /* @kind font */ /* display numerals */ --lh-snug: 1.15; /* @kind font */ /* headlines */ --lh-heading: 1.25; /* @kind font */ --lh-body: 1.5; /* @kind font */ /* running text */ --lh-relaxed: 1.7; /* @kind font */ /* Letter-spacing — the brand tracks close to normal */ --ls-tighter: -0.02em; /* @kind font */ /* giant numerals only */ --ls-tight: -0.01em; /* @kind font */ /* headlines */ --ls-normal: 0em; /* @kind font */ --ls-wide: 0.04em; /* @kind font */ /* rare uppercase (SOLD, wordmark-style) */ --ls-wider: 0.08em; /* @kind font */ } /* ============================================================ BD Realty — Spacing & layout tokens 4px base grid. The brand breathes: generous white (cream) space, wide page margins, big gutters. ============================================================ */ :root { --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; --space-32: 128px; /* Layout */ --page-margin: 80px; /* generous editorial margin */ --page-margin-sm: 24px; --content-max: 1200px; --measure: 62ch; /* comfortable reading measure */ --gutter: 32px; } /* ============================================================ BD Realty — Effects: radius, shadow, motion The brand is print-first, flat and SQUARE. Blocks, tabs, buttons, cards, boards, fields: radius 0 — NO exceptions. (The book's early web mock showed a pill search; the real BD app superseded it with an underline + square ↑ block.) Shadows only for genuine UI layering — warm, hickory-tinted, never gray. ============================================================ */ :root { /* ---- Radius ---- */ --radius-0: 0px; /* the default for EVERYTHING (blocks, tabs, buttons, cards) */ --radius-sm: 0px; /* alias — stays square */ --radius-md: 0px; /* alias — stays square */ --radius-lg: 0px; /* alias — stays square */ --radius-pill: 999px; /* legacy — unused; search is underline + block */ /* ---- Shadows (warm, tinted with hickory; UI layering only) NOTE (2026-07 harness overhaul): in PRODUCT UI the only element that casts a shadow is a popover. Panes butt flush and are told apart by fill — never by a shadow, a border or a divider. ---- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(36, 23, 19, 0.08); --shadow-md: 0 10px 30px rgba(36, 23, 19, 0.28); /* a popover over a light pane */ --shadow-lg: 0 10px 30px rgba(36, 23, 19, 0.45); /* a popover over a dark pane */ --shadow-xl: 0 10px 30px rgba(36, 23, 19, 0.45); /* ---- Borders ---- */ --border-width: 1px; /* @kind other */ --border-width-strong: 2px; /* @kind other */ --stroke-land-outline: 3px; /* @kind other */ /* mint aerial land polygon */ /* ---- Motion ---- calm, confident; fades, no bounce */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* ---- Focus ---- */ --focus-ring-width: 3px; /* @kind other */ --focus-ring-offset: 2px; /* @kind other */ } /* ============================================================ BD Realty — Product-layer tokens (BDOS) From the 2026-07 harness overhaul, upstreamed here (the DS is the source of truth; the BDOS repo carries generated copies). The PRODUCT (library.bdrealty.com.au) is full-bleed panes on a hickory-900 canvas told apart by FILL, sized by fluid clamps — no fixed px steps, no breakpoint type tiers. The px scales in the other token files still govern print and marketing. App-shell load order: styles.css -> product/blocks.css -> product/rig.css (+ product/rig.js). ============================================================ */ :root { /* ---- THE FIVE FILLS ------------------------------------------ There is no white surface and no sixth fill. Two panes that touch are told apart by FILL, never by a line. */ --canvas: var(--hickory-900); /* the outer ground: rails, band, gaps */ --surface-body: var(--cream-200); /* the working pane */ --surface-quiet: var(--cream-100); /* context, drawers, popovers */ /* --surface-invert hickory-700 — the content menu (colors.css) */ /* --surface-page cream-100 — the PAGE default; bd-blocks.css spends it on body. The HEADER BLOCK is --surface-raised (cream-50), per law 1: a head and the context pane beneath it must differ by one step of fill, and one token cannot be both. */ /* --surface-accent mint-400 — the loud minority (colors.css) */ /* ---- Ink on the dark panes ---- */ --ink-dark-1: var(--cream-100); /* full strength */ --ink-dark-2: rgba(255,241,226,.6); /* secondary — 11px text floor is THIS, not ink-dark-3 */ --ink-dark-3: rgba(255,241,226,.58); /* micro-labels, glyphs, placeholders only */ --hair-dark: rgba(255,241,226,.35); /* hairline on dark (drawer head); also the dark field border */ /* ---- THE FIELD LAW (Brock, 28 Aug 2026) — a text box's border ---- Every text box is a BOX YOU CAN SEE: a 1px resting border that animates to 2px while the caret is inside. Never an underline, never a focus tint. Legibility is the why — a box you can see beats a line you have to find, especially for older eyes. */ --field-line: color-mix(in srgb, var(--hickory-700) 35%, transparent); /* @kind color */ /* resting border on light */ --field-line-dark: var(--hair-dark); /* resting border on a dark pane */ /* ---- Functional, deepened for filled small text ---- */ --danger-deep: #9E3A24; /* 6.06:1 with cream, vs 4.47 for --danger */ --warning-deep: #9A5F00; /* 4.72:1 with cream-100 (5.04 on cream-50), vs 2.04 for --warning: the amber as small text */ /* ---- Hover washes (never grey) ---- */ --wash-warm: color-mix(in srgb, var(--hickory-700) 8%, transparent); /* @kind color */ --wash-card: color-mix(in srgb, var(--hickory-700) 4%, var(--cream-50)); /* @kind color */ --ul-faint: color-mix(in srgb, var(--hickory-700) 34%, transparent); /* @kind color */ /* ---- THE POP — the one material for anything floating over content (filter popover, menu, row action bar, rail flyout, level tip). Solid hickory-900, cream ink, mint armed item, warm deep shadow. Defined HERE (the harness referenced these names without defining them). */ --pop-fill: var(--hickory-900); --pop-ink: var(--cream-100); --pop-ink-2: rgba(255,241,226,.6); --pop-armed: var(--mint-400); --pop-press: rgba(255,241,226,.12); --pop-shadow: 0 10px 30px rgba(36,23,19,.45); /* @kind shadow */ --pop-z: 80; /* @kind other */ /* the floating layer's z-index (scrim = z-3, sheet = z-2, dial fan = z-1) */ --pop-in: 140ms; /* @kind other */ /* pop-in animation duration */ --footer-h: calc(56px + env(safe-area-inset-bottom, 0px)); /* @kind spacing */ /* phone tab-bar height a sheet stops above */ /* ---- Shell aliases (desktop workspace chrome) ---- */ --shell-ground: var(--hickory-700); --shell-panel: var(--cream-50); --shell-ink: var(--ink-dark-3); --shell-wash: rgba(255,241,226,.14); /* ---- THE FLUID TYPE SCALE ------------------------------------ Do not round these and do not add steps between them. Weight 500 is normal, 600 is emphasis, 800 is a figure; 700 is RETIRED in product UI — it survives only on the 11px ordinal of an index row. */ --u-fs-title: clamp(23px, 2.3vw, 40px); /* @kind font */ /* the page title */ --u-fs-lg: clamp(16px, 1.5vw, 20px); /* @kind font */ /* a pane title */ --u-fs-row: clamp(12.5px, 1.05vw, 14.5px); /* @kind font */ /* list rows, inputs */ --u-fs-body: clamp(12px, .98vw, 14px); /* @kind font */ /* running copy */ --u-fs-num: clamp(15px, 1.45vw, 21px); /* @kind font */ /* figures (weight 800) */ --u-fs-icon: clamp(14px, 1.3vw, 19px); /* @kind font */ /* glyphs */ --u-fs-ctl: clamp(11px, .88vw, 12.6px); /* @kind font */ /* buttons, controls */ --u-fs-mini: clamp(10px, .82vw, 12px); /* @kind font */ /* micro-labels */ /* ---- THE FLUID MEASURES ---- */ --u-band: clamp(46px, 4.4vw, 56px); /* @kind spacing */ /* a header row — band, pane heads */ --u-rail: clamp(50px, 4vw, 64px); /* @kind spacing */ /* the icon rails */ --u-index: clamp(248px, 19vw, 330px); /* @kind spacing */ /* the content menu */ --u-drawer: clamp(236px, 19vw, 344px); /* @kind spacing */ /* the right pane */ --u-ctx: clamp(240px, 19vw, 380px); /* @kind spacing */ /* the context column */ --u-pad: clamp(20px, 2.7vw, 52px); /* @kind spacing */ /* generous pane padding */ --u-pad-s: clamp(14px, 1.9vw, 32px); /* @kind spacing */ /* tighter pane padding */ --u-gap: clamp(10px, 1.3vw, 18px); /* @kind spacing */ /* inline run spacing */ --u-gap-lg: clamp(14px, 1.7vw, 22px); /* @kind spacing */ /* stacked block spacing */ --u-sq: clamp(30px, 2.9vw, 44px); /* @kind spacing */ /* an icon square */ --u-sq-s: clamp(28px, 2.6vw, 40px); /* @kind spacing */ /* the smaller square */ --u-rail-datum: calc(var(--u-band) + var(--u-pad)); /* @kind spacing */ /* the left column's first row — rail tile, count blocks, tree — starts on the stage head's line */ --u-scroll: 10px; /* @kind spacing */ /* the reserved scrollbar gutter — ONE right edge */ /* Hit targets */ --hit-fine: 34px; /* @kind spacing */ --hit-coarse: 44px; /* @kind spacing */ /* ---- LEGACY ALIASES — the app speaks these names. Kept so a migration is a class swap, not a colour audit. They resolve to the CREAM family, never white. ---- */ --accent: var(--hickory-700); --accent-2: var(--cream-100); --accent-3: var(--mint-400); --bg: var(--cream-50); --bg-base: var(--cream-50); --bg-soft: var(--cream-200); --bg-soft-base: var(--cream-200); --bg-panel: var(--cream-100); --text: var(--hickory-700); --text-base: var(--hickory-700); --text-soft: var(--hickory-500); --text-soft-base: var(--hickory-500); --text-faint-base: var(--hickory-500); --line: var(--cream-300); --font: var(--font-sans); /* @kind font */ --mono: ui-monospace, "SFMono-Regular", Menlo, monospace; /* @kind font */ --fs-ui-lg: var(--u-fs-lg); /* @kind font */ --fs-ui: var(--u-fs-row); /* @kind font */ --fs-ui-sm: var(--u-fs-ctl); /* @kind font */ --fs-ui-xs: var(--u-fs-mini); /* @kind font */ --fs-micro: var(--u-fs-mini); /* @kind font */ } /* ---- BREAKPOINTS · mobile-first, three, documented ---------------------- sm 640px phone -> large phone / small tablet md 1024px tablet -> desktop lg 1440px wide desktop Write every rule for the phone first, then step up at these three widths. No other breakpoint may be introduced, and breakpoints move PANES, never type sizes — the clamps handle size. ------------------------------------------------------------------------ */