/* ============================================================ True Business — Design System Foundations Colors + Typography ============================================================ Source of truth: iamtabch/revenue-dashboard Brand: True Corporation B2B — Thai enterprise telecom ============================================================ */ /* ------------------------------------------------------------ Fonts ------------------------------------------------------------ Brand uses Kanit (Thai/Latin geometric humanist sans) as primary, IBM Plex Mono for tabular numerics and metadata. Both loaded from Google Fonts — no local font files needed. ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* === RAW BRAND COLOR ===================================== */ --true-red: #e30613; /* "true" wordmark red (logo) */ --true-red-deep: #c00510; /* hover / pressed */ --true-gray: #a3a3a3; /* "business" wordmark gray */ /* === SURFACES (cool neutral system) ====================== */ --bg: #f4f5f7; /* app background — cool light gray */ --panel: #ffffff; /* card / surface */ --bg-2: #eef0f3; /* recessed area / progress track */ --bg-3: #e6e8ed; /* segmented control track */ --bg-hover: #f8f9fb; /* row / item hover */ /* === INK (foreground, cool-gray) ========================= */ --ink: #1a1d24; /* primary text */ --ink-2: #4a4f5a; /* secondary text */ --ink-3: #8b8f99; /* tertiary / labels */ --ink-4: #b5b8c0; /* disabled / placeholder */ /* === LINES (warm divider system) ========================= */ --line: #e7e4dc; /* default border */ --line-2: #efece4; /* subtle / row separator */ --line-3: #d6d3cc; /* zero axis / stronger rule */ /* === ACCENTS (data + interaction) ======================== */ --accent: #2d3a8c; /* deep navy — primary data + links */ --accent-2: #d97b2e; /* burnt orange — secondary + active */ /* === SEMANTIC (status) =================================== */ --positive: #1f7a4d; /* green — gains, success */ --positive-bg: #e3f1ea; /* positive chip background */ --negative: #b8492f; /* red — declines, errors */ --negative-bg: #fce8e4; /* negative chip background */ --neutral: #8b8f99; /* unchanged / N/A */ /* === DARK CHROME (sidebar / nav) ========================= */ --dark: #1a1d24; --dark-2: #22252d; --dark-3: #2a2d35; --dark-ink: #cfd1d8; /* nav text on dark */ --dark-ink-2: #9a9da6; --dark-ink-3: #5a5d65; /* === GROUP / CATEGORICAL PALETTE ========================= */ /* Used for product-group identity in dashboard data viz. Stable colors keyed to ID — do not reassign casually. */ --cat-mobile: #2d3a8c; /* deep navy */ --cat-ict: #d97b2e; /* burnt orange */ --cat-naas: #1f7a4d; /* forest green */ --cat-in: #6b4a8a; /* aubergine */ --cat-ucaas: #3a6b8a; /* steel blue */ --cat-sms: #a8553a; /* terracotta */ /* Year-comparison ramp (light → dark navy) */ --year-1: #c8cee8; --year-2: #8896cc; --year-3: #2d3a8c; /* === FONT FAMILIES ====================================== */ --font-sans: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-num: var(--font-mono); /* alias — use for any number */ /* === TYPE SCALE ========================================= */ /* The dashboard runs DENSE. Most body sits at 12–13px. */ --fs-display: 28px; /* big KPI value */ --fs-h1: 22px; --fs-h2: 18px; /* section heading */ --fs-h3: 16px; /* card title */ --fs-body: 13px; /* default body */ --fs-sm: 12px; /* secondary text */ --fs-xs: 11px; /* meta, sublabel */ --fs-2xs: 10px; /* uppercase eyebrow */ --fs-3xs: 9px; /* badge / chip-internal */ --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.45; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.06em; --ls-wider: 0.08em; /* === SHADOWS ============================================= */ /* The product is mostly flat. Shadow used SPARINGLY on hover-lift cards, popovers and toasts. NEVER as ambient. */ --shadow-lift: 0 4px 12px rgba(0,0,0,0.04); /* card hover */ --shadow-pop: 0 10px 28px rgba(0,0,0,0.10); /* dropdown */ --shadow-toast: 0 8px 24px rgba(0,0,0,0.18); --shadow-modal: 0 24px 64px rgba(0,0,0,0.22); --shadow-segment: 0 1px 2px rgba(0,0,0,0.06); /* on segmented*/ /* === RADIUS ============================================== */ /* Almost everything is 2–4px. There are NO pills, NO blob shapes, NO 12px+ rounding. The system is sharp & precise. */ --radius-xs: 2px; /* chips, dots, internal pills */ --radius-sm: 3px; /* buttons, segmented control */ --radius: 4px; /* cards, modals, popovers */ --radius-pill: 999px;/* dots only */ /* === SPACING (4px base) ================================== */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-8: 16px; --space-10: 20px; --space-12: 24px; --space-16: 32px; --space-20: 40px; --space-24: 48px; /* === TRANSITIONS ========================================= */ /* Short, businesslike — no bounces, no overshoots. */ --t-fast: 120ms ease; --t-base: 160ms ease; --t-slow: 200ms ease; } /* ============================================================ SEMANTIC ELEMENT STYLES These are the conventions used through the product. ============================================================ */ html, body { font-family: var(--font-sans); color: var(--ink); background: var(--bg); font-size: var(--fs-body); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; } h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); font-weight: 500; letter-spacing: var(--ls-snug); line-height: var(--lh-tight); } h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: 500; letter-spacing: var(--ls-snug); line-height: var(--lh-snug); } h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--ls-snug); line-height: var(--lh-snug); } /* The big metric — paired with .num for tabular numerics */ .display, .kpi-value { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 500; letter-spacing: var(--ls-tight); line-height: 1; font-variant-numeric: tabular-nums; } /* Uppercase eyebrow / table header */ .eyebrow, .label-up { font-size: var(--fs-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-3); } p, .body { font-size: var(--fs-body); line-height: var(--lh-base); } small, .small, .meta { font-size: var(--fs-xs); color: var(--ink-3); } code, .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Selection */ ::selection { background: var(--accent); color: #fff; } /* ============================================================ USAGE GUIDE ------------------------------------------------------------ • Body copy: var(--font-sans), 13px, --ink • Numbers: var(--font-mono) + font-variant-numeric: tabular-nums • Backgrounds: var(--bg) at app level, var(--panel) on cards • Borders: 1px solid var(--line) — never thicker • Radius: 4px on cards, 2-3px on small chips, NEVER pill • Shadows: flat by default — use shadow only on hover-lift, dropdowns, toasts, and modals • Accent use: var(--accent) for primary data, links, focus rings var(--accent-2) for secondary highlight, active nav Brand red (--true-red) is reserved for the LOGO and marketing surfaces — NOT used inside the product UI ============================================================ */