/* ============================================================= Kate Ponomarenko — Brand Tokens v1.0 Sr. UX/UI Designer · Enterprise · Fintech · Health ---------------------------------------------------------------- Drop into any project and consume via var(--token). Pair with Google Fonts: DM Serif Display, DM Sans, JetBrains Mono. ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Serif+Display:ital@0;1&family=Barlow+Semi+Condensed:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---- COLOR ---- */ /* Primary — signal. Use for logo, CTAs, accent words, active states. Hard cap: ≤ 8% of any layout. Never as a page background. SIGNAL BLUE VARIANT — Electric promoted to primary. */ --kp-cherry: #5252E5; /* Electric */ --kp-cherry-deep: #3A37B0; /* hover / pressed */ --kp-ripe-cherry: #3A37B0; /* gradient start (deep), accent on dark surfaces */ --kp-cherry-tint: #E7E7FB; /* 10% pill backgrounds */ /* Brand gradient — Signal Blue. One feature surface per page only. Never as body chrome or behind running text. */ --kp-cherry-grad: linear-gradient(135deg, #5252E5 0%, #8690FF 50%, #A7E3FF 100%); /* Secondary — bone field. Backgrounds, cards, section fills. */ --kp-bone: #F2F2F9; --kp-bone-2: #E3DDE3; /* dividers on bone, soft fills */ /* Neutral — graphite. Body type, rules, UI structure. Never #000. */ --kp-ink: #1A1A1A; --kp-ink-60: #5A5A5A; --kp-ink-30: #A8A6A4; /* Paper — default page surface, cards on bone. */ --kp-paper: #FFFFFF; --kp-rule: #DAD6DA; /* hairlines and dividers */ /* Editorial accent — reserved for pull-quotes, indices, callouts. Never CTAs. Max 4% of layout. */ --kp-brass: #C9A84C; /* Signal Blue — secondary functional palette + background fields. */ --kp-blue-1: #5252E5; /* Electric — primary */ --kp-blue-2: #8690FF; /* Periwinkle — secondary, hover */ --kp-blue-3: #A7E3FF; /* Sky — highlight bands, chart fills */ --kp-blue-4: #DFF8FF; /* Ice — lightest field, info backgrounds */ --kp-blue-tint: #E7E7FB; /* Periwinkle wash — soft section fills */ --kp-blue-grad: linear-gradient(135deg, #5252E5 0%, #8690FF 50%, #A7E3FF 100%); /* ---- TYPE ---- */ --kp-font-serif: 'DM Serif Display', Georgia, serif; --kp-font-sans: 'DM Sans', system-ui, sans-serif; --kp-font-label: 'Barlow Semi Condensed', system-ui, sans-serif; --kp-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale (line-height pairs in comments) */ --kp-fs-h1: 76px; /* lh: 76px, tracking: -2.0% */ --kp-fs-h2: 52px; /* lh: 53px, tracking: -1.5% */ --kp-fs-h3: 34px; /* lh: 36px, tracking: -1.0% */ --kp-fs-h4: 20px; /* lh: 24px, tracking: -0.6% */ --kp-fs-body: 17px; /* lh: 26px, tracking: -0.5% */ --kp-fs-caption: 13px; /* lh: 19px, tracking: 0 */ --kp-fs-label: 13px; /* lh: 18px, tracking: 0.02em — Barlow SC 500 */ /* ---- RADII ---- */ --kp-radius-sm: 4px; --kp-radius-md: 6px; --kp-radius-pill: 999px; /* ---- SPACING (8px base) ---- */ --kp-space-1: 8px; --kp-space-2: 16px; --kp-space-3: 24px; --kp-space-4: 32px; --kp-space-5: 48px; --kp-space-6: 64px; --kp-space-7: 96px; /* ---- ELEVATION ---- */ --kp-shadow-card: 0 24px 60px -30px rgba(26, 26, 26, 0.22); --kp-shadow-modal: 0 40px 100px -40px rgba(26, 26, 26, 0.28); } /* ============================================================= DARK MODE — same brand, inverted application. Activate by: - (explicit) - or honour OS preference via the @media block below. The CORE brand colors (--kp-cherry, --kp-brass) stay constant. The SEMANTIC colors (surface, ink) flip. ============================================================= */ [data-theme="dark"] { --kp-paper: #0F0B12; /* deep paper — page surface */ --kp-bone: #1A1620; /* elevated dark surface — cards, sections */ --kp-bone-2: #2A2530; /* dividers / off-state fills on dark */ --kp-ink: #F1ECF1; /* text on dark — was bone in light */ --kp-ink-60: #B3ADB5; /* secondary text on dark */ --kp-ink-30: #6E6872; /* disabled text on dark */ --kp-rule: #2E2832; /* hairlines on dark */ --kp-blue-4: #161A2E; /* Ice → deep indigo field on dark */ --kp-blue-tint:#1B1B33; /* Periwinkle wash → muted indigo on dark */ --kp-shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.6); --kp-shadow-modal: 0 40px 100px -40px rgba(0, 0, 0, 0.7); } /* Optional: respect OS preference. Uncomment to enable. @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kp-paper: #0F0B12; --kp-bone: #1A1620; --kp-bone-2: #2A2530; --kp-ink: #F1ECF1; --kp-ink-60: #B3ADB5; --kp-ink-30: #6E6872; --kp-rule: #2E2832; } } */ /* ---- Defaults ---- */ html { background: var(--kp-paper); color: var(--kp-ink); } body { font-family: var(--kp-font-sans); font-size: var(--kp-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-family: var(--kp-font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.05; margin: 0; } h1 { font-size: var(--kp-fs-h1); letter-spacing: -0.02em; } h2 { font-size: var(--kp-fs-h2); } h3 { font-size: var(--kp-fs-h3); } h4 { font-family: var(--kp-font-sans); font-size: var(--kp-fs-h4); font-weight: 500; letter-spacing: -0.01em; margin: 0; } em { font-style: italic; color: var(--kp-cherry); } /* ---- Utility classes ---- */ .kp-label { font-family: var(--kp-font-mono); font-size: var(--kp-fs-label); letter-spacing: 0.1em; text-transform: none; color: var(--kp-ink-60); } .kp-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--kp-cherry-tint); color: var(--kp-cherry); font-family: var(--kp-font-mono); font-size: var(--kp-fs-label); letter-spacing: 0.1em; text-transform: none; border-radius: var(--kp-radius-pill); } .kp-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--kp-cherry); color: var(--kp-paper); padding: 10px 18px; border-radius: var(--kp-radius-sm); font-family: var(--kp-font-sans); font-size: 14px; font-weight: 500; text-decoration: none; } .kp-cta:hover { background: var(--kp-cherry-deep); }