/* ============================================================ Ava — design tokens ------------------------------------------------------------ The UI follows ubos-dms / Manager: same structure, same proportions, same component standards. What changes is the palette — royal blue, navy and metallic gold. ubos-dms expresses this system through Tailwind. Ava has no build step (docs/PRODUCT_PRINCIPLES.md §1), so the same system is expressed as custom properties and one hand-written stylesheet. The step numbers are deliberately identical: --royal-600 here is the same role as bg-primary-600 there, so a screen can be ported between the two products by reading the class name. Every colour pairing that ships was measured, not eyeballed — tests/test_design_tokens.py re-measures them on every run. ============================================================ */ /* ---- Fonts, served locally ---- Not from Google Fonts: Ava has to work on a LAN with no internet. Only the latin subset, only the weights actually used. See app/static/fonts/LICENSE.txt. font-display:swap so a slow disk shows Inter's fallback rather than invisible text. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-500.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-700.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/poppins-600.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/poppins-700.woff2") format("woff2"); } :root { /* ============================================================ THE BRAND PALETTE, as supplied. These six are the source of truth; everything below is derived from them, never instead of them. --primary #0A4DA2 --primary-dark #08306B --accent #C9A227 --accent-dark #A57C00 --bg #F6F8FB --surface #FFFFFF --text #1B2430 --text-secondary #5B6575 --border #D9E1EC The scales exist because a palette needs more than one step per colour to build an interface: a hover state, a tint behind a badge, a ring at 30% — none of which can be expressed with a single hex. Each scale is anchored so the supplied value keeps its exact place rather than being approximated. ============================================================ */ /* ---- Royal blue: the accent ---- Buttons, links, the selected nav item, focus rings. 600 IS --primary and 800 IS --primary-dark, unchanged. White on 600 measures 8.09:1. */ --royal-50: #eef5fe; --royal-100: #dbeafd; --royal-200: #b9d6fb; --royal-300: #89baf8; --royal-400: #4b95f4; --royal-500: #0e6ee7; --royal-600: #0a4da2; /* --primary, as supplied */ --royal-700: #073876; --royal-800: #08306b; /* --primary-dark, as supplied */ --royal-900: #041f41; --royal-950: #031329; /* ---- Navy: the chrome ---- Sidebar, print headers, the login panel. 950 is the same navy ubos-dms already ships (#0B132A), so the two products' dark surfaces match when they sit side by side on a desk. */ --navy-50: #f2f5fa; --navy-100: #e2e8f2; --navy-200: #c5d0e4; --navy-300: #9baecd; --navy-400: #6b84ae; --navy-500: #4a6491; --navy-600: #3a5079; --navy-700: #304062; --navy-800: #243150; --navy-900: #16203c; --navy-950: #0b132a; /* ---- Metallic gold: ornament, and ornament only ---- Gold belongs on a line, an edge, a ring, or a short label on a dark ground. It does not belong in a table, a form, a report or anything somebody works in: an operator entering two hundred lines a day needs calm ground and clear figures, and gold behind data makes the eye read the decoration instead of the number. --accent #C9A227 IS --gold-line and --accent-dark #A57C00 IS --gold-line-strong, both exactly as supplied. --gold-ink is the lighter step the dark grounds need, because #C9A227 as small text on navy passes as a graphical object and fails as text. Three values because the ground decides which is legal: --gold-ink #E7C97A 11.4:1 on navy 1.6:1 on white --gold-line #C9A227 7.6:1 on navy 2.4:1 on white --gold-line-strong #A57C00 4.7:1 on navy 3.8:1 on white So ink and line are for DARK grounds only. On white they are decoration and nothing else — WCAG asks 3:1 of a graphical object that carries meaning and nothing of a purely decorative one, and 2.4:1 is below that bar. When gold has to sit on a light ground AND mean something, --gold-line-strong is the one that clears it. */ --gold-ink: #e7c97a; --gold-line: #c9a227; /* --accent, as supplied */ --gold-line-strong: #a57c00; /* --accent-dark, as supplied */ /* A lit-metal edge rather than flat paint. Used on the login panel and print headers, never behind data. */ --gold-gradient: linear-gradient( 100deg, #a5831c 0%, #d9b450 22%, #f0dda6 42%, #d9b450 62%, #a5831c 100% ); /* ---- Rose: the secondary accent, a deep sweet pink ---- Unlike gold, rose is legible on both grounds and may therefore carry meaning: rose-600 #C2185B white text on it 5.9:1 rose-700 #9D1249 as text on white 8.0:1 rose-400 #F8609B as text on navy 6.3:1 rose-300 #FF94BC as a line on navy 9.0:1 That is the whole difference between the two warm colours, and it decides where each is allowed: gold may only decorate, rose may label. What rose is NOT: a status colour. Green, amber and red already mean posted / pending / rejected across both this product and ubos-dms, and a fourth warm colour in that family would be read as a fourth state. Rose is brand, highlight and emphasis — never "something happened". Nor is it a second button colour. One accent owns actions, and that is royal blue; two competing call-to-action colours on one screen leaves the user guessing which is the real one. */ --rose-50: #fff1f6; --rose-100: #ffe0ec; --rose-200: #ffc2d9; --rose-300: #ff94bc; --rose-400: #f8609b; --rose-500: #e63a7e; --rose-600: #c2185b; --rose-700: #9d1249; --rose-800: #7d0f3b; --rose-900: #650d31; --rose-950: #3d0619; /* The two registers of pink, named so a screen picks the right one without re-deriving the contrast table. "Sweet" is the candy pink — soft, warm, and the reason pink is in this palette at all. It is bright, so it lives on dark grounds and in tints, never as text on white. "Ink" is the deep pink — it is what pink looks like when it has to be read. */ --rose-sweet: var(--rose-300); /* 9.0:1 on navy — ornament, lines */ --rose-sweet-soft: var(--rose-200); /* softer still, dark grounds only */ --rose-tint: var(--rose-50); /* a pink wash behind a light panel */ --rose-tint-edge: var(--rose-200); /* the border that tint needs */ --rose-ink: var(--rose-700); /* 8.0:1 on white — readable pink */ --rose-solid: var(--rose-600); /* 5.9:1 with white on it — a filled chip */ /* Gold into sweet pink — the brand's own gradient, for the login panel, the wordmark rule and print headers. Ornament, so it never sits behind figures. The pink end is the sweet one deliberately: a gradient that ends in the deep pink reads as a warning stripe, which is the opposite of the intent. */ --brand-gradient: linear-gradient( 100deg, #a5831c 0%, #d9b450 20%, #f0dda6 38%, #ffc2d9 62%, #ff94bc 80%, #f8609b 100% ); /* A soft sweet wash for empty states and the login card's inner glow — pink at low strength over the page, never over data. */ --sweet-wash: radial-gradient( 120% 90% at 82% 8%, rgb(255 148 188 / 0.20) 0%, rgb(255 194 217 / 0.10) 38%, rgb(255 255 255 / 0) 70% ); /* ---- Neutrals ---- 300 IS --border and 500 IS --text-secondary and 900 IS --text, all as supplied. The rest fill the gaps an interface needs. */ --gray-50: #f9fbfd; --gray-100: #f1f5f9; --gray-200: #e6ecf3; --gray-300: #d9e1ec; /* --border, as supplied */ --gray-400: #9aa5b5; --gray-500: #5b6575; /* --text-secondary, as supplied — 5.89:1 on white */ --gray-600: #46505f; --gray-700: #333c49; --gray-800: #252d38; --gray-900: #1b2430; /* --text, as supplied — 15.65:1 on white */ /* ---- Status ---- Roles, not brand colours. Deliberately the same hues ubos-dms uses (emerald / amber / red / sky) — a green that means "posted" should not change meaning between two products the same people use on the same day. */ /* The supplied status colours are the BRAND values, and three of them cannot carry white text: --success #16A34A white on it 3.30:1 --warning #F59E0B white on it 2.15:1 --info #0EA5E9 white on it 2.77:1 That is not a fault in the palette — it is the same lesson as the gold. A colour can be exactly right as a brand mark and wrong for one particular job, and the answer is another step, not a different brand colour. So --*-brand keeps the supplied value for anywhere it is the subject (a chart series, a dot, an icon), --*-600 is the darkest step that still carries white text on a filled button, and --*-50 / --*-700 are the tint and ink a badge needs. */ --success-brand: #16a34a; /* as supplied */ --success-50: #ecfbf2; --success-600: #149242; --success-700: #0f7334; --warning-brand: #f59e0b; /* as supplied */ --warning-50: #fdf6eb; --warning-600: #9f6607; --warning-700: #7d5005; --danger-brand: #dc2626; /* as supplied — already clears white at 4.83:1 */ --danger-50: #fbecec; --danger-600: #dc2626; --danger-700: #701212; --info-brand: #0ea5e9; /* as supplied */ --info-50: #ebf7fc; --info-600: #096f9c; --info-700: #07577b; /* ---- Semantic surfaces ---- --bg, --surface, --border, --text and --text-secondary as supplied, aliased to the names the stylesheet uses. Both names work: --border is the brand's word for it, --border-strong is the step up that an input outline needs to be visible against a card. */ --page-bg: #f6f8fb; /* --bg, as supplied */ --surface: #ffffff; /* --surface, as supplied */ --surface-sunken: var(--gray-50); --border: #d9e1ec; /* --border, as supplied */ --border-strong: var(--gray-400); --ink: var(--gray-900); /* --text */ --ink-muted: var(--gray-500); /* --text-secondary */ --ink-inverse: #ffffff; /* The supplied names, kept as aliases so a stylesheet or a snippet written against the brand sheet works unchanged. */ --primary: var(--royal-600); --primary-dark: var(--royal-800); --accent: var(--gold-line); --accent-dark: var(--gold-line-strong); --bg: var(--page-bg); --text: var(--ink); --text-secondary: var(--ink-muted); --success: var(--success-brand); --warning: var(--warning-brand); --danger: var(--danger-brand); --info: var(--info-brand); /* ---- Type ---- 14px base, 13px tables — same as ubos-dms. Poppins on headings only; it costs width and legibility at 13px, which is what most of an ERP is. */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif; --text-base: 14px; --text-table: 13px; --text-sm: 12px; --text-title-sm: 18px; --text-title-lg: 28px; /* ---- Metrics ---- --control is the one that matters: a button beside an input lines up exactly only if both are the same height. ubos-dms learned this the hard way with px-4 py-2 / py-1.5. */ --control: 40px; --touch: 44px; /* minimum tap target, docs/RESPONSIVE_SPEC.md §5 */ /* As supplied: sm 8 / md 12 / lg 16. --radius and --radius-card are the names the stylesheet already uses for the first two. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius: var(--radius-sm); --radius-card: var(--radius-md); --radius-pill: 999px; --space-section: 24px; --sidebar-w: 248px; --sidebar-rail: 68px; --topbar-h: 56px; --shadow-soft: 0 1px 3px 0 rgb(11 19 42 / 0.07), 0 1px 2px -1px rgb(11 19 42 / 0.07); --shadow-soft-lg: 0 4px 14px 0 rgb(11 19 42 / 0.1); --shadow-panel: 0 18px 45px -12px rgb(11 19 42 / 0.45); /* rgb of --primary #0A4DA2 at 28% — the focus ring has to track the accent, and a ring left on the old blue is the kind of thing nobody sees until they tab through a form. */ --ring: 0 0 0 3px rgb(10 77 162 / 0.30); } /* ============================================================ Dark mode — Master Plan §20 ------------------------------------------------------------ Only the SEMANTIC tokens are re-pointed; the scales stay put. That is the whole reason for having two layers: one block flips the entire application, and a screen written next year is dark-ready without anybody remembering to make it so. Two selectors, and the order matters: [data-theme="dark"] an explicit choice, from the toggle prefers-color-scheme the OS preference, when no choice was made The :not([data-theme="light"]) guard is what lets somebody on a dark OS deliberately pick light and keep it. Accents are lightened rather than reused. royal-600 carries white text on a white page; on a dark ground it is the ground, and a link in it disappears — the dark theme needs royal-400. ============================================================ */ :root[data-theme="dark"], :root:not([data-theme="light"]) { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page-bg: #0d1424; --surface: #16203c; --surface-sunken: #111a30; --border: #24304f; --border-strong: #33415f; --ink: #e8ecf5; --ink-muted: #9aa8c2; --ink-inverse: #0b132a; --gray-50: #111a30; --gray-100: #1b2643; --gray-200: #24304f; --gray-300: #33415f; --gray-600: #b3bfd6; --gray-700: #cbd4e5; --royal-50: #0d2145; --royal-300: #4b95f4; --royal-600: #1a6fd4; --royal-700: #4b95f4; --royal-900: #dbeafd; --success-50: #0d2b22; --success-700: #6ee7b7; --warning-50: #2c2109; --warning-700: #fcd34d; --danger-50: #2d1416; --danger-700: #fca5a5; --info-50: #0a2432; --info-700: #7dd3fc; --shadow-soft: 0 1px 3px 0 rgb(0 0 0 / 0.4); --shadow-soft-lg: 0 4px 14px 0 rgb(0 0 0 / 0.5); } } :root[data-theme="dark"] { color-scheme: dark; --page-bg: #0d1424; --surface: #16203c; --surface-sunken: #111a30; --border: #24304f; --border-strong: #33415f; --ink: #e8ecf5; --ink-muted: #9aa8c2; --ink-inverse: #0b132a; --gray-50: #111a30; --gray-100: #1b2643; --gray-200: #24304f; --gray-300: #33415f; --gray-600: #b3bfd6; --gray-700: #cbd4e5; --royal-50: #0d2145; --royal-300: #4b95f4; --royal-600: #1a6fd4; --royal-700: #4b95f4; --royal-900: #dbeafd; --success-50: #0d2b22; --success-700: #6ee7b7; --warning-50: #2c2109; --warning-700: #fcd34d; --danger-50: #2d1416; --danger-700: #fca5a5; --info-50: #0a2432; --info-700: #7dd3fc; --shadow-soft: 0 1px 3px 0 rgb(0 0 0 / 0.4); --shadow-soft-lg: 0 4px 14px 0 rgb(0 0 0 / 0.5); }