taylor-atelier

What problem does it solve?

Provides a repeatable design system and implementation protocol to convert web projects into a cohesive, warm, craft-focused UI that respects Korean typography, dark mode, accessibility, and performance constraints while avoiding common anti-patterns and banned assets.

Core Features & Use Cases

• Atelier Palette & CSS Variables: Comprehensive light and dark CSS variable system for colors, borders, and shadows to ensure consistent theming.
• Tailwind & Component Integration: Tailwind configuration snippets, font stacks, and ready component styles (headers, hero, cards, forms, footers) for HTML, Tailwind, and React projects.
• Typography & Localization: Explicit Korean typography rules and font fallbacks, word-break optimizations, and typographic scale for display and body text.
• Interaction, Performance & Accessibility: Curated easing functions, IntersectionObserver scroll reveal patterns, reduced-motion support, focus-visible rules, and performance guidelines (GPU-safe animations, image formats).
• Use Case: Migrate an existing React/Tailwind site to an atelier theme, audit and remove banned fonts/colors, add dark mode and Korean typography, and produce example components and a final checklist audit.

Quick Start

Apply the taylor-atelier design system to my project's UI by generating the CSS variable palette, a Tailwind config integration, font stacks for Korean support, and example component styles with accessibility and performance checks.