accessible design
high contrast
inclusive color palette
modern UI
user-friendly
light and dark modes
emotional resonance
functional aesthetics
clear readability
harmonious colors
future-forward design
immersive experience
visual storytelling
calm and focused
vibrant and open
Shadcn/ui Theme Css Variables
name: Inclusive Horizonkeyword: accessibility views: 10
:root { --background: 95 20% 98%; --foreground: 240 10% 20%; --card: 95 20% 95%; --card-foreground: 240 10% 20%; --popover: 95 20% 95%; --popover-foreground: 240 10% 20%; --primary: 210 80% 50%; --primary-foreground: 0 0% 100%; --secondary: 150 50% 40%; --secondary-foreground: 0 0% 100%; --muted: 95 20% 90%; --muted-foreground: 240 10% 40%; --accent: 30 80% 60%; --accent-foreground: 0 0% 100%; --destructive: 0 80% 50%; --destructive-foreground: 0 0% 100%; --border: 240 10% 80%; --input: 240 10% 90%; --ring: 210 80% 50%; --radius: 0.75rem; --chart-1: 210 80% 50%; --chart-2: 150 50% 40%; --chart-3: 30 80% 60%; --chart-4: 0 80% 50%; --chart-5: 240 10% 20%; } .dark { --background: 240 10% 10%; --foreground: 95 20% 98%; --card: 240 10% 15%; --card-foreground: 95 20% 98%; --popover: 240 10% 15%; --popover-foreground: 95 20% 98%; --primary: 210 80% 50%; --primary-foreground: 0 0% 100%; --secondary: 150 50% 40%; --secondary-foreground: 0 0% 100%; --muted: 240 10% 20%; --muted-foreground: 95 20% 70%; --accent: 30 80% 60%; --accent-foreground: 0 0% 100%; --destructive: 0 80% 50%; --destructive-foreground: 0 0% 100%; --border: 240 10% 30%; --input: 240 10% 20%; --ring: 210 80% 50%; --radius: 0.75rem; --chart-1: 210 80% 50%; --chart-2: 150 50% 40%; --chart-3: 30 80% 60%; --chart-4: 0 80% 50%; --chart-5: 95 20% 98%; }