/* ========================================================================== ausbeds-warm · design system · tokens -------------------------------------------------------------------------- SILOED COPY · canonical source: huashu/references/ausbeds-warm-design/ If this file lives anywhere other than that path, you're looking at a synced copy — edit the source, not this file, then re-sync. Apps stay frozen on their copy until they re-sync; that's by design. -------------------------------------------------------------------------- For Ausbeds internal staff tools (sales inbox, timesheet, partner dash, inventory, shepherd hub, etc.). Borrows the Anthropic brand wholesale: the warm-cream surface ramp + clay (#d97757) as the single interactive accent. No pure white, no pure black, soft contrast that holds up over an 8-hour shift. Inter for all-day reading. Permanent Marker is the one and only "brand-feel" element — used exactly once per screen. Default is light (Day mode). for Night mode. See brand-spec.md (this folder) for the Anthropic brand reference. Cascade layer: everything below sits inside `@layer ausbeds-warm`. Apps that consume this DS should wrap their own rules in `@layer app` so app overrides naturally win over DS defaults. The two layers establish their order on first encounter — no explicit declaration needed. ========================================================================== */ @layer ausbeds-warm { /* ========== FONTS ========== Inter (Rasmus Andersson, OFL-licensed) + Permanent Marker, self-hosted. Inter is the proven choice for staff tools — Linear, Figma, Notion, GitHub all use it. Designed specifically for screens, with hinting tuned for sustained reading at small sizes. We ship Regular / Medium / SemiBold / Bold (+ italics) — eight files total. Heavier weights (800/900) are not shipped because Notion-density UI doesn't reach for them — h1 lands at SemiBold/Bold. Permanent Marker stays for the rare brand-eyebrow stamp. */ @font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-MediumItalic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBoldItalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Permanent Marker'; src: url('fonts/PermanentMarker-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } /* Two selectors so the light tokens apply both to the page root AND to any nested element explicitly scoped with data-theme="light". Without this, a Day island inside a Night page (e.g. the Day/Night hero pair on the showcase) inherits dark values instead of re-establishing light. */ :root, [data-theme="light"] { color-scheme: light; /* ========== ANTHROPIC SWATCH PALETTE — kept verbatim ========== Available for accent moments and the warm-cream surface ramp. Names + hexes match anthropic.com's live brand stylesheet (see brand-spec.md). Most of the time you'll only reach for ivory-* and slate-* — the named hues below are designer escape hatches. */ /* Slate · cool darks */ --slate-dark: #141413; --slate-medium: #3d3d3a; --slate-light: #5e5d59; /* Ivory · creams (the eye-saver) */ --ivory-light: #faf9f5; --ivory-medium: #f0eee6; --ivory-dark: #e8e6dc; /* Cloud · warm greys */ --cloud-dark: #87867f; --cloud-medium: #b0aea5; --cloud-light: #d1cfc5; /* The whole brand palette — three named hues, that's it. Clay carries every interactive state. Accent-deep is its pressed sibling. Olive is the sole concession for success status. No sky. No fig. No decorative pastels. Cream + slate + clay does the work. */ --clay: #d97757; /* PRIMARY accent · the only interactive colour */ --accent-deep: #c6613f; /* hover/pressed state for clay */ --olive: #788c5d; /* the one quiet hint of green for success */ /* ========== CORE SURFACES ========== Anthropic's ivory ramp — the Claude pass insight. No pure white anywhere. Cream-soft (the "book" cream) is the page; ivory-medium is panel/sunken; ivory-dark is the deepest cream for emphasised sunken rows. */ --ink: var(--slate-dark); --ink-soft: var(--slate-medium); --paper: var(--ivory-light); --paper-warm: var(--ivory-medium); /* page background */ --paper-warmer: var(--ivory-dark); /* sunken / striped */ /* ========== NEUTRALS ========== */ --gray-950: var(--slate-dark); --gray-900: var(--slate-medium); --gray-800: #4a4945; --gray-700: var(--slate-light); --gray-600: #767570; --gray-500: var(--cloud-dark); --gray-400: var(--cloud-medium); --gray-300: var(--cloud-light); --gray-200: var(--ivory-dark); --gray-150: #ece9dc; --gray-100: var(--ivory-medium); --gray-50: var(--ivory-light); /* ========== TEXT ========== */ --fg-1: var(--slate-dark); /* primary */ --fg-2: var(--slate-medium); /* body */ --fg-3: var(--slate-light); /* meta / captions */ --fg-4: var(--cloud-dark); /* placeholder / disabled */ --fg-inv: var(--ivory-light); /* on dark fills */ /* ========== SURFACES ========== */ --bg-page: var(--ivory-medium); --bg-panel: var(--ivory-light); --bg-raised: var(--ivory-light); --bg-sunken: var(--ivory-dark); --bg-hover: #14141310; --bg-active: #14141320; --bg-input: var(--ivory-light); /* ========== LINES ========== */ --line-1: var(--ivory-dark); --line-2: var(--cloud-light); --line-3: #ece9dc; /* ========== PRIMARY ACCENT — clay ========== Anthropic's signature terracotta. The single interactive colour: buttons, links, focus, selected rows. AA on the ivory ramp. Blue is deliberately absent from interaction — it appears only as the rare "info" status tint. */ --accent: var(--clay); /* #d97757 */ --accent-hover: var(--accent-deep); /* #c6613f */ --accent-active: #a85133; --accent-soft: rgba(217, 119, 87, 0.14); --accent-softer: rgba(217, 119, 87, 0.07); --accent-fg: #FFFFFF; --accent-ring: rgba(217, 119, 87, 0.34); /* ========== SEMANTIC STATUS — pulled to a whisper ========== Status hues stay just barely-there: backgrounds drift one step off ivory, lines sit a tone above. Foreground keeps enough saturation for AA but no more. Info has no blue at all — just slate. The eye reads "different from default" without any one row shouting. */ --success: #4f6a3e; /* deepened olive, AA on cream */ --success-bg: #eef0e6; /* barely olive-tinted cream */ --success-line: #d6dcc6; --warning: #76603e; /* desaturated tan, AA on cream */ --warning-bg: #f3ecdc; /* warm pale cream */ --warning-line: #ddcfac; --danger: #a3402a; /* clay-deep — same family as accent */ --danger-bg: #f5dcd2; --danger-line: #e7b8a4; --info: var(--slate-light); /* no blue — info reads as quiet slate */ --info-bg: var(--ivory-dark); --info-line: var(--cloud-light); --neutral-bg: var(--ivory-dark); --neutral-line: var(--cloud-light); /* ========== LINK ========== */ --link: var(--accent); --link-hover: var(--accent-hover); /* ========== SELECTION ========== */ --selection-bg: rgba(217, 119, 87, 0.26); /* ========== TYPOGRAPHY ========== Inter for everything (headings + body). The screen-reading default for staff tools — Linear, Figma, Notion, GitHub all picked it for the same 8-hour-shift problem. Permanent Marker reserved for the rare brand eyebrow. Two density tiers, on purpose: · Chrome (buttons, tables, list rows, chips, inputs) → --fs-md (14px) / --fs-sm (13px). Notion-density. Staff scan it. · Reading prose (p, .p, message bodies, modal copy, descriptions) → --fs-xl (18px). Staff *read* it. The eye-saver over an 8-hour shift. The `p, .p` rule further down is the canonical anchor. No serif anywhere — staff scan, they don't read. */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif; --font-marker: 'Permanent Marker', 'Inter', cursive; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Roboto Mono', monospace; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; /* body default */ --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.65; --tracking-tight: -0.015em; --tracking-snug: -0.008em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ========== SPACING · 4px grid ========== */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px; --space-9: 40px; --space-10: 48px; --space-12: 64px; /* ========== RADII ========== Notion-rectangular. Pill kept for badges + avatars. */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* ========== SHADOWS — paper-soft ========== */ --shadow-xs: 0 1px 2px rgba(20, 20, 19, 0.05); --shadow-sm: 0 1px 3px rgba(20, 20, 19, 0.07), 0 1px 2px rgba(20, 20, 19, 0.04); --shadow-md: 0 4px 12px rgba(20, 20, 19, 0.09), 0 1px 3px rgba(20, 20, 19, 0.04); --shadow-lg: 0 12px 28px rgba(20, 20, 19, 0.13), 0 4px 8px rgba(20, 20, 19, 0.06); --shadow-focus: 0 0 0 3px var(--accent-ring); /* ========== MOTION ========== */ --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 100ms; --dur-med: 160ms; --dur-slow: 240ms; /* ========== LAYOUT ========== */ --container: 1080px; --container-wide: 1280px; --container-full: 1440px; /* ========== APP CHROME ========== Sized for sales-inbox cockpit + sibling 2/3-pane staff tools. */ --chrome-topbar-h: 44px; --chrome-sidebar-w: 232px; --chrome-col-gap: 1px; } /* ========================================================================== SLATE THEME (dark) — late-shift mode -------------------------------------------------------------------------- For staff who triage at night. Slate-dark page, slate-medium panels. Marker-cyan lifts to its native bright value (the original marker hue) for legibility on dark. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; --ink: var(--ivory-light); --ink-soft: var(--ivory-medium); --paper: var(--slate-medium); --paper-warm: var(--slate-dark); --paper-warmer: #0d0d0c; --gray-950: var(--ivory-light); --gray-900: var(--ivory-medium); --gray-800: var(--ivory-dark); --gray-700: var(--cloud-light); --gray-600: var(--cloud-medium); --gray-500: var(--cloud-dark); --gray-400: #6c6b66; --gray-300: var(--slate-light); --gray-200: var(--slate-medium); --gray-150: #2a2a27; --gray-100: var(--slate-dark); --gray-50: #0d0d0c; --fg-1: var(--ivory-light); --fg-2: var(--ivory-medium); --fg-3: var(--cloud-medium); --fg-4: var(--cloud-dark); --fg-inv: var(--slate-dark); /* Night mode · warm-charcoal tier ───────────────────────────────────────────────────────────────────── v1 shipped 2026-04-29 (contrast pass 1) — lifted floor from #141413 to #26261f for the "less dark" ask. Panel/raised values from v1 are preserved in the comments below for archaeology. CONTRAST PASS v2 · 2026-04-29 (live-app lessons from sales-inbox) Lifting the floor without re-tuning the layers above it collapsed three things that v1 missed: (a) Card-to-floor gap fell to ~6pts (was ~14pts on cave-dark). Cards stopped reading as cards. Resting vs raised became indistinguishable because shadows had no luminance gap to cast against. Fix: bump --bg-panel #3d3b34 → #48463f (~10pt gap restored), bump --bg-raised #4a4843 → #54524c so raised re-separates from panel. (b) Default chips/badges went invisible. v1's --neutral-bg was --slate-medium #3d3d3a — virtually identical to v1's panel #3d3b34 — so any chip on a card disappeared into the card. Fix: pin --neutral-bg to an explicit #3a3833, which reads as a quiet inset on both the new floor and the new panel. (c) Status-tint pills became muddy smears. The 0.16–0.20 alpha values were calibrated against near-black; over the lifted charcoal floor the same alpha mixes weaker. Fix: bump every status --*-bg alpha by ~0.10 so chips and small surfaces hold their tint. Banners (large surface area) didn't need this — kept the bump anyway for consistency. Inputs stay at depressed-below-floor #1f1e19. Line tokens preserve the v1 "carved-into" card border (line-1 < panel) so cards retain the old etched-edge silhouette; line-2 tracks panel. CONTRAST PASS v3 · 2026-04-29 (Karl's pull-back call) v2 turned out to overshoot. The lifted panel + 0.30-class pill alphas read as too loud against the warm-charcoal floor — the muted card silhouette (panel sitting close to floor) is *intentional* for an 8-hour shift, not a bug. v3 reverts panel/raised/line-2 to their v1 values and pulls every status-pill alpha back down to a gentler band (0.22–0.26). Kept from v2: floor lifted to #26261f, explicit --neutral-bg (now #33312c). The fix that survives v2 → v3 is the neutral pill, because v1's --slate-medium #3d3d3a was genuinely invisible against any panel. */ --bg-page: #26261f; --bg-panel: #3d3b34; /* v3 revert · v2: #48463f · v1: #3d3b34 */ --bg-raised: #4a4843; /* v3 revert · v2: #54524c · v1: #4a4843 */ --bg-sunken: #1c1c17; --bg-hover: #faf9f514; --bg-active: #faf9f526; --bg-input: #1f1e19; --line-1: #312f2a; /* darker than panel · carved-into edge preserved */ --line-2: #3d3b34; /* v3 revert · tracks reverted panel · v2: #48463f */ --line-3: #1f1e19; /* On dark, clay lifts a touch — same hue, brighter for legibility. Tier 2 charcoal floor needs slightly more accent lift to hold its contrast ratio, so all four clay variants step one notch up. v3: status alphas pulled back from v2's 0.28–0.32 to 0.22–0.26 — pills now read clearly without shouting against the warm-charcoal floor. */ --accent: #ec9b80; /* lifted clay · charcoal-tuned */ --accent-hover: #f4af96; --accent-active: #f8bdab; --accent-soft: rgba(236, 155, 128, 0.26); /* v3: 0.32 → 0.26 · v1: 0.20 */ --accent-softer: rgba(236, 155, 128, 0.13); /* v3: 0.16 → 0.13 · v1: 0.10 */ --accent-fg: var(--slate-dark); --accent-ring: rgba(236, 155, 128, 0.42); --success: #a4be8c; /* lifted olive */ --success-bg: rgba(164, 190, 140, 0.24); /* v3: 0.30 → 0.24 · v1: 0.18 */ --success-line: rgba(164, 190, 140, 0.36); --warning: #e3c995; /* lifted manilla/kraft */ --warning-bg: rgba(227, 201, 149, 0.24); /* v3: 0.30 → 0.24 · v1: 0.18 */ --warning-line: rgba(227, 201, 149, 0.36); --danger: #e08770; /* keeps clay-family warmth */ --danger-bg: rgba(224, 135, 112, 0.22); /* v3: 0.28 → 0.22 · v1: 0.16 */ --danger-line: rgba(224, 135, 112, 0.36); --info: var(--cloud-medium); /* no blue — info reads as quiet warm grey */ --info-bg: rgba(176, 174, 165, 0.24); /* v3: 0.30 → 0.24 · v1: 0.16 */ --info-line: rgba(176, 174, 165, 0.36); --neutral-bg: #33312c; /* v3: #3a3833 → #33312c · v1: --slate-medium #3d3d3a */ --neutral-line: #2a2a27; --selection-bg: rgba(232, 148, 120, 0.32); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.44), 0 1px 3px rgba(0, 0, 0, 0.26); --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.54), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-focus: 0 0 0 3px var(--accent-ring); } /* ========================================================================== BASE — Inter everywhere, sans headings, Permanent Marker eyebrow rotated ========================================================================== */ html, body { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Inter OpenType features tuned for staff comfort: cv11 = single-storey 'a' (more distinct at small sizes) ss03 = open digit zero (no slash, easier to scan in tables) ss01 = alternate ampersand and other refinements calt = contextual alternates (default-on) Numbers default to proportional — flip on tabular-nums via .tabular class for tables and price columns. */ font-feature-settings: 'cv11', 'ss03', 'ss01'; } ::selection { background: var(--selection-bg); } /* Inter at display sizes wants a touch tighter tracking than at body — that's why h1/h2 reach into the negative tracking tokens. */ h1, .h1 { font-family: var(--font-sans); font-weight: 700; /* Inter Bold reads as confident without going to 800 */ font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); text-wrap: balance; } h2, .h2 { font-weight: 600; /* SemiBold is Inter's editorial heading weight */ font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg-1); } h3, .h3 { font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--fg-1); } h4, .h4 { font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-snug); color: var(--fg-1); } /* Reading prose lifts to 18px — the staff-tool eye-saver. Chrome (buttons, tables, list rows, chips, inputs) stays on --fs-md (14px) because dense surfaces still want Notion-density. Anything that's a paragraph someone *reads* — message bodies, descriptions, modal copy — uses this rule. */ p, .p { font-size: var(--fs-xl); line-height: var(--lh-normal); color: var(--fg-2); text-wrap: pretty; } small, .small { font-size: var(--fs-sm); color: var(--fg-3); } .caption, .eyebrow { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); font-weight: 700; } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } kbd { display: inline-block; padding: 1px 6px; font-size: 0.85em; color: var(--fg-2); background: var(--bg-sunken); border: 1px solid var(--line-1); border-bottom-width: 2px; border-radius: var(--radius-xs); } /* ========================================================================== PERMANENT MARKER EYEBROW — the brand stamp -------------------------------------------------------------------------- The one and only "brand-feel" element in this DS. Use exactly once per screen — top-left of the page-title row most often, naming the surface ("Sales Inbox", "Timesheet", "Inventory"). Rotated -2° so it reads "stamped" not "typed." Inherits the clay accent — no rainbow variants; if every page is a different colour, none of them feel signature. ========================================================================== */ .marker { font-family: var(--font-marker); font-weight: 400; font-size: var(--fs-md); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); display: inline-block; transform: rotate(-2deg); } } /* end @layer ausbeds-warm */