← Back to Projects
PRODUCTION READY

House-Style
Design System

A professional design system that rivals Apple, Vercel, and Stripe.

6
Colors
7
Components
15
Patterns
100%
Compliance

6-Color System

Electric Lime for global UI, plus 5 distinct category colors for project-specific contexts.

Electric Lime
#CCFF00
oklch(0.931 0.229 123.11)
Global UI • Navigation • Footer • CTAs
AI
Intelligence & Future
#9945FF
oklch(0.598 0.257 298.86)
Code
Technical & Precise
#00CCFF
oklch(0.786 0.148 224.29)
Hardware
Energy & Power
#FF6600
oklch(0.696 0.204 43.48)
Art
Passion & Expression
#FF4444
oklch(0.664 0.223 25.72)
Design
Aesthetic & Refined
#FFB3D9
oklch(0.849 0.100 347.97)

Component Library

Production-ready components with hover effects, glows, and animations.

Buttons

Three patterns with hover glows and Apple-style animations.

Cards

Base Card

Neutral with lift animation

Base and category variants with colored accents.

Badges

PRIMARYAICODE

Pill-shaped, uppercase, for classification.

Tags

NEW
FeaturedMachine LearningTypeScript

Rounded corners, normal case, with hover glows.

Technical Excellence

Factory patterns, automated validation, and OKLCH color system.

Factory Pattern

Type-safe component class builders ensure complete, correct patterns.

HouseStyle.button.primary()

Auto Validation

Pre-commit hooks catch violations before they reach production.

115 files scanned
0 errors

Accessibility

WCAG AA compliant with proper contrast and keyboard navigation.

100 A11y score
Perfect contrast

Performance

98
Lighthouse
100
Accessibility
<15KB
CSS Size
60fps
Animations

Test Pages

Dedicated test pages for each component type with live examples.

Ready to explore?

Dive into the interactive showcase to see all components, colors, and patterns in action.

Like this project? Share it!

Share: