Add Mylder brand design system with warm amber accent

- Implement comprehensive design system with OKLCH colors
- Add warm stone neutrals replacing cold zinc grays
- Add amber brand color for CTAs and accents
- Update typography to Plus Jakarta Sans + JetBrains Mono
- Add brand variants to Button and Badge components
- Add utility classes: glass, shadow-brand, text-gradient-brand
- Update all pages to use semantic design tokens
- Add design system documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-13 16:19:06 +01:00
parent 01739a50cd
commit 53dbb0ed97
12 changed files with 1000 additions and 166 deletions

View File

@@ -11,10 +11,26 @@ const badgeVariants = cva(
variant: {
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
brand:
"border-transparent bg-brand text-brand-foreground [a&]:hover:bg-brand/90",
"brand-outline":
"border-brand/30 bg-brand/10 text-brand [a&]:hover:bg-brand/20",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
success:
"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90",
"success-outline":
"border-success/30 bg-success/10 text-success [a&]:hover:bg-success/20",
warning:
"border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90",
"warning-outline":
"border-warning/30 bg-warning/10 text-warning [a&]:hover:bg-warning/20",
info:
"border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90",
"info-outline":
"border-info/30 bg-info/10 text-info [a&]:hover:bg-info/20",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},