Colors

Dark mode default, light mode via .light-mode class on body. All values flip automatically through CSS variables.

Surfaces

Surface

#000000

Secondary

white/5%

Elevated

white/8%

Hero BG

#0a0015

Brand Accents

Purple

#a855f7

Pink

#ec4899

Cyan

#22d3ee

Yellow

#fbbf24

Green

#4ade80

Text

Content

#ffffff

Muted

white/70%

Subtle

white/50%

Gradients

Brand gradients for CTAs, headings, and decorative accents.

--kori-gradient-brand · 90deg · Purple → Pink

--kori-gradient-brand-135 · 135deg · Purple/subtle → Pink/subtle (cards)

--kori-gradient-text · 90deg · Purple → Pink → Cyan (animated text)

Typography

Display: Clash Display (weight 300 for headings). Body: General Sans. Mono: JetBrains Mono.

h1 · Clash Display 300 · 3.5rem · 0.03em tracking · 1.1 line-height

Born from the Algorithm

h2 · Clash Display 300 · 2.5rem

The Koriverse

h3 · Clash Display 300 · 2rem

Welcome to the Pack

h4 · Clash Display 300 · 1.5rem

Community in Action

Body · General Sans 400 · 1rem · 1.8 line-height · -0.005em tracking

Kori is a real dog living a very unreal life on the internet. She started as a TikTok clip. The internet turned her into a character, a mascot, and a symbol of what happens when millions of people all press 'share.'

Label · Clash Display 600 · 0.75rem · UPPERCASE · 0.1em tracking

Kori: The Story

Gradient text · .kori-text-gradient (animated 8s)

You've scrolled past her a hundred times

Spacing

8px base grid.

xs · 4px

sm · 8px

md · 16px

lg · 24px

xl · 40px

2xl · 64px

3xl · 96px

Border Radius

8px
sm

12px
md

20px
lg

24px
xl

pill

Buttons

Three tiers. Primary for CTAs, Secondary for supporting, Ghost for tertiary.

<button class="kori-btn kori-btn-primary">Primary</button> <button class="kori-btn kori-btn-secondary">Secondary</button> <button class="kori-btn kori-btn-ghost">Ghost</button>

Cards & Surfaces

Elevated surfaces with backdrop blur. Hover to see interaction states.

Standard Card

.kori-card — backdrop blur, subtle border, hover state.

Glass

.kori-glass — frosted glass for overlays and navs.

Purple Card

Cyan Card

Pink Card

Inputs & Controls

Text Input

Range Slider

Badges

Solana Active Warning

Interactive Elements

Contract Address

CA: HtTYHz1Kf3rrQo6AqDLmss7gq5WrkWAaXn3tupUZbonk

Social Icons

Iconography

Phosphor Icons (duotone for expressive, regular for small UI). 256×256 viewBox, fill="currentColor". Auto-generated into src/config/icons.js via generate-icons.js.

Usage

<span data-icon="heart" data-icon-size="w-5 h-5"></span>  import { icon } from './config/icons.js'; element.innerHTML = icon('rocket', 'w-6 h-6');  // Injects Tailwind size classes onto the SVG tag: // svg.replace('<svg', `<svg class="${sizeClass}"`) // Falls back to raw name string if icon not found

Size Scale

w-3 h-3
12px

w-4 h-4
16px

w-5 h-5
20px ★

w-6 h-6
24px

w-8 h-8
32px

w-10 h-10
40px

Full Icon Set (click name to copy)

Guidelines

✓ Do

Use fill="currentColor" so icons inherit text color and respond to themes. Default size is w-5 h-5 (20px). ViewBox is always 0 0 256 256 (Phosphor standard). Regenerate with node generate-icons.js.

✗ Don't

Hardcode fill colors on icons. Don't mix Phosphor with other libraries (Lucide, Heroicons, FontAwesome). Don't use stroke-based icons — Phosphor uses fill.

Animations

Subtle ambient motion. Respects prefers-reduced-motion.

pulse

float

fade-in

Do's & Don'ts

✓ Do

Use the purple-pink gradient as primary brand expression. Cyan, yellow, green are accent-only for status indicators and highlights.

✗ Don't

Make cyan or neon magenta the dominant color. No 0 0 80px #ff00ff — that's arcade, not Kori.

✓ Do

Use Clash Display for headings (weight 300) and General Sans for body. These define the Kori typographic voice.

✗ Don't

Default to Arial, Helvetica, or system fonts. They flatten the brand feel instantly.

✓ Do

Use CSS variables for all colors. Dark/light mode should "just work" — no hardcoded hex in component styles.

✗ Don't

Hardcode colors like #fff or #000 directly. Always use var(--kori-content) etc.

✓ Do

Keep surfaces in the rgba(white, low-opacity) range for dark mode. Pure black base with subtle glass layers creates depth.

✗ Don't

Use solid gray backgrounds like #333 or #1a1a1a. The transparency-based system is what makes things feel layered and alive.

Accessibility

Building for everyone from day one. These patterns are baked into the design system.

Focus Visible

All interactive elements show a 2px purple outline on keyboard focus via :focus-visible. Try tabbing through this page.

Reduced Motion

All animations respect prefers-reduced-motion: reduce. Gradient shifts, pulses, floats, and scroll reveals are all disabled when the OS preference is set.

Skip Link

Include .kori-skip-link as the first element in body — hidden until keyboard-focused, then jumps to main content.

Screen Reader Utility

.kori-sr-only hides content visually while keeping it accessible to assistive technology.

Quick Start

<link href="https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&f[]=general-sans@200,300,400,500,600,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">  <link rel="stylesheet" href="kori-design-system.css">  <h1 class="kori-text-gradient">Your Heading</h1> <div class="kori-card">Your content</div> <button class="kori-btn kori-btn-primary">Action</button>  <body class="light-mode">