Design Language

Glass morphism principles

shadszn/ui is built on a glass-morphism design philosophy. Surfaces are translucent layers stacked on deep backgrounds, creating visual depth through transparency rather than elevation shadows. The core principles:

Color system

The brand palette centers on three families: navy, lavender, and orange. Together they create a distinctive night-sky aesthetic.

Text hierarchy

Four text levels provide consistent information hierarchy through opacity rather than color changes. This keeps the palette cohesive while differentiating content importance.

Spacing scale

shadszn/ui uses Tailwind's default 4px-based spacing scale. These are the most commonly used values across components:

Border radius scale

Consistent rounding creates visual harmony across all components.

Motion principles

Animation in shadszn/ui is powered by Framer Motion and follows a minimal, purposeful approach. Motion serves to orient the user, not to decorate.

All motion respects the user's prefers-reduced-motion system setting. When reduced motion is preferred, animations resolve instantly. Use the useReducedMotion hook from the utilities package to conditionally disable motion in your own components.

import { motion } from "framer-motion"

// Standard fade-up entrance
const fadeUp = {
  initial: { opacity: 0, y: 8 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.3, ease: "easeOut" },
}

// Staggered list container
const stagger = {
  animate: { transition: { staggerChildren: 0.05 } },
}

// Usage
<motion.div {...fadeUp}>
  <Card>...</Card>
</motion.div>

Accessibility commitments

shadszn/ui is built accessibility-first. Every component is grounded in these principles: