primitives.glass.50 | #f8fafc | |
primitives.glass.100 | #f1f5f9 | |
primitives.glass.200 | #e2e8f0 | |
primitives.glass.300 | #cbd5e1 | |
primitives.glass.400 | #94a3b8 | |
primitives.glass.500 | #64748b | |
primitives.glass.600 | #475569 | |
primitives.glass.700 | #334155 | |
primitives.glass.800 | #1e293b | |
primitives.glass.900 | #0f172a | |
primitives.glass.950 | #020617 | |
primitives.liquid-blue.50 | #eff6ff | |
primitives.liquid-blue.100 | #dbeafe | |
primitives.liquid-blue.200 | #bfdbfe | |
primitives.liquid-blue.300 | #93c5fd | |
primitives.liquid-blue.400 | #60a5fa | |
primitives.liquid-blue.500 | #3b82f6 | |
primitives.liquid-blue.600 | #2563eb | |
primitives.liquid-blue.700 | #1d4ed8 | |
primitives.liquid-blue.800 | #1e40af | |
primitives.liquid-blue.900 | #1e3a8a | |
primitives.liquid-blue.950 | #172554 | |
primitives.liquid-blue.400-24 | rgba(96, 165, 250, 0.24) | |
primitives.liquid-blue.500-12 | rgba(59, 130, 246, 0.12) | |
primitives.liquid-blue.500-24 | rgba(59, 130, 246, 0.24) | |
primitives.liquid-blue.500-32 | rgba(59, 130, 246, 0.32) | |
primitives.liquid-blue.500-50 | rgba(59, 130, 246, 0.50) | |
primitives.liquid-blue.600-90 | rgba(37, 99, 235, 0.90) | |
primitives.liquid-teal.50 | #f0fdfa | |
primitives.liquid-teal.100 | #ccfbf1 | |
primitives.liquid-teal.200 | #99f6e4 | |
primitives.liquid-teal.300 | #5eead4 | |
primitives.liquid-teal.400 | #2dd4bf | |
primitives.liquid-teal.500 | #14b8a6 | |
primitives.liquid-teal.600 | #0d9488 | |
primitives.liquid-teal.700 | #0f766e | |
primitives.liquid-teal.400-24 | rgba(45, 212, 191, 0.24) | |
primitives.liquid-teal.500-12 | rgba(20, 184, 166, 0.12) | |
primitives.liquid-teal.500-24 | rgba(20, 184, 166, 0.24) | |
semantic.light.primary | {liquid-blue.500} | |
semantic.light.primary-foreground | #ffffff | |
semantic.light.primary-muted | {liquid-blue.500-24} | |
semantic.light.primary-muted-foreground | {liquid-blue.600} | |
semantic.light.secondary | {liquid-teal.500} | |
semantic.light.secondary-foreground | #ffffff | |
semantic.light.secondary-muted | {liquid-teal.500-12} | |
semantic.light.secondary-muted-foreground | {liquid-teal.600} | |
semantic.light.background | #f2f2f7 | |
semantic.light.canvas | #ffffff | |
semantic.light.foreground | #1c1c1e | |
semantic.light.border | rgba(0, 0, 0, 0.08) | |
semantic.light.border-secondary | rgba(0, 0, 0, 0.06) | |
semantic.light.muted | rgba(120, 120, 128, 0.08) | |
semantic.light.muted-foreground | rgba(60, 60, 67, 0.60) | |
semantic.light.card | rgba(255, 255, 255, 0.70) | |
semantic.light.card-border | rgba(255, 255, 255, 0.60) | |
semantic.light.card-foreground | #1c1c1e | |
semantic.light.input | rgba(120, 120, 128, 0.06) | |
semantic.light.input-border | rgba(0, 0, 0, 0.10) | |
semantic.light.surface | rgba(255, 255, 255, 0.55) | |
semantic.light.surface-foreground | #1c1c1e | |
semantic.light.accent | {liquid-blue.500-12} | |
semantic.light.accent-foreground | {liquid-blue.500} | |
semantic.light.destructive | #ef4444 | |
semantic.light.destructive-muted | rgba(239, 68, 68, 0.12) | |
semantic.light.warning | #f59e0b | |
semantic.light.warning-muted | rgba(245, 158, 11, 0.12) | |
semantic.light.success | #10b981 | |
semantic.light.success-muted | rgba(16, 185, 129, 0.12) | |
semantic.light.info | #0ea5e9 | |
semantic.light.info-muted | rgba(14, 165, 233, 0.12) | |
semantic.dark.primary | {liquid-blue.400} | |
semantic.dark.primary-foreground | #ffffff | |
semantic.dark.primary-muted | {liquid-blue.500-24} | |
semantic.dark.primary-muted-foreground | {liquid-blue.400} | |
semantic.dark.secondary | {liquid-teal.400} | |
semantic.dark.secondary-foreground | #ffffff | |
semantic.dark.secondary-muted | {liquid-teal.500-24} | |
semantic.dark.secondary-muted-foreground | {liquid-teal.400} | |
semantic.dark.background | #000000 | |
semantic.dark.canvas | #1c1c1e | |
semantic.dark.foreground | #f5f5f7 | |
semantic.dark.border | rgba(255, 255, 255, 0.10) | |
semantic.dark.border-secondary | rgba(255, 255, 255, 0.08) | |
semantic.dark.muted | rgba(120, 120, 128, 0.18) | |
semantic.dark.muted-foreground | rgba(235, 235, 245, 0.60) | |
semantic.dark.card | rgba(44, 44, 46, 0.65) | |
semantic.dark.card-border | rgba(255, 255, 255, 0.08) | |
semantic.dark.card-foreground | #f5f5f7 | |
semantic.dark.input | rgba(120, 120, 128, 0.24) | |
semantic.dark.input-border | rgba(255, 255, 255, 0.12) | |
semantic.dark.surface | rgba(44, 44, 46, 0.50) | |
semantic.dark.surface-foreground | #f5f5f7 | |
semantic.dark.accent | {liquid-blue.500-12} | |
semantic.dark.accent-foreground | {liquid-blue.400} | |
semantic.dark.destructive | #f87171 | |
semantic.dark.destructive-muted | rgba(248, 113, 113, 0.18) | |
semantic.dark.warning | #fbbf24 | |
semantic.dark.warning-muted | rgba(251, 191, 36, 0.18) | |
semantic.dark.success | #34d399 | |
semantic.dark.success-muted | rgba(52, 211, 153, 0.18) | |
semantic.dark.info | #38bdf8 | |
semantic.dark.info-muted | rgba(56, 189, 248, 0.18) | |
effects.shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.02) | |
effects.shadow-md | 0 2px 4px rgba(0, 0, 0, 0.02), 0 12px 40px rgba(0, 0, 0, 0.04) | |
effects.shadow-lg | 0 4px 8px rgba(0, 0, 0, 0.03), 0 24px 80px rgba(0, 0, 0, 0.05) | |
effects.shadow-glass | 0 2px 8px rgba(0, 0, 0, 0.02), 0 16px 60px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.60) | |
effects.gradient-primary | linear-gradient(135deg, #3b82f6, #60a5fa) | |
effects.gradient-glass | linear-gradient(135deg, rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.40)) | |
effects.gradient-glass-border | linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.30)) | |
effects.glass-border | rgba(255, 255, 255, 0.50) | |
effects.glass-glow | 0 0 0 1px rgba(255, 255, 255, 0.20) | |
effects.glass-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.50) | |
effects.liquid-refraction | rgba(255, 255, 255, 0.08) | |
effects.backdrop-blur | blur(30px) saturate(180%) | |
effects.transition-spring | 400ms cubic-bezier(0.34, 1.56, 0.64, 1) | |
effects.effects-dark.shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06) | |
effects.effects-dark.shadow-md | 0 2px 4px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.10) | |
effects.effects-dark.shadow-lg | 0 4px 8px rgba(0, 0, 0, 0.08), 0 24px 80px rgba(0, 0, 0, 0.14) | |
effects.effects-dark.shadow-glass | 0 2px 8px rgba(0, 0, 0, 0.06), 0 16px 60px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06) | |
effects.effects-dark.gradient-primary | linear-gradient(135deg, #2563eb, #60a5fa) | |
effects.effects-dark.gradient-glass | linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) | |
effects.effects-dark.gradient-glass-border | linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) | |
effects.effects-dark.glass-border | rgba(255, 255, 255, 0.08) | |
effects.effects-dark.glass-glow | 0 0 0 1px rgba(255, 255, 255, 0.06) | |
effects.effects-dark.glass-highlight | inset 0 1px 0 rgba(255, 255, 255, 0.08) | |
effects.effects-dark.liquid-refraction | rgba(255, 255, 255, 0.03) | |
motion.transition-spring | {motion-preset.glass-spring} | Bouncy spring for glass element interactions |
motion.transition-glass | {motion-preset.glass-reveal} | Smooth glass surface reveal |
motion.transition-blur | {motion-preset.glass-blur} | Backdrop blur fade in/out |
border-radius.none | 0 | |
border-radius.sm | 8 | |
border-radius.default | 12 | |
border-radius.md | 16 | |
border-radius.lg | 20 | |
border-radius.xl | 24 | |
border-radius.2xl | 28 | |
border-radius.3xl | 32 | |
border-radius.4xl | 40 | |
border-radius.full | 9999 | |
blur.none | 0 | |
blur.sm | 4 | |
blur.default | 12 | |
blur.md | 20 | |
blur.lg | 30 | |
blur.xl | 40 | |
blur.2xl | 60 | |
blur.3xl | 80 | |
remapped-primitives.zinc.50 | #f8fafc | |
remapped-primitives.zinc.100 | #f1f5f9 | |
remapped-primitives.zinc.200 | #e2e8f0 | |
remapped-primitives.zinc.300 | #cbd5e1 | |
remapped-primitives.zinc.400 | #94a3b8 | |
remapped-primitives.zinc.500 | #64748b | |
remapped-primitives.zinc.600 | #475569 | |
remapped-primitives.zinc.700 | #334155 | |
remapped-primitives.zinc.800 | #1e293b | |
remapped-primitives.zinc.900 | #0f172a | |
remapped-primitives.zinc.950 | #020617 | |
remapped-primitives.red.50 | #fef2f2 | |
remapped-primitives.red.100 | #fee2e2 | |
remapped-primitives.red.300 | #fca5a5 | |
remapped-primitives.red.400 | #f87171 | |
remapped-primitives.red.500 | #ef4444 | |
remapped-primitives.red.600 | #dc2626 | |
remapped-primitives.emerald.50 | #ecfdf5 | |
remapped-primitives.emerald.400 | #34d399 | |
remapped-primitives.emerald.500 | #10b981 | |
remapped-primitives.emerald.600 | #059669 | |
remapped-primitives.sky.50 | #f0f9ff | |
remapped-primitives.sky.400 | #38bdf8 | |
remapped-primitives.sky.500 | #0ea5e9 | |
remapped-primitives.sky.600 | #0284c7 | |
remapped-primitives.green.50 | #f0fdf4 | |
remapped-primitives.green.400 | #4ade80 | |
remapped-primitives.green.500 | #22c55e | |
remapped-primitives.green.600 | #16a34a | |