DESIGN.md Generator

---
version: "alpha"
name: "My Design System"
description: "A custom design system generated by kuler.ai."

colors:
  primary: "#6366f1"
  on-primary: "#1A1A1A"
  secondary: "#a855f7"
  on-secondary: "#1A1A1A"
  tertiary: "#06b6d4"
  surface: "#fafafa"
  surface-container: "#ffffff"
  on-surface: "#111827"
  neutral: "#6B7280"
  error: "#DC2626"

typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 700
    lineHeight: 40px
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 600
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label-lg:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "0.01em"
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 16px
    letterSpacing: "0.04em"

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    height: 44px
    padding: "0 20px"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    rounded: "{rounded.lg}"
    height: 44px
    padding: "0 20px"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "{spacing.lg}"
  input-field:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px 16px"
    height: 44px
---

# My Design System

> Generated by [kuler.ai](https://kuler.ai) — OKLCH-first color palettes for AI-native builders.

## Overview

A custom design system generated by kuler.ai.

This design system emphasizes clarity and consistency. The palette is built on the OKLCH color space for perceptual uniformity — every color is intentionally chosen to maintain visual harmony across light surfaces, dark variants, and interactive states. Use it as a complete foundation for web applications, marketing sites, and product interfaces.

## Colors

The palette is organized by semantic role. Each color has a specific purpose in the interface hierarchy:

- **Primary** (`#6366f1`) — Brand color. Use for CTAs, links, focus rings, and primary actions.
- **Secondary** (`#a855f7`) — Supporting brand color for secondary actions and visual accents.
- **Tertiary** (`#06b6d4`) — Accent color for highlights, badges, and status indicators.
- **Surface** (`#fafafa`) — Page background.
- **Surface Container** (`#ffffff`) — Cards, panels, modals.
- **On Surface** (`#111827`) — Primary text, headings, and body copy.
- **Neutral** (`#6B7280`) — Secondary text, borders, and muted elements.
- **Error** (`#DC2626`) — Destructive actions and error states.

All text/background combinations must meet WCAG AA (4.5:1 contrast ratio for normal text, 3:1 for large text).

## Typography

The type system uses **Inter** — a neutral, geometric sans-serif optimized for screen readability.

- **Headlines** (headline-lg, headline-md): Semi-bold to bold, tight letter-spacing for visual weight.
- **Body** (body-lg, body-md, body-sm): Regular weight, generous line-height for comfortable reading.
- **Labels** (label-lg, label-sm): Semi-bold with slight letter-spacing for small UI text, buttons, and metadata.

Headlines set in `on-surface`. Body text in `on-surface` or `neutral` depending on emphasis. Labels in `neutral` unless interactive.

## Layout

The layout follows an 8px base grid. All spacing values are multiples of this unit:

- **xs** (4px): Tight gaps between inline elements (icon + label).
- **sm** (8px): Internal padding for compact components.
- **md** (16px): Standard gaps between elements, card padding.
- **lg** (24px): Section padding, card spacing.
- **xl** (32px): Large section margins.
- **2xl** (48px): Page-level section breaks.

Container max-width: 1280px with 16px horizontal padding (mobile) / 24px (desktop).

## Elevation & Depth

Depth is communicated through surface color and subtle shadows, not strong drop-shadows:

- **Level 0** — Page background (`surface`). The base canvas.
- **Level 1** — Cards and panels (`surface-container`). Sits above the background through color contrast alone.
- **Level 2** — Dropdowns, modals. Add `box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)`.
- **Level 3** — Tooltips, popovers. Add `box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)`.

Keep shadows neutral and soft. Never use colored shadows.

## Shapes

The shape language is modern and approachable with rounded corners:

- **Buttons**: `rounded-lg` (16px) for a soft, tactile feel.
- **Cards**: `rounded-lg` (16px) for content containers.
- **Inputs**: `rounded-md` (8px) for form elements — slightly tighter than cards.
- **Badges/chips**: `rounded-full` (pill shape) for status indicators and tags.
- **Avatars**: `rounded-full` for user photos.

## Components

### Buttons

Primary buttons use the brand `primary` color with `on-primary` text. Hover state shifts to `secondary`. Secondary buttons use `surface-container` with `on-surface` text and a 1px border in `neutral` at 20% opacity.

All buttons use `label-lg` typography, 44px height, and `rounded-lg`.

### Cards

Cards use `surface-container` background with `rounded-lg` and `lg` (24px) padding. No border by default — elevation is communicated through the background color contrast against `surface`.

### Inputs

Text inputs use `surface-container` background, `rounded-md`, and a 1px border in `neutral` at 20% opacity. Focus state replaces the border with a 2px ring in `primary`. Placeholder text uses `neutral`.

## Do's and Don'ts

**Do:**
- Use `primary` for all main CTAs and interactive links
- Maintain 4.5:1 contrast for all body text against its background
- Use `surface-container` for elevated components (cards, modals)
- Keep the color palette exactly as defined — no ad-hoc hex values
- Use `neutral` for secondary text, borders, and muted UI elements

**Don't:**
- Use `surface` or `surface-container` as text colors
- Mix colors from other palettes without updating this file
- Use low-contrast combinations for text (check with a contrast tool)
- Apply `primary` to large background areas — reserve it for interactive elements
- Skip hover and focus states on interactive components