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

Icon - Gradient

Primary icon for dark backgrounds

PNG SVG

Icon - Purple

Solid purple for general use

PNG SVG

Icon - Black

Black version for light backgrounds

PNG SVG

Wordmarks

Wordmark - Dark BG

White text with gradient icon

PNG SVG

Wordmark - Gradient

Full gradient for dark backgrounds

PNG SVG

Wordmark - Black

Black version for light backgrounds

PNG SVG

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

Thin

font-weight: 100

Extra Light

font-weight: 200

Light

font-weight: 300

Regular

font-weight: 400

Medium

font-weight: 500

Semibold

font-weight: 600

Bold

font-weight: 700

Type Scale

The quick brown fox

Display 3.75rem / 60px

The quick brown fox

Heading 1 3rem / 48px

The quick brown fox

Heading 2 2.25rem / 36px

The quick brown fox

Heading 3 1.875rem / 30px

The quick brown fox

Heading 4 1.5rem / 24px

The quick brown fox

Body Large 1.125rem / 18px

The quick brown fox

Body 1rem / 16px

The quick brown fox

Body Small 0.875rem / 14px

Buttons

Variants