/* Sidub Design System — flattened single-file stylesheet. Site copy: font URLs point at ../fonts/ (woff2). Source of truth: newweb/ bundle. */ /* ===== tokens/fonts.css ===== */ /* ============================================================ Sidub — Webfonts Variable fonts, self-hosted from assets/fonts. - Quicksand → display / brand headlines (rounded geometric) - Source Sans 3 → body, UI, smaller headings ("Source Sans Pro") - Source Code Pro→ code, data, mono eyebrow labels ============================================================ */ @font-face { font-family: "Quicksand"; src: url("../fonts/Quicksand-Variable.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-Variable.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("../fonts/SourceSans3-Italic-Variable.woff2") format("woff2-variations"); font-weight: 200 900; font-style: italic; font-display: swap; } @font-face { font-family: "Source Code Pro"; src: url("../fonts/SourceCodePro-Variable.woff2") format("woff2-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } /* ===== tokens/colors.css ===== */ /* ============================================================ Sidub — Color tokens Authoritative source: "Brand Design System.docx". Royal Indigo (#5E4778) anchors everything; light & airy with purple-tinted neutrals, warm coral CTA, balancing teal. ============================================================ */ :root { /* ---- Brand: Royal Indigo ramp ---- */ --indigo-700: #3C2D4D; /* deep brand / dark surfaces */ --indigo-600: #4F3A68; /* hover / pressed primary */ --indigo-500: #5E4778; /* PRIMARY — Royal Indigo */ --indigo-400: #8F729D; /* Lavender Mist — secondary */ --indigo-300: #B8A4C6; /* muted lavender */ --indigo-200: #D6C6E1; /* soft lavender tint */ --indigo-100: #ECE3F2; /* faint lavender wash */ --indigo-050: #F5F3F7; /* lavender panel — tinted section bands, sunken wells */ --indigo-025: #FAF9FB; /* near-white page bg — a whisper of lavender */ /* ---- Accent: Refined Coral (warm — THE conversion accent) ---- 500 is the brand's coral for graphics, fills & large display use. 600/700 are the AA-calibrated interactive pair: 600 passes 4.5:1 with near-white label text; 500 passes neither with white nor with charcoal — never set body-size text on coral-500. */ --coral-700: #A03E2C; /* pressed / hover of 600 */ --coral-600: #BE4E3B; /* ACTION coral — AA w/ white */ --coral-500: #E3735E; /* Refined Coral — graphic use */ --coral-300: #F3B6A9; --coral-100: #FBE7E1; /* ---- Accent: Harmonious Teal (trust / links / info) ---- 700 is the link color: 5.1:1 on white. 500 is graphic-only. */ --teal-700: #22706C; /* link / text teal — AA */ --teal-600: #2F8E89; /* icons, large text (3:1+) */ --teal-500: #399F9D; /* Harmonious Teal — graphic */ --teal-300: #9AD2CF; --teal-100: #E2F2F1; /* ---- EXTENDED PALETTE — data-viz & illustration ONLY ---- Gold and Slate are support hues: chart series, illustration accents, editorial tints. They are NOT interactive colors and never compete with coral/teal in UI. */ --gold-700: #6F5B33; /* text on tinted chips — AA */ --gold-600: #8C7341; --gold-500: #A68A50; /* Radiant Gold */ --gold-300: #D9C79B; --gold-100: #F3ECDB; --slate-600: #45535E; --slate-500: #5A6B78; /* Deep Slate */ --slate-300: #A9B4BC; --slate-100: #E7EBEE; /* ---- Neutrals (warm-purple cast) ---- */ --ink-900: #2A2230; /* deepest text on dark */ --ink-800: #333333; /* Dark Charcoal — body text */ --ink-600: #5C5563; --ink-400: #A0A0A0; /* Medium Gray — placeholder */ --ink-300: #C7C2CC; --ink-200: #E9E4ED; /* purple-tinted border/divider */ --ink-100: #F5F5F5; /* Light Gray */ --ink-050: #FAFAFA; /* Off-White */ --white: #FFFFFF; /* ---- Semantic: functional ---- Structure: 600/700 = text & icons on light (AA ≥4.5:1), 500 = fills & large graphics, 300 = dark-mode text, 100 = tinted surfaces. Pastels are surfaces, never signals. */ --danger-600: #B94257; /* error text/icons — AA */ --danger-500: #D85F72; /* Coral Red — fills, borders */ --danger-300: #EBA5B0; --danger-100: #FBE6EA; --warning-700: #8A5E0C; /* warning text — AA */ --warning-500: #E3B23C; /* Golden Mustard — fill + charcoal text */ --warning-300: #F0D28A; --warning-100: #FBF1D7; --success-700: #2E7D52; /* success text/icons — AA */ --success-600: #5BAE7E; /* icons, large text */ --success-500: #7FC49A; /* fills */ --success-300: #A0D3B2; /* Soft Green — dark-mode text, tints */ --success-100: #E9F5EE; --info-700: var(--teal-700); --info-500: #399F9D; /* maps to teal */ /* Semantic text aliases — use THESE for status copy */ --text-danger: var(--danger-600); --text-warning: var(--warning-700); --text-success: var(--success-700); --text-info: var(--teal-700); /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ /* Surfaces — near-white page; cards separate by 1px border + soft shadow, tinted contrast comes from --surface-panel bands. */ --surface-page: var(--indigo-025); /* near-white app/page bg */ --surface-card: var(--white); --surface-raised: var(--white); --surface-panel: var(--indigo-050); /* tinted section band / alternating stripe */ --surface-sunken: var(--indigo-050); /* inset wells — lavender, not grey */ --surface-brand: var(--indigo-500); --surface-brand-deep:var(--indigo-700); --surface-inverse: var(--indigo-700); /* Text */ --text-strong: var(--ink-800); --text-body: #423B49; --text-muted: var(--ink-600); --text-subtle: #716A79; /* AA (4.7:1+) on page & card; ink-400 fails 4.5:1 */ --text-on-brand: var(--ink-050); --text-on-dark: var(--ink-050); --text-link: var(--teal-700); --text-brand: var(--indigo-500); /* Borders */ --border-subtle: var(--ink-200); --border-default:#DAD2E0; --border-strong: var(--indigo-300); --border-ink: var(--ink-800); /* 2px outline illustration style */ /* Interactive — primary (coral CTA; AA-calibrated pair) */ --action-primary: var(--coral-600); --action-primary-hover: var(--coral-700); --action-primary-text: var(--ink-050); /* Interactive — brand (indigo) */ --action-brand: var(--indigo-500); --action-brand-hover: var(--indigo-600); --action-brand-text: var(--ink-050); /* Focus ring */ --focus-ring: var(--indigo-400); color-scheme: light; } /* ============================================================ DARK MODE — eggplant surfaces, pastel links Apply via or .theme-dark ============================================================ */ :root[data-theme="dark"], .theme-dark { --surface-page: #2A2036; --surface-card: #352A44; --surface-raised: #3D3150; --surface-panel: #302645; --surface-sunken: #241B30; --surface-brand: var(--indigo-400); --surface-brand-deep:#1F1729; --surface-inverse: var(--white); --text-strong: #F4F0F8; --text-body: #E4DCEC; --text-muted: #B9AECB; --text-subtle: #A79BBB; /* AA (5.1:1+) on dark card & page */ --text-on-brand: #FFFFFF; --text-on-dark: #F4F0F8; --text-link: var(--teal-300); --text-brand: var(--indigo-200); --text-danger: var(--danger-300); --text-warning: var(--warning-300); --text-success: var(--success-300); --text-info: var(--teal-300); --border-subtle: #43374F; --border-default:#4E4060; --border-strong: var(--indigo-400); --border-ink: #0F0B16; --action-primary: var(--coral-500); --action-primary-hover: #EC8E7B; --action-primary-text: #2A1712; --action-brand: var(--indigo-300); /* indigo-400 + #1F1729 text = 4.2:1, under AA */ --action-brand-hover: var(--indigo-200); --action-brand-text: #1F1729; color-scheme: dark; } /* ===== tokens/typography.css ===== */ /* ============================================================ Sidub — Typography tokens Display & brand: Quicksand · UI & body: Source Sans 3 · Mono: Source Code Pro Type scale is fluid where useful; base body 16px / 1.5. ============================================================ */ :root { /* Families Quicksand is a DISPLAY voice: rounded geometric, matches the wordmark. It holds up at ≥28px only — below that its low x-height and loose apertures cost legibility, so h3/h4 and everything smaller set in Source Sans 3. */ --font-display: "Quicksand", "Source Sans 3", system-ui, sans-serif; --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Source Code Pro", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Weights */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* Type scale (px) — 8pt-friendly, display sizes fluid in use */ --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 4.5rem); /* @kind other */ --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem); /* @kind other */ --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem); /* @kind other */ --fs-h3: 1.5rem; /* @kind font */ --fs-h4: 1.25rem; /* @kind font */ /* title = card/section titles (pair w/ --fw-semibold + --font-sans); body-lg = lede/large body (--fw-regular). Same size by design — weight, not size, differentiates the pair. */ --fs-title: 1.125rem; /* @kind font */ --fs-body-lg: 1.125rem; /* @kind font */ --fs-body: 1rem; /* @kind font */ --fs-body-sm: 0.9375rem;/* @kind font */ --fs-caption: 0.8125rem;/* @kind font */ --fs-eyebrow: 0.75rem; /* @kind font */ /* Line heights */ --lh-tight: 1.1; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.65; /* @kind font */ /* Letter spacing */ --ls-display: -0.02em; /* @kind font */ --ls-heading: -0.01em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-eyebrow: 0.14em; /* @kind font */ --ls-button: 0.01em; /* @kind font */ /* Reading measure — cap body copy at a comfortable line length */ --measure: 66ch; /* @kind other */ } /* ===== tokens/spacing.css ===== */ /* ============================================================ Sidub — Spacing, radius, elevation, motion, layout 8-pt grid (4px baseline). Easing cubic-bezier(.4,0,.2,1). ============================================================ */ :root { /* ---- Spacing (4px baseline, 8pt grid) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* ---- Radii ---- */ --radius-xs: 4px; /* inputs, small chips */ --radius-sm: 8px; /* buttons */ --radius-md: 12px; /* cards */ --radius-lg: 16px; /* viewport frame, large cards */ --radius-xl: 24px; /* feature panels */ --radius-pill: 999px; /* pills, avatars */ /* ---- Border widths ---- */ --border-thin: 1px; --border-base: 1.5px; /* icon stroke weight */ --border-bold: 2px; /* illustration / framed outline */ /* ---- Elevation (soft, purple-tinted shadows) ---- Alphas calibrated for the near-white page: shadows read stronger on light ground, so they stay one notch softer than convention. */ --shadow-xs: 0 1px 2px rgba(60, 45, 77, 0.05); --shadow-sm: 0 1px 3px rgba(60, 45, 77, 0.07), 0 1px 2px rgba(60, 45, 77, 0.05); --shadow-md: 0 4px 12px rgba(60, 45, 77, 0.08), 0 2px 4px rgba(60, 45, 77, 0.05); --shadow-lg: 0 12px 28px rgba(60, 45, 77, 0.12), 0 4px 10px rgba(60, 45, 77, 0.07); --shadow-xl: 0 24px 56px rgba(60, 45, 77, 0.16), 0 8px 20px rgba(60, 45, 77, 0.09); /* focus glow */ --shadow-focus: 0 0 0 3px rgba(143, 114, 157, 0.45); /* ---- Motion ---- */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */ --ease-out: cubic-bezier(0, 0, .2, 1); /* @kind other */ --ease-in: cubic-bezier(.4, 0, 1, 1); /* @kind other */ --dur-fast: 150ms; /* @kind other */ --dur-base: 250ms; /* @kind other */ --dur-slow: 400ms; /* @kind other */ /* ---- Z-index scale ---- raised = in-flow chrome · sticky = headers · dropdown = menus overlay = scrim · modal = dialog · popover = tooltips · toast = alerts */ --z-raised: 10; /* @kind other */ --z-sticky: 100; /* @kind other */ --z-dropdown: 1000; /* @kind other */ --z-overlay: 1300; /* @kind other */ --z-modal: 1400; /* @kind other */ --z-popover: 1500; /* @kind other */ --z-toast: 1600; /* @kind other */ /* ---- Layout ---- */ --container-sm: 640px; --container-md: 960px; --container-lg: 1200px; --container-xl: 1320px; --gutter: var(--space-5); /* ---- Brand graph-paper grid (watermark motif) ---- */ --grid-line: rgba(94, 71, 120, 0.08); --grid-size: 28px; } /* ===== tokens/base.css ===== */ /* ============================================================ Sidub — Base element styles & brand utilities Keeps consumers' raw HTML on-brand out of the box. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2 { font-family: var(--font-display); color: var(--text-strong); line-height: var(--lh-snug); margin: 0 0 0.5em; text-wrap: balance; } /* Quicksand stops here — below display sizes it loses legibility. h3/h4 set in the workhorse sans, semibold. */ h3, h4 { font-family: var(--font-sans); color: var(--text-strong); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); } h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } p { margin: 0 0 1em; text-wrap: pretty; max-width: var(--measure); } a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); } a:hover { text-decoration: underline; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--indigo-100); color: var(--indigo-600); padding: 0.1em 0.4em; border-radius: var(--radius-xs); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } ::selection { background: var(--indigo-200); color: var(--indigo-700); } /* ---- Brand utilities ---- */ /* Monospace uppercase eyebrow label — a signature Sidub device */ .sidub-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-brand); } /* Graph-paper watermark background (Sui-style grid) */ .sidub-grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } /* Centered layout container */ .sidub-container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--gutter); } /* Bracket motif as a decorative mark */ .sidub-bracket { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--text-brand); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }