/* ========================================================================== Klime Design System - Colors & Type Source: Figma "One-Page final Klime" ========================================================================== */ /* --- Fonts --------------------------------------------------------------- */ /* DM Sans is loaded from Google Fonts in the page . */ :root { /* ===================================================================== COLOR - PRIMARY (blue scale) Ordered light → dark from the brand-board strip ===================================================================== */ --klime-blue-100: rgb(143, 192, 255); /* #8FC0FF - sky / tint */ --klime-blue-500: rgb(24, 124, 255); /* #187CFF - signature blue */ --klime-blue-700: rgb(0, 79, 182); /* #004FB6 - deeper blue */ --klime-blue-900: rgb(0, 27, 63); /* #001B3F - navy */ --klime-blue-950: rgb(0, 14, 33); /* #000E21 - near-black navy */ /* ===================================================================== COLOR - NEUTRALS (greys scale) Ordered light → dark from the brand-board strip ===================================================================== */ --klime-white: rgb(255, 255, 255); /* #FFFFFF */ --klime-bone: rgb(245, 242, 237); /* #F5F2ED - warm off-white */ --klime-grey-100: rgb(237, 237, 237); /* #EDEDED */ --klime-grey-200: rgb(200, 200, 201); /* #C8C8C9 */ --klime-grey-300: rgb(144, 144, 146); /* #909092 */ --klime-grey-400: rgb(137, 137, 137); /* #898989 */ --klime-grey-500: rgb(132, 132, 132); /* #848484 */ --klime-grey-600: rgb(111, 111, 111); /* #6F6F6F */ --klime-grey-700: rgb(80, 83, 88); /* #505358 */ --klime-grey-800: rgb(24, 24, 24); /* #181818 */ --klime-ink: rgb(6, 6, 6); /* #060606 - display black */ --klime-black: rgb(0, 0, 0); /* #000000 */ --klime-border: rgba(132, 133, 140, 0.5); /* ===================================================================== COLOR - ACCENTS (used sparingly on brand board) ===================================================================== */ --klime-orange: rgb(255, 109, 24); /* #FF6D18 */ --klime-violet: rgb(64, 5, 146); /* #400592 */ --klime-coral: rgb(253, 97, 99); /* #FD6163 */ --klime-plum: rgb(19, 2, 44); /* #13022C */ /* ===================================================================== SEMANTIC TOKENS ===================================================================== */ --bg: var(--klime-white); --bg-alt: var(--klime-bone); --bg-inverse: var(--klime-black); --fg: var(--klime-ink); --fg-muted: var(--klime-grey-400); --fg-subtle: var(--klime-grey-300); --fg-inverse: var(--klime-white); --accent: var(--klime-blue-500); --accent-hover: var(--klime-blue-700); --accent-soft: var(--klime-blue-100); --border: var(--klime-border); --border-strong: var(--klime-grey-300); /* ===================================================================== SIGNATURE GRADIENT Light bone → signature blue. Used as brand background on hero tiles. ===================================================================== */ --klime-gradient: linear-gradient(180deg, var(--klime-bone) 0%, var(--klime-blue-500) 100%); --klime-gradient-white: linear-gradient(180deg, #ffffff 0%, var(--klime-blue-500) 100%); /* ===================================================================== RADII ===================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ===================================================================== SPACING (4pt grid) ===================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ===================================================================== SHADOWS The brand is flat - shadows are quiet and cool-toned. ===================================================================== */ --shadow-xs: 0 1px 2px rgba(0, 14, 33, 0.06); --shadow-sm: 0 2px 6px rgba(0, 14, 33, 0.08); --shadow-md: 0 8px 24px rgba(0, 14, 33, 0.10); --shadow-lg: 0 24px 60px rgba(0, 14, 33, 0.14); --shadow-blue: 0 12px 32px rgba(24, 124, 255, 0.25); /* ===================================================================== TYPE - family + base Klime is a single-family system: DM Sans everything. ===================================================================== */ --font-sans: 'DM Sans', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-display: 'DM Sans', 'Inter', system-ui, sans-serif; --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Tight tracking is a brand trait - -2% to -5% on display weights */ --tracking-display: -0.05em; --tracking-heading: -0.03em; --tracking-body: -0.01em; --tracking-mono: 0em; --leading-display: 1.0; --leading-heading: 1.1; --leading-body: 1.5; /* ===================================================================== TYPE - scale (fluid-ish, paired with semantic roles below) ===================================================================== */ --fs-display: 120px; /* hero display */ --fs-h1: 64px; /* section titles on brand board */ --fs-h2: 40px; --fs-h3: 30px; --fs-h4: 22px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; } /* ========================================================================== SEMANTIC TYPE CLASSES Use these directly in markup; they own family + weight + size + tracking. ========================================================================== */ body, .p { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: var(--leading-body); letter-spacing: var(--tracking-body); color: var(--fg); background: var(--bg); } .display, h1.display { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); color: var(--fg); } h1, .h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: var(--tracking-display); color: var(--fg); } h2, .h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--fg); } h3, .h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--fg); } h4, .h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: var(--tracking-body); color: var(--fg); } .eyebrow { font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); } .lede { font-family: var(--font-sans); font-weight: 300; font-size: 22px; line-height: 1.4; letter-spacing: var(--tracking-body); color: var(--fg-muted); } small, .small { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); } .caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-muted); letter-spacing: 0.02em; } code, .mono { font-family: var(--font-mono); font-size: 0.925em; letter-spacing: var(--tracking-mono); } /* Utilities */ .bg-ink { background: var(--klime-black); color: var(--klime-white); } .bg-blue { background: var(--klime-blue-500); color: var(--klime-white); } .bg-bone { background: var(--klime-bone); color: var(--klime-ink); } .bg-gradient { background: var(--klime-gradient); color: var(--klime-white); }