106 lines
6.0 KiB
CSS
106 lines
6.0 KiB
CSS
/* CluPilot design tokens — one set for every surface.
|
|
*
|
|
* Light, confident, one warm accent. The public site, the customer portal and
|
|
* the operator console draw from this file and differ only in density: same
|
|
* colours, same radii, same button hierarchy, same status vocabulary. A
|
|
* customer who signs in must not feel handed to a different product, and an
|
|
* operator switching between the two should not have to relearn anything.
|
|
*
|
|
* Framework-neutral custom properties (work in Tailwind v3 or v4). Contrast
|
|
* ratios are noted where they were the reason for the value.
|
|
*/
|
|
:root {
|
|
/* ── Surfaces ─────────────────────────────────────────────────────────
|
|
The ground is a shade darker than the cards, so a card lifts off the
|
|
page without a shadow doing the work. */
|
|
--bg: #f6f6f8;
|
|
--surface: #ffffff;
|
|
--surface-2: #fafafb;
|
|
--surface-hover: #f2f2f5;
|
|
|
|
/* Lines carry the structure. Depth is used sparingly and warmly. */
|
|
--border: #e9e9ee;
|
|
--border-strong: #dcdce4;
|
|
|
|
/* ── Text ─────────────────────────────────────────────────────────────
|
|
Near-black rather than pure black: on a light ground pure black reads
|
|
as a printing error, not as emphasis. */
|
|
--text-strong: #17171c; /* headings — 16.4:1 on white */
|
|
--text: #43434e; /* body — 9.8:1 */
|
|
--text-muted: #6e6e7a; /* secondary copy — 5.0:1, AA for body text */
|
|
--text-faint: #b4b4be; /* decoration only: rules, placeholder glyphs */
|
|
|
|
/* ── Accent ───────────────────────────────────────────────────────────
|
|
Orange appears in FEW places, but one of them is allowed to be large —
|
|
a whole closing panel. Frequency low, area high; the reverse reads as
|
|
editorial annotation rather than as brand. */
|
|
--accent: #f97316; /* rings, bars, chart strokes, the logo mark */
|
|
--accent-hover: #d95f0c;
|
|
--accent-active: #b8500a; /* solid fills and text — 5.0:1 with white */
|
|
--accent-press: #974208;
|
|
--accent-subtle: #fff3e9;
|
|
--accent-border: #e8cdb2;
|
|
--accent-ring: rgba(249, 115, 22, .38);
|
|
--on-accent: #ffffff;
|
|
/* #f97316 as TEXT on white is only 2.9:1, so anything read uses the
|
|
darker tone. This is the single most common way the palette gets
|
|
broken, which is why the two have different names. */
|
|
--accent-text: #b8500a;
|
|
|
|
/* ── Ink fields ───────────────────────────────────────────────────────
|
|
The dark surfaces: the site's contrast bands, the sign-in panel, the
|
|
operator sidebar. Neutral-warm, never pure black. */
|
|
--plate: #16151b;
|
|
--plate-2: #201f27;
|
|
--plate-rule: #33323d;
|
|
--plate-text: #c9c7d2;
|
|
--plate-muted: #918f9d; /* 4.6:1 on --plate */
|
|
|
|
/* ── Status ───────────────────────────────────────────────────────────
|
|
Independent of the brand. Amber must keep meaning "this needs you", so
|
|
"scheduled" and "informational" are blue — next to an orange brand the
|
|
two are otherwise indistinguishable. */
|
|
--success: #1c7c50; --success-bg: #eaf6f0; --success-border: #c3e3d3;
|
|
--success-bright: #30b15c; /* dots, rings and charts — never small text */
|
|
--warning: #9a5b0b; --warning-bg: #fdf4e7; --warning-border: #eed9b3;
|
|
--danger: #a8302a; --danger-bg: #fbeeed; --danger-border: #eec9c6;
|
|
--info: #1e5aa8; --info-bg: #eef4fa; --info-border: #c3d6ea;
|
|
|
|
/* ── Type ─────────────────────────────────────────────────────────────
|
|
One family, used assertively. Mono is for operational data only —
|
|
storage, dates, addresses, versions, invoice figures — where tabular
|
|
figures let a column of numbers line up. Never for headings. */
|
|
--font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
|
|
/* Kept for compatibility; the display voice is now the sans at weight 700.
|
|
A serif headline made every page read as a document. */
|
|
--font-serif: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
|
|
|
|
--text-xs: 12px; --text-sm: 13px; --text-base: 14.5px; --text-md: 16px;
|
|
--text-lg: 18px; --text-xl: 22px; --text-2xl: 30px; --text-3xl: 40px;
|
|
|
|
--lh-tight: 1.12; --lh-normal: 1.55;
|
|
--tracking-tight: -0.03em;
|
|
--tracking-label: 0.07em;
|
|
|
|
/* ── Radius ───────────────────────────────────────────────────────────
|
|
Scaled to object size. One value everywhere is what makes an interface
|
|
read as a design-system specification rather than as a product. */
|
|
--radius-sm: 9px; /* chips, small controls */
|
|
--radius: 11px; /* buttons, inputs */
|
|
--radius-lg: 16px; /* cards */
|
|
--radius-xl: 22px; /* full-width panels, product frames */
|
|
--radius-pill: 999px;
|
|
|
|
/* Warm, broad and low — a neutral grey drop shadow belongs to a different
|
|
design language and reads as cold against this ground. */
|
|
--shadow-xs: 0 1px 2px rgba(40, 24, 15, .04);
|
|
--shadow-sm: 0 2px 6px rgba(40, 24, 15, .06);
|
|
--shadow-md: 0 16px 44px -18px rgba(40, 24, 15, .20);
|
|
|
|
--dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms;
|
|
--ease: cubic-bezier(.2, .7, .2, 1);
|
|
|
|
--focus-ring: 0 0 0 3px var(--accent-ring);
|
|
}
|