Skip to main content
The Klef Design System uses CSS custom properties (variables) extensively to provide a flexible, maintainable theming system. All variables are defined in design-system.css and can be accessed throughout your project.

​
Color System

​
Core Colors

--k-black: #22323a;
--white: #ffffff;
--black: #000000;

​
Primary Colors

The primary color palette includes blue and orange with hover states and RGB/HSL variants: 
/* Blue */
--blue: #0071e3;
--blue-hover: #0077ed;
--blue-rgb: 0, 113, 227;
--blue-hsl: 211 100% 45%;
--blue-light: rgba(0, 113, 227, 0.1);

/* Orange */
--orange: #e68600;
--orange-hover: #d97f00;
--orange-rgb: 230, 134, 0;
--orange-hsl: 38 100% 45%;
--orange-light: rgba(230, 134, 0, 0.12);

​
Secondary Colors (Klef Dev Identity)

/* Green */
--green: #1e6f36;
--green-hover: #195f2e;
--green-rgb: 30, 111, 54;
--green-hsl: 145 57% 28%;
--green-light: rgba(30, 111, 54, 0.12);

/* Pink */
--pink: #c91042;
--pink-hover: #b80e3c;
--pink-rgb: 201, 16, 66;
--pink-hsl: 348 85% 43%;
--pink-light: rgba(201, 16, 66, 0.1);

/* Purple */
--purple: #8b3fc7;
--purple-hover: #7d38b3;
--purple-rgb: 139, 63, 199;
--purple-hsl: 272 54% 51%;
--purple-light: rgba(139, 63, 199, 0.1);

​
Tertiary Colors

--red: #d12d20;
--red-hover: #bc281c;
--red-rgb: 209, 45, 32;
--red-hsl: 5 73% 47%;
--red-light: rgba(209, 45, 32, 0.1);

​
Gray Scale

A complete gray scale from 100 (lightest) to 900 (darkest): 
--gray-100: #f5f6f7;
--gray-200: #e5e7ea;
--gray-300: #cfd4d8;
--gray-400: #b0b5ba;
--gray-500: #8e8e93;
--gray-600: #6e6e73;
--gray-700: #424245;
--gray-800: #22323a;
--gray-900: #1d1d1f;
--gray-1: #f5f5f2;

​
Semantic Colors

These variables provide semantic meaning and make it easy to update themes: 
/* Text Colors */
--text-primary: var(--k-black);
--text-secondary: var(--gray-600);
--text-tertiary: var(--gray-500);
--text-inverse: var(--white);

/* Background Colors */
--bg-primary: var(--white);
--bg-secondary: var(--gray-100);
--bg-tertiary: var(--gray-200);

/* Border Colors */
--border-light: rgba(0, 0, 0, 0.06);
--border-medium: rgba(0, 0, 0, 0.1);
--border-strong: rgba(0, 0, 0, 0.2);

​
Typography

​
Font Families

--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", "Courier New", monospace;

​
Font Sizes

Base font size is 17px. All sizes are calculated in rem: 
--fs-xs: 0.7647rem;   /* 13px */
--fs-sm: 0.8235rem;   /* 14px */
--fs-base: 1rem;      /* 17px */
--fs-md: 1.0588rem;   /* 18px */
--fs-lg: 1.1765rem;   /* 20px */
--fs-xl: 1.4118rem;   /* 24px */
--fs-2xl: 1.6471rem;  /* 28px */
--fs-3xl: 1.8824rem;  /* 32px */
--fs-4xl: 2.3529rem;  /* 40px */
--fs-5xl: 2.8235rem;  /* 48px */
--fs-6xl: 3.2941rem;  /* 56px */
--fs-7xl: 3.7647rem;  /* 64px */
--fs-8xl: 4.7059rem;  /* 80px */

​
Font Weights

--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;

​
Line Heights

--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.47059;
--lh-relaxed: 1.6;
--lh-loose: 1.8;

​
Letter Spacing

--ls-tighter: -0.022em;
--ls-tight: -0.015em;
--ls-normal: 0;
--ls-wide: 0.01em;
--ls-wider: 0.08em;

​
Spacing Scale

Consistent spacing scale from 0 to 10: 
--sp-0: 0;
--sp-1: 0.25rem;  /* 4px */
--sp-2: 0.5rem;   /* 8px */
--sp-3: 0.75rem;  /* 12px */
--sp-4: 1rem;     /* 16px */
--sp-5: 1.5rem;   /* 24px */
--sp-6: 2rem;     /* 32px */
--sp-7: 3rem;     /* 48px */
--sp-8: 4rem;     /* 64px */
--sp-9: 6rem;     /* 96px */
--sp-10: 8rem;    /* 128px */

​
Border Radius

--radius-xs: 4px;
--radius-sm: 16px;   /* Apple standard */
--radius-md: 18px;
--radius-lg: 20px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;

​
Shadows

--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.02);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.02);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.06), 0 10px 10px rgba(0, 0, 0, 0.02);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.12);
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);

​
Timing & Easing

​
Easing Functions

--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
--ease-out: ease-out;
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

​
Durations

--duration-fast: 0.15s;
--duration-base: 0.2s;
--duration-slow: 0.3s;
--duration-slower: 0.5s;

​
Z-Index

--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 400;
--z-popover: 500;
--z-toast: 600;
--z-tooltip: 700;

​
Usage Examples

​
Using Color Variables

<div style="--bg:var(--blue); --c:var(--white); --p:var(--sp-5)">
  Primary button style
</div>

​
Using Typography Variables

<h1 style="--fs:var(--fs-5xl); --fw:var(--fw-semibold); --lh:var(--lh-tight)">
  Large Heading
</h1>

​
Combining Multiple Variables

<div style="--p:var(--sp-6); --bg:var(--bg-secondary); --br:var(--radius-lg); --shadow:var(--shadow-md)">
  Card with padding, background, border radius, and shadow
</div>

​
Variable-Driven CSS System

The Klef Design System uses a unique variable-driven approach where inline CSS variables are mapped to actual CSS properties through attribute selectors. This allows you to write declarative styles directly in HTML: 
<!-- Traditional approach -->
<div class="flex items-center justify-between p-5 bg-gray-100 rounded-lg"></div>

<!-- Klef v2 variable-driven approach -->
<div style="--flex; --items:center; --justify:space-between; --p:var(--sp-5); --bg:var(--bg-secondary); --br:var(--radius-lg)"></div>
See the Theme Customization guide for more details on how to use these variables effectively.

Build docs developers (and LLMs) love

Get started for freeTalk to us