/** * DMI Design Tokens — CSS Custom Properties * * This file defines all design tokens as CSS custom properties (CSS variables). * Use these for dynamic theming, dark mode support, and runtime customization. * * Generated from: docs/brand-identity-system.md * Last Updated: March 2026 * * Usage: * - Include in : * - Use in CSS: background-color: var(--color-primary-500); * - Use in JS: document.documentElement.style.setProperty('--color-primary-500', '#newcolor'); * - Dark mode: Add class="dark" to , CSS variables auto-switch * * Dark Mode Support: * - All colors have --dark-* variants * - Automatically applied when .dark class is present on * - Can be toggled with: document.documentElement.classList.toggle('dark'); */ :root { /* ============================================ SEMANTIC COLORS (Light Mode) ============================================ */ /* PRIMARY COLOR - Green (#2E5B2A) Semantic: Authentication, Origin, Growth, Trust */ --color-primary-50: #f1f8f0; --color-primary-100: #d4e8d2; --color-primary-200: #a8d2a3; --color-primary-300: #7dbb79; --color-primary-400: #51a351; --color-primary-500: #2e5b2a; /* Brand primary */ --color-primary-600: #234621; --color-primary-700: #1a3418; --color-primary-800: #0f220f; /* SECONDARY COLOR - Blue (#4A9CA8) Semantic: Verification, Trust Signals, Authorization */ --color-secondary-50: #edf5f7; --color-secondary-100: #cce4ea; --color-secondary-200: #a5d4dc; --color-secondary-300: #7dbcc4; --color-secondary-400: #62a8b3; --color-secondary-500: #4a9ca8; /* Brand secondary */ --color-secondary-600: #37747f; --color-secondary-700: #2a5563; --color-secondary-800: #1d3a44; /* TERTIARY COLOR - Gold (#D4A017) Semantic: Premium, Earned Rewards, Accomplishment, Badges */ --color-tertiary-50: #fef9f0; --color-tertiary-100: #fbe8d1; --color-tertiary-200: #f5d4a0; --color-tertiary-300: #eebf6e; --color-tertiary-400: #dfaa42; --color-tertiary-500: #d4a017; /* Brand tertiary */ --color-tertiary-600: #b8850d; --color-tertiary-700: #8e6609; --color-tertiary-800: #5c4405; /* ============================================ STATUS COLORS (Light Mode) ============================================ */ /* Success - Credential Valid, Verification Passed */ --color-success-50: #f1f8f0; --color-success-100: #d4e8d2; --color-success-200: #a8d2a3; --color-success-300: #7dbb79; --color-success-400: #51a351; --color-success-500: #2e5b2a; --color-success-600: #234621; --color-success-700: #1a3418; --color-success-bg: #d4e8d2; --color-success-border: #51a351; --color-success-text: #234621; --color-success-icon: #2e5b2a; /* Warning - OLCC Expiring, Batch Aging, Pending Action */ --color-warning-50: #fef9f0; --color-warning-100: #fbe8d1; --color-warning-200: #f5d4a0; --color-warning-300: #eebf6e; --color-warning-400: #dfaa42; --color-warning-500: #d4a017; --color-warning-600: #b8850d; --color-warning-700: #8e6609; --color-warning-bg: #fef3e6; --color-warning-border: #e8a80f; --color-warning-text: #6b4a0a; --color-warning-icon: #d4a017; /* Error - Credential Revoked, Verification Failed */ --color-error-50: #f8e0e0; --color-error-100: #f0c1c1; --color-error-200: #e8a2a2; --color-error-300: #e08383; --color-error-400: #dc3545; --color-error-500: #c41e3a; --color-error-600: #9f182f; --color-error-700: #7d1f2a; --color-error-bg: #f8e0e0; --color-error-border: #dc3545; --color-error-text: #7d1f2a; --color-error-icon: #c41e3a; /* Info - New Credential Available, Guidance */ --color-info-50: #edf5f7; --color-info-100: #cce4ea; --color-info-200: #a5d4dc; --color-info-300: #7dbcc4; --color-info-400: #62a8b3; --color-info-500: #4a9ca8; --color-info-600: #37747f; --color-info-700: #2a5563; --color-info-bg: #e8f4f8; --color-info-border: #4a9ca8; --color-info-text: #2a5563; --color-info-icon: #4a9ca8; /* ============================================ NEUTRAL COLORS ============================================ */ --color-neutral-0: #ffffff; --color-neutral-50: #f5f5f5; --color-neutral-100: #f0f0f0; --color-neutral-200: #e5e5e5; --color-neutral-300: #d0d0d0; --color-neutral-400: #a0a0a0; --color-neutral-500: #8c8c8c; --color-neutral-600: #5a5a5a; --color-neutral-700: #3a3a3a; --color-neutral-800: #1a1a1a; --color-neutral-900: #0f0f0f; /* ============================================ SURFACE COLORS (Light Mode) ============================================ */ --color-surface-primary: #ffffff; --color-surface-secondary: #f8faf8; --color-surface-tertiary: #f0f3f0; --color-surface-elevated: #ffffff; --color-surface-overlay: rgba(0, 0, 0, 0.5); /* ============================================ TEXT COLORS (Light Mode) ============================================ */ --color-text-primary: #1a1a1a; --color-text-secondary: #5a5a5a; --color-text-muted: #8c8c8c; --color-text-inverse: #ffffff; --color-text-disabled: #cccccc; /* ============================================ BORDER COLORS (Light Mode) ============================================ */ --color-border-light: #e5e5e5; --color-border-default: #d0d0d0; --color-border-strong: #a0a0a0; /* ============================================ DARK MODE COLORS (Applied when .dark class present) ============================================ */ /* Dark Mode Surfaces */ --color-dark-surface-primary: #0f1419; --color-dark-surface-secondary: #1a2332; --color-dark-surface-tertiary: #242d3d; --color-dark-surface-elevated: #2e3a4e; --color-dark-surface-overlay: rgba(0, 0, 0, 0.7); /* Dark Mode Primary (Bright Green on Dark) */ --color-dark-primary-300: #81d678; --color-dark-primary-400: #5fc85a; --color-dark-primary-500: #4db850; --color-dark-primary-600: #3d9840; --color-dark-primary-700: #2e7830; /* Dark Mode Secondary (Bright Blue on Dark) */ --color-dark-secondary-300: #7dd4e0; --color-dark-secondary-400: #5ecdd6; --color-dark-secondary-500: #4ac4ce; --color-dark-secondary-600: #38a8b0; --color-dark-secondary-700: #2b8a92; /* Dark Mode Tertiary (Gold - consistent with light) */ --color-dark-tertiary-300: #f0c649; --color-dark-tertiary-400: #e8ba33; --color-dark-tertiary-500: #d4a017; --color-dark-tertiary-600: #b8850d; --color-dark-tertiary-700: #8e6609; /* Dark Mode Text */ --color-dark-text-primary: #f5f5f5; --color-dark-text-secondary: #b8b8b8; --color-dark-text-muted: #7a7a7a; --color-dark-text-inverse: #0f1419; /* Dark Mode Borders */ --color-dark-border-light: #3a4557; --color-dark-border-default: #4a5a73; --color-dark-border-strong: #6a7a93; /* ============================================ TYPOGRAPHY ============================================ */ /* Display Sizes */ --font-size-display-lg: 48px; --font-size-display-md: 40px; --font-size-display-sm: 32px; /* Heading Sizes */ --font-size-heading-lg: 28px; --font-size-heading-md: 24px; --font-size-heading-sm: 20px; --font-size-heading-xs: 18px; /* Body Sizes */ --font-size-body-lg: 18px; --font-size-body-md: 16px; /* Base size */ --font-size-body-sm: 14px; --font-size-body-xs: 12px; /* Monospace Sizes (AIDs, code) */ --font-size-mono-md: 13px; --font-size-mono-sm: 11px; /* Font Families */ --font-family-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-family-serif: 'Georgia', 'Lora', ui-serif, Georgia, serif; --font-family-mono: 'SF Mono', Monaco, Menlo, 'Courier New', monospace; /* Font Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.2; --line-height-normal: 1.35; --line-height-relaxed: 1.4; --line-height-body: 1.6; /* Letter Spacing */ --letter-spacing-tight: -0.02em; --letter-spacing-tight-sm: -0.01em; --letter-spacing-normal: 0em; /* ============================================ SPACING SCALE (4px Base Grid) ============================================ */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; --spacing-3xl: 48px; --spacing-4xl: 64px; /* ============================================ TRANSITIONS & MOTION ============================================ */ --transition-quick: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-standard: 300ms cubic-bezier(0.165, 0.84, 0.44, 1); --transition-slow: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-deliberate: 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-quick: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-standard: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-deliberate: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ============================================ SHADOWS ============================================ */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.15); /* Semantic Shadows */ --shadow-primary-sm: 0 1px 3px rgba(46, 91, 42, 0.08); --shadow-primary-md: 0 2px 8px rgba(46, 91, 42, 0.12); --shadow-secondary-sm: 0 1px 3px rgba(74, 156, 168, 0.08); --shadow-secondary-md: 0 2px 8px rgba(74, 156, 168, 0.12); --shadow-tertiary-sm: 0 1px 3px rgba(212, 160, 23, 0.08); --shadow-tertiary-md: 0 2px 8px rgba(212, 160, 23, 0.12); /* Inset & Dark Shadows */ --shadow-inset-sm: inset 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-dark-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-dark-md: 0 4px 16px rgba(0, 0, 0, 0.4); /* ============================================ BORDER RADIUS ============================================ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ============================================ Z-INDEX SCALE ============================================ */ --z-auto: auto; --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --z-dropdown: 1000; --z-modal-backdrop: 1040; --z-modal: 1050; --z-tooltip: 1070; /* ============================================ CONTAINER QUERIES ============================================ */ --container-max-width-xl: 1200px; --container-max-width-2xl: 1440px; /* ============================================ ACCESSIBILITY & TOUCH TARGETS ============================================ */ --touch-target-min: 44px; /* WCAG 2.5.5 minimum */ --focus-ring-offset: 2px; --focus-ring-width: 3px; } /* ============================================ DARK MODE OVERRIDES Applied when is present ============================================ */ html.dark { /* Override surface colors */ --color-surface-primary: var(--color-dark-surface-primary); --color-surface-secondary: var(--color-dark-surface-secondary); --color-surface-tertiary: var(--color-dark-surface-tertiary); --color-surface-elevated: var(--color-dark-surface-elevated); --color-surface-overlay: var(--color-dark-surface-overlay); /* Override text colors */ --color-text-primary: var(--color-dark-text-primary); --color-text-secondary: var(--color-dark-text-secondary); --color-text-muted: var(--color-dark-text-muted); --color-text-inverse: var(--color-dark-text-inverse); /* Override borders */ --color-border-light: var(--color-dark-border-light); --color-border-default: var(--color-dark-border-default); --color-border-strong: var(--color-dark-border-strong); /* Override semantic color brightness (bright accents on dark) */ --color-primary-300: var(--color-dark-primary-300); --color-primary-400: var(--color-dark-primary-400); --color-primary-500: var(--color-dark-primary-500); --color-primary-600: var(--color-dark-primary-600); --color-primary-700: var(--color-dark-primary-700); --color-secondary-300: var(--color-dark-secondary-300); --color-secondary-400: var(--color-dark-secondary-400); --color-secondary-500: var(--color-dark-secondary-500); --color-secondary-600: var(--color-dark-secondary-600); --color-secondary-700: var(--color-dark-secondary-700); --color-tertiary-300: var(--color-dark-tertiary-300); --color-tertiary-400: var(--color-dark-tertiary-400); --color-tertiary-500: var(--color-dark-tertiary-500); --color-tertiary-600: var(--color-dark-tertiary-600); --color-tertiary-700: var(--color-dark-tertiary-700); /* Override shadows for dark mode (higher opacity) */ --shadow-sm: var(--shadow-dark-sm); --shadow-md: var(--shadow-dark-md); } /* ============================================ REDUCED MOTION SUPPORT Respect user's motion preferences ============================================ */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================ HIGH CONTRAST MODE SUPPORT ============================================ */ @media (prefers-contrast: more) { :root { /* Increase contrast on borders & text */ --color-border-default: #808080; --color-text-primary: #000000; } html.dark { --color-text-primary: #ffffff; } } /* ============================================ CREDENTIAL TYPE COLORS (v1.1) Used for credential card left-borders, list icons, and type indicators. Resolution: Schema SAID → cred_type DB field → field heuristic. ============================================ */ /* GLEIF Ecosystem (reserved — not yet in pipeline) */ --cred-vlei: #7C3AED; /* Legal Entity vLEI — purple */ --cred-ecr: #06B6D4; /* ECR Authorization — cyan */ --cred-oor: #F97316; /* OOR Authorization — orange */ --cred-qvi: #EC4899; /* QVI Credential — pink */ /* DMI Ecosystem (active — 8 credential types with matching schemas) */ --cred-harvest: #CA8A04; /* Harvest Batch — amber (harvest-batch.schema.json) */ --cred-activity: #64748B; /* Activity — slate (activity.schema.json) */ --cred-transfer: #0891B2; /* Transfer In/Out — teal (transfer-in/out.schema.json) */ --cred-role: #2E5B2A; /* Role Credential — brand green (role-credential.schema.json) */ --cred-access: #D4A017; /* Access Credential — gold (access-credential.schema.json) */ --cred-feedback: #10B981; /* Feedback Submission — emerald (feedback-submission.schema.json) */ --cred-reward: #F59E0B; /* Reward Issuance — amber-warm (reward-issuance.schema.json) */ /* DMI Ecosystem (badge/tier — not a credential type, used for OLCC status indicators) */ --cred-olcc: #16A34A; /* OLCC Badge — green (not a schema; badge/tier indicator for OLCC registration status) */ --cred-default: #64748B; /* Unknown/fallback — slate */ /* SEMANTIC COLOR RULES (LOCKED — enforced by design system v1.1) Green (#2E5B2A) = authentication, brand primary, CTAs Blue (#4A9CA8) = verification signals, credential layer Gold (#D4A017) = earned value ONLY (premium tiers, rewards, badges) DO NOT use gold for non-earned states. DO NOT use blue for non-verification elements. */ } /* ============================================ EXAMPLE USAGE IN CSS ============================================ */ /* Example: Primary Button .button-primary { background-color: var(--color-primary-500); color: var(--color-text-inverse); padding: var(--spacing-lg) var(--spacing-md); border-radius: var(--radius-md); font-family: var(--font-family-sans); font-size: var(--font-size-body-md); font-weight: var(--font-weight-semibold); transition: all var(--transition-quick); box-shadow: var(--shadow-none); cursor: pointer; min-height: var(--touch-target-min); min-width: var(--touch-target-min); } .button-primary:hover { background-color: var(--color-primary-600); box-shadow: var(--shadow-primary-md); } .button-primary:active { background-color: var(--color-primary-700); box-shadow: var(--shadow-inset-sm); } .button-primary:focus { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-500); outline-offset: var(--focus-ring-offset); } .button-primary:disabled { background-color: var(--color-neutral-300); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } html.dark .button-primary { background-color: var(--color-dark-primary-500); box-shadow: var(--shadow-dark-sm); } html.dark .button-primary:hover { box-shadow: var(--shadow-dark-md); } */ /* ============================================ EXAMPLE USAGE IN JAVASCRIPT ============================================ */ /* // Read a token: const primaryColor = getComputedStyle(document.documentElement) .getPropertyValue('--color-primary-500') .trim(); console.log(primaryColor); // '#2e5b2a' // Write a token (runtime customization): document.documentElement.style.setProperty( '--color-primary-500', '#2E5B2A' ); // Toggle dark mode: document.documentElement.classList.toggle('dark'); // Check if dark mode is active: const isDarkMode = document.documentElement.classList.contains('dark'); // Persist user preference to localStorage: if (isDarkMode) { localStorage.setItem('theme', 'dark'); } else { localStorage.setItem('theme', 'light'); } // Load user preference on page load: function initializeTheme() { const saved = localStorage.getItem('theme'); const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; if (saved === 'dark' || (!saved && prefersDark)) { document.documentElement.classList.add('dark'); } } document.addEventListener('DOMContentLoaded', initializeTheme); */