ChaozCode Design System

🚀 Quick Start

<!-- Include the design system -->
<link rel="stylesheet" href="style-guide-v6.css">
<script src="jordan-sandbox/chaoz-ui.js"></script>

<!-- Use components -->
<button class="btn btn-primary">Get Started</button>

<div class="card hover-lift">
    <h3 class="card-title">Hello ChaozCode</h3>
    <p class="card-content">Build amazing things.</p>
</div>

🎨 Color System

Using OKLCH color space for perceptually uniform colors. Each scale has 12 steps from lightest (1) to darkest (12), with step 9 as the primary accent.

Primary Scale

Semantic Colors

/* OKLCH color definition */
--primary-9: oklch(50% 0.17 265);  /* Main purple */
--success: oklch(65% 0.18 145);    /* Green */
--warning: oklch(75% 0.16 85);     /* Orange */
--danger: oklch(60% 0.22 25);      /* Red */

/* Using color-mix() for variants */
background: color-mix(in oklch, var(--primary-9) 20%, transparent);

📝 Typography

Fluid typography using clamp() for seamless scaling. No breakpoints needed - text smoothly adapts from mobile to desktop.

Gradient Text

Beautiful Gradient Typography

/* Fluid typography scale */
--fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
--fluid-xl: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
--fluid-hero: clamp(3rem, 2rem + 5vw, 7rem);

/* Usage */
.text-hero { font-size: var(--fluid-hero); }
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

📏 Spacing System

Fluid spacing that scales with viewport using clamp(). Based on an 8px grid with responsive adjustments.

🔘 Buttons

Variants

Semantic

Sizes

With Icons

Magnetic Effect

📦 Cards

Basic Cards

Glass Card

3D Flip Card

📋 Form Elements

🧭 Navigation

Tabs

Accordion

Breadcrumbs

Pagination

💬 Feedback Components

Alerts

Badges

Tooltips

Toast Notifications

Modal Dialog

Loading States

Skeleton Loading

📊 Data Display

Data Table

Avatars

Timeline

Stepper

Chips / Tags

✨ Animations

CSS-only animations with scroll-driven effects in modern browsers. All animations respect prefers-reduced-motion.

Keyframe Animations

Hover Effects

Glow Animation

Staggered Entrance

Scroll Animations (Chrome 115+)

⚡ Advanced Features

Container Queries

Components adapt to their container, not the viewport. Resize the demo below.

CSS :has() Selector

Parent selector capability - style parents based on children.

/* Style card differently when it contains an image */
.card:has(img) {
    padding: 0;
    overflow: hidden;
}

/* Highlight input group when input is focused */
.input-group:has(input:focus) {
    background: var(--bg-elevated);
}

/* Show error message only when input is invalid */
.input-group:has(input:invalid) .error-message {
    display: block;
}

CSS Nesting

.card {
    background: var(--bg-elevated);
    
    /* Nested rules */
    &:hover {
        transform: translateY(-4px);
    }
    
    .card-title {
        color: var(--text-primary);
    }
    
    /* Media query inside */
    @media (max-width: 768px) {
        padding: var(--space-md);
    }
}

@layer Cascade

/* Define layer order - last wins for same specificity */
@layer reset, base, layout, components, utilities, animations;

/* Reset styles in their own layer */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
}

/* Utilities always win (they're last) */
@layer utilities {
    .hidden { display: none !important; }
}

Color Functions

/* OKLCH - perceptually uniform */
--primary-9: oklch(50% 0.17 265);

/* color-mix for variants */
--primary-hover: color-mix(in oklch, var(--primary-9) 90%, white);
--primary-light: color-mix(in oklch, var(--primary-9) 20%, transparent);

/* relative color syntax (experimental) */
--primary-dark: oklch(from var(--primary-9) calc(l - 0.1) c h);

🔧 Utility Classes

.flex
.flex-col
.flex-wrap
.items-center
.items-start
.justify-center
.justify-between
.gap-xs/sm/md/lg/xl

.grid
.grid-cols-1/2/3/4
.md\:grid-cols-1/2
.gap-xs/sm/md/lg/xl

.m-auto .mx-auto
.mt-xs/sm/md/lg/xl
.mb-xs/sm/md/lg/xl
.p-xs/sm/md/lg/xl

.text-xs/sm/base/md/lg/xl/2xl/3xl/hero
.font-normal/medium/semibold/bold/black
.text-center/left/right
.text-primary/secondary/muted
.text-gradient

.shadow-sm/md/lg/xl/glow
.rounded-sm/md/lg/xl/full
.blur .backdrop-blur
.opacity-0/50/100

.animate-fadeIn/fadeInUp
.animate-scaleIn/spin/pulse
.animate-bounce/float/glow
.hover-lift/scale/glow/border
.transition-fast/base/slow

🎮 Interactive Demos

Dropdown Menu

Magnetic Buttons

Buttons that follow your cursor with a magnetic effect.

Number Counter

Text Scramble

Confetti 🎉