Brand Style Guide
Official brand assets and guidelines for Khan Design. Download logos and reference colors for use in your projects.
Logo Downloads
Click any logo to download. Available in PNG and SVG formats.
Icon Marks
Wordmarks
Direct Links
Copy these URLs to use in external applications
https://khandesign.net/brand/kd-icon-gradient.svg https://khandesign.net/brand/kd-wordmark-dark.svg Brand Colors
CSS Variables
Use these CSS custom properties in your stylesheets.
| Name | Variable | Value |
|---|---|---|
| Background | --background | oklch(0.141 0.005 285.823) |
| Foreground | --foreground | oklch(0.985 0 0) |
| Primary | --primary | oklch(0.702 0.183 293.541) |
| Secondary | --secondary | oklch(0.274 0.006 286.033) |
| Muted | --muted | oklch(0.274 0.006 286.033) |
| Accent | --accent | oklch(0.274 0.006 286.033) |
| Card | --card | oklch(0.21 0.006 285.885) |
| Destructive | --destructive | oklch(0.704 0.191 22.216) |
Typography
Font Family: Altone
Custom sans-serif typeface used across all Khan Design properties
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Font Weights
Aa
Thin
font-weight: 100
Aa
Extra Light
font-weight: 200
Aa
Light
font-weight: 300
Aa
Regular
font-weight: 400
Aa
Medium
font-weight: 500
Aa
Semibold
font-weight: 600
Aa
Bold
font-weight: 700
Type Scale
The quick brown fox
Display
3.75rem / 60pxThe quick brown fox
Heading 1
3rem / 48pxThe quick brown fox
Heading 2
2.25rem / 36pxThe quick brown fox
Heading 3
1.875rem / 30pxThe quick brown fox
Heading 4
1.5rem / 24pxThe quick brown fox
Body Large
1.125rem / 18pxThe quick brown fox
Body
1rem / 16pxThe quick brown fox
Body Small
0.875rem / 14pxButtons
Variants



