Component Architecture

kohl.design Components

Component-based design system built on top of shadcn/ui. Tailored with dynamic semantic tokens, Pine Forest Green, Crimson Coral, DM Sans and Cooper typography, and multi-project personality presets (Blush, Sharp Tech, Pebble Round).

Production Ready

Button

Brand variants (Pine, Crimson, Editorial, Outline, Ghost), tactile click feedback, loading states, and live project preset switcher.

View Component & Presets

Production Ready

Icons (Lucide)

Standardized Lucide icon system configured with a 1.5px stroke width and 20×20px optical size default, interactive gallery, and copyable snippets.

Explore Icon Set

Production Ready

Surfaces & Cards

5 elevation layers (Canvas to Glass), CVA card variants (default, elevated, interactive, sunken, glass), and concentric radius math.

Explore Surfaces

Badge & Status Pills

Full-radius status pills for review states (Shipped, Review, In Progress) and metadata tags.

Coming Next

Multi-Project Reuse & Personalities

Test Presets Live

Need this design system for another side project? Simply override --radius and --primary in app/globals.css, or apply data-theme-variant="blush" | "sharp" | "round". See docs/THEME_SHARING.md for copy-paste setups and template instructions.

Quick Start

Import the customized button anywhere in your React application:

import { Button } from "@/components/ui/button"

export default function MyFeature() {
  return (
    <div className="flex gap-3">
      <Button variant="default">Primary CTA</Button>
      <Button variant="editorial">Editorial</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline" loading>Saving...</Button>
    </div>
  )
}