/* ============================================================================ DSYNTEC DESIGN SYSTEM · v1.1 Design Synthesis Technology ---------------------------------------------------------------------------- A portable token + component layer for every DSYNTEC page and web app. Framework-agnostic: works in vanilla HTML tools, React, and Svelte. Identity: "The Drawing Sheet" — drafting paper (light) / blueprint (dark), a real line-weight hierarchy for borders, diagonal hatch from the logo, and a title-block metadata pattern. Conventions · Tokens are prefixed --ds-* (won't collide with your app's own vars) · Components are prefixed .ds-* (won't collide with your app's classes) · Theme is switched with [data-theme="dark"] on or any ancestor · Everything quantitative (areas, rates, coords, BOQ) uses --ds-font-mono ============================================================================ */ /* ---------------------------------------------------------------------------- 1 · TOKENS — PRIMITIVES Raw values. Don't reference these directly in app code; use the semantic tokens (section 2) so light/dark and future re-skins stay centralized. ---------------------------------------------------------------------------- */ :root { /* — Paper (warm vellum greys) — */ --ds-paper-0: #ffffff; --ds-paper-50: #faf9f5; --ds-paper-100:#f1f0eb; --ds-paper-200:#e7e5dd; --ds-paper-300:#d8d5cb; /* — Ink (blue-black drafting ink) — */ --ds-ink-900: #11202d; --ds-ink-800: #15202b; --ds-ink-700: #283541; --ds-ink-600: #45525f; --ds-ink-500: #6b7682; /* graphite */ --ds-ink-400: #9aa3ac; /* — Blueprint (primary blue) — */ --ds-blueprint-700:#143a63; --ds-blueprint-600:#15406e; --ds-blueprint-500:#1c5a99; /* brand */ --ds-blueprint-400:#3a78b8; --ds-blueprint-300:#5aa0e0; /* brand on dark */ --ds-blueprint-200:#9ec6ea; /* — Redline (markup / QA / danger) — */ --ds-redline-600:#9a2c18; --ds-redline-500:#c23b22; --ds-redline-400:#e2664e; /* — Functional — */ --ds-green-500:#2e7d55; --ds-green-400:#4fb07e; --ds-amber-500:#b5791f; --ds-amber-400:#d9a33c; /* — Blueprint navy surfaces (dark theme grounds) — */ --ds-navy-900:#0c1a2b; --ds-navy-800:#102338; --ds-navy-700:#16314a; --ds-navy-600:#1d3d5a; } /* ---------------------------------------------------------------------------- 2 · TOKENS — SEMANTIC (LIGHT / "Drafting Paper") These are the names you use everywhere. Swap your real brand hexes in section 1 and the whole system follows. ---------------------------------------------------------------------------- */ :root { /* Surfaces */ --ds-bg: var(--ds-paper-100); --ds-surface: var(--ds-paper-50); --ds-surface-raised: var(--ds-paper-0); --ds-surface-sunken: var(--ds-paper-200); /* Text */ --ds-text: var(--ds-ink-800); --ds-text-secondary: var(--ds-ink-600); --ds-text-muted: var(--ds-ink-500); --ds-text-inverse: var(--ds-paper-50); /* Borders — see line-weight hierarchy below for thickness */ --ds-border: rgba(21, 32, 43, 0.14); --ds-border-strong: rgba(21, 32, 43, 0.30); --ds-border-subtle: rgba(21, 32, 43, 0.08); /* Brand */ --ds-brand: var(--ds-blueprint-500); --ds-brand-strong: var(--ds-blueprint-600); --ds-brand-soft: rgba(28, 90, 153, 0.10); --ds-on-brand: var(--ds-paper-50); /* States */ --ds-danger: var(--ds-redline-500); --ds-danger-strong: var(--ds-redline-600); --ds-danger-soft: rgba(194, 59, 34, 0.10); --ds-success: var(--ds-green-500); --ds-success-soft: rgba(46, 125, 85, 0.12); --ds-warning: var(--ds-amber-500); --ds-warning-soft: rgba(181, 121, 31, 0.14); --ds-info: var(--ds-blueprint-500); --ds-info-soft: var(--ds-brand-soft); /* Focus */ --ds-focus-ring: rgba(28, 90, 153, 0.45); /* Hatch (the signature) — diagonal poché from the logo */ --ds-hatch-line: rgba(21, 32, 43, 0.10); --ds-hatch: repeating-linear-gradient( 45deg, var(--ds-hatch-line) 0, var(--ds-hatch-line) 1px, transparent 1px, transparent 7px ); /* Shadows — restrained, like ink on paper */ --ds-shadow-sm: 0 1px 2px rgba(21, 32, 43, 0.06); --ds-shadow-md: 0 2px 4px rgba(21, 32, 43, 0.06), 0 6px 16px rgba(21, 32, 43, 0.06); --ds-shadow-lg: 0 12px 32px rgba(21, 32, 43, 0.14); /* ——— Typography ——— */ --ds-font-display: "Space Grotesk", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --ds-font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; --ds-text-2xs: 0.6875rem; /* 11 — title-block field labels */ --ds-text-xs: 0.75rem; /* 12 */ --ds-text-sm: 0.8125rem; /* 13 */ --ds-text-base: 0.9375rem; /* 15 — app body (dense) */ --ds-text-md: 1.0625rem; /* 17 */ --ds-text-lg: 1.25rem; /* 20 */ --ds-text-xl: 1.5rem; /* 24 */ --ds-text-2xl: 2rem; /* 32 */ --ds-text-3xl: 2.5rem; /* 40 */ --ds-text-display: 3.25rem;/* 52 — marketing hero */ --ds-leading-tight: 1.15; --ds-leading-snug: 1.35; --ds-leading-body: 1.55; --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold:600; --ds-weight-bold: 700; --ds-tracking-tight: -0.02em; --ds-tracking-normal: 0; --ds-tracking-wide: 0.08em; --ds-tracking-label: 0.12em; /* eyebrows / title-block labels */ /* ——— Spacing — 4px grid ——— */ --ds-space-1: 0.25rem; /* 4 */ --ds-space-2: 0.5rem; /* 8 */ --ds-space-3: 0.75rem; /* 12 */ --ds-space-4: 1rem; /* 16 */ --ds-space-5: 1.5rem; /* 24 */ --ds-space-6: 2rem; /* 32 */ --ds-space-7: 3rem; /* 48 */ --ds-space-8: 4rem; /* 64 */ --ds-space-9: 6rem; /* 96 */ /* ——— Line-weight hierarchy (the signature border system) ——— Border thickness encodes importance, like drafting pen weights. */ --ds-line-hair: 0.5px; /* dimension ticks, dense table rules */ --ds-line: 1px; /* standard object / card edge */ --ds-line-medium: 1.5px; /* emphasis / hover / focus edge */ --ds-line-heavy: 2px; /* section-cut / selected accent */ /* ——— Radii — small & crisp, like a drafting template ——— */ --ds-radius-xs: 2px; --ds-radius-sm: 3px; --ds-radius-md: 5px; --ds-radius-lg: 8px; --ds-radius-pill: 999px; /* ——— Motion ——— */ --ds-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ds-dur-fast: 120ms; --ds-dur: 200ms; /* ——— Layout ——— */ --ds-container: 1200px; --ds-container-narrow: 760px; --ds-topbar-h: 52px; --ds-statusbar-h: 28px; /* ——— Z-index scale ——— */ --ds-z-base: 1; --ds-z-sticky: 100; --ds-z-dropdown: 200; --ds-z-overlay: 300; --ds-z-modal: 400; --ds-z-toast: 500; color-scheme: light; } /* ---------------------------------------------------------------------------- 3 · TOKENS — SEMANTIC OVERRIDES (DARK / "Blueprint") White lines on navy — the page literally becomes a blueprint. ---------------------------------------------------------------------------- */ [data-theme="dark"] { --ds-bg: var(--ds-navy-900); --ds-surface: var(--ds-navy-800); --ds-surface-raised: var(--ds-navy-700); --ds-surface-sunken: #081320; --ds-text: #e7ecf1; --ds-text-secondary: #9fb1c2; --ds-text-muted: #6e8094; --ds-text-inverse: var(--ds-navy-900); --ds-border: rgba(231, 236, 241, 0.16); --ds-border-strong: rgba(231, 236, 241, 0.32); --ds-border-subtle: rgba(231, 236, 241, 0.08); --ds-brand: var(--ds-blueprint-300); --ds-brand-strong: #7db6ec; --ds-brand-soft: rgba(90, 160, 224, 0.16); --ds-on-brand: var(--ds-navy-900); --ds-danger: var(--ds-redline-400); --ds-danger-strong: #f07a62; --ds-danger-soft: rgba(226, 102, 78, 0.16); --ds-success: var(--ds-green-400); --ds-success-soft: rgba(79, 176, 126, 0.16); --ds-warning: var(--ds-amber-400); --ds-warning-soft: rgba(217, 163, 60, 0.16); --ds-info: var(--ds-blueprint-300); --ds-info-soft: var(--ds-brand-soft); --ds-focus-ring: rgba(90, 160, 224, 0.55); --ds-hatch-line: rgba(231, 236, 241, 0.10); --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --ds-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35); --ds-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50); color-scheme: dark; } /* ---------------------------------------------------------------------------- 4 · BASE / RESET ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-body); font-size: var(--ds-text-base); line-height: var(--ds-leading-body); font-feature-settings: "tnum" 1, "cv05" 1; /* tabular figures for data */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--ds-font-display); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); margin: 0 0 var(--ds-space-3); color: var(--ds-text); } h1 { font-size: var(--ds-text-2xl); } h2 { font-size: var(--ds-text-xl); } h3 { font-size: var(--ds-text-lg); } h4 { font-size: var(--ds-text-md); letter-spacing: var(--ds-tracking-normal); } p { margin: 0 0 var(--ds-space-4); } a { color: var(--ds-brand); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; } code, kbd, samp, pre { font-family: var(--ds-font-mono); font-size: 0.92em; } hr { border: 0; border-top: var(--ds-line) solid var(--ds-border); margin: var(--ds-space-5) 0; } ::selection { background: var(--ds-brand-soft); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: var(--ds-line-medium) solid var(--ds-brand); outline-offset: 2px; border-radius: var(--ds-radius-xs); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---------------------------------------------------------------------------- 5 · TYPOGRAPHY HELPERS ---------------------------------------------------------------------------- */ .ds-eyebrow { font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); } .ds-display { font-family: var(--ds-font-display); font-size: clamp(2.25rem, 6vw, var(--ds-text-display)); font-weight: var(--ds-weight-bold); line-height: 1.05; letter-spacing: var(--ds-tracking-tight); } .ds-lede { font-size: var(--ds-text-md); color: var(--ds-text-secondary); } .ds-mono { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; } .ds-muted { color: var(--ds-text-muted); } /* Data value — for areas, rates, quantities, coordinates */ .ds-value { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ds-weight-medium); letter-spacing: -0.01em; } /* ---------------------------------------------------------------------------- 6 · LAYOUT PRIMITIVES ---------------------------------------------------------------------------- */ .ds-container { max-width: var(--ds-container); margin-inline: auto; padding-inline: var(--ds-space-5); } .ds-container--narrow { max-width: var(--ds-container-narrow); } .ds-stack > * + * { margin-top: var(--ds-space-4); } .ds-stack-sm > * + * { margin-top: var(--ds-space-2); } .ds-stack-lg > * + * { margin-top: var(--ds-space-6); } .ds-cluster { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); align-items: center; } .ds-cluster--between { justify-content: space-between; } .ds-grid { display: grid; gap: var(--ds-space-5); } .ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .ds-divider { border-top: var(--ds-line) solid var(--ds-border); } .ds-divider--hair { border-top-width: var(--ds-line-hair); } /* The signature hatch as a usable surface */ .ds-hatch { background-image: var(--ds-hatch); } /* ---------------------------------------------------------------------------- 7 · APP SHELL — shared chrome for every tool topbar (title block) · toolbar · body · panel (inspector) · statusbar ---------------------------------------------------------------------------- */ .ds-app { display: grid; grid-template-rows: var(--ds-topbar-h) 1fr var(--ds-statusbar-h); height: 100vh; height: 100dvh; } .ds-topbar { display: flex; align-items: center; gap: var(--ds-space-4); padding-inline: var(--ds-space-4); background: var(--ds-surface-raised); border-bottom: var(--ds-line) solid var(--ds-border-strong); z-index: var(--ds-z-sticky); } .ds-brand { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-brand img, .ds-brand svg { height: 22px; width: auto; display: block; } .ds-topbar__sep { width: var(--ds-line); align-self: stretch; margin-block: var(--ds-space-2); background: var(--ds-border); } .ds-toolname { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; color: var(--ds-text-secondary); } .ds-topbar__spacer { flex: 1; } .ds-toolbar { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); background: var(--ds-surface); border-bottom: var(--ds-line) solid var(--ds-border); } .ds-app__body { min-height: 0; overflow: auto; } .ds-panel { background: var(--ds-surface); border-left: var(--ds-line) solid var(--ds-border); padding: var(--ds-space-4); } .ds-panel__title { font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); margin-bottom: var(--ds-space-3); } /* Status bar — borrows the title-block idea: small mono fields */ .ds-statusbar { display: flex; align-items: center; gap: var(--ds-space-4); padding-inline: var(--ds-space-3); background: var(--ds-surface-raised); border-top: var(--ds-line) solid var(--ds-border-strong); font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); color: var(--ds-text-muted); } .ds-statusbar__field { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .ds-statusbar__field b { color: var(--ds-text-secondary); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; } /* ---------------------------------------------------------------------------- 7B · BRAND / LOGO The DSYNTEC mark (D-monogram) and wordmark. Both ship as currentColor SVGs (logo/dsyntec-mark.svg, logo/dsyntec-wordmark.svg) so the logo inherits the theme like everything else: ink on paper (light), white on navy (dark). Two ways to place it: · Inline the in markup → currentColor just works. Preferred. · Reference the .svg file → use .ds-logo--mask so it still recolors. Either way, size with --ds-logo-h and tint by setting `color` (e.g. add .ds-logo--brand for the blueprint accent). ---------------------------------------------------------------------------- */ .ds-logo { --ds-logo-h: 20px; display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-text); line-height: 0; } .ds-logo svg, .ds-logo img { height: var(--ds-logo-h); width: auto; display: block; } .ds-logo svg { fill: currentColor; } /* inline SVG inherits the theme color */ /* Size modifiers */ .ds-logo--sm { --ds-logo-h: 16px; } .ds-logo--lg { --ds-logo-h: 28px; } .ds-logo--xl { --ds-logo-h: 40px; } /* Tint modifiers */ .ds-logo--brand { color: var(--ds-brand); } .ds-logo--muted { color: var(--ds-text-muted); } .ds-logo--inverse { color: var(--ds-text-inverse); } /* Mask variant — recolors an EXTERNAL .svg file with the current `color`. Point --ds-logo-src at the asset; the mark and wordmark differ only in ratio. */ .ds-logo--mask { display: inline-block; height: var(--ds-logo-h); aspect-ratio: 124.8 / 22.56; /* wordmark proportions */ background-color: currentColor; -webkit-mask: var(--ds-logo-src) center / contain no-repeat; mask: var(--ds-logo-src) center / contain no-repeat; } .ds-logo--mask.ds-logo--mark { aspect-ratio: 28.32 / 31.2; } /* monogram proportions */ /* Mark + wordmark lockup — monogram, hairline rule, wordmark, like a title block */ .ds-logo--lockup { gap: var(--ds-space-3); } .ds-logo--lockup .ds-logo__rule { align-self: stretch; width: var(--ds-line); margin-block: 2px; background: var(--ds-border-strong); } /* ---------------------------------------------------------------------------- 8 · BUTTONS ---------------------------------------------------------------------------- */ .ds-btn { --_bg: var(--ds-surface-raised); --_fg: var(--ds-text); --_bd: var(--ds-border-strong); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); font-family: var(--ds-font-body); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); line-height: 1; padding: 0.5rem 0.85rem; min-height: 34px; color: var(--_fg); background: var(--_bg); border: var(--ds-line) solid var(--_bd); border-radius: var(--ds-radius-sm); cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); white-space: nowrap; user-select: none; } .ds-btn:hover { border-color: var(--ds-text-muted); } .ds-btn:active { transform: translateY(0.5px); } .ds-btn:disabled { opacity: 0.5; cursor: not-allowed; } .ds-btn--primary { --_bg: var(--ds-brand); --_fg: var(--ds-on-brand); --_bd: var(--ds-brand); } .ds-btn--primary:hover { --_bg: var(--ds-brand-strong); border-color: var(--ds-brand-strong); } .ds-btn--danger { --_bg: var(--ds-danger); --_fg: var(--ds-on-brand); --_bd: var(--ds-danger); } .ds-btn--danger:hover { --_bg: var(--ds-danger-strong); border-color: var(--ds-danger-strong); } .ds-btn--ghost { --_bg: transparent; --_bd: transparent; } .ds-btn--ghost:hover { --_bg: var(--ds-brand-soft); border-color: transparent; } .ds-btn--sm { min-height: 28px; padding: 0.3rem 0.6rem; font-size: var(--ds-text-xs); } .ds-btn--lg { min-height: 42px; padding: 0.65rem 1.2rem; font-size: var(--ds-text-base); } .ds-btn--icon { padding: 0; width: 34px; min-height: 34px; } .ds-btn--block { width: 100%; } /* Segmented control / button group (e.g. Board · Gantt · Table toggles) */ .ds-segment { display: inline-flex; border: var(--ds-line) solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); overflow: hidden; } .ds-segment > button { appearance: none; border: 0; background: var(--ds-surface-raised); color: var(--ds-text-secondary); font-family: var(--ds-font-body); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); padding: 0.4rem 0.7rem; cursor: pointer; border-left: var(--ds-line) solid var(--ds-border); } .ds-segment > button:first-child { border-left: 0; } .ds-segment > button[aria-pressed="true"], .ds-segment > button.is-active { background: var(--ds-brand-soft); color: var(--ds-brand); } /* ---------------------------------------------------------------------------- 9 · FORMS ---------------------------------------------------------------------------- */ .ds-field { display: flex; flex-direction: column; gap: var(--ds-space-1); } .ds-label { font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); color: var(--ds-text-secondary); } .ds-label--req::after { content: " *"; color: var(--ds-danger); } .ds-input, .ds-select, .ds-textarea { font-family: var(--ds-font-body); font-size: var(--ds-text-sm); color: var(--ds-text); background: var(--ds-surface-raised); border: var(--ds-line) solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); padding: 0.5rem 0.65rem; width: 100%; transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease); } .ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-muted); } .ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; border-color: var(--ds-brand); box-shadow: 0 0 0 3px var(--ds-focus-ring); } .ds-textarea { resize: vertical; min-height: 80px; line-height: var(--ds-leading-snug); } /* Numeric / data inputs use mono for alignment */ .ds-input--data { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; } .ds-input[aria-invalid="true"], .ds-input.is-invalid { border-color: var(--ds-danger); box-shadow: 0 0 0 3px var(--ds-danger-soft); } .ds-help { font-size: var(--ds-text-xs); color: var(--ds-text-muted); } .ds-error { font-size: var(--ds-text-xs); color: var(--ds-danger); } .ds-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) center, calc(100% - 11px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; } /* Check / radio + switch */ .ds-check { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-size: var(--ds-text-sm); cursor: pointer; } .ds-check input { accent-color: var(--ds-brand); width: 16px; height: 16px; } .ds-switch { position: relative; display: inline-flex; align-items: center; gap: var(--ds-space-2); cursor: pointer; font-size: var(--ds-text-sm); } .ds-switch input { position: absolute; opacity: 0; } .ds-switch__track { width: 36px; height: 20px; border-radius: var(--ds-radius-pill); background: var(--ds-surface-sunken); border: var(--ds-line) solid var(--ds-border-strong); position: relative; transition: background var(--ds-dur) var(--ds-ease); } .ds-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-sm); transition: transform var(--ds-dur) var(--ds-ease); } .ds-switch input:checked + .ds-switch__track { background: var(--ds-brand); border-color: var(--ds-brand); } .ds-switch input:checked + .ds-switch__track::after { transform: translateX(16px); } /* ---------------------------------------------------------------------------- 10 · CARDS (with title-block footer variant) ---------------------------------------------------------------------------- */ .ds-card { background: var(--ds-surface-raised); border: var(--ds-line) solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; } .ds-card__body { padding: var(--ds-space-5); } .ds-card__header { padding: var(--ds-space-4) var(--ds-space-5); border-bottom: var(--ds-line) solid var(--ds-border); } .ds-card__footer { padding: var(--ds-space-3) var(--ds-space-5); border-top: var(--ds-line) solid var(--ds-border); background: var(--ds-surface); } /* Interactive tool card (homepage grid) */ .ds-card--link { display: block; color: inherit; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); } .ds-card--link:hover { border-color: var(--ds-brand); box-shadow: var(--ds-shadow-md); transform: translateY(-2px); text-decoration: none; } /* Title block — a real drawing's metadata grid (label over value, mono) */ .ds-titleblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); border-top: var(--ds-line-medium) solid var(--ds-border-strong); } .ds-titleblock__cell { padding: var(--ds-space-2) var(--ds-space-3); border-left: var(--ds-line) solid var(--ds-border); } .ds-titleblock__cell:first-child { border-left: 0; } .ds-titleblock__label { display: block; font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); } .ds-titleblock__value { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; color: var(--ds-text); } /* ---------------------------------------------------------------------------- 11 · BADGES / TAGS (the "Free · Beta" pills + capability chips) ---------------------------------------------------------------------------- */ .ds-badge { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); font-weight: var(--ds-weight-medium); letter-spacing: var(--ds-tracking-wide); text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: var(--ds-radius-xs); border: var(--ds-line) solid var(--ds-border); color: var(--ds-text-secondary); background: var(--ds-surface); } .ds-badge--brand { color: var(--ds-brand); background: var(--ds-brand-soft); border-color: transparent; } .ds-badge--success { color: var(--ds-success); background: var(--ds-success-soft); border-color: transparent; } .ds-badge--warning { color: var(--ds-warning); background: var(--ds-warning-soft); border-color: transparent; } .ds-badge--danger { color: var(--ds-danger); background: var(--ds-danger-soft); border-color: transparent; } /* Plain capability chip (no uppercase) — for feature tags */ .ds-chip { display: inline-flex; align-items: center; font-size: var(--ds-text-xs); color: var(--ds-text-secondary); padding: 0.15rem 0.5rem; border-radius: var(--ds-radius-pill); border: var(--ds-line) solid var(--ds-border); background: var(--ds-surface); } /* ---------------------------------------------------------------------------- 12 · TABS ---------------------------------------------------------------------------- */ .ds-tabs { display: flex; gap: var(--ds-space-1); border-bottom: var(--ds-line) solid var(--ds-border); } .ds-tab { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--ds-font-body); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium); color: var(--ds-text-muted); padding: var(--ds-space-2) var(--ds-space-3); border-bottom: var(--ds-line-heavy) solid transparent; margin-bottom: -1px; } .ds-tab:hover { color: var(--ds-text); } .ds-tab[aria-selected="true"], .ds-tab.is-active { color: var(--ds-brand); border-bottom-color: var(--ds-brand); } /* ---------------------------------------------------------------------------- 13 · TABLES (data / BOQ — mono numerals, zebra, dense) ---------------------------------------------------------------------------- */ .ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); } .ds-table th, .ds-table td { padding: var(--ds-space-2) var(--ds-space-3); text-align: left; border-bottom: var(--ds-line-hair) solid var(--ds-border); } .ds-table thead th { font-family: var(--ds-font-mono); font-size: var(--ds-text-2xs); letter-spacing: var(--ds-tracking-label); text-transform: uppercase; color: var(--ds-text-muted); font-weight: var(--ds-weight-medium); border-bottom: var(--ds-line) solid var(--ds-border-strong); position: sticky; top: 0; background: var(--ds-surface); } .ds-table td.ds-num, .ds-table th.ds-num { text-align: right; font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; } .ds-table tbody tr:hover { background: var(--ds-brand-soft); } .ds-table--zebra tbody tr:nth-child(even) { background: var(--ds-surface); } .ds-table tfoot td { font-family: var(--ds-font-mono); font-weight: var(--ds-weight-semibold); border-top: var(--ds-line-medium) solid var(--ds-border-strong); border-bottom: 0; } /* ---------------------------------------------------------------------------- 14 · NOTICES / ALERTS (errors speak in the interface's voice) ---------------------------------------------------------------------------- */ .ds-notice { display: flex; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: var(--ds-line) solid var(--ds-border); border-left: var(--ds-line-heavy) solid var(--ds-text-muted); border-radius: var(--ds-radius-sm); background: var(--ds-surface); font-size: var(--ds-text-sm); } .ds-notice--info { border-left-color: var(--ds-info); background: var(--ds-info-soft); } .ds-notice--success { border-left-color: var(--ds-success); background: var(--ds-success-soft); } .ds-notice--warning { border-left-color: var(--ds-warning); background: var(--ds-warning-soft); } .ds-notice--danger { border-left-color: var(--ds-danger); background: var(--ds-danger-soft); } .ds-notice__title { font-weight: var(--ds-weight-semibold); margin-bottom: var(--ds-space-1); } /* ---------------------------------------------------------------------------- 15 · DIALOG / MODAL ---------------------------------------------------------------------------- */ .ds-backdrop { position: fixed; inset: 0; z-index: var(--ds-z-modal); background: rgba(12, 26, 43, 0.55); display: grid; place-items: center; padding: var(--ds-space-4); } .ds-dialog { background: var(--ds-surface-raised); border: var(--ds-line) solid var(--ds-border-strong); border-top: var(--ds-line-heavy) solid var(--ds-brand); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-lg); width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; } .ds-dialog__header { padding: var(--ds-space-4) var(--ds-space-5); border-bottom: var(--ds-line) solid var(--ds-border); } .ds-dialog__header h3 { margin: 0; } .ds-dialog__body { padding: var(--ds-space-5); } .ds-dialog__footer { padding: var(--ds-space-3) var(--ds-space-5); border-top: var(--ds-line) solid var(--ds-border); display: flex; justify-content: flex-end; gap: var(--ds-space-2); } /* ---------------------------------------------------------------------------- 16 · EMPTY STATE (an invitation to act — uses the hatch signature) ---------------------------------------------------------------------------- */ .ds-empty { display: grid; place-items: center; gap: var(--ds-space-3); text-align: center; padding: var(--ds-space-8) var(--ds-space-5); border: var(--ds-line-medium) dashed var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-hatch), var(--ds-surface); color: var(--ds-text-secondary); } .ds-empty__title { font-family: var(--ds-font-display); font-size: var(--ds-text-lg); color: var(--ds-text); } /* ---------------------------------------------------------------------------- 17 · UTILITIES (small, sparing) ---------------------------------------------------------------------------- */ .ds-hidden { display: none !important; } .ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ds-flex-1 { flex: 1; } .ds-text-center { text-align: center; }