/* ============================================================ THEME: Rulebase ------------------------------------------------------------ Source: rulebase.com, saved 2026-08-09. Colors, type scale, spacing, radii and the card shadow are copied verbatim from that page's :root block. Type sizes and button metrics were re-verified against getComputedStyle on the live DOM at a 1440px viewport. Character: warm greige canvas, near-black ink, no saturated brand color at all. Display set in ABC Diatype at weight 400 with hard negative tracking and sub-1.0 leading. Buttons are small, quiet and set in Hedvig Letters Sans. ============================================================ */ :root[data-theme='distrify'] { /* -- Brand ------------------------------------------------- */ --c-brand: #1A1716; /* --color-dark */ --c-brand-deep: #0F0D0C; --c-brand-soft: #474440; /* --cta */ /* Rulebase has no chroma accent. Its "accent" is the warm dark CTA fill; the orange is reserved for rare emphasis. */ --c-accent: #474440; /* --cta */ --c-accent-deep: #565249; /* --cta-hover */ --c-accent-soft: #E4E1DF; /* --tile-bg */ --c-on-accent: #F7F7F4; /* --cream */ /* -- Surfaces ---------------------------------------------- */ --c-canvas: #EFEDEB; /* --color-bg */ --c-surface: #FFFFFF; --c-surface-soft: #E8E5E3; /* --color-card */ --c-surface-warm: #E4E1DF; /* --tile-bg */ --c-dark: #1A1716; /* --color-dark */ --c-dark-2: #262220; /* -- Ink --------------------------------------------------- */ --c-ink: #1E1E1E; /* --color-text */ --c-ink-2: #1E1E1EE0; --c-ink-3: #1E1E1EA6; /* --color-subtle. A6, not 8C: 8C measured 3.6:1 on the page ground, under the 4.5:1 AA asks of body text; A6 measures 4.9:1 */ --c-ink-4: #1E1E1E66; /* --color-muted */ --c-on-dark: #F7F7F4; /* --color-cream */ --c-on-dark-2: #F7F7F4A6; /* -- Lines ------------------------------------------------- */ --c-line: #D9D7D5; /* --color-border */ --c-line-strong: #C2BFBC; --c-line-cool: #DFDDDB; --c-line-dark: rgba(247, 247, 244, 0.16); --c-line-dark-hi: rgba(247, 247, 244, 0.38); /* -- Status ------------------------------------------------ */ --c-ok: #3F7D53; --c-warn: #D85210; /* --orange */ --c-bad: #CC3542; /* --red */ /* -- Type families ----------------------------------------- */ --f-display: 'ABC Diatype', 'Helvetica Neue', Helvetica, Arial, sans-serif; --f-body: 'Inter', system-ui, sans-serif; --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --f-cta: 'Hedvig Letters Sans', 'Inter', sans-serif; /* -- Global type feel -------------------------------------- */ --t-global-track: normal; --t-smoothing: antialiased; /* -- Type roles: hero -------------------------------------- --text-2xl 60px on --leading-2xl 64px; the live hero runs tighter at 56px leading / -0.03em, which is what is used. */ --t-hero-size: clamp(34px, 4.2vw, 60px); --t-hero-weight: 400; --t-hero-lh: 0.94; --t-hero-track: -0.03em; /* --text-xl 52px / --leading-xl 56px / --tracking-xl -1.04px */ --t-h2-size: clamp(30px, 3.7vw, 52px); --t-h2-weight: 400; --t-h2-lh: 1.077; --t-h2-track: -0.02em; --t-h1x-size: clamp(34px, 4.2vw, 60px); --t-h1x-weight: 400; --t-h1x-lh: 1.0; --t-h1x-track: -0.02em; /* --text-md 36px / --leading-md 41px / --tracking-md -0.9px */ --t-h3-size: clamp(24px, 2.6vw, 36px); --t-h3-weight: 400; --t-h3-lh: 1.139; --t-h3-track: -0.025em; /* --text-sm2 16px / --leading-sm2 26px */ --t-card-size: 16px; --t-card-weight: 500; --t-card-lh: 1.4; --t-card-track: -0.006em; /* --text-body 14px / --leading-body 20px / -0.09px */ --t-lead-size: 16px; --t-lead-lh: 1.625; --t-body-size: 14px; --t-body-lh: 1.43; --t-small-size: 14px; --t-small-lh: 1.43; /* --text-tag 11px / --leading-tag 16px / --tracking-tag 1px */ --t-micro-family: var(--f-body); --t-micro-size: 11px; --t-micro-weight: 500; --t-micro-track: 0.0909em; /* 1px on 11px */ --t-micro-case: uppercase; /* -- Radii, from --radius-* -------------------------------- */ --r-btn: 4px; --r-tile: 8px; --r-card: 12px; --r-panel: 12px; --r-block: 12px; --r-pill: 100px; --r-input: 4px; /* -- Elevation, from --shadow-card ------------------------- */ --sh-1: 0 0 0 1px #1a17160f, 0 1px 2px #1a17160a, 0 2px 6px #1a17160a; --sh-2: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 0.5px 0 rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.08); --sh-3: 0 0 0 1px #1a171614, 0 8px 20px #1a171614, 0 24px 48px #1a17160f; --sh-hero: 0 0 0 1px #1a171614, 0 18px 40px #1a17161f, 0 48px 90px #1a171614; /* -- Buttons ----------------------------------------------- Verified live: 14px / 400 / lh 24px / padding 6px 14px / radius 4px, set in Hedvig Letters Sans. Small and quiet. */ --btn-family: var(--f-cta); --btn-size: 14px; --btn-weight: 400; --btn-track: normal; --btn-case: none; --btn-radius: var(--r-btn); --btn-pad: 10px 18px; --btn-pad-sm: 6px 14px; --btn-primary-bg: #474440; --btn-primary-fg: #F7F7F4; --btn-primary-bg-hov: #565249; --btn-primary-border: transparent; --btn-dark-bg: #FFFFFF; --btn-dark-fg: #454343; --btn-dark-bg-hov: #F7F7F4; --btn-ghost-bg: transparent; --btn-ghost-fg: var(--c-ink); --btn-ghost-border: var(--c-line-strong); /* -- Layout, from --section-x / --section-y ---------------- */ --container: 1240px; --gutter: 100px; --section-y: 100px; --section-y-sm: 48px; /* -- Decoration -------------------------------------------- Rulebase uses no dot field. Flat warm surfaces only. */ --dot-alpha: 0; --dot-alpha-dark: 0; --dot-size: 16px; --dot-show: none; /* No highlighter and no rule: at 0.94 leading a rule collides with the next line. Rulebase emphasises by swapping the phrase into its serif, which is what --font-bureau exists for on their own site. */ --mark-font: 'STK Bureau Serif', Georgia, 'Times New Roman', serif; --mark-style: italic; --mark-bg: none; --mark-size: 0 0; --mark-pos: 0 0; --mark-color: inherit; --mark-pad: 0; /* -- Motion ------------------------------------------------ */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; }