/** * ============================================================ * PowerUp Design System — Master Token File * Version 1.0 * Covers: Color · Typography · Spacing · Radius · Z-index * Breakpoints · Shadows · Animation · Component sizes * ============================================================ * * Sources: * Color Palette v1.0 * Typography v1.0 * Spacing & Layout v1.0 * Component Library v1.0 * * Usage: * Import this file once at the root of your application. * All tokens are CSS custom properties on :root. * Dark theme overrides fire via @media (prefers-color-scheme: dark) * OR the [data-theme="dark"] attribute on for manual control. * ============================================================ */ /* ============================================================ 0. FONT IMPORTS ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ 1. LIGHT THEME (default) ============================================================ */ :root { /* ---------------------------------------------------------- 1.1 BRAND ORIGIN Raw extracted logo values — do not use directly in UI. Reference only; all UI usage goes through semantic tokens. ---------------------------------------------------------- */ --pu-brand-orange-raw: #FF6B00; --pu-brand-gray-raw: #5C5C5C; /* ---------------------------------------------------------- 1.2 COLOR — NEUTRAL RAMP (light) ---------------------------------------------------------- */ --pu-neutral-0: #FFFFFF; /* Surface White — page background */ --pu-neutral-1: #F4F4F2; /* Cloud Gray — card / panel bg */ --pu-neutral-2: #ECEAE6; /* Fog — hover on surfaces */ --pu-neutral-3: #E0DFDB; /* Divider — borders, table lines */ --pu-neutral-4: #B0AFA9; /* Muted — disabled borders */ --pu-neutral-5: #8C8B86; /* Slate — placeholder, captions */ --pu-neutral-6: #4A4A47; /* Ink Secondary — secondary headings */ --pu-neutral-7: #1A1A1A; /* Ink Primary — body text, headings */ /* ---------------------------------------------------------- 1.3 COLOR — ORANGE FAMILY (light) ---------------------------------------------------------- */ --pu-orange-tint: #FFF0E5; /* Amber Glow — surface tint, selection */ --pu-orange-light: #FFD4B3; /* Peach — badge/tag fill */ --pu-orange: #FF6B00; /* Power Orange — primary CTA, charts */ --pu-orange-hover: #CC5500; /* Ember — hover, text links */ --pu-orange-press: #993D00; /* Deep Ember — pressed state, AAA links */ --pu-orange-deep: #661F00; /* Char — max-contrast dark orange */ /* ---------------------------------------------------------- 1.4 COLOR — SEMANTIC (light) ---------------------------------------------------------- */ --pu-success: #2E7D32; --pu-success-bg: #EAF3DE; --pu-success-border: #C0DD97; --pu-warning: #B45309; --pu-warning-bg: #FFF3CD; --pu-warning-border: #FAC775; --pu-danger: #C0392B; --pu-danger-bg: #FCEBEB; --pu-danger-border: #F7C1C1; --pu-info: #185FA5; --pu-info-bg: #E6F1FB; --pu-info-border: #B5D4F4; /* ---------------------------------------------------------- 1.5 COLOR — DATA VIZ SERIES (light) Always use in this order. Orange = Series 1. ---------------------------------------------------------- */ --pu-series-1: #FF6B00; /* Power Orange */ --pu-series-2: #1D6FA4; /* Data Blue */ --pu-series-3: #2E7D32; /* Signal Green */ --pu-series-4: #7B3FA0; /* Insight Purple*/ --pu-series-5: #B45309; /* Caution Amber */ --pu-series-6: #5C5C5C; /* Neutral Gray */ /* ---------------------------------------------------------- 1.6 SEMANTIC SURFACE ALIASES (light) Use these in all component code. ---------------------------------------------------------- */ --pu-bg-primary: var(--pu-neutral-0); --pu-bg-secondary: var(--pu-neutral-1); --pu-bg-tertiary: var(--pu-neutral-2); --pu-bg-hover: var(--pu-neutral-2); --pu-bg-selection: var(--pu-orange-tint); --pu-border-tertiary: var(--pu-neutral-3); /* 0.5px — default borders */ --pu-border: var(--pu-neutral-3); /* alias */ --pu-border-secondary:var(--pu-neutral-4); /* 0.5px — hover borders */ --pu-border-strong: var(--pu-neutral-5); /* 0.5px — emphasis borders */ --pu-text-primary: var(--pu-neutral-7); --pu-text-secondary: var(--pu-neutral-6); --pu-text-muted: var(--pu-neutral-5); --pu-text-disabled: var(--pu-neutral-4); --pu-text-link: var(--pu-orange-hover); --pu-text-link-hover: var(--pu-orange-press); /* ---------------------------------------------------------- 1.7 TYPOGRAPHY ---------------------------------------------------------- */ --pu-font-display: 'Barlow', 'Arial Narrow', sans-serif; --pu-font-body: 'DM Sans', 'Helvetica Neue', sans-serif; --pu-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Mono', monospace; /* Scale */ --pu-text-display-size: 3.5rem; /* 56px */ --pu-text-display-weight: 800; --pu-text-display-lh: 1.05; --pu-text-display-ls: -0.02em; --pu-text-h1-size: 2.5rem; /* 40px */ --pu-text-h1-weight: 700; --pu-text-h1-lh: 1.1; --pu-text-h1-ls: -0.015em; --pu-text-h2-size: 1.75rem; /* 28px */ --pu-text-h2-weight: 600; --pu-text-h2-lh: 1.2; --pu-text-h2-ls: -0.01em; --pu-text-h3-size: 1.25rem; /* 20px */ --pu-text-h3-weight: 500; --pu-text-h3-lh: 1.3; --pu-text-h3-ls: -0.005em; --pu-text-h4-size: 1rem; /* 16px */ --pu-text-h4-weight: 600; --pu-text-h4-lh: 1.4; --pu-text-h4-ls: 0; --pu-text-body-l-size: 1rem; /* 16px */ --pu-text-body-l-weight: 400; --pu-text-body-l-lh: 1.7; --pu-text-body-m-size: 0.875rem; /* 14px */ --pu-text-body-m-weight: 400; --pu-text-body-m-lh: 1.6; --pu-text-label-size: 0.75rem; /* 12px */ --pu-text-label-weight: 500; --pu-text-label-lh: 1.4; --pu-text-label-ls: 0.02em; --pu-text-caption-size: 0.6875rem;/* 11px */ --pu-text-caption-weight: 400; --pu-text-caption-lh: 1.5; --pu-text-kpi-size: 2.25rem; /* 36px */ --pu-text-kpi-weight: 800; --pu-text-kpi-lh: 1; --pu-text-kpi-ls: -0.02em; --pu-text-kpi-l-size: 3rem; /* 48px */ --pu-text-kpi-l-weight:800; --pu-text-kpi-l-lh: 1; --pu-text-kpi-l-ls: -0.025em; --pu-text-mono-size: 0.8125rem; /* 13px */ --pu-text-mono-weight: 400; --pu-text-mono-lh: 1.6; --pu-text-mono-sm-size: 0.6875rem;/* 11px */ --pu-text-mono-sm-weight: 400; --pu-text-mono-sm-lh: 1.5; /* ---------------------------------------------------------- 1.8 SPACING SCALE (base-4) ---------------------------------------------------------- */ --pu-space-1: 4px; --pu-space-2: 8px; --pu-space-3: 12px; --pu-space-4: 16px; --pu-space-5: 20px; --pu-space-6: 24px; --pu-space-8: 32px; --pu-space-10: 40px; --pu-space-12: 48px; --pu-space-16: 64px; --pu-space-20: 80px; --pu-space-24: 96px; /* ---------------------------------------------------------- 1.9 BORDER RADIUS ---------------------------------------------------------- */ --pu-radius-xs: 2px; --pu-radius-sm: 4px; --pu-radius-md: 8px; --pu-radius-lg: 12px; --pu-radius-xl: 16px; --pu-radius-pill: 24px; --pu-radius-full: 9999px; /* ---------------------------------------------------------- 1.10 Z-INDEX ---------------------------------------------------------- */ --pu-z-base: 0; --pu-z-raised: 10; --pu-z-dropdown: 100; --pu-z-sticky: 200; --pu-z-overlay: 300; --pu-z-modal: 400; --pu-z-toast: 500; /* ---------------------------------------------------------- 1.11 BREAKPOINTS (reference only — use in @media queries, not as var()) ---------------------------------------------------------- */ --pu-bp-sm: 320px; --pu-bp-md: 768px; --pu-bp-lg: 1024px; --pu-bp-xl: 1280px; /* Primary design target */ --pu-bp-2xl: 1536px; /* ---------------------------------------------------------- 1.12 LAYOUT STRUCTURE ---------------------------------------------------------- */ --pu-content-max-width: 1440px; --pu-page-margin-desktop: var(--pu-space-16); /* 64px */ --pu-page-margin-tablet: var(--pu-space-6); /* 24px */ --pu-page-margin-mobile: var(--pu-space-4); /* 16px */ --pu-grid-cols-desktop: 12; --pu-grid-cols-tablet: 8; --pu-grid-cols-mobile: 4; --pu-grid-gutter-desktop: var(--pu-space-6); /* 24px */ --pu-grid-gutter-tablet: var(--pu-space-4); /* 16px */ --pu-grid-gutter-mobile: var(--pu-space-3); /* 12px */ /* Dashboard shell */ --pu-shell-icon-rail-width: 52px; --pu-shell-sidebar-width: 232px; --pu-shell-topbar-height: 48px; --pu-shell-content-padding: var(--pu-space-4); /* 16px */ /* ---------------------------------------------------------- 1.13 COMPONENT SIZES ---------------------------------------------------------- */ /* Buttons */ --pu-btn-height-sm: 32px; --pu-btn-height-md: 40px; --pu-btn-height-lg: 48px; --pu-btn-px-sm: 12px; --pu-btn-px-md: 16px; --pu-btn-px-lg: 24px; --pu-btn-radius-sm: var(--pu-radius-sm); --pu-btn-radius-md: var(--pu-radius-md); --pu-btn-radius-lg: 10px; /* Inputs */ --pu-input-height: 40px; --pu-input-px: 12px; --pu-input-radius: var(--pu-radius-md); /* Table */ --pu-table-row-height: 40px; --pu-table-header-height: 36px; --pu-table-cell-py: 12px; --pu-table-cell-px: 16px; --pu-table-header-py: 8px; /* Badges */ --pu-badge-height: 20px; --pu-badge-height-lg: 24px; --pu-badge-px: 8px; --pu-badge-radius: var(--pu-radius-sm); /* Controls */ --pu-toggle-width: 36px; --pu-toggle-height: 20px; --pu-toggle-thumb: 16px; --pu-check-size: 18px; --pu-radio-size: 18px; --pu-radio-dot: 8px; /* Cards */ --pu-card-padding-sm: var(--pu-space-4); /* 16px — KPI card */ --pu-card-padding-md: var(--pu-space-5); /* 20px — data card */ --pu-card-radius-sm: var(--pu-radius-md);/* 8px */ --pu-card-radius-md: var(--pu-radius-lg);/* 12px */ /* Chart panel */ --pu-chart-min-height: 240px; /* ---------------------------------------------------------- 1.14 ANIMATION ---------------------------------------------------------- */ --pu-duration-fast: 100ms; --pu-duration-base: 150ms; --pu-duration-slow: 250ms; --pu-duration-slower: 400ms; --pu-ease-default: ease; --pu-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --pu-ease-in: cubic-bezier(0.4, 0.0, 1, 1); --pu-ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1); --pu-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------------------------------------------------------- 1.15 FOCUS RING ---------------------------------------------------------- */ --pu-focus-ring: 0 0 0 3px rgba(255, 107, 0, 0.18); --pu-focus-ring-danger: 0 0 0 3px rgba(192, 57, 43, 0.18); --pu-focus-ring-offset: 2px; } /* ============================================================ 2. DARK THEME — media query strategy ============================================================ */ @media (prefers-color-scheme: dark) { :root { --pu-theme: dark; } :root:not([data-theme="light"]) { /* Neutral ramp */ --pu-neutral-0: #0D0D0D; /* Void Black */ --pu-neutral-1: #1C1C1C; /* Carbon */ --pu-neutral-2: #252525; /* Graphite */ --pu-neutral-3: #2E2E2E; /* Steel */ --pu-neutral-4: #404040; /* Zinc */ --pu-neutral-5: #6B6A65; /* Dust */ --pu-neutral-6: #A8A79F; /* Silver */ --pu-neutral-7: #F0EEEA; /* Off-White */ /* Orange family */ --pu-orange-tint: #261400; /* Ember Surface */ --pu-orange-light: #4D2200; /* Russet */ --pu-orange: #FF8533; /* Live Orange */ --pu-orange-hover: #FFB380; /* Spark */ --pu-orange-press: #FFD4B3; /* Flash */ --pu-orange-deep: #FFE8CC; /* Pale tint */ /* Semantic */ --pu-success: #4CAF50; --pu-success-bg: #0D2B0F; --pu-success-border: #1A4D1C; --pu-warning: #F59E0B; --pu-warning-bg: #2B1A00; --pu-warning-border: #4D3000; --pu-danger: #EF5350; --pu-danger-bg: #2B0A0A; --pu-danger-border: #4D1414; --pu-info: #5BA3D9; --pu-info-bg: #0A1A2B; --pu-info-border: #143047; /* Data viz series */ --pu-series-1: #FF8533; /* Live Orange */ --pu-series-2: #5BA3D9; /* Cloud Blue */ --pu-series-3: #66BB6A; /* Growth Green */ --pu-series-4: #AB7FCF; /* Pulse Purple */ --pu-series-5: #F59E0B; /* Alert Amber */ --pu-series-6: #A8A79F; /* Muted Silver */ /* Focus ring updates */ --pu-focus-ring: 0 0 0 3px rgba(255, 133, 51, 0.22); } } /* ============================================================ 3. DARK THEME — manual override (data-theme attribute) Allows JS-controlled theme switching independent of OS pref. ============================================================ */ [data-theme="dark"] { --pu-neutral-0: #0D0D0D; --pu-neutral-1: #1C1C1C; --pu-neutral-2: #252525; --pu-neutral-3: #2E2E2E; --pu-neutral-4: #404040; --pu-neutral-5: #6B6A65; --pu-neutral-6: #A8A79F; --pu-neutral-7: #F0EEEA; --pu-orange-tint: #261400; --pu-orange-light: #4D2200; --pu-orange: #FF8533; --pu-orange-hover: #FFB380; --pu-orange-press: #FFD4B3; --pu-orange-deep: #FFE8CC; --pu-success: #4CAF50; --pu-success-bg: #0D2B0F; --pu-success-border: #1A4D1C; --pu-warning: #F59E0B; --pu-warning-bg: #2B1A00; --pu-warning-border: #4D3000; --pu-danger: #EF5350; --pu-danger-bg: #2B0A0A; --pu-danger-border: #4D1414; --pu-info: #5BA3D9; --pu-info-bg: #0A1A2B; --pu-info-border: #143047; --pu-series-1: #FF8533; --pu-series-2: #5BA3D9; --pu-series-3: #66BB6A; --pu-series-4: #AB7FCF; --pu-series-5: #F59E0B; --pu-series-6: #A8A79F; --pu-focus-ring: 0 0 0 3px rgba(255, 133, 51, 0.22); } [data-theme="light"] { /* Explicit light override — mirrors :root defaults */ --pu-neutral-0: #FFFFFF; --pu-neutral-1: #F4F4F2; --pu-neutral-2: #ECEAE6; --pu-neutral-3: #E0DFDB; --pu-neutral-4: #B0AFA9; --pu-neutral-5: #8C8B86; --pu-neutral-6: #4A4A47; --pu-neutral-7: #1A1A1A; --pu-orange-tint: #FFF0E5; --pu-orange-light: #FFD4B3; --pu-orange: #FF6B00; --pu-orange-hover: #CC5500; --pu-orange-press: #993D00; --pu-orange-deep: #661F00; --pu-success: #2E7D32; --pu-success-bg: #EAF3DE; --pu-success-border: #C0DD97; --pu-warning: #B45309; --pu-warning-bg: #FFF3CD; --pu-warning-border: #FAC775; --pu-danger: #C0392B; --pu-danger-bg: #FCEBEB; --pu-danger-border: #F7C1C1; --pu-info: #185FA5; --pu-info-bg: #E6F1FB; --pu-info-border: #B5D4F4; --pu-series-1: #FF6B00; --pu-series-2: #1D6FA4; --pu-series-3: #2E7D32; --pu-series-4: #7B3FA0; --pu-series-5: #B45309; --pu-series-6: #5C5C5C; --pu-focus-ring: 0 0 0 3px rgba(255, 107, 0, 0.18); } /* ============================================================ 4. GLOBAL BASE STYLES Apply after token import. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; /* rem base */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { font-family: var(--pu-font-body); font-size: var(--pu-text-body-l-size); font-weight: var(--pu-text-body-l-weight); line-height: var(--pu-text-body-l-lh); color: var(--pu-text-primary); background: var(--pu-bg-primary); } /* Headings use display font */ h1, h2, h3 { font-family: var(--pu-font-display); } h4, h5, h6 { font-family: var(--pu-font-body); } h1 { font-size: var(--pu-text-h1-size); font-weight: var(--pu-text-h1-weight); line-height: var(--pu-text-h1-lh); letter-spacing: var(--pu-text-h1-ls); } h2 { font-size: var(--pu-text-h2-size); font-weight: var(--pu-text-h2-weight); line-height: var(--pu-text-h2-lh); letter-spacing: var(--pu-text-h2-ls); } h3 { font-size: var(--pu-text-h3-size); font-weight: var(--pu-text-h3-weight); line-height: var(--pu-text-h3-lh); letter-spacing: var(--pu-text-h3-ls); } h4 { font-size: var(--pu-text-h4-size); font-weight: var(--pu-text-h4-weight); line-height: var(--pu-text-h4-lh); } code, kbd, pre, samp { font-family: var(--pu-font-mono); font-size: var(--pu-text-mono-size); } a { color: var(--pu-text-link); text-decoration: none; } a:hover { color: var(--pu-text-link-hover); text-decoration: underline; } /* Universal focus ring */ :focus-visible { outline: none; box-shadow: var(--pu-focus-ring); border-radius: var(--pu-radius-md); } /* ============================================================ 5. LAYOUT UTILITIES ============================================================ */ .pu-container { width: 100%; max-width: var(--pu-content-max-width); margin-inline: auto; padding-inline: var(--pu-page-margin-desktop); } .pu-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--pu-grid-gutter-desktop); } /* Dashboard shell */ .pu-shell { display: grid; grid-template-columns: var(--pu-shell-icon-rail-width) var(--pu-shell-sidebar-width) 1fr; grid-template-rows: var(--pu-shell-topbar-height) 1fr; height: 100vh; overflow: hidden; } .pu-shell--collapsed { grid-template-columns: var(--pu-shell-icon-rail-width) 1fr; } /* Responsive overrides */ @media (max-width: 1279px) { .pu-container { padding-inline: var(--pu-page-margin-tablet); } .pu-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--pu-grid-gutter-tablet); } .pu-shell { grid-template-columns: var(--pu-shell-icon-rail-width) 1fr; } } @media (max-width: 767px) { .pu-container { padding-inline: var(--pu-page-margin-mobile); } .pu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pu-grid-gutter-mobile); } .pu-shell { grid-template-columns: 1fr; grid-template-rows: var(--pu-shell-topbar-height) 1fr; } }