/* ═══════════════════════════════════════════════════════════════════════ WORK MINT — DESIGN TOKENS Single source of truth for colour across the product and marketing site. Stack note: this codebase is Django + plain CSS, so tokens live as CSS custom properties rather than tailwind.config.js or a theme.ts. Same contract, same semantic names — a future migration to Tailwind can map these 1:1 into `theme.extend.colors`. RULE FOR ALL NEW MODULES: reference a semantic token (`var(--cta-bg)`), never a raw hex and never a primitive (`var(--mint-500)`) directly. Primitives are the palette; semantics are the contract. Changing a brand colour should mean editing this file only. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── 1. PRIMITIVES ─────────────────────────────────────────────────── Raw brand values. Do not reference these from components. */ /* Primary — Mint Crisp */ --mint-500: #3CD0A1; /* brand accent as specified */ --mint-600: #2FAE85; /* hover on filled mint surfaces */ --mint-700: #247C60; /* 5.09:1 on white — the only mint safe as TEXT */ --mint-050: #E6F9F3; /* Soft Mint Sky, as specified */ /* Deep Anchor — Slate / Ink */ --ink-900: #0B132B; /* deep anchor as specified */ --ink-800: #131C38; /* raised surfaces inside dark chrome */ --ink-700: #1C2647; /* borders/dividers on dark chrome */ /* Action Accent — Electric Violet */ --violet-500: #6366F1; /* action accent as specified */ --violet-600: #5E60E4; /* 4.92:1 with white — used when text sits on it */ --violet-700: #4F51C9; /* pressed / hover */ --violet-050: #EEEFFE; /* violet wash for subtle CTA-adjacent surfaces */ /* Neutrals */ --white: #FFFFFF; /* Pure Studio White — page canvas */ --charcoal-900: #1E293B; /* Typography Body, as specified */ --charcoal-700: #475569; --charcoal-500: #64748B; --charcoal-300: #CBD5E1; --charcoal-200: #E2E8F0; --charcoal-100: #F1F5F9; /* Status — deliberately outside the brand palette. Users read red as error and amber as warning; recolouring those to brand tones loses meaning. Mint doubles as the success tone per the brand spec. */ --success-500: #2FAE85; --success-bg: #E6F9F3; --success-text:#186B51; --danger-500: #DC2626; --danger-bg: #FEF2F2; --danger-text: #B91C1C; --warning-500: #F59E0B; --warning-bg: #FFFBEB; --warning-text:#92400E; --info-500: #6366F1; --info-bg: #EEEFFE; --info-text: #4338CA; /* ─── 2. SEMANTIC TOKENS ────────────────────────────────────────────── What components actually use. Named for job, not for colour. */ /* Brand */ --brand-primary: var(--mint-500); /* logo accent, active nav, success */ --brand-primary-hover:var(--mint-600); --brand-primary-text: var(--mint-700); /* mint AS TEXT on light — AA safe */ --brand-primary-tint: var(--mint-050); /* cards, row hover, soft accents */ /* Page & surfaces */ --bg-canvas: var(--white); /* application page background */ --bg-surface: var(--white); /* cards sit on canvas, bordered */ --bg-subtle: var(--mint-050); /* hover rows, highlighted panels */ --bg-muted: var(--charcoal-100); /* disabled fills, table headers */ --border-default: var(--charcoal-200); --border-strong: var(--charcoal-300); /* Dark chrome — sidebars, top bars, hero bands */ --chrome-bg: var(--ink-900); --chrome-bg-raised: var(--ink-800); --chrome-border: var(--ink-700); --chrome-text: rgba(255, 255, 255, .78); --chrome-text-muted:rgba(255, 255, 255, .55); --chrome-text-strong: var(--white); --chrome-active-bg: rgba(60, 208, 161, .16); /* mint wash behind active nav */ --chrome-active-fg: var(--mint-500); /* 9.39:1 on ink — AA safe */ /* Typography */ --text-primary: var(--charcoal-900); /* body copy, data cells */ --text-secondary: var(--charcoal-700); --text-muted: var(--charcoal-500); --text-on-dark: var(--white); --text-inverse: var(--white); --heading: var(--ink-900); /* Calls to action — violet is reserved for these, nothing else */ --cta-bg: var(--violet-600); /* darker step: white label needs 4.5:1 */ --cta-bg-hover: var(--violet-700); --cta-text: var(--white); --cta-ring: rgba(99, 102, 241, .28); --cta-quiet-bg: var(--violet-050); --cta-quiet-text:var(--info-text); /* Focus — a single visible ring everywhere, for keyboard users */ --focus-ring: 0 0 0 3px rgba(99, 102, 241, .38); /* Elevation */ --shadow-sm: 0 1px 2px rgba(11, 19, 43, .05), 0 1px 3px rgba(11, 19, 43, .07); --shadow: 0 4px 6px -1px rgba(11, 19, 43, .07), 0 12px 28px -6px rgba(11, 19, 43, .10); --shadow-lg: 0 24px 60px -12px rgba(11, 19, 43, .22); } /* ═══════════════════════════════════════════════════════════════════════ USAGE GUIDE FOR NEW MODULES ═══════════════════════════════════════════════════════════════════════ 1. NEVER hardcode a hex in a component or an inline style. WRONG
WRONG color: var(--mint-500); (primitive, not semantic) RIGHT color: var(--brand-primary-text); 2. PICK THE TOKEN BY JOB, NOT BY COLOUR. Active nav item on the dark sidebar -> --chrome-active-fg Primary submit button -> --cta-bg / --cta-text Table row hover -> --bg-subtle A number in a data cell -> --text-primary 3. MINT IS NOT A TEXT COLOUR ON LIGHT BACKGROUNDS. --brand-primary (#3CD0A1) is 1.96:1 on white and fails WCAG AA badly. Use it only as a FILL, or on dark chrome where it reaches 9.39:1. For mint-coloured text on white use --brand-primary-text (5.09:1). 4. VIOLET IS RESERVED FOR PRIMARY ACTIONS. If everything is a CTA, nothing is. One violet button per view. Secondary actions use --border-default with --text-primary. Note --cta-bg is the 600 step, not the 500: white text on #6366F1 is 4.47:1 and misses AA by a hair, so buttons use #5E60E4 (4.92:1). 5. STATUS COLOURS STAY OUTSIDE THE BRAND. Red means error, amber means warning — in every product a user has ever used. Do not brand them away. Success is the exception: it is mint by design. 6. ADDING A TOKEN? Add the primitive AND a semantic alias here, then reference only the alias. If a component needs a colour this file doesn't express, that is a signal the design system is missing a concept — resolve it here, not locally. ═══════════════════════════════════════════════════════════════════════ DEFERRED MODULES — theming applied, design review outstanding ═══════════════════════════════════════════════════════════════════════ These modules are inactive this sprint. The global sweep already made them token-compliant (no legacy colour survives anywhere in the codebase — leaving a screen on the old palette would look broken, not deferred), but none has had a design pass against the Work Mint theme. Each of their templates carries a DEFERRED MODULE banner explaining what is still owed. Search the repo for "DEFERRED MODULE" to find them. ┌──────────────────────┬──────────────────────────────┬───────────────┐ │ MODULE │ WHY DEFERRED │ TEMPLATES │ ├──────────────────────┼──────────────────────────────┼───────────────┤ │ Billing & │ Paused by product owner; │ 7 │ │ Subscriptions │ BILLING_ENABLED = False │ templates/ │ │ │ and all views 404 │ billing/ │ ├──────────────────────┼──────────────────────────────┼───────────────┤ │ Biometric Device │ No hardware on any │ 4 │ │ Sync │ deployment: 0 mappings, │ portal/hr/ │ │ │ 0 punches, 0 schedules │ device_*, │ │ │ │ sync_* │ ├──────────────────────┼──────────────────────────────┼───────────────┤ │ Policy Documents │ 0 documents uploaded; needs │ 2 │ │ │ real files + extraction │ portal/hr/ │ │ │ │ policy_doc* │ └──────────────────────┴──────────────────────────────┴───────────────┘ ACTIVATING A DEFERRED MODULE 1. Remove its DEFERRED MODULE banner from every template listed above. 2. Replace any remaining inline style with a semantic token from this file. Inline styles are the main debt in those files — the sweep recoloured them but did not restructure them. 3. Re-run the contrast check for any new foreground/background pair. Mint on white is the trap: 1.96:1, nowhere near AA. 4. Confirm exactly one --cta-bg element per view. .theme-pending is available if a module needs to ship visibly unfinished; it tints a block so it can't be mistaken for reviewed work. Remove it before release. TAILWIND / JS MIGRATION If the stack moves to Tailwind or a JS theme object later, mirror the semantic layer, not the primitives: // tailwind.config.js theme: { extend: { colors: { 'brand-primary' : 'var(--brand-primary)', 'brand-primary-text' : 'var(--brand-primary-text)', 'brand-tint' : 'var(--brand-primary-tint)', 'chrome' : 'var(--chrome-bg)', 'cta' : 'var(--cta-bg)', 'canvas' : 'var(--bg-canvas)', 'ink' : 'var(--text-primary)', }}} Components keep referring to `bg-cta` / `text-brand-primary-text`, so the swap is invisible to them. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ DEFERRED-MODULE UTILITY Opt-in marker for a block that must ship before its design review. Makes unreviewed work visually obvious so it can't be mistaken for finished. Remove the class when the module is reviewed — never ship it to clients. ═══════════════════════════════════════════════════════════════════════ */ .theme-pending { position: relative; outline: 1px dashed var(--border-strong); outline-offset: 2px; background-image: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(99, 102, 241, .035) 10px, rgba(99, 102, 241, .035) 20px ); } .theme-pending::before { content: "Pending theme review"; position: absolute; top: 0; right: 0; z-index: 5; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 0 0 0 8px; background: var(--cta-quiet-bg); color: var(--cta-quiet-text); }