Design system
DESIGN.md
Generated by pnpm --filter @tempio/ui build:tokens from
packages/ui/tokens/. The package copy is packages/ui/DESIGN.md; a test in
each package fails when either drifts.
Token frontmatter
version: 2
name: Tempio
website: https://tempio.ai
description: "Geist skeleton, the Softriver kit's skin. Purple primary in both modes, a dark neutral sidebar beside a flat page, white cards with a hairline border on a white page in light, a #171216 ground in dark, three gradient tokens with a closed list of places."
brand:
ground: "#171216"
ink: "#121212"
paper: "#FFFFFF"
gradient: "linear-gradient(217deg, #FFB162 0%, #E88C69 22%, #A4237F 60%, #5B054F 100%)"
gradients:
sweep: "linear-gradient(217deg, #FFB162 0%, #E88C69 22%, #A4237F 60%, #5B054F 100%)"
fade: "linear-gradient(0deg, #5B054F 0%, #A4237F 30%, #E88C69 60%, #E88C6900 100%)"
wash: "linear-gradient(180deg, #FFB1622E 0%, #FFB16200 100%)"
radius: 0.625rem
lockupMarkTop: 0.077
lockupBaseline: 0.781
lockupMarkDrop: 0.033
clearSpace: 1/6
minMark: 20px / 6mm
minLockup: 24px / 8mm
type:
sans: Geist
heading: Geist
mono: Geist Mono
headingWeight: 500
features: "cv11, ss01"
colors:
tempio:
light:
background: "#ffffff"
foreground: "#171216"
card: "#ffffff"
card-foreground: "#171216"
popover: "#ffffff"
popover-foreground: "#171216"
primary: "#5b054f"
primary-foreground: "#ffffff"
secondary: "#f4ecf2"
secondary-foreground: "#171216"
muted: "#f4ecf2"
muted-foreground: "#5a5358"
accent: "#eae2e8"
accent-foreground: "#171216"
destructive: "#a30006"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d0c8ce"
input: "#bcb5bb"
ring: "#d979b6"
link: "#731058"
chart-1: "#a4237f"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#5b054f"
chart-5: "#766f75"
sidebar: "#fcf4fa"
sidebar-foreground: "#171216"
sidebar-primary: "#5b054f"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f4ecf2"
sidebar-accent-foreground: "#171216"
sidebar-border: "#d0c8ce"
sidebar-ring: "#d979b6"
dark:
background: "#171216"
foreground: "#f4ecf2"
card: "#1e181d"
card-foreground: "#f4ecf2"
popover: "#262025"
popover-foreground: "#f4ecf2"
primary: "#5b054f"
primary-foreground: "#ffffff"
secondary: "#262025"
secondary-foreground: "#f4ecf2"
muted: "#262025"
muted-foreground: "#c7bfc5"
accent: "#2d272c"
accent-foreground: "#f4ecf2"
destructive: "#ff1a1a"
destructive-foreground: "#171216"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#423c41"
input: "#534d52"
ring: "#8d3370"
link: "#f88ed1"
chart-1: "#cd4ea4"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#b863a7"
chart-5: "#938c92"
sidebar: "#1e181d"
sidebar-foreground: "#f4ecf2"
sidebar-primary: "#5b054f"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#2d272c"
sidebar-accent-foreground: "#f4ecf2"
sidebar-border: "#423c41"
sidebar-ring: "#8d3370"
amber-minimal:
light:
background: "#ffffff"
foreground: "#262626"
card: "#ffffff"
card-foreground: "#262626"
popover: "#ffffff"
popover-foreground: "#262626"
primary: "#f59e0b"
primary-foreground: "#000000"
secondary: "#f3f4f6"
secondary-foreground: "#4b5563"
muted: "#f9fafb"
muted-foreground: "#6b7280"
accent: "#fffbeb"
accent-foreground: "#92400e"
destructive: "#df3236"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e5e7eb"
input: "#e5e7eb"
ring: "#f59e0b"
link: "#a66900"
chart-1: "#f59e0b"
chart-2: "#d97706"
chart-3: "#b45309"
chart-4: "#92400e"
chart-5: "#78350f"
sidebar: "#f9fafb"
sidebar-foreground: "#262626"
sidebar-primary: "#a66900"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#fffbeb"
sidebar-accent-foreground: "#92400e"
sidebar-border: "#e5e7eb"
sidebar-ring: "#f59e0b"
dark:
background: "#171717"
foreground: "#e5e5e5"
card: "#262626"
card-foreground: "#e5e5e5"
popover: "#262626"
popover-foreground: "#e5e5e5"
primary: "#f59e0b"
primary-foreground: "#000000"
secondary: "#262626"
secondary-foreground: "#e5e5e5"
muted: "#1f1f1f"
muted-foreground: "#a3a3a3"
accent: "#92400e"
accent-foreground: "#fde68a"
destructive: "#fa4f4d"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#404040"
input: "#404040"
ring: "#f59e0b"
link: "#f59e0b"
chart-1: "#fbbf24"
chart-2: "#d97706"
chart-3: "#92400e"
chart-4: "#b45309"
chart-5: "#92400e"
sidebar: "#0f0f0f"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#a66900"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#92400e"
sidebar-accent-foreground: "#fde68a"
sidebar-border: "#404040"
sidebar-ring: "#f59e0b"
amethyst-haze:
light:
background: "#f8f7fa"
foreground: "#3d3c4f"
card: "#ffffff"
card-foreground: "#3d3c4f"
popover: "#ffffff"
popover-foreground: "#3d3c4f"
primary: "#7a699a"
primary-foreground: "#f8f7fa"
secondary: "#dfd9ec"
secondary-foreground: "#3d3c4f"
muted: "#dcd9e3"
muted-foreground: "#6b6880"
accent: "#e6a5b8"
accent-foreground: "#4b2e36"
destructive: "#c24749"
destructive-foreground: "#f8f7fa"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#cec9d9"
input: "#eae7f0"
ring: "#8a79ab"
link: "#7a699a"
chart-1: "#8a79ab"
chart-2: "#e6a5b8"
chart-3: "#77b8a1"
chart-4: "#f0c88d"
chart-5: "#a0bbe3"
sidebar: "#f1eff5"
sidebar-foreground: "#3d3c4f"
sidebar-primary: "#7a699a"
sidebar-primary-foreground: "#f8f7fa"
sidebar-accent: "#e6a5b8"
sidebar-accent-foreground: "#4b2e36"
sidebar-border: "#d7d2e0"
sidebar-ring: "#8a79ab"
dark:
background: "#1a1823"
foreground: "#e0ddef"
card: "#232030"
card-foreground: "#e0ddef"
popover: "#232030"
popover-foreground: "#e0ddef"
primary: "#a995c9"
primary-foreground: "#1a1823"
secondary: "#5a5370"
secondary-foreground: "#e0ddef"
muted: "#242031"
muted-foreground: "#a09aad"
accent: "#372e3f"
accent-foreground: "#f2b8c6"
destructive: "#e57373"
destructive-foreground: "#1a1823"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#302c40"
input: "#2a273a"
ring: "#a995c9"
link: "#a995c9"
chart-1: "#a995c9"
chart-2: "#f2b8c6"
chart-3: "#77b8a1"
chart-4: "#f0c88d"
chart-5: "#a0bbe3"
sidebar: "#16141e"
sidebar-foreground: "#e0ddef"
sidebar-primary: "#a995c9"
sidebar-primary-foreground: "#1a1823"
sidebar-accent: "#372e3f"
sidebar-accent-foreground: "#f2b8c6"
sidebar-border: "#2a273a"
sidebar-ring: "#a995c9"
bold-tech:
light:
background: "#ffffff"
foreground: "#312e81"
card: "#ffffff"
card-foreground: "#312e81"
popover: "#ffffff"
popover-foreground: "#312e81"
primary: "#8757f1"
primary-foreground: "#ffffff"
secondary: "#f3f0ff"
secondary-foreground: "#4338ca"
muted: "#f5f3ff"
muted-foreground: "#7c3aed"
accent: "#dbeafe"
accent-foreground: "#1e40af"
destructive: "#df3236"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e0e7ff"
input: "#e0e7ff"
ring: "#8b5cf6"
link: "#8757f1"
chart-1: "#8b5cf6"
chart-2: "#7c3aed"
chart-3: "#6d28d9"
chart-4: "#5b21b6"
chart-5: "#4c1d95"
sidebar: "#f5f3ff"
sidebar-foreground: "#312e81"
sidebar-primary: "#8757f1"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#dbeafe"
sidebar-accent-foreground: "#1e40af"
sidebar-border: "#e0e7ff"
sidebar-ring: "#8b5cf6"
dark:
background: "#0f172a"
foreground: "#e0e7ff"
card: "#1e1b4b"
card-foreground: "#e0e7ff"
popover: "#1e1b4b"
popover-foreground: "#e0e7ff"
primary: "#8757f1"
primary-foreground: "#ffffff"
secondary: "#1e1b4b"
secondary-foreground: "#e0e7ff"
muted: "#171447"
muted-foreground: "#c4b5fd"
accent: "#4338ca"
accent-foreground: "#e0e7ff"
destructive: "#f44a49"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#2e1065"
input: "#2e1065"
ring: "#8b5cf6"
link: "#9163fd"
chart-1: "#a78bfa"
chart-2: "#8b5cf6"
chart-3: "#7c3aed"
chart-4: "#6d28d9"
chart-5: "#5b21b6"
sidebar: "#0f172a"
sidebar-foreground: "#e0e7ff"
sidebar-primary: "#8757f1"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#4338ca"
sidebar-accent-foreground: "#e0e7ff"
sidebar-border: "#2e1065"
sidebar-ring: "#8b5cf6"
bubblegum:
light:
background: "#f6e6ee"
foreground: "#5b5b5b"
card: "#fdedc9"
card-foreground: "#5b5b5b"
popover: "#ffffff"
popover-foreground: "#5b5b5b"
primary: "#c64590"
primary-foreground: "#ffffff"
secondary: "#8acfd1"
secondary-foreground: "#333333"
muted: "#b2e1eb"
muted-foreground: "#6a6a6a"
accent: "#fbe2a7"
accent-foreground: "#333333"
destructive: "#be3940"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d04f99"
input: "#e4e4e4"
ring: "#e670ab"
link: "#b63682"
chart-1: "#e670ab"
chart-2: "#84d2e2"
chart-3: "#fbe2a7"
chart-4: "#f3a0ca"
chart-5: "#d7488e"
sidebar: "#f8d8ea"
sidebar-foreground: "#333333"
sidebar-primary: "#d63187"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f9a8d4"
sidebar-accent-foreground: "#333333"
sidebar-border: "#f3e8ff"
sidebar-ring: "#ec4899"
dark:
background: "#12242e"
foreground: "#f3e3ea"
card: "#1c2e38"
card-foreground: "#f3e3ea"
popover: "#1c2e38"
popover-foreground: "#f3e3ea"
primary: "#fbe2a7"
primary-foreground: "#12242e"
secondary: "#e4a2b1"
secondary-foreground: "#12242e"
muted: "#24272b"
muted-foreground: "#e4a2b1"
accent: "#98526d"
accent-foreground: "#f3e3ea"
destructive: "#e863a9"
destructive-foreground: "#12242e"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#324859"
input: "#20333d"
ring: "#50afb6"
link: "#fbe2a7"
chart-1: "#50afb6"
chart-2: "#e4a2b1"
chart-3: "#c67b96"
chart-4: "#175c6c"
chart-5: "#24272b"
sidebar: "#101f28"
sidebar-foreground: "#f3f4f6"
sidebar-primary: "#d63187"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f9a8d4"
sidebar-accent-foreground: "#1f2937"
sidebar-border: "#374151"
sidebar-ring: "#ec4899"
caffeine:
light:
background: "#f9f9f9"
foreground: "#202020"
card: "#fcfcfc"
card-foreground: "#202020"
popover: "#fcfcfc"
popover-foreground: "#202020"
primary: "#644a40"
primary-foreground: "#ffffff"
secondary: "#ffdfb5"
secondary-foreground: "#582d1d"
muted: "#efefef"
muted-foreground: "#646464"
accent: "#e8e8e8"
accent-foreground: "#202020"
destructive: "#d33b1b"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d8d8d8"
input: "#d8d8d8"
ring: "#644a40"
link: "#644a40"
chart-1: "#644a40"
chart-2: "#ffdfb5"
chart-3: "#e8e8e8"
chart-4: "#ffe6c4"
chart-5: "#66493e"
sidebar: "#fbfbfb"
sidebar-foreground: "#252525"
sidebar-primary: "#343434"
sidebar-primary-foreground: "#fbfbfb"
sidebar-accent: "#f7f7f7"
sidebar-accent-foreground: "#343434"
sidebar-border: "#ebebeb"
sidebar-ring: "#b5b5b5"
dark:
background: "#111111"
foreground: "#eeeeee"
card: "#191919"
card-foreground: "#eeeeee"
popover: "#191919"
popover-foreground: "#eeeeee"
primary: "#ffe0c2"
primary-foreground: "#081a1b"
secondary: "#393028"
secondary-foreground: "#ffe0c2"
muted: "#222222"
muted-foreground: "#b4b4b4"
accent: "#2a2a2a"
accent-foreground: "#eeeeee"
destructive: "#e54d2e"
destructive-foreground: "#191919"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#201e18"
input: "#484848"
ring: "#ffe0c2"
link: "#ffe0c2"
chart-1: "#ffe0c2"
chart-2: "#393028"
chart-3: "#2a2a2a"
chart-4: "#42382e"
chart-5: "#ffe0c1"
sidebar: "#18181b"
sidebar-foreground: "#f4f4f5"
sidebar-primary: "#1d4ed8"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#27272a"
sidebar-accent-foreground: "#f4f4f5"
sidebar-border: "#27272a"
sidebar-ring: "#d4d4d8"
candyland:
light:
background: "#f7f9fa"
foreground: "#333333"
card: "#ffffff"
card-foreground: "#333333"
popover: "#ffffff"
popover-foreground: "#333333"
primary: "#ffc0cb"
primary-foreground: "#000000"
secondary: "#87ceeb"
secondary-foreground: "#000000"
muted: "#ddd9c4"
muted-foreground: "#6e6e6e"
accent: "#ffff00"
accent-foreground: "#000000"
destructive: "#da2b31"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d4d4d4"
input: "#d4d4d4"
ring: "#ffc0cb"
link: "#9b636e"
chart-1: "#ffc0cb"
chart-2: "#87ceeb"
chart-3: "#ffff00"
chart-4: "#ff99cc"
chart-5: "#33cc33"
sidebar: "#f7f9fa"
sidebar-foreground: "#333333"
sidebar-primary: "#ffc0cb"
sidebar-primary-foreground: "#000000"
sidebar-accent: "#ffff00"
sidebar-accent-foreground: "#000000"
sidebar-border: "#d4d4d4"
sidebar-ring: "#ffc0cb"
dark:
background: "#1a1d23"
foreground: "#e5e5e5"
card: "#2f3436"
card-foreground: "#e5e5e5"
popover: "#2f3436"
popover-foreground: "#e5e5e5"
primary: "#ff99cc"
primary-foreground: "#000000"
secondary: "#33cc33"
secondary-foreground: "#000000"
muted: "#444444"
muted-foreground: "#a3a3a3"
accent: "#87ceeb"
accent-foreground: "#000000"
destructive: "#ff6c66"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#444444"
input: "#444444"
ring: "#ff99cc"
link: "#ff99cc"
chart-1: "#ff99cc"
chart-2: "#33cc33"
chart-3: "#87ceeb"
chart-4: "#ffff00"
chart-5: "#ffcc00"
sidebar: "#1a1d23"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#ff99cc"
sidebar-primary-foreground: "#000000"
sidebar-accent: "#87ceeb"
sidebar-accent-foreground: "#000000"
sidebar-border: "#444444"
sidebar-ring: "#ff99cc"
catppuccin:
light:
background: "#eff1f5"
foreground: "#4c4f69"
card: "#ffffff"
card-foreground: "#4c4f69"
popover: "#ccd0da"
popover-foreground: "#4c4f69"
primary: "#8839ef"
primary-foreground: "#ffffff"
secondary: "#ccd0da"
secondary-foreground: "#4c4f69"
muted: "#dce0e8"
muted-foreground: "#696c82"
accent: "#007daf"
accent-foreground: "#ffffff"
destructive: "#d20f39"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#bcc0cc"
input: "#ccd0da"
ring: "#8839ef"
link: "#8839ef"
chart-1: "#8839ef"
chart-2: "#04a5e5"
chart-3: "#40a02b"
chart-4: "#fe640b"
chart-5: "#dc8a78"
sidebar: "#e6e9ef"
sidebar-foreground: "#4c4f69"
sidebar-primary: "#8839ef"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#007daf"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#bcc0cc"
sidebar-ring: "#8839ef"
dark:
background: "#181825"
foreground: "#cdd6f4"
card: "#1e1e2e"
card-foreground: "#cdd6f4"
popover: "#45475a"
popover-foreground: "#cdd6f4"
primary: "#cba6f7"
primary-foreground: "#1e1e2e"
secondary: "#585b70"
secondary-foreground: "#cdd6f4"
muted: "#292c3c"
muted-foreground: "#a6adc8"
accent: "#89dceb"
accent-foreground: "#1e1e2e"
destructive: "#f38ba8"
destructive-foreground: "#1e1e2e"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#313244"
input: "#313244"
ring: "#cba6f7"
link: "#cba6f7"
chart-1: "#cba6f7"
chart-2: "#89dceb"
chart-3: "#a6e3a1"
chart-4: "#fab387"
chart-5: "#f5e0dc"
sidebar: "#11111b"
sidebar-foreground: "#cdd6f4"
sidebar-primary: "#cba6f7"
sidebar-primary-foreground: "#1e1e2e"
sidebar-accent: "#89dceb"
sidebar-accent-foreground: "#1e1e2e"
sidebar-border: "#45475a"
sidebar-ring: "#cba6f7"
claymorphism:
light:
background: "#e7e5e4"
foreground: "#1e293b"
card: "#f5f5f4"
card-foreground: "#1e293b"
popover: "#f5f5f4"
popover-foreground: "#1e293b"
primary: "#6264ef"
primary-foreground: "#ffffff"
secondary: "#d6d3d1"
secondary-foreground: "#4b5563"
muted: "#e7e5e4"
muted-foreground: "#606674"
accent: "#f3e5f5"
accent-foreground: "#374151"
destructive: "#cb1625"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d6d3d1"
input: "#d6d3d1"
ring: "#6366f1"
link: "#5554de"
chart-1: "#6366f1"
chart-2: "#4f46e5"
chart-3: "#4338ca"
chart-4: "#3730a3"
chart-5: "#312e81"
sidebar: "#d6d3d1"
sidebar-foreground: "#1e293b"
sidebar-primary: "#6264ef"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f3e5f5"
sidebar-accent-foreground: "#374151"
sidebar-border: "#d6d3d1"
sidebar-ring: "#6366f1"
dark:
background: "#1e1b18"
foreground: "#e2e8f0"
card: "#2c2825"
card-foreground: "#e2e8f0"
popover: "#2c2825"
popover-foreground: "#e2e8f0"
primary: "#818cf8"
primary-foreground: "#1e1b18"
secondary: "#3a3633"
secondary-foreground: "#d1d5db"
muted: "#1f1c19"
muted-foreground: "#9ca3af"
accent: "#484441"
accent-foreground: "#d1d5db"
destructive: "#fe5350"
destructive-foreground: "#1e1b18"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#3a3633"
input: "#3a3633"
ring: "#818cf8"
link: "#818cf8"
chart-1: "#818cf8"
chart-2: "#6366f1"
chart-3: "#4f46e5"
chart-4: "#4338ca"
chart-5: "#3730a3"
sidebar: "#3a3633"
sidebar-foreground: "#e2e8f0"
sidebar-primary: "#818cf8"
sidebar-primary-foreground: "#1e1b18"
sidebar-accent: "#484441"
sidebar-accent-foreground: "#d1d5db"
sidebar-border: "#3a3633"
sidebar-ring: "#818cf8"
clean-slate:
light:
background: "#f8fafc"
foreground: "#1e293b"
card: "#ffffff"
card-foreground: "#1e293b"
popover: "#ffffff"
popover-foreground: "#1e293b"
primary: "#6264ef"
primary-foreground: "#ffffff"
secondary: "#e5e7eb"
secondary-foreground: "#374151"
muted: "#f3f4f6"
muted-foreground: "#6b7280"
accent: "#e0e7ff"
accent-foreground: "#374151"
destructive: "#db2e33"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d1d5db"
input: "#d1d5db"
ring: "#6366f1"
link: "#5f61ec"
chart-1: "#6366f1"
chart-2: "#4f46e5"
chart-3: "#4338ca"
chart-4: "#3730a3"
chart-5: "#312e81"
sidebar: "#f3f4f6"
sidebar-foreground: "#1e293b"
sidebar-primary: "#6264ef"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#e0e7ff"
sidebar-accent-foreground: "#374151"
sidebar-border: "#d1d5db"
sidebar-ring: "#6366f1"
dark:
background: "#0f172a"
foreground: "#e2e8f0"
card: "#1e293b"
card-foreground: "#e2e8f0"
popover: "#1e293b"
popover-foreground: "#e2e8f0"
primary: "#818cf8"
primary-foreground: "#0f172a"
secondary: "#2d3748"
secondary-foreground: "#d1d5db"
muted: "#152032"
muted-foreground: "#9ca3af"
accent: "#374151"
accent-foreground: "#d1d5db"
destructive: "#fe5350"
destructive-foreground: "#0f172a"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#4b5563"
input: "#4b5563"
ring: "#818cf8"
link: "#818cf8"
chart-1: "#818cf8"
chart-2: "#6366f1"
chart-3: "#4f46e5"
chart-4: "#4338ca"
chart-5: "#3730a3"
sidebar: "#1e293b"
sidebar-foreground: "#e2e8f0"
sidebar-primary: "#818cf8"
sidebar-primary-foreground: "#0f172a"
sidebar-accent: "#374151"
sidebar-accent-foreground: "#d1d5db"
sidebar-border: "#4b5563"
sidebar-ring: "#818cf8"
cosmic-night:
light:
background: "#f5f5ff"
foreground: "#2a2a4a"
card: "#ffffff"
card-foreground: "#2a2a4a"
popover: "#ffffff"
popover-foreground: "#2a2a4a"
primary: "#6e56cf"
primary-foreground: "#ffffff"
secondary: "#e4dfff"
secondary-foreground: "#4a4080"
muted: "#f0f0fa"
muted-foreground: "#6c6c8a"
accent: "#d8e6ff"
accent-foreground: "#2a2a4a"
destructive: "#d5274f"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e0e0f0"
input: "#e0e0f0"
ring: "#6e56cf"
link: "#6e56cf"
chart-1: "#6e56cf"
chart-2: "#9e8cfc"
chart-3: "#5d5fef"
chart-4: "#7c75fa"
chart-5: "#4740b3"
sidebar: "#f0f0fa"
sidebar-foreground: "#2a2a4a"
sidebar-primary: "#6e56cf"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#d8e6ff"
sidebar-accent-foreground: "#2a2a4a"
sidebar-border: "#e0e0f0"
sidebar-ring: "#6e56cf"
dark:
background: "#0f0f1a"
foreground: "#e2e2f5"
card: "#1a1a2e"
card-foreground: "#e2e2f5"
popover: "#1a1a2e"
popover-foreground: "#e2e2f5"
primary: "#a48fff"
primary-foreground: "#0f0f1a"
secondary: "#2d2b55"
secondary-foreground: "#c4c2ff"
muted: "#222244"
muted-foreground: "#a0a0c0"
accent: "#303060"
accent-foreground: "#e2e2f5"
destructive: "#ff5470"
destructive-foreground: "#2b2b2b"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#303052"
input: "#303052"
ring: "#a48fff"
link: "#a48fff"
chart-1: "#a48fff"
chart-2: "#7986cb"
chart-3: "#64b5f6"
chart-4: "#4db6ac"
chart-5: "#ff79c6"
sidebar: "#1a1a2e"
sidebar-foreground: "#e2e2f5"
sidebar-primary: "#a48fff"
sidebar-primary-foreground: "#0f0f1a"
sidebar-accent: "#303060"
sidebar-accent-foreground: "#e2e2f5"
sidebar-border: "#303052"
sidebar-ring: "#a48fff"
cyberpunk:
light:
background: "#f8f9fa"
foreground: "#0c0c1d"
card: "#ffffff"
card-foreground: "#0c0c1d"
popover: "#ffffff"
popover-foreground: "#0c0c1d"
primary: "#dc00ad"
primary-foreground: "#ffffff"
secondary: "#f0f0ff"
secondary-foreground: "#0c0c1d"
muted: "#f0f0ff"
muted-foreground: "#0c0c1d"
accent: "#00ffcc"
accent-foreground: "#0c0c1d"
destructive: "#d93300"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#dfe6e9"
input: "#dfe6e9"
ring: "#ff00c8"
link: "#d500a7"
chart-1: "#ff00c8"
chart-2: "#9000ff"
chart-3: "#00e5ff"
chart-4: "#00ffcc"
chart-5: "#ffe600"
sidebar: "#f0f0ff"
sidebar-foreground: "#0c0c1d"
sidebar-primary: "#dc00ad"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#00ffcc"
sidebar-accent-foreground: "#0c0c1d"
sidebar-border: "#dfe6e9"
sidebar-ring: "#ff00c8"
dark:
background: "#0c0c1d"
foreground: "#eceff4"
card: "#1e1e3f"
card-foreground: "#eceff4"
popover: "#1e1e3f"
popover-foreground: "#eceff4"
primary: "#dc00ad"
primary-foreground: "#ffffff"
secondary: "#1e1e3f"
secondary-foreground: "#eceff4"
muted: "#151530"
muted-foreground: "#8186a8"
accent: "#00ffcc"
accent-foreground: "#0c0c1d"
destructive: "#ff3d00"
destructive-foreground: "#202020"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#2e2e5e"
input: "#2e2e5e"
ring: "#ff00c8"
link: "#ff00c8"
chart-1: "#ff00c8"
chart-2: "#9000ff"
chart-3: "#00e5ff"
chart-4: "#00ffcc"
chart-5: "#ffe600"
sidebar: "#0c0c1d"
sidebar-foreground: "#eceff4"
sidebar-primary: "#dc00ad"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#00ffcc"
sidebar-accent-foreground: "#0c0c1d"
sidebar-border: "#2e2e5e"
sidebar-ring: "#ff00c8"
darkmatter:
light:
background: "#ffffff"
foreground: "#111827"
card: "#ffffff"
card-foreground: "#111827"
popover: "#ffffff"
popover-foreground: "#111827"
primary: "#b85c23"
primary-foreground: "#ffffff"
secondary: "#527575"
secondary-foreground: "#ffffff"
muted: "#f3f4f6"
muted-foreground: "#6b7280"
accent: "#eeeeee"
accent-foreground: "#111827"
destructive: "#db2e33"
destructive-foreground: "#fafafa"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e5e7eb"
input: "#e5e7eb"
ring: "#d87943"
link: "#b85c23"
chart-1: "#5f8787"
chart-2: "#e78a53"
chart-3: "#fbcb97"
chart-4: "#888888"
chart-5: "#999999"
sidebar: "#f3f4f6"
sidebar-foreground: "#111827"
sidebar-primary: "#b85c23"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#ffffff"
sidebar-accent-foreground: "#111827"
sidebar-border: "#e5e7eb"
sidebar-ring: "#d87943"
dark:
background: "#121113"
foreground: "#c1c1c1"
card: "#121212"
card-foreground: "#c1c1c1"
popover: "#121113"
popover-foreground: "#c1c1c1"
primary: "#e78a53"
primary-foreground: "#121113"
secondary: "#5f8787"
secondary-foreground: "#121113"
muted: "#222222"
muted-foreground: "#888888"
accent: "#333333"
accent-foreground: "#c1c1c1"
destructive: "#5f8787"
destructive-foreground: "#121113"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#222222"
input: "#222222"
ring: "#e78a53"
link: "#e78a53"
chart-1: "#5f8787"
chart-2: "#e78a53"
chart-3: "#fbcb97"
chart-4: "#888888"
chart-5: "#999999"
sidebar: "#121212"
sidebar-foreground: "#c1c1c1"
sidebar-primary: "#e78a53"
sidebar-primary-foreground: "#121113"
sidebar-accent: "#333333"
sidebar-accent-foreground: "#c1c1c1"
sidebar-border: "#222222"
sidebar-ring: "#e78a53"
elegant-luxury:
light:
background: "#faf7f5"
foreground: "#1a1a1a"
card: "#faf7f5"
card-foreground: "#1a1a1a"
popover: "#faf7f5"
popover-foreground: "#1a1a1a"
primary: "#9b2c2c"
primary-foreground: "#ffffff"
secondary: "#fdf2d6"
secondary-foreground: "#805500"
muted: "#f0ebe8"
muted-foreground: "#57534e"
accent: "#fef3c7"
accent-foreground: "#7f1d1d"
destructive: "#991b1b"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#f5e8d2"
input: "#f5e8d2"
ring: "#9b2c2c"
link: "#9b2c2c"
chart-1: "#b91c1c"
chart-2: "#9b2c2c"
chart-3: "#7f1d1d"
chart-4: "#b45309"
chart-5: "#92400e"
sidebar: "#f0ebe8"
sidebar-foreground: "#1a1a1a"
sidebar-primary: "#9b2c2c"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#fef3c7"
sidebar-accent-foreground: "#7f1d1d"
sidebar-border: "#f5e8d2"
sidebar-ring: "#9b2c2c"
dark:
background: "#1c1917"
foreground: "#f5f5f4"
card: "#292524"
card-foreground: "#f5f5f4"
popover: "#292524"
popover-foreground: "#f5f5f4"
primary: "#b91c1c"
primary-foreground: "#faf7f5"
secondary: "#92400e"
secondary-foreground: "#fef3c7"
muted: "#1f1c1a"
muted-foreground: "#d6d3d1"
accent: "#b45309"
accent-foreground: "#fef3c7"
destructive: "#fa4f4d"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#44403c"
input: "#44403c"
ring: "#b91c1c"
link: "#e64d43"
chart-1: "#f87171"
chart-2: "#ef4444"
chart-3: "#dc2626"
chart-4: "#fbbf24"
chart-5: "#f59e0b"
sidebar: "#1c1917"
sidebar-foreground: "#f5f5f4"
sidebar-primary: "#b91c1c"
sidebar-primary-foreground: "#faf7f5"
sidebar-accent: "#b45309"
sidebar-accent-foreground: "#fef3c7"
sidebar-border: "#44403c"
sidebar-ring: "#b91c1c"
ember:
light:
background: "#ffffff"
foreground: "#171216"
card: "#ffffff"
card-foreground: "#171216"
popover: "#ffffff"
popover-foreground: "#171216"
primary: "#e88c69"
primary-foreground: "#171216"
secondary: "#f4ecf2"
secondary-foreground: "#171216"
muted: "#f4ecf2"
muted-foreground: "#5a5358"
accent: "#eae2e8"
accent-foreground: "#171216"
destructive: "#a30006"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d0c8ce"
input: "#bcb5bb"
ring: "#eba48a"
link: "#824027"
chart-1: "#e88c69"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#5b054f"
chart-5: "#766f75"
sidebar: "#fcf4fa"
sidebar-foreground: "#171216"
sidebar-primary: "#e88c69"
sidebar-primary-foreground: "#171216"
sidebar-accent: "#eae2e8"
sidebar-accent-foreground: "#171216"
sidebar-border: "#d0c8ce"
sidebar-ring: "#eba48a"
dark:
background: "#171216"
foreground: "#f4ecf2"
card: "#1e181d"
card-foreground: "#f4ecf2"
popover: "#262025"
popover-foreground: "#f4ecf2"
primary: "#e88c69"
primary-foreground: "#171216"
secondary: "#262025"
secondary-foreground: "#f4ecf2"
muted: "#262025"
muted-foreground: "#c7bfc5"
accent: "#2d272c"
accent-foreground: "#f4ecf2"
destructive: "#ff1a1a"
destructive-foreground: "#171216"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#423c41"
input: "#534d52"
ring: "#854730"
link: "#ffbaa1"
chart-1: "#e88c69"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#b863a7"
chart-5: "#938c92"
sidebar: "#171216"
sidebar-foreground: "#f4ecf2"
sidebar-primary: "#e88c69"
sidebar-primary-foreground: "#171216"
sidebar-accent: "#2d272c"
sidebar-accent-foreground: "#f4ecf2"
sidebar-border: "#423c41"
sidebar-ring: "#854730"
graphite:
light:
background: "#f0f0f0"
foreground: "#333333"
card: "#f5f5f5"
card-foreground: "#333333"
popover: "#f5f5f5"
popover-foreground: "#333333"
primary: "#606060"
primary-foreground: "#ffffff"
secondary: "#e0e0e0"
secondary-foreground: "#333333"
muted: "#d9d9d9"
muted-foreground: "#666666"
accent: "#c0c0c0"
accent-foreground: "#333333"
destructive: "#cc3333"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d0d0d0"
input: "#e0e0e0"
ring: "#606060"
link: "#606060"
chart-1: "#606060"
chart-2: "#476666"
chart-3: "#909090"
chart-4: "#a8a8a8"
chart-5: "#c0c0c0"
sidebar: "#eaeaea"
sidebar-foreground: "#333333"
sidebar-primary: "#606060"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#c0c0c0"
sidebar-accent-foreground: "#333333"
sidebar-border: "#d0d0d0"
sidebar-ring: "#606060"
dark:
background: "#1a1a1a"
foreground: "#d9d9d9"
card: "#202020"
card-foreground: "#d9d9d9"
popover: "#202020"
popover-foreground: "#d9d9d9"
primary: "#a0a0a0"
primary-foreground: "#1a1a1a"
secondary: "#303030"
secondary-foreground: "#d9d9d9"
muted: "#2a2a2a"
muted-foreground: "#878787"
accent: "#404040"
accent-foreground: "#d9d9d9"
destructive: "#e06666"
destructive-foreground: "#262626"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#353535"
input: "#303030"
ring: "#a0a0a0"
link: "#a0a0a0"
chart-1: "#a0a0a0"
chart-2: "#7e9ca0"
chart-3: "#707070"
chart-4: "#585858"
chart-5: "#404040"
sidebar: "#1f1f1f"
sidebar-foreground: "#d9d9d9"
sidebar-primary: "#a0a0a0"
sidebar-primary-foreground: "#1a1a1a"
sidebar-accent: "#404040"
sidebar-accent-foreground: "#d9d9d9"
sidebar-border: "#353535"
sidebar-ring: "#a0a0a0"
kodama-grove:
light:
background: "#e4d7b0"
foreground: "#5c4b3e"
card: "#e7dbbf"
card-foreground: "#5c4b3e"
popover: "#f3ead2"
popover-foreground: "#5c4b3e"
primary: "#6b7a2b"
primary-foreground: "#fdfbf6"
secondary: "#decea0"
secondary-foreground: "#5c4b3e"
muted: "#decea0"
muted-foreground: "#695b4f"
accent: "#dbc894"
accent-foreground: "#5c4b3e"
destructive: "#904a3f"
destructive-foreground: "#faf8f2"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#b19681"
input: "#dbc894"
ring: "#9db18c"
link: "#56640f"
chart-1: "#9db18c"
chart-2: "#8a9f7b"
chart-3: "#bac9b4"
chart-4: "#71856a"
chart-5: "#5e6e58"
sidebar: "#e2d1a2"
sidebar-foreground: "#5c4b3e"
sidebar-primary: "#687a57"
sidebar-primary-foreground: "#fdfbf6"
sidebar-accent: "#eae5d9"
sidebar-accent-foreground: "#5c4b3e"
sidebar-border: "#e5e0d4"
sidebar-ring: "#9db18c"
dark:
background: "#3a3529"
foreground: "#ede4d4"
card: "#413c33"
card-foreground: "#ede4d4"
popover: "#413c33"
popover-foreground: "#ede4d4"
primary: "#8a9f7b"
primary-foreground: "#2a2521"
secondary: "#5a5345"
secondary-foreground: "#ede4d4"
muted: "#4a4439"
muted-foreground: "#aea69c"
accent: "#a18f5c"
accent-foreground: "#2a2521"
destructive: "#d89689"
destructive-foreground: "#231e13"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#5a5345"
input: "#5a5345"
ring: "#8a9f7b"
link: "#8fa47f"
chart-1: "#8a9f7b"
chart-2: "#9db18c"
chart-3: "#71856a"
chart-4: "#a18f5c"
chart-5: "#5e6e58"
sidebar: "#3a3529"
sidebar-foreground: "#ede4d4"
sidebar-primary: "#8a9f7b"
sidebar-primary-foreground: "#2a2521"
sidebar-accent: "#a18f5c"
sidebar-accent-foreground: "#2a2521"
sidebar-border: "#5a5345"
sidebar-ring: "#8a9f7b"
midnight-bloom:
light:
background: "#f9f9f9"
foreground: "#333333"
card: "#ffffff"
card-foreground: "#333333"
popover: "#ffffff"
popover-foreground: "#333333"
primary: "#6c5ce7"
primary-foreground: "#ffffff"
secondary: "#a1c9f2"
secondary-foreground: "#333333"
muted: "#c9c4b5"
muted-foreground: "#6e6e6e"
accent: "#727a4f"
accent-foreground: "#ffffff"
destructive: "#da2b31"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d4d4d4"
input: "#d4d4d4"
ring: "#6c5ce7"
link: "#6c5ce7"
chart-1: "#6c5ce7"
chart-2: "#8e44ad"
chart-3: "#4b0082"
chart-4: "#6495ed"
chart-5: "#4682b4"
sidebar: "#f9f9f9"
sidebar-foreground: "#333333"
sidebar-primary: "#6c5ce7"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#727a4f"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#d4d4d4"
sidebar-ring: "#6c5ce7"
dark:
background: "#1a1d23"
foreground: "#e5e5e5"
card: "#2f3436"
card-foreground: "#e5e5e5"
popover: "#2f3436"
popover-foreground: "#e5e5e5"
primary: "#6c5ce7"
primary-foreground: "#ffffff"
secondary: "#4b0082"
secondary-foreground: "#e5e5e5"
muted: "#444444"
muted-foreground: "#a3a3a3"
accent: "#3664b7"
accent-foreground: "#e5e5e5"
destructive: "#ff6c66"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#444444"
input: "#444444"
ring: "#6c5ce7"
link: "#7e71fe"
chart-1: "#6c5ce7"
chart-2: "#8e44ad"
chart-3: "#4b0082"
chart-4: "#6495ed"
chart-5: "#4682b4"
sidebar: "#1a1d23"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#6c5ce7"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#3664b7"
sidebar-accent-foreground: "#e5e5e5"
sidebar-border: "#444444"
sidebar-ring: "#6c5ce7"
mocha-mousse:
light:
background: "#f1f0e5"
foreground: "#56453f"
card: "#f1f0e5"
card-foreground: "#56453f"
popover: "#ffffff"
popover-foreground: "#56453f"
primary: "#966b59"
primary-foreground: "#ffffff"
secondary: "#81735c"
secondary-foreground: "#ffffff"
muted: "#e4c7b8"
muted-foreground: "#886459"
accent: "#e4c7b8"
accent-foreground: "#56453f"
destructive: "#1f1a17"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#baab92"
input: "#baab92"
ring: "#a37764"
link: "#8d6350"
chart-1: "#a37764"
chart-2: "#8a655a"
chart-3: "#c39e88"
chart-4: "#baab92"
chart-5: "#a28777"
sidebar: "#ebd6cb"
sidebar-foreground: "#56453f"
sidebar-primary: "#966b59"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#926f5b"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#a28777"
sidebar-ring: "#a37764"
dark:
background: "#2d2521"
foreground: "#f1f0e5"
card: "#3c332e"
card-foreground: "#f1f0e5"
popover: "#3c332e"
popover-foreground: "#f1f0e5"
primary: "#c39e88"
primary-foreground: "#2d2521"
secondary: "#8a655a"
secondary-foreground: "#f3f2e7"
muted: "#56453f"
muted-foreground: "#c5aa9b"
accent: "#baab92"
accent-foreground: "#2d2521"
destructive: "#ee7b7a"
destructive-foreground: "#2d2521"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#56453f"
input: "#56453f"
ring: "#c39e88"
link: "#c39e88"
chart-1: "#c39e88"
chart-2: "#baab92"
chart-3: "#a37764"
chart-4: "#8a655a"
chart-5: "#a28777"
sidebar: "#1f1a17"
sidebar-foreground: "#f1f0e5"
sidebar-primary: "#c39e88"
sidebar-primary-foreground: "#1f1a17"
sidebar-accent: "#baab92"
sidebar-accent-foreground: "#1f1a17"
sidebar-border: "#56453f"
sidebar-ring: "#c39e88"
modern-minimal:
light:
background: "#ffffff"
foreground: "#333333"
card: "#ffffff"
card-foreground: "#333333"
popover: "#ffffff"
popover-foreground: "#333333"
primary: "#2b72e5"
primary-foreground: "#ffffff"
secondary: "#f3f4f6"
secondary-foreground: "#4b5563"
muted: "#f9fafb"
muted-foreground: "#6b7280"
accent: "#e0f2fe"
accent-foreground: "#1e3a8a"
destructive: "#df3236"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e5e7eb"
input: "#e5e7eb"
ring: "#3b82f6"
link: "#2b72e5"
chart-1: "#3b82f6"
chart-2: "#2563eb"
chart-3: "#1d4ed8"
chart-4: "#1e40af"
chart-5: "#1e3a8a"
sidebar: "#f9fafb"
sidebar-foreground: "#333333"
sidebar-primary: "#2b72e5"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#e0f2fe"
sidebar-accent-foreground: "#1e3a8a"
sidebar-border: "#e5e7eb"
sidebar-ring: "#3b82f6"
dark:
background: "#171717"
foreground: "#e5e5e5"
card: "#262626"
card-foreground: "#e5e5e5"
popover: "#262626"
popover-foreground: "#e5e5e5"
primary: "#2b72e5"
primary-foreground: "#ffffff"
secondary: "#262626"
secondary-foreground: "#e5e5e5"
muted: "#1f1f1f"
muted-foreground: "#a3a3a3"
accent: "#1e3a8a"
accent-foreground: "#bfdbfe"
destructive: "#fa4f4d"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#404040"
input: "#404040"
ring: "#3b82f6"
link: "#3b82f6"
chart-1: "#60a5fa"
chart-2: "#3b82f6"
chart-3: "#2563eb"
chart-4: "#1d4ed8"
chart-5: "#1e40af"
sidebar: "#171717"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#2b72e5"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#1e3a8a"
sidebar-accent-foreground: "#bfdbfe"
sidebar-border: "#404040"
sidebar-ring: "#3b82f6"
mono:
light:
background: "#ffffff"
foreground: "#0a0a0a"
card: "#ffffff"
card-foreground: "#0a0a0a"
popover: "#ffffff"
popover-foreground: "#0a0a0a"
primary: "#737373"
primary-foreground: "#fafafa"
secondary: "#f5f5f5"
secondary-foreground: "#171717"
muted: "#f5f5f5"
muted-foreground: "#717171"
accent: "#f5f5f5"
accent-foreground: "#171717"
destructive: "#e7000b"
destructive-foreground: "#fafafa"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e5e5e5"
input: "#e5e5e5"
ring: "#a1a1a1"
link: "#737373"
chart-1: "#737373"
chart-2: "#737373"
chart-3: "#737373"
chart-4: "#737373"
chart-5: "#737373"
sidebar: "#fafafa"
sidebar-foreground: "#0a0a0a"
sidebar-primary: "#171717"
sidebar-primary-foreground: "#fafafa"
sidebar-accent: "#f5f5f5"
sidebar-accent-foreground: "#171717"
sidebar-border: "#e5e5e5"
sidebar-ring: "#a1a1a1"
dark:
background: "#0a0a0a"
foreground: "#fafafa"
card: "#191919"
card-foreground: "#fafafa"
popover: "#262626"
popover-foreground: "#fafafa"
primary: "#737373"
primary-foreground: "#fafafa"
secondary: "#262626"
secondary-foreground: "#fafafa"
muted: "#262626"
muted-foreground: "#a1a1a1"
accent: "#404040"
accent-foreground: "#fafafa"
destructive: "#ff6467"
destructive-foreground: "#262626"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#383838"
input: "#525252"
ring: "#737373"
link: "#797979"
chart-1: "#737373"
chart-2: "#737373"
chart-3: "#737373"
chart-4: "#737373"
chart-5: "#737373"
sidebar: "#171717"
sidebar-foreground: "#fafafa"
sidebar-primary: "#fafafa"
sidebar-primary-foreground: "#171717"
sidebar-accent: "#262626"
sidebar-accent-foreground: "#fafafa"
sidebar-border: "#ffffff"
sidebar-ring: "#525252"
nature:
light:
background: "#f8f5f0"
foreground: "#3e2723"
card: "#f8f5f0"
card-foreground: "#3e2723"
popover: "#f8f5f0"
popover-foreground: "#3e2723"
primary: "#2e7d32"
primary-foreground: "#ffffff"
secondary: "#e8f5e9"
secondary-foreground: "#1b5e20"
muted: "#f0e9e0"
muted-foreground: "#6d4c41"
accent: "#c8e6c9"
accent-foreground: "#1b5e20"
destructive: "#c62828"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e0d6c9"
input: "#e0d6c9"
ring: "#2e7d32"
link: "#2e7d32"
chart-1: "#4caf50"
chart-2: "#388e3c"
chart-3: "#2e7d32"
chart-4: "#1b5e20"
chart-5: "#0a1f0c"
sidebar: "#f0e9e0"
sidebar-foreground: "#3e2723"
sidebar-primary: "#2e7d32"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#c8e6c9"
sidebar-accent-foreground: "#1b5e20"
sidebar-border: "#e0d6c9"
sidebar-ring: "#2e7d32"
dark:
background: "#1c2a1f"
foreground: "#f0ebe5"
card: "#2d3a2e"
card-foreground: "#f0ebe5"
popover: "#2d3a2e"
popover-foreground: "#f0ebe5"
primary: "#4caf50"
primary-foreground: "#0a1f0c"
secondary: "#3e4a3d"
secondary-foreground: "#d7e0d6"
muted: "#252f26"
muted-foreground: "#d7cfc4"
accent: "#217a28"
accent-foreground: "#f0ebe5"
destructive: "#ff756a"
destructive-foreground: "#3a3732"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#3e4a3d"
input: "#3e4a3d"
ring: "#4caf50"
link: "#4caf50"
chart-1: "#81c784"
chart-2: "#66bb6a"
chart-3: "#4caf50"
chart-4: "#43a047"
chart-5: "#388e3c"
sidebar: "#1c2a1f"
sidebar-foreground: "#f0ebe5"
sidebar-primary: "#4caf50"
sidebar-primary-foreground: "#0a1f0c"
sidebar-accent: "#217a28"
sidebar-accent-foreground: "#f0ebe5"
sidebar-border: "#3e4a3d"
sidebar-ring: "#4caf50"
neo-brutalism:
light:
background: "#ffffff"
foreground: "#000000"
card: "#ffffff"
card-foreground: "#000000"
popover: "#ffffff"
popover-foreground: "#000000"
primary: "#ea101f"
primary-foreground: "#ffffff"
secondary: "#ffff00"
secondary-foreground: "#000000"
muted: "#f0f0f0"
muted-foreground: "#333333"
accent: "#0066ff"
accent-foreground: "#ffffff"
destructive: "#000000"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#000000"
input: "#000000"
ring: "#ff3333"
link: "#ea101f"
chart-1: "#ff3333"
chart-2: "#ffff00"
chart-3: "#0066ff"
chart-4: "#00cc00"
chart-5: "#cc00cc"
sidebar: "#f0f0f0"
sidebar-foreground: "#000000"
sidebar-primary: "#ea101f"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#0066ff"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#000000"
sidebar-ring: "#ff3333"
dark:
background: "#000000"
foreground: "#ffffff"
card: "#333333"
card-foreground: "#ffffff"
popover: "#333333"
popover-foreground: "#ffffff"
primary: "#ff6666"
primary-foreground: "#000000"
secondary: "#ffff33"
secondary-foreground: "#000000"
muted: "#1a1a1a"
muted-foreground: "#cccccc"
accent: "#3399ff"
accent-foreground: "#000000"
destructive: "#ffffff"
destructive-foreground: "#000000"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#ffffff"
input: "#ffffff"
ring: "#ff6666"
link: "#ff6666"
chart-1: "#ff6666"
chart-2: "#ffff33"
chart-3: "#3399ff"
chart-4: "#33cc33"
chart-5: "#cc33cc"
sidebar: "#000000"
sidebar-foreground: "#ffffff"
sidebar-primary: "#ff6666"
sidebar-primary-foreground: "#000000"
sidebar-accent: "#3399ff"
sidebar-accent-foreground: "#000000"
sidebar-border: "#ffffff"
sidebar-ring: "#ff6666"
neutral:
light:
background: "#ffffff"
foreground: "#101112"
card: "#ffffff"
card-foreground: "#101112"
popover: "#ffffff"
popover-foreground: "#101112"
primary: "#266df0"
primary-foreground: "#ffffff"
secondary: "#ffffff"
secondary-foreground: "#101112"
muted: "#f6f7f7"
muted-foreground: "#000000a1"
accent: "#f6f7f7"
accent-foreground: "#101112"
destructive: "#e02e32"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#101112"
warning: "#f39a46"
warning-foreground: "#101112"
border: "#eeeff1"
input: "#0000000f"
ring: "#266df0"
link: "#266df0"
chart-1: "#266df0"
chart-2: "#00d17e"
chart-3: "#f97514"
chart-4: "#9b69ff"
chart-5: "#fa4b94"
sidebar: "#fbfbfb"
sidebar-foreground: "#101112"
sidebar-primary: "#266df0"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#0000000a"
sidebar-accent-foreground: "#101112"
sidebar-border: "#eeeff1"
sidebar-ring: "#266df0"
dark:
background: "#101112"
foreground: "#f1f2f3"
card: "#101112"
card-foreground: "#f1f2f3"
popover: "#17181a"
popover-foreground: "#f1f2f3"
primary: "#266df0"
primary-foreground: "#ffffff"
secondary: "#101112"
secondary-foreground: "#f1f2f3"
muted: "#1b1c1f"
muted-foreground: "#ffffff99"
accent: "#212224"
accent-foreground: "#f1f2f3"
destructive: "#ff5454"
destructive-foreground: "#101112"
success: "#27b759"
success-foreground: "#101112"
warning: "#f39a46"
warning-foreground: "#101112"
border: "#1b1c1f"
input: "#ffffff12"
ring: "#266df0"
link: "#4e8cfc"
chart-1: "#266df0"
chart-2: "#02ad6e"
chart-3: "#c95908"
chart-4: "#864aff"
chart-5: "#fa4b94"
sidebar: "#0b0c0d"
sidebar-foreground: "#f1f2f3"
sidebar-primary: "#266df0"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#ffffff0d"
sidebar-accent-foreground: "#f1f2f3"
sidebar-border: "#1b1c1f"
sidebar-ring: "#266df0"
northern-lights:
light:
background: "#f9f9fa"
foreground: "#333333"
card: "#ffffff"
card-foreground: "#333333"
popover: "#ffffff"
popover-foreground: "#333333"
primary: "#00883e"
primary-foreground: "#ffffff"
secondary: "#4674ca"
secondary-foreground: "#ffffff"
muted: "#ddd9c4"
muted-foreground: "#6e6e6e"
accent: "#66d9ef"
accent-foreground: "#333333"
destructive: "#da2b31"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d4d4d4"
input: "#d4d4d4"
ring: "#34a85a"
link: "#00853c"
chart-1: "#34a85a"
chart-2: "#6495ed"
chart-3: "#66d9ef"
chart-4: "#4682b4"
chart-5: "#1a9641"
sidebar: "#f9f9fa"
sidebar-foreground: "#333333"
sidebar-primary: "#00883e"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#66d9ef"
sidebar-accent-foreground: "#333333"
sidebar-border: "#d4d4d4"
sidebar-ring: "#34a85a"
dark:
background: "#1a1d23"
foreground: "#e5e5e5"
card: "#2f3436"
card-foreground: "#e5e5e5"
popover: "#2f3436"
popover-foreground: "#e5e5e5"
primary: "#00883e"
primary-foreground: "#ffffff"
secondary: "#2e6a9b"
secondary-foreground: "#e5e5e5"
muted: "#444444"
muted-foreground: "#a3a3a3"
accent: "#3664b7"
accent-foreground: "#e5e5e5"
destructive: "#ff6c66"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#444444"
input: "#444444"
ring: "#34a85a"
link: "#34a85a"
chart-1: "#34a85a"
chart-2: "#4682b4"
chart-3: "#6495ed"
chart-4: "#66d9ef"
chart-5: "#1a9641"
sidebar: "#1a1d23"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#00883e"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#3664b7"
sidebar-accent-foreground: "#e5e5e5"
sidebar-border: "#444444"
sidebar-ring: "#34a85a"
notebook:
light:
background: "#f9f9f9"
foreground: "#3a3a3a"
card: "#ffffff"
card-foreground: "#3a3a3a"
popover: "#ffffff"
popover-foreground: "#3a3a3a"
primary: "#606060"
primary-foreground: "#f0f0f0"
secondary: "#dedede"
secondary-foreground: "#3a3a3a"
muted: "#e3e3e3"
muted-foreground: "#505050"
accent: "#f3eac8"
accent-foreground: "#5d4037"
destructive: "#a75d5d"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#747272"
input: "#ffffff"
ring: "#a0a0a0"
link: "#606060"
chart-1: "#333333"
chart-2: "#555555"
chart-3: "#777777"
chart-4: "#999999"
chart-5: "#bbbbbb"
sidebar: "#f0f0f0"
sidebar-foreground: "#3a3a3a"
sidebar-primary: "#606060"
sidebar-primary-foreground: "#f0f0f0"
sidebar-accent: "#f3eac8"
sidebar-accent-foreground: "#5d4037"
sidebar-border: "#c0c0c0"
sidebar-ring: "#a0a0a0"
dark:
background: "#2b2b2b"
foreground: "#dcdcdc"
card: "#333333"
card-foreground: "#dcdcdc"
popover: "#333333"
popover-foreground: "#dcdcdc"
primary: "#b0b0b0"
primary-foreground: "#2b2b2b"
secondary: "#5a5a5a"
secondary-foreground: "#d2d2d2"
muted: "#454545"
muted-foreground: "#a0a0a0"
accent: "#e0e0e0"
accent-foreground: "#333333"
destructive: "#d9afaf"
destructive-foreground: "#2b2b2b"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#4f4f4f"
input: "#333333"
ring: "#c0c0c0"
link: "#b0b0b0"
chart-1: "#efefef"
chart-2: "#d0d0d0"
chart-3: "#b0b0b0"
chart-4: "#909090"
chart-5: "#707070"
sidebar: "#212121"
sidebar-foreground: "#dcdcdc"
sidebar-primary: "#b0b0b0"
sidebar-primary-foreground: "#212121"
sidebar-accent: "#e0e0e0"
sidebar-accent-foreground: "#333333"
sidebar-border: "#4f4f4f"
sidebar-ring: "#c0c0c0"
ocean-breeze:
light:
background: "#f0f8ff"
foreground: "#374151"
card: "#ffffff"
card-foreground: "#374151"
popover: "#ffffff"
popover-foreground: "#374151"
primary: "#00883b"
primary-foreground: "#ffffff"
secondary: "#e0f2fe"
secondary-foreground: "#4b5563"
muted: "#f3f4f6"
muted-foreground: "#6b7280"
accent: "#d1fae5"
accent-foreground: "#374151"
destructive: "#d82930"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e5e7eb"
input: "#e5e7eb"
ring: "#22c55e"
link: "#008339"
chart-1: "#22c55e"
chart-2: "#10b981"
chart-3: "#059669"
chart-4: "#047857"
chart-5: "#065f46"
sidebar: "#e0f2fe"
sidebar-foreground: "#374151"
sidebar-primary: "#00883b"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#d1fae5"
sidebar-accent-foreground: "#374151"
sidebar-border: "#e5e7eb"
sidebar-ring: "#22c55e"
dark:
background: "#0f172a"
foreground: "#d1d5db"
card: "#1e293b"
card-foreground: "#d1d5db"
popover: "#1e293b"
popover-foreground: "#d1d5db"
primary: "#34d399"
primary-foreground: "#0f172a"
secondary: "#2d3748"
secondary-foreground: "#a1a1aa"
muted: "#19212e"
muted-foreground: "#89909e"
accent: "#374151"
accent-foreground: "#acacb5"
destructive: "#fe5350"
destructive-foreground: "#0f172a"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#4b5563"
input: "#4b5563"
ring: "#34d399"
link: "#34d399"
chart-1: "#34d399"
chart-2: "#2dd4bf"
chart-3: "#22c55e"
chart-4: "#10b981"
chart-5: "#059669"
sidebar: "#1e293b"
sidebar-foreground: "#d1d5db"
sidebar-primary: "#34d399"
sidebar-primary-foreground: "#0f172a"
sidebar-accent: "#374151"
sidebar-accent-foreground: "#acacb5"
sidebar-border: "#4b5563"
sidebar-ring: "#34d399"
ocean:
light:
background: "#ffffff"
foreground: "#171216"
card: "#ffffff"
card-foreground: "#171216"
popover: "#ffffff"
popover-foreground: "#171216"
primary: "#26b759"
primary-foreground: "#171216"
secondary: "#f4ecf2"
secondary-foreground: "#171216"
muted: "#f4ecf2"
muted-foreground: "#5a5358"
accent: "#eae2e8"
accent-foreground: "#171216"
destructive: "#a30006"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#d0c8ce"
input: "#bcb5bb"
ring: "#6ac57e"
link: "#00672b"
chart-1: "#26b759"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#5b054f"
chart-5: "#766f75"
sidebar: "#fcf4fa"
sidebar-foreground: "#171216"
sidebar-primary: "#26b759"
sidebar-primary-foreground: "#171216"
sidebar-accent: "#eae2e8"
sidebar-accent-foreground: "#171216"
sidebar-border: "#d0c8ce"
sidebar-ring: "#6ac57e"
dark:
background: "#171216"
foreground: "#f4ecf2"
card: "#1e181d"
card-foreground: "#f4ecf2"
popover: "#262025"
popover-foreground: "#f4ecf2"
primary: "#27b759"
primary-foreground: "#171216"
secondary: "#262025"
secondary-foreground: "#f4ecf2"
muted: "#262025"
muted-foreground: "#c7bfc5"
accent: "#2d272c"
accent-foreground: "#f4ecf2"
destructive: "#ff1a1a"
destructive-foreground: "#171216"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#423c41"
input: "#534d52"
ring: "#006e2e"
link: "#6ed185"
chart-1: "#27b759"
chart-2: "#e88c69"
chart-3: "#ffb162"
chart-4: "#b863a7"
chart-5: "#938c92"
sidebar: "#171216"
sidebar-foreground: "#f4ecf2"
sidebar-primary: "#27b759"
sidebar-primary-foreground: "#171216"
sidebar-accent: "#2d272c"
sidebar-accent-foreground: "#f4ecf2"
sidebar-border: "#423c41"
sidebar-ring: "#006e2e"
pastel-dreams:
light:
background: "#f7f3f9"
foreground: "#374151"
card: "#ffffff"
card-foreground: "#374151"
popover: "#ffffff"
popover-foreground: "#374151"
primary: "#8063ce"
primary-foreground: "#ffffff"
secondary: "#e9d8fd"
secondary-foreground: "#4b5563"
muted: "#f3e8ff"
muted-foreground: "#686f7d"
accent: "#f3e5f5"
accent-foreground: "#374151"
destructive: "#a7595a"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e9d8fd"
input: "#e9d8fd"
ring: "#a78bfa"
link: "#7b5dc7"
chart-1: "#a78bfa"
chart-2: "#8b5cf6"
chart-3: "#7c3aed"
chart-4: "#6d28d9"
chart-5: "#5b21b6"
sidebar: "#e9d8fd"
sidebar-foreground: "#374151"
sidebar-primary: "#8063ce"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f3e5f5"
sidebar-accent-foreground: "#374151"
sidebar-border: "#e9d8fd"
sidebar-ring: "#a78bfa"
dark:
background: "#1c1917"
foreground: "#e0e7ff"
card: "#2d2535"
card-foreground: "#e0e7ff"
popover: "#2d2535"
popover-foreground: "#e0e7ff"
primary: "#c0aafd"
primary-foreground: "#1c1917"
secondary: "#3f324a"
secondary-foreground: "#d1d5db"
muted: "#20182b"
muted-foreground: "#9ca3af"
accent: "#4a3d5a"
accent-foreground: "#d1d5db"
destructive: "#fca5a5"
destructive-foreground: "#1c1917"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#3f324a"
input: "#3f324a"
ring: "#c0aafd"
link: "#c0aafd"
chart-1: "#c0aafd"
chart-2: "#a78bfa"
chart-3: "#8b5cf6"
chart-4: "#7c3aed"
chart-5: "#6d28d9"
sidebar: "#3f324a"
sidebar-foreground: "#e0e7ff"
sidebar-primary: "#c0aafd"
sidebar-primary-foreground: "#1c1917"
sidebar-accent: "#4a3d5a"
sidebar-accent-foreground: "#d1d5db"
sidebar-border: "#3f324a"
sidebar-ring: "#c0aafd"
perpetuity:
light:
background: "#e8f0f0"
foreground: "#0a4a55"
card: "#f2f7f7"
card-foreground: "#0a4a55"
popover: "#f2f7f7"
popover-foreground: "#0a4a55"
primary: "#01838c"
primary-foreground: "#ffffff"
secondary: "#d9eaea"
secondary-foreground: "#0a4a55"
muted: "#e0eaea"
muted-foreground: "#3c7478"
accent: "#c9e5e7"
accent-foreground: "#0a4a55"
destructive: "#ca3032"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#cde0e2"
input: "#d9eaea"
ring: "#06858e"
link: "#007880"
chart-1: "#06858e"
chart-2: "#1e9ea6"
chart-3: "#37b6be"
chart-4: "#5dc7ce"
chart-5: "#8ad8dd"
sidebar: "#daebed"
sidebar-foreground: "#0a4a55"
sidebar-primary: "#01838c"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#c9e5e7"
sidebar-accent-foreground: "#0a4a55"
sidebar-border: "#cde0e2"
sidebar-ring: "#06858e"
dark:
background: "#0a1a20"
foreground: "#4de8e8"
card: "#0c2025"
card-foreground: "#4de8e8"
popover: "#0c2025"
popover-foreground: "#4de8e8"
primary: "#4de8e8"
primary-foreground: "#0a1a20"
secondary: "#164955"
secondary-foreground: "#4de8e8"
muted: "#0f3039"
muted-foreground: "#36a5a5"
accent: "#164955"
accent-foreground: "#4de8e8"
destructive: "#f14644"
destructive-foreground: "#141414"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#164955"
input: "#164955"
ring: "#4de8e8"
link: "#4de8e8"
chart-1: "#4de8e8"
chart-2: "#36a5a5"
chart-3: "#2d8a8a"
chart-4: "#19595e"
chart-5: "#0e383c"
sidebar: "#0a1a20"
sidebar-foreground: "#4de8e8"
sidebar-primary: "#4de8e8"
sidebar-primary-foreground: "#0a1a20"
sidebar-accent: "#164955"
sidebar-accent-foreground: "#4de8e8"
sidebar-border: "#164955"
sidebar-ring: "#4de8e8"
quantum-rose:
light:
background: "#fff0f8"
foreground: "#91185c"
card: "#fff7fc"
card-foreground: "#91185c"
popover: "#fff7fc"
popover-foreground: "#91185c"
primary: "#e40079"
primary-foreground: "#ffffff"
secondary: "#ffd6ff"
secondary-foreground: "#91185c"
muted: "#ffe3f2"
muted-foreground: "#bd3f80"
accent: "#ffc1e3"
accent-foreground: "#91185c"
destructive: "#cc3265"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#ffc7e6"
input: "#ffd6ff"
ring: "#e6067a"
link: "#da0073"
chart-1: "#e6067a"
chart-2: "#c44b97"
chart-3: "#9969b6"
chart-4: "#7371bf"
chart-5: "#5e84ff"
sidebar: "#ffedf6"
sidebar-foreground: "#91185c"
sidebar-primary: "#e40079"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#ffc1e3"
sidebar-accent-foreground: "#91185c"
sidebar-border: "#ffddf0"
sidebar-ring: "#e6067a"
dark:
background: "#1a0922"
foreground: "#ffb3ff"
card: "#2a1435"
card-foreground: "#ffb3ff"
popover: "#2a1435"
popover-foreground: "#ffb3ff"
primary: "#ff6bef"
primary-foreground: "#180518"
secondary: "#46204f"
secondary-foreground: "#ffb3ff"
muted: "#331941"
muted-foreground: "#d67ad6"
accent: "#5a1f5d"
accent-foreground: "#ffb3ff"
destructive: "#ff2876"
destructive-foreground: "#202020"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#4a1b5f"
input: "#46204f"
ring: "#ff6bef"
link: "#ff6bef"
chart-1: "#ff6bef"
chart-2: "#c359e3"
chart-3: "#9161ff"
chart-4: "#6f73e2"
chart-5: "#547aff"
sidebar: "#1c0d25"
sidebar-foreground: "#ffb3ff"
sidebar-primary: "#ff6bef"
sidebar-primary-foreground: "#180518"
sidebar-accent: "#5a1f5d"
sidebar-accent-foreground: "#ffb3ff"
sidebar-border: "#4a1b5f"
sidebar-ring: "#ff6bef"
retro-arcade:
light:
background: "#fdf6e3"
foreground: "#073642"
card: "#eee8d5"
card-foreground: "#073642"
popover: "#eee8d5"
popover-foreground: "#073642"
primary: "#d33682"
primary-foreground: "#ffffff"
secondary: "#00847c"
secondary-foreground: "#ffffff"
muted: "#93a1a1"
muted-foreground: "#073642"
accent: "#cb4b16"
accent-foreground: "#ffffff"
destructive: "#cc1d20"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#839496"
input: "#839496"
ring: "#d33682"
link: "#cc2e7c"
chart-1: "#268bd2"
chart-2: "#2aa198"
chart-3: "#d33682"
chart-4: "#cb4b16"
chart-5: "#dc322f"
sidebar: "#fdf6e3"
sidebar-foreground: "#073642"
sidebar-primary: "#d33682"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#00847c"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#839496"
sidebar-ring: "#d33682"
dark:
background: "#002b36"
foreground: "#93a1a1"
card: "#073642"
card-foreground: "#93a1a1"
popover: "#073642"
popover-foreground: "#93a1a1"
primary: "#d33682"
primary-foreground: "#ffffff"
secondary: "#00847c"
secondary-foreground: "#ffffff"
muted: "#586e75"
muted-foreground: "#93a1a1"
accent: "#cb4b16"
accent-foreground: "#ffffff"
destructive: "#ff685e"
destructive-foreground: "#313131"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#586e75"
input: "#586e75"
ring: "#d33682"
link: "#f0539a"
chart-1: "#268bd2"
chart-2: "#2aa198"
chart-3: "#d33682"
chart-4: "#cb4b16"
chart-5: "#dc322f"
sidebar: "#002b36"
sidebar-foreground: "#93a1a1"
sidebar-primary: "#d33682"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#00847c"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#586e75"
sidebar-ring: "#d33682"
sage-garden:
light:
background: "#f8f7f4"
foreground: "#1a1f2e"
card: "#ffffff"
card-foreground: "#1a1f2e"
popover: "#ffffff"
popover-foreground: "#1a1f2e"
primary: "#687b6e"
primary-foreground: "#ffffff"
secondary: "#ced4bf"
secondary-foreground: "#1a1f2e"
muted: "#e8e6e1"
muted-foreground: "#6b7280"
accent: "#bfc9bb"
accent-foreground: "#1a1f2e"
destructive: "#c73e3a"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e8e6e1"
input: "#ffffff"
ring: "#7c9082"
link: "#627568"
chart-1: "#7c9082"
chart-2: "#a0aa88"
chart-3: "#8b9d83"
chart-4: "#6b7280"
chart-5: "#e8e6e1"
sidebar: "#fafaf8"
sidebar-foreground: "#1a1f2e"
sidebar-primary: "#687b6e"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#e8e6e1"
sidebar-accent-foreground: "#1a1f2e"
sidebar-border: "#e8e6e1"
sidebar-ring: "#7c9082"
dark:
background: "#0a0a0a"
foreground: "#f5f5f5"
card: "#121212"
card-foreground: "#f5f5f5"
popover: "#121212"
popover-foreground: "#f5f5f5"
primary: "#7c9082"
primary-foreground: "#000000"
secondary: "#1a1a1a"
secondary-foreground: "#f5f5f5"
muted: "#1a1a1a"
muted-foreground: "#a0a0a0"
accent: "#36443a"
accent-foreground: "#f5f5f5"
destructive: "#ef4444"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#2a2a2a"
input: "#121212"
ring: "#7c9082"
link: "#7c9082"
chart-1: "#7c9082"
chart-2: "#a0aa88"
chart-3: "#8b9d83"
chart-4: "#6b7280"
chart-5: "#5a6b5e"
sidebar: "#0f0f0f"
sidebar-foreground: "#f5f5f5"
sidebar-primary: "#687b6e"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#1a1a1a"
sidebar-accent-foreground: "#f5f5f5"
sidebar-border: "#2a2a2a"
sidebar-ring: "#7c9082"
soft-pop:
light:
background: "#f7f9f3"
foreground: "#000000"
card: "#ffffff"
card-foreground: "#000000"
popover: "#ffffff"
popover-foreground: "#000000"
primary: "#4f46e5"
primary-foreground: "#ffffff"
secondary: "#008577"
secondary-foreground: "#ffffff"
muted: "#f0f0f0"
muted-foreground: "#333333"
accent: "#f59e0b"
accent-foreground: "#000000"
destructive: "#da2b31"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#000000"
input: "#737373"
ring: "#a5b4fc"
link: "#4f46e5"
chart-1: "#4f46e5"
chart-2: "#14b8a6"
chart-3: "#f59e0b"
chart-4: "#ec4899"
chart-5: "#22c55e"
sidebar: "#f7f9f3"
sidebar-foreground: "#000000"
sidebar-primary: "#4f46e5"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#f59e0b"
sidebar-accent-foreground: "#000000"
sidebar-border: "#000000"
sidebar-ring: "#a5b4fc"
dark:
background: "#000000"
foreground: "#ffffff"
card: "#1a212b"
card-foreground: "#ffffff"
popover: "#1a212b"
popover-foreground: "#ffffff"
primary: "#818cf8"
primary-foreground: "#000000"
secondary: "#2dd4bf"
secondary-foreground: "#000000"
muted: "#333333"
muted-foreground: "#cccccc"
accent: "#fcd34d"
accent-foreground: "#000000"
destructive: "#f87171"
destructive-foreground: "#000000"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#545454"
input: "#ffffff"
ring: "#818cf8"
link: "#818cf8"
chart-1: "#818cf8"
chart-2: "#2dd4bf"
chart-3: "#fcd34d"
chart-4: "#f472b6"
chart-5: "#4ade80"
sidebar: "#000000"
sidebar-foreground: "#ffffff"
sidebar-primary: "#818cf8"
sidebar-primary-foreground: "#000000"
sidebar-accent: "#fcd34d"
sidebar-accent-foreground: "#000000"
sidebar-border: "#ffffff"
sidebar-ring: "#818cf8"
solar-dusk:
light:
background: "#fdfbf7"
foreground: "#4a3b33"
card: "#f8f4ee"
card-foreground: "#4a3b33"
popover: "#f8f4ee"
popover-foreground: "#4a3b33"
primary: "#b45309"
primary-foreground: "#ffffff"
secondary: "#e4c090"
secondary-foreground: "#56524d"
muted: "#f1e9da"
muted-foreground: "#756e69"
accent: "#f2daba"
accent-foreground: "#57534e"
destructive: "#991b1b"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e4d9bc"
input: "#e4d9bc"
ring: "#b45309"
link: "#b45309"
chart-1: "#b45309"
chart-2: "#78716c"
chart-3: "#a16207"
chart-4: "#78716c"
chart-5: "#ca8a04"
sidebar: "#f1e9da"
sidebar-foreground: "#4a3b33"
sidebar-primary: "#b45309"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#a16207"
sidebar-accent-foreground: "#ffffff"
sidebar-border: "#e4d9bc"
sidebar-ring: "#b45309"
dark:
background: "#1c1917"
foreground: "#f5f5f4"
card: "#292524"
card-foreground: "#f5f5f4"
popover: "#292524"
popover-foreground: "#f5f5f4"
primary: "#c25500"
primary-foreground: "#ffffff"
secondary: "#57534e"
secondary-foreground: "#e7e5e4"
muted: "#201d1a"
muted-foreground: "#a8a29e"
accent: "#1e4252"
accent-foreground: "#e7e5e4"
destructive: "#fd4b43"
destructive-foreground: "#262626"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#44403c"
input: "#44403c"
ring: "#f97316"
link: "#f97316"
chart-1: "#f97316"
chart-2: "#0ea5e9"
chart-3: "#eab308"
chart-4: "#a8a29e"
chart-5: "#78716c"
sidebar: "#292524"
sidebar-foreground: "#f5f5f4"
sidebar-primary: "#c25500"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#0ea5e9"
sidebar-accent-foreground: "#0c2a4d"
sidebar-border: "#44403c"
sidebar-ring: "#f97316"
starry-night:
light:
background: "#f5f7fa"
foreground: "#1a2238"
card: "#e3eaf2"
card-foreground: "#1a2238"
popover: "#fffbe6"
popover-foreground: "#1a2238"
primary: "#3a5ba0"
primary-foreground: "#fffbe6"
secondary: "#f7c873"
secondary-foreground: "#1a2238"
muted: "#e5e5df"
muted-foreground: "#3a5ba0"
accent: "#467a96"
accent-foreground: "#fffbe6"
destructive: "#2d1e2f"
destructive-foreground: "#fffbe6"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#b0b8c1"
input: "#6ea3c1"
ring: "#f7c873"
link: "#3a5ba0"
chart-1: "#3a5ba0"
chart-2: "#f7c873"
chart-3: "#6ea3c1"
chart-4: "#b0b8c1"
chart-5: "#2d1e2f"
sidebar: "#e3eaf2"
sidebar-foreground: "#1a2238"
sidebar-primary: "#3a5ba0"
sidebar-primary-foreground: "#fffbe6"
sidebar-accent: "#f7c873"
sidebar-accent-foreground: "#1a2238"
sidebar-border: "#b0b8c1"
sidebar-ring: "#f7c873"
dark:
background: "#181a24"
foreground: "#e6eaf3"
card: "#23243a"
card-foreground: "#e6eaf3"
popover: "#23243a"
popover-foreground: "#ffe066"
primary: "#3a5ba0"
primary-foreground: "#ffe066"
secondary: "#ffe066"
secondary-foreground: "#23243a"
muted: "#1d1e2f"
muted-foreground: "#7e8da6"
accent: "#bccdf0"
accent-foreground: "#181a24"
destructive: "#cb7193"
destructive-foreground: "#2f2600"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#2d2e3e"
input: "#3a5ba0"
ring: "#ffe066"
link: "#5e82ca"
chart-1: "#3a5ba0"
chart-2: "#ffe066"
chart-3: "#6ea3c1"
chart-4: "#7a88a1"
chart-5: "#a04a6c"
sidebar: "#23243a"
sidebar-foreground: "#e6eaf3"
sidebar-primary: "#3a5ba0"
sidebar-primary-foreground: "#ffe066"
sidebar-accent: "#ffe066"
sidebar-accent-foreground: "#23243a"
sidebar-border: "#2d2e3e"
sidebar-ring: "#ffe066"
sunset-horizon:
light:
background: "#fff9f5"
foreground: "#3d3436"
card: "#ffffff"
card-foreground: "#3d3436"
popover: "#ffffff"
popover-foreground: "#3d3436"
primary: "#ca4e31"
primary-foreground: "#ffffff"
secondary: "#ffedea"
secondary-foreground: "#b1513f"
muted: "#fff0eb"
muted-foreground: "#78716c"
accent: "#feb47b"
accent-foreground: "#3d3436"
destructive: "#db2d3d"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#ffe0d6"
input: "#ffe0d6"
ring: "#ff7e5f"
link: "#c5492c"
chart-1: "#ff7e5f"
chart-2: "#feb47b"
chart-3: "#ffcaa7"
chart-4: "#ffad8f"
chart-5: "#ce6a57"
sidebar: "#fff0eb"
sidebar-foreground: "#3d3436"
sidebar-primary: "#ca4e31"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#feb47b"
sidebar-accent-foreground: "#3d3436"
sidebar-border: "#ffe0d6"
sidebar-ring: "#ff7e5f"
dark:
background: "#2a2024"
foreground: "#f2e9e4"
card: "#392f35"
card-foreground: "#f2e9e4"
popover: "#392f35"
popover-foreground: "#f2e9e4"
primary: "#ca4e31"
primary-foreground: "#ffffff"
secondary: "#463a41"
secondary-foreground: "#f2e9e4"
muted: "#30272c"
muted-foreground: "#d7c6bc"
accent: "#feb47b"
accent-foreground: "#2a2024"
destructive: "#ff6769"
destructive-foreground: "#101010"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#463a41"
input: "#463a41"
ring: "#ff7e5f"
link: "#ff7e5f"
chart-1: "#ff7e5f"
chart-2: "#feb47b"
chart-3: "#ffcaa7"
chart-4: "#ffad8f"
chart-5: "#ce6a57"
sidebar: "#2a2024"
sidebar-foreground: "#f2e9e4"
sidebar-primary: "#ca4e31"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#feb47b"
sidebar-accent-foreground: "#2a2024"
sidebar-border: "#463a41"
sidebar-ring: "#ff7e5f"
tangerine:
light:
background: "#e8ebed"
foreground: "#333333"
card: "#ffffff"
card-foreground: "#333333"
popover: "#ffffff"
popover-foreground: "#333333"
primary: "#cd4b25"
primary-foreground: "#ffffff"
secondary: "#f3f4f6"
secondary-foreground: "#4b5563"
muted: "#f9fafb"
muted-foreground: "#626977"
accent: "#d6e4f0"
accent-foreground: "#1e3a8a"
destructive: "#cf1c28"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#dcdfe2"
input: "#f4f5f7"
ring: "#e05d38"
link: "#bd3c13"
chart-1: "#86a7c8"
chart-2: "#eea591"
chart-3: "#5a7ca6"
chart-4: "#466494"
chart-5: "#334c82"
sidebar: "#dddfe2"
sidebar-foreground: "#333333"
sidebar-primary: "#cd4b25"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#d6e4f0"
sidebar-accent-foreground: "#1e3a8a"
sidebar-border: "#e5e7eb"
sidebar-ring: "#e05d38"
dark:
background: "#1c2433"
foreground: "#e5e5e5"
card: "#2a3040"
card-foreground: "#e5e5e5"
popover: "#262b38"
popover-foreground: "#e5e5e5"
primary: "#cd4b25"
primary-foreground: "#ffffff"
secondary: "#2a303e"
secondary-foreground: "#e5e5e5"
muted: "#2a303e"
muted-foreground: "#a3a3a3"
accent: "#2a3656"
accent-foreground: "#bfdbfe"
destructive: "#ff645f"
destructive-foreground: "#1c1c1c"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#3d4354"
input: "#3d4354"
ring: "#e05d38"
link: "#e5623d"
chart-1: "#86a7c8"
chart-2: "#e6a08f"
chart-3: "#5a7ca6"
chart-4: "#466494"
chart-5: "#334c82"
sidebar: "#2a303f"
sidebar-foreground: "#e5e5e5"
sidebar-primary: "#cd4b25"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#2a3656"
sidebar-accent-foreground: "#bfdbfe"
sidebar-border: "#3d4354"
sidebar-ring: "#e05d38"
vintage-paper:
light:
background: "#f5f1e6"
foreground: "#4a3f35"
card: "#fffcf5"
card-foreground: "#4a3f35"
popover: "#fffcf5"
popover-foreground: "#4a3f35"
primary: "#966d44"
primary-foreground: "#ffffff"
secondary: "#e2d8c3"
secondary-foreground: "#5c4d3f"
muted: "#ece5d8"
muted-foreground: "#7d6b56"
accent: "#d4c8aa"
accent-foreground: "#4a3f35"
destructive: "#b54a35"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#dbd0ba"
input: "#dbd0ba"
ring: "#a67c52"
link: "#8f663c"
chart-1: "#a67c52"
chart-2: "#8d6e4c"
chart-3: "#735a3a"
chart-4: "#b3906f"
chart-5: "#c0a080"
sidebar: "#ece5d8"
sidebar-foreground: "#4a3f35"
sidebar-primary: "#966d44"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#d4c8aa"
sidebar-accent-foreground: "#4a3f35"
sidebar-border: "#dbd0ba"
sidebar-ring: "#a67c52"
dark:
background: "#2d2621"
foreground: "#ece5d8"
card: "#3a322c"
card-foreground: "#ece5d8"
popover: "#3a322c"
popover-foreground: "#ece5d8"
primary: "#c0a080"
primary-foreground: "#2d2621"
secondary: "#4a4039"
secondary-foreground: "#ece5d8"
muted: "#312b26"
muted-foreground: "#c5bcac"
accent: "#59493e"
accent-foreground: "#ece5d8"
destructive: "#ec7b64"
destructive-foreground: "#333333"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#4a4039"
input: "#4a4039"
ring: "#c0a080"
link: "#c0a080"
chart-1: "#c0a080"
chart-2: "#b3906f"
chart-3: "#a67c52"
chart-4: "#8d6e4c"
chart-5: "#735a3a"
sidebar: "#2d2621"
sidebar-foreground: "#ece5d8"
sidebar-primary: "#c0a080"
sidebar-primary-foreground: "#2d2621"
sidebar-accent: "#59493e"
sidebar-accent-foreground: "#ece5d8"
sidebar-border: "#4a4039"
sidebar-ring: "#c0a080"
violet-bloom:
light:
background: "#fdfdfd"
foreground: "#000000"
card: "#fdfdfd"
card-foreground: "#000000"
popover: "#fcfcfc"
popover-foreground: "#000000"
primary: "#7033ff"
primary-foreground: "#ffffff"
secondary: "#edf0f4"
secondary-foreground: "#080808"
muted: "#f5f5f5"
muted-foreground: "#525252"
accent: "#e2ebff"
accent-foreground: "#1864d7"
destructive: "#d53b42"
destructive-foreground: "#ffffff"
success: "#26b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#e7e7ee"
input: "#ebebeb"
ring: "#000000"
link: "#7033ff"
chart-1: "#4ac885"
chart-2: "#7033ff"
chart-3: "#fd822b"
chart-4: "#3276e4"
chart-5: "#747474"
sidebar: "#f5f8fb"
sidebar-foreground: "#000000"
sidebar-primary: "#000000"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#ebebeb"
sidebar-accent-foreground: "#000000"
sidebar-border: "#ebebeb"
sidebar-ring: "#000000"
dark:
background: "#1a1b1e"
foreground: "#f0f0f0"
card: "#222327"
card-foreground: "#f0f0f0"
popover: "#222327"
popover-foreground: "#f0f0f0"
primary: "#8553f6"
primary-foreground: "#ffffff"
secondary: "#2a2c33"
secondary-foreground: "#f0f0f0"
muted: "#2a2c33"
muted-foreground: "#a0a0a0"
accent: "#1e293b"
accent-foreground: "#79c0ff"
destructive: "#f87171"
destructive-foreground: "#343434"
success: "#27b759"
success-foreground: "#171216"
warning: "#f39a46"
warning-foreground: "#171216"
border: "#33353a"
input: "#33353a"
ring: "#8c5cff"
link: "#9167ff"
chart-1: "#4ade80"
chart-2: "#8c5cff"
chart-3: "#fca5a5"
chart-4: "#5993f4"
chart-5: "#a0a0a0"
sidebar: "#161618"
sidebar-foreground: "#f0f0f0"
sidebar-primary: "#8553f6"
sidebar-primary-foreground: "#ffffff"
sidebar-accent: "#2a2c33"
sidebar-accent-foreground: "#9c7dff"
sidebar-border: "#33353a"
sidebar-ring: "#8c5cff"
scales:
neutral:
light:
"1": "#ffffff"
"2": "#fcf4fa"
"3": "#f4ecf2"
"4": "#eae2e8"
"5": "#ded6dc"
"6": "#d0c8ce"
"7": "#bcb5bb"
"8": "#a39ca2"
"9": "#766f75"
"10": "#686166"
"11": "#5a5358"
"12": "#171216"
dark:
"1": "#171216"
"2": "#1e181d"
"3": "#262025"
"4": "#2d272c"
"5": "#363035"
"6": "#423c41"
"7": "#534d52"
"8": "#6b6469"
"9": "#938c92"
"10": "#a49da3"
"11": "#c7bfc5"
"12": "#f4ecf2"
magenta:
light:
"1": "#fffafd"
"2": "#fff3fa"
"3": "#ffe6f4"
"4": "#ffd7ee"
"5": "#fdc6e7"
"6": "#f6b2db"
"7": "#e99acb"
"8": "#d979b6"
"9": "#a4237f"
"10": "#930a70"
"11": "#731058"
"12": "#3b0c2c"
dark:
"1": "#080506"
"2": "#11080d"
"3": "#1f0d18"
"4": "#2b0e22"
"5": "#3b122e"
"6": "#4e183d"
"7": "#682552"
"8": "#8d3370"
"9": "#cd4ea4"
"10": "#e261b7"
"11": "#f88ed1"
"12": "#ffe1f2"
coral:
light:
"1": "#fffbf9"
"2": "#fef4f1"
"3": "#ffebe4"
"4": "#ffe1d6"
"5": "#fdd6c7"
"6": "#f9c9b7"
"7": "#f3b9a3"
"8": "#eba48a"
"9": "#e88c69"
"10": "#d77c5a"
"11": "#824027"
"12": "#37170b"
dark:
"1": "#070504"
"2": "#100a07"
"3": "#1d100b"
"4": "#29140d"
"5": "#381b10"
"6": "#4a2516"
"7": "#633421"
"8": "#854730"
"9": "#e88c69"
"10": "#fd9f7b"
"11": "#ffbaa1"
"12": "#ffe5db"
peach:
light:
"1": "#fffbf8"
"2": "#fdf5ee"
"3": "#feeee0"
"4": "#ffe6d0"
"5": "#ffdec1"
"6": "#fed6b1"
"7": "#fbcca0"
"8": "#fbc088"
"9": "#ffb162"
"10": "#eea151"
"11": "#7b4701"
"12": "#341b00"
dark:
"1": "#070504"
"2": "#0f0a06"
"3": "#1c1107"
"4": "#271605"
"5": "#351e04"
"6": "#472804"
"7": "#5f380a"
"8": "#804d0f"
"9": "#ffb162"
"10": "#ffcd9d"
"11": "#ffd7b1"
"12": "#ffe6d0"
plum:
light:
"1": "#fffafe"
"2": "#fdf3fa"
"3": "#fbe8f6"
"4": "#f7dbf0"
"5": "#f2cce8"
"6": "#e8badc"
"7": "#daa4cc"
"8": "#c785b8"
"9": "#5b054f"
"10": "#48003e"
"11": "#420338"
"12": "#32142c"
dark:
"1": "#070507"
"2": "#0f090d"
"3": "#1c0f19"
"4": "#261322"
"5": "#34192e"
"6": "#45213e"
"7": "#5d3053"
"8": "#7e4271"
"9": "#b863a7"
"10": "#cc75ba"
"11": "#e49cd3"
"12": "#ffe1f7"
red:
light:
"1": "#fffbfa"
"2": "#fff4f2"
"3": "#ffe9e5"
"4": "#ffdbd5"
"5": "#ffcbc3"
"6": "#ffb5aa"
"7": "#ff9688"
"8": "#fe6657"
"9": "#ff1b1b"
"10": "#e8010d"
"11": "#a30006"
"12": "#470001"
dark:
"1": "#0a0404"
"2": "#140706"
"3": "#260907"
"4": "#360705"
"5": "#490403"
"6": "#610203"
"7": "#800808"
"8": "#ac090b"
"9": "#ff1a1a"
"10": "#ff6152"
"11": "#ff9688"
"12": "#ffe4e0"
amber:
light:
"1": "#fffbf8"
"2": "#fef5ee"
"3": "#ffedde"
"4": "#ffe3ce"
"5": "#ffdabb"
"6": "#fccea9"
"7": "#f8c093"
"8": "#f2af76"
"9": "#f39a46"
"10": "#e28a34"
"11": "#7e4500"
"12": "#351a00"
dark:
"1": "#070504"
"2": "#100a06"
"3": "#1d1106"
"4": "#291504"
"5": "#381c02"
"6": "#4a2600"
"7": "#633502"
"8": "#854a03"
"9": "#f39a46"
"10": "#ffb16e"
"11": "#ffc798"
"12": "#ffe6d2"
green:
light:
"1": "#f8fef9"
"2": "#effaf0"
"3": "#dff7e3"
"4": "#cff1d4"
"5": "#bdebc4"
"6": "#a8e2b2"
"7": "#8ed59c"
"8": "#6ac57e"
"9": "#26b759"
"10": "#00a74a"
"11": "#00672b"
"12": "#002a0e"
dark:
"1": "#040704"
"2": "#060d07"
"3": "#07180b"
"4": "#04210c"
"5": "#012d0f"
"6": "#003c16"
"7": "#005120"
"8": "#006e2e"
"9": "#27b759"
"10": "#43cb6c"
"11": "#6ed185"
"12": "#c6fbcf"
categorical:
light:
red:
fill: "#FB817A"
foreground: "#171216"
hover: "#ED6B65"
tint: "#ffebeb"
tint-ring: "#ffdcdb"
tint-foreground: "#ba2525"
orange:
fill: "#FFA56D"
foreground: "#171216"
hover: "#F68E47"
tint: "#feeee1"
tint-ring: "#fee0c8"
tint-foreground: "#9e3f00"
amber:
fill: "#FFC25B"
foreground: "#171216"
hover: "#F1AE30"
tint: "#fff3cc"
tint-ring: "#ffe59e"
tint-foreground: "#874d00"
yellow:
fill: "#F4E15E"
foreground: "#171216"
hover: "#E3CE35"
tint: "#fdf7c4"
tint-ring: "#fcef7e"
tint-foreground: "#665a00"
lime:
fill: "#B7E367"
foreground: "#171216"
hover: "#A4D248"
tint: "#f4fbcb"
tint-ring: "#e9f797"
tint-foreground: "#536300"
green:
fill: "#79DA90"
foreground: "#171216"
hover: "#5DCA7A"
tint: "#e0fced"
tint-ring: "#cbf7e1"
tint-foreground: "#007d53"
teal:
fill: "#65CCBC"
foreground: "#171216"
hover: "#3FBDAB"
tint: "#dcfaf4"
tint-ring: "#cbf4ec"
tint-foreground: "#007669"
aqua:
fill: "#8DDDEB"
foreground: "#171216"
hover: "#6FCDDD"
tint: "#ddf7ff"
tint-ring: "#d0eff7"
tint-foreground: "#056c87"
blue:
fill: "#7ABAF7"
foreground: "#171216"
hover: "#60A9EB"
tint: "#e5eeff"
tint-ring: "#d6e5ff"
tint-foreground: "#215bc4"
indigo:
fill: "#9B98F3"
foreground: "#171216"
hover: "#8A86E7"
tint: "#eeefff"
tint-ring: "#e0e1ff"
tint-foreground: "#5745be"
purple:
fill: "#D2A3FB"
foreground: "#171216"
hover: "#C28FEE"
tint: "#f5f0ff"
tint-ring: "#e8ddfe"
tint-foreground: "#6238b5"
magenta:
fill: "#F5B4F2"
foreground: "#171216"
hover: "#E7A0E4"
tint: "#fdedff"
tint-ring: "#fad6ff"
tint-foreground: "#9c1bab"
pink:
fill: "#FA96C3"
foreground: "#171216"
hover: "#EC81B3"
tint: "#feecf3"
tint-ring: "#fdddea"
tint-foreground: "#b81c5d"
rose:
fill: "#F9C5C5"
foreground: "#171216"
hover: "#EEB0B1"
tint: "#ffecec"
tint-ring: "#ffdddd"
tint-foreground: "#bb1f3b"
slate:
fill: "#B3BBC8"
foreground: "#171216"
hover: "#9EAABE"
tint: "#f6f7f7"
tint-ring: "#eeeff1"
tint-foreground: "#505155"
dark:
red:
fill: "#F17E76"
foreground: "#171216"
hover: "#E36862"
tint: "#4e1b28"
tint-ring: "#692623"
tint-foreground: "#ffd1d1"
orange:
fill: "#FA9E63"
foreground: "#171216"
hover: "#EC8947"
tint: "#432410"
tint-ring: "#593217"
tint-foreground: "#ffc89e"
amber:
fill: "#F7BC59"
foreground: "#171216"
hover: "#E8A934"
tint: "#3a2d12"
tint-ring: "#523817"
tint-foreground: "#ffd269"
yellow:
fill: "#ECDA60"
foreground: "#171216"
hover: "#DCC83A"
tint: "#373313"
tint-ring: "#423e17"
tint-foreground: "#f5e242"
lime:
fill: "#B2DC68"
foreground: "#171216"
hover: "#9FCB49"
tint: "#2f3802"
tint-ring: "#3b4217"
tint-foreground: "#d7eb67"
green:
fill: "#77D28C"
foreground: "#171216"
hover: "#5CC277"
tint: "#1d4034"
tint-ring: "#244a3a"
tint-foreground: "#a7f2cf"
teal:
fill: "#64C5B6"
foreground: "#171216"
hover: "#40B6A5"
tint: "#183e38"
tint-ring: "#0a5047"
tint-foreground: "#a2f1e3"
aqua:
fill: "#8BD5E3"
foreground: "#171216"
hover: "#6DC5D5"
tint: "#1a3946"
tint-ring: "#0a4e6b"
tint-foreground: "#a9ebfc"
blue:
fill: "#77B4ED"
foreground: "#171216"
hover: "#5EA2E2"
tint: "#1d2e55"
tint-ring: "#2b3e6d"
tint-foreground: "#c2d6ff"
indigo:
fill: "#9593E8"
foreground: "#171216"
hover: "#8580DD"
tint: "#2a2558"
tint-ring: "#3a3476"
tint-foreground: "#ccceff"
purple:
fill: "#CA9EF1"
foreground: "#171216"
hover: "#BB8BE4"
tint: "#2f1e5a"
tint-ring: "#45297d"
tint-foreground: "#d8c4ff"
magenta:
fill: "#EDAFEA"
foreground: "#171216"
hover: "#DE9BDC"
tint: "#431b4b"
tint-ring: "#5c2169"
tint-foreground: "#f6bdfc"
pink:
fill: "#F092BC"
foreground: "#171216"
hover: "#E27DAC"
tint: "#4e1b30"
tint-ring: "#642640"
tint-foreground: "#ffbfda"
rose:
fill: "#F1BFC0"
foreground: "#171216"
hover: "#E5ABAB"
tint: "#501b21"
tint-ring: "#68252c"
tint-foreground: "#ffcacb"
slate:
fill: "#ADB5C1"
foreground: "#171216"
hover: "#98A4B7"
tint: "#1b1c1f"
tint-ring: "#2f3033"
tint-foreground: "#d9dade"
typography:
display-96:
fontFamily: "{type.heading}"
fontSize: 96px
fontWeight: 500
lineHeight: 100px
letterSpacing: -2.88px
display-72:
fontFamily: "{type.heading}"
fontSize: 72px
fontWeight: 500
lineHeight: 76px
letterSpacing: -1.8px
heading-56:
fontFamily: "{type.heading}"
fontSize: 56px
fontWeight: 500
lineHeight: 60px
letterSpacing: -1.12px
heading-48:
fontFamily: "{type.heading}"
fontSize: 48px
fontWeight: 500
lineHeight: 52px
letterSpacing: -0.96px
heading-40:
fontFamily: "{type.heading}"
fontSize: 40px
fontWeight: 500
lineHeight: 44px
letterSpacing: -0.8px
heading-32:
fontFamily: "{type.heading}"
fontSize: 32px
fontWeight: 500
lineHeight: 36px
letterSpacing: -0.64px
heading-24:
fontFamily: "{type.heading}"
fontSize: 24px
fontWeight: 500
lineHeight: 30px
letterSpacing: -0.24px
heading-20:
fontFamily: "{type.heading}"
fontSize: 20px
fontWeight: 500
lineHeight: 26px
letterSpacing: -0.2px
heading-16:
fontFamily: "{type.heading}"
fontSize: 16px
fontWeight: 500
lineHeight: 22px
letterSpacing: 0px
copy-18:
fontFamily: "{type.sans}"
fontSize: 18px
fontWeight: 300
lineHeight: 29px
letterSpacing: 0px
copy-16:
fontFamily: "{type.sans}"
fontSize: 16px
fontWeight: 300
lineHeight: 26px
letterSpacing: 0px
copy-14:
fontFamily: "{type.sans}"
fontSize: 14px
fontWeight: 400
lineHeight: 22px
letterSpacing: 0px
copy-13:
fontFamily: "{type.sans}"
fontSize: 13px
fontWeight: 400
lineHeight: 20px
letterSpacing: 0px
label-14:
fontFamily: "{type.sans}"
fontSize: 14px
fontWeight: 500
lineHeight: 18px
letterSpacing: 0px
label-13:
fontFamily: "{type.sans}"
fontSize: 13px
fontWeight: 500
lineHeight: 16px
letterSpacing: 0px
label-12:
fontFamily: "{type.sans}"
fontSize: 12px
fontWeight: 500
lineHeight: 16px
letterSpacing: 0.72px
textTransform: uppercase
rounded:
sm: "calc({brand.radius} - 4px)"
md: "calc({brand.radius} - 2px)"
lg: "{brand.radius}"
xl: "calc({brand.radius} + 4px)"
spacing:
"1": 4px
"2": 8px
"3": 12px
"4": 16px
"5": 20px
"6": 24px
"7": 28px
"8": 32px
"9": 36px
"10": 40px
"11": 44px
"12": 48px
"13": 52px
"14": 56px
"15": 60px
"16": 64px
"17": 68px
"18": 72px
"19": 76px
"20": 80px
"21": 84px
"22": 88px
"23": 92px
"24": 96px
section: 80px
section-md: 112px
components:
accordion: "@tempio/ui/components/ui/accordion"
alert-dialog: "@tempio/ui/components/ui/alert-dialog"
alert: "@tempio/ui/components/ui/alert"
aspect-ratio: "@tempio/ui/components/ui/aspect-ratio"
attachment: "@tempio/ui/components/ui/attachment"
avatar: "@tempio/ui/components/ui/avatar"
badge: "@tempio/ui/components/ui/badge"
breadcrumb: "@tempio/ui/components/ui/breadcrumb"
bubble: "@tempio/ui/components/ui/bubble"
button-group: "@tempio/ui/components/ui/button-group"
button: "@tempio/ui/components/ui/button"
calendar: "@tempio/ui/components/ui/calendar"
card: "@tempio/ui/components/ui/card"
carousel: "@tempio/ui/components/ui/carousel"
chart: "@tempio/ui/components/ui/chart"
checkbox: "@tempio/ui/components/ui/checkbox"
collapsible: "@tempio/ui/components/ui/collapsible"
combobox: "@tempio/ui/components/ui/combobox"
command: "@tempio/ui/components/ui/command"
context-menu: "@tempio/ui/components/ui/context-menu"
dialog: "@tempio/ui/components/ui/dialog"
direction: "@tempio/ui/components/ui/direction"
drawer: "@tempio/ui/components/ui/drawer"
dropdown-menu: "@tempio/ui/components/ui/dropdown-menu"
empty: "@tempio/ui/components/ui/empty"
field: "@tempio/ui/components/ui/field"
hover-card: "@tempio/ui/components/ui/hover-card"
icon-tile: "@tempio/ui/components/ui/icon-tile"
input-group: "@tempio/ui/components/ui/input-group"
input-otp: "@tempio/ui/components/ui/input-otp"
input: "@tempio/ui/components/ui/input"
item: "@tempio/ui/components/ui/item"
kbd: "@tempio/ui/components/ui/kbd"
label: "@tempio/ui/components/ui/label"
marker: "@tempio/ui/components/ui/marker"
menubar: "@tempio/ui/components/ui/menubar"
message-scroller: "@tempio/ui/components/ui/message-scroller"
message: "@tempio/ui/components/ui/message"
native-select: "@tempio/ui/components/ui/native-select"
navigation-menu: "@tempio/ui/components/ui/navigation-menu"
pagination: "@tempio/ui/components/ui/pagination"
popover: "@tempio/ui/components/ui/popover"
progress: "@tempio/ui/components/ui/progress"
questionnaire: "@tempio/ui/components/ui/questionnaire"
radio-group: "@tempio/ui/components/ui/radio-group"
resizable: "@tempio/ui/components/ui/resizable"
scroll-area: "@tempio/ui/components/ui/scroll-area"
select: "@tempio/ui/components/ui/select"
separator: "@tempio/ui/components/ui/separator"
sheet: "@tempio/ui/components/ui/sheet"
sidebar: "@tempio/ui/components/ui/sidebar"
skeleton: "@tempio/ui/components/ui/skeleton"
slider: "@tempio/ui/components/ui/slider"
sonner: "@tempio/ui/components/ui/sonner"
spinner: "@tempio/ui/components/ui/spinner"
switch: "@tempio/ui/components/ui/switch"
table: "@tempio/ui/components/ui/table"
tabs: "@tempio/ui/components/ui/tabs"
textarea: "@tempio/ui/components/ui/textarea"
toast: "@tempio/ui/components/ui/toast"
toggle-group: "@tempio/ui/components/ui/toggle-group"
toggle: "@tempio/ui/components/ui/toggle"
tooltip: "@tempio/ui/components/ui/tooltip"
before-after: "@tempio/ui/components/blocks/before-after"
breadcrumbs: "@tempio/ui/components/blocks/breadcrumbs"
calculator-shell: "@tempio/ui/components/blocks/calculator-shell"
card-grid: "@tempio/ui/components/blocks/card-grid"
comparison: "@tempio/ui/components/blocks/comparison"
cta-band: "@tempio/ui/components/blocks/cta-band"
dark-grid: "@tempio/ui/components/blocks/dark-grid"
disqualifier: "@tempio/ui/components/blocks/disqualifier"
dotted-backdrop: "@tempio/ui/components/blocks/dotted-backdrop"
faq: "@tempio/ui/components/blocks/faq"
feature-bento: "@tempio/ui/components/blocks/feature-bento"
feature-tabs: "@tempio/ui/components/blocks/feature-tabs"
founder-note: "@tempio/ui/components/blocks/founder-note"
frame: "@tempio/ui/components/blocks/frame"
freshness: "@tempio/ui/components/blocks/freshness"
hero: "@tempio/ui/components/blocks/hero"
hero-3d: "@tempio/ui/components/blocks/hero-3d"
intro: "@tempio/ui/components/blocks/intro"
logo-strip: "@tempio/ui/components/blocks/logo-strip"
objections: "@tempio/ui/components/blocks/objections"
phone-feed: "@tempio/ui/components/blocks/phone-feed"
pricing: "@tempio/ui/components/blocks/pricing"
prompt-chips: "@tempio/ui/components/blocks/prompt-chips"
section: "@tempio/ui/components/blocks/section"
site-footer: "@tempio/ui/components/blocks/site-footer"
site-nav: "@tempio/ui/components/blocks/site-nav"
spec-sheet: "@tempio/ui/components/blocks/spec-sheet"
split-drift: "@tempio/ui/components/blocks/split-drift"
stat-tiles: "@tempio/ui/components/blocks/stat-tiles"
statement: "@tempio/ui/components/blocks/statement"
steps: "@tempio/ui/components/blocks/steps"
term-article: "@tempio/ui/components/blocks/term-article"
testimonial: "@tempio/ui/components/blocks/testimonial"
tool-frame: "@tempio/ui/components/blocks/tool-frame"
tool-grid: "@tempio/ui/components/blocks/tool-grid"
transcript: "@tempio/ui/components/blocks/transcript"
two-up: "@tempio/ui/components/blocks/two-up"
versus: "@tempio/ui/components/blocks/versus"
walkthrough: "@tempio/ui/components/blocks/walkthrough"
ad-preview-template: "@tempio/ui/components/templates/ad-preview"
alternative-template: "@tempio/ui/components/templates/alternative"
calculator-template: "@tempio/ui/components/templates/calculator"
channel-template: "@tempio/ui/components/templates/channel"
compare-template: "@tempio/ui/components/templates/compare"
competitor-pricing-template: "@tempio/ui/components/templates/competitor-pricing"
examples-template: "@tempio/ui/components/templates/examples"
guide-template: "@tempio/ui/components/templates/guide"
home-template: "@tempio/ui/components/templates/home"
integration-template: "@tempio/ui/components/templates/integration"
pillar-template: "@tempio/ui/components/templates/pillar"
safe-zone-template: "@tempio/ui/components/templates/safe-zone"
term-template: "@tempio/ui/components/templates/term"
icons: "@tempio/ui/icons"Overview
Tempio is an AI ads command center. Its interface has to hold a lot of numbers without shouting, and has to make one moment — approving a change that will spend money — feel different from every other moment. The system is built for those two jobs.
The skeleton is Geist's. Twelve-step colour scales on the Radix and Geist band contract, Tailwind's 4px spacing, a radius base of 0.625rem, and Geist and Geist Mono as the faces. Borrowing the structure means anyone who has read Vercel's design docs already knows where things are.
The skin is the Softriver brand kit's. The temple arch carries a sunset
gradient, the kit's purple #5B054F is the primary and the sidebar in both
modes, the page and its cards are white in light, a card set apart by a
hairline border, and the dark ground is #171216, the neutral moved onto the purple's hue.
The neutral carries a trace of the purple. The primary is a colour. The
gradient exists.
Every value below lives in tokens/brand.json and tokens/themes/*.json.
Components read the tokens and never a literal, so the kit's colours arrived
as edits to brand.json and tempio.json.
Colors
Roles
Twelve steps per hue. Geist numbers ten of them 100-1000 and holds its two page backgrounds in a separate pair; those ten are steps 3-12 here and the pair is steps 1-2. Same bands, different numbering, so the alias is written down rather than looked up.
| Step | Geist | Role | Roles that read it (tempio) |
|---|---|---|---|
| 1 | background-1 | app background | neutral — light card, popover; dark destructive-foreground, success-foreground, warning-foreground |
| 2 | background-2 | subtle background, a card lifted off the ground | neutral — light sidebar; dark card, sidebar |
| 3 | 100 | component background at rest | neutral — light secondary, muted, sidebar-accent; dark popover, secondary, muted |
| 4 | 200 | hovered component background | neutral — light accent; dark accent, sidebar-accent |
| 5 | 300 | active or selected component background | none by default; available as bg-<hue>-5 |
| 6 | 400 | subtle border, separator | neutral — border, sidebar-border |
| 7 | 500 | component border, hovered border | neutral — input |
| 8 | 600 | strong border, focus ring | magenta — ring, sidebar-ring |
| 9 | 700 | solid accent: buttons, badges, chart series | neutral — chart-5magenta — chart-1coral — chart-2peach — chart-3plum — primary, chart-4, sidebar-primaryred — dark destructiveamber — warninggreen — success |
| 10 | 800 | hovered solid accent | none by default; available as bg-<hue>-10 |
| 11 | 900 | low-contrast text, icons, status text | neutral — muted-foregroundmagenta — linkred — light destructive |
| 12 | 1000 | high-contrast text | neutral — light foreground, card-foreground, popover-foreground, secondary-foreground, accent-foreground, success-foreground, warning-foreground, sidebar-foreground, sidebar-accent-foreground; dark foreground, card-foreground, popover-foreground, secondary-foreground, accent-foreground, sidebar-foreground, sidebar-accent-foreground |
Semantic layer
What a component actually reads. A theme maps these onto scale steps once per
mode; nothing else in the system names a colour. The hex columns are the
tempio theme resolved — switch the theme and the utilities follow without a
rebuild.
In light, background is the paper, #FFFFFF, and card and
popover are white too, neutral.1, which brand.json pins to #FFFFFF in the
light ramp, so a card on the page reads by its border hairline.
In dark, background is the ground, #171216, and card is
neutral.2.
primary and sidebar are plum.9, #5B054F, in both modes, under white
ink at 13.3:1. The dark theme writes them as plum.light.9, a reference
that holds the light ramp's value, because the dark ramp lifts its own step 9 to
#B863A7 so a solid shows on the ground, and white on that is 3.9:1.
The sidebar's hover is plum.10, its border plum.8 and its focus ring
peach.9. Its one filled mark, sidebar-primary, is peach.9 under plum ink at
13.3:1, so nothing on the sidebar is black.
| Token | Utility | Light | Dark |
|---|---|---|---|
--background | bg-background / text-background | #ffffff | #171216 |
--foreground | bg-foreground / text-foreground | #171216 | #f4ecf2 |
--card | bg-card / text-card | #ffffff | #1e181d |
--card-foreground | bg-card-foreground / text-card-foreground | #171216 | #f4ecf2 |
--popover | bg-popover / text-popover | #ffffff | #262025 |
--popover-foreground | bg-popover-foreground / text-popover-foreground | #171216 | #f4ecf2 |
--primary | bg-primary / text-primary | #5b054f | #5b054f |
--primary-foreground | bg-primary-foreground / text-primary-foreground | #ffffff | #ffffff |
--secondary | bg-secondary / text-secondary | #f4ecf2 | #262025 |
--secondary-foreground | bg-secondary-foreground / text-secondary-foreground | #171216 | #f4ecf2 |
--muted | bg-muted / text-muted | #f4ecf2 | #262025 |
--muted-foreground | bg-muted-foreground / text-muted-foreground | #5a5358 | #c7bfc5 |
--accent | bg-accent / text-accent | #eae2e8 | #2d272c |
--accent-foreground | bg-accent-foreground / text-accent-foreground | #171216 | #f4ecf2 |
--destructive | bg-destructive / text-destructive | #a30006 | #ff1a1a |
--destructive-foreground | bg-destructive-foreground / text-destructive-foreground | #ffffff | #171216 |
--success | bg-success / text-success | #26b759 | #27b759 |
--success-foreground | bg-success-foreground / text-success-foreground | #171216 | #171216 |
--warning | bg-warning / text-warning | #f39a46 | #f39a46 |
--warning-foreground | bg-warning-foreground / text-warning-foreground | #171216 | #171216 |
--border | bg-border / text-border | #d0c8ce | #423c41 |
--input | bg-input / text-input | #bcb5bb | #534d52 |
--ring | bg-ring / text-ring | #d979b6 | #8d3370 |
--link | bg-link / text-link | #731058 | #f88ed1 |
--chart-1 | bg-chart-1 / text-chart-1 | #a4237f | #cd4ea4 |
--chart-2 | bg-chart-2 / text-chart-2 | #e88c69 | #e88c69 |
--chart-3 | bg-chart-3 / text-chart-3 | #ffb162 | #ffb162 |
--chart-4 | bg-chart-4 / text-chart-4 | #5b054f | #b863a7 |
--chart-5 | bg-chart-5 / text-chart-5 | #766f75 | #938c92 |
--sidebar | bg-sidebar / text-sidebar | #fcf4fa | #1e181d |
--sidebar-foreground | bg-sidebar-foreground / text-sidebar-foreground | #171216 | #f4ecf2 |
--sidebar-primary | bg-sidebar-primary / text-sidebar-primary | #5b054f | #5b054f |
--sidebar-primary-foreground | bg-sidebar-primary-foreground / text-sidebar-primary-foreground | #ffffff | #ffffff |
--sidebar-accent | bg-sidebar-accent / text-sidebar-accent | #f4ecf2 | #2d272c |
--sidebar-accent-foreground | bg-sidebar-accent-foreground / text-sidebar-accent-foreground | #171216 | #f4ecf2 |
--sidebar-border | bg-sidebar-border / text-sidebar-border | #d0c8ce | #423c41 |
--sidebar-ring | bg-sidebar-ring / text-sidebar-ring | #d979b6 | #8d3370 |
A mail client cannot read a CSS variable, so the email templates take these
same hex values from TOKENS in @tempio/ui/styles/tokens, a module
build:tokens writes beside tokens.css. Mail is light only, so they read
TOKENS.light. Charts read the --chart-* variables like any other
component.
Scales
Generated from one seed per hue by scripts/tokens/scale.ts. An accent's seed
is its light step 9, verbatim. The neutral's seed is a ground rather than a
solid, so it sets the lightness of the ramp's ends instead: light step 12 and
dark step 1. Every ramp is strictly monotonic and
every step is gamut-clamped. The neutral's light step 1 is pinned to
#FFFFFF, the kit's card white, rather than generated.
The eight hues are the neutral, the gradient's four stops (peach, coral,
magenta, plum) and the kit's three status colours (green, amber,
red). The kit has no info colour, so there is no blue.
neutral
| Token | Light | Dark |
|---|---|---|
neutral-1 | #ffffff | #171216 |
neutral-2 | #fcf4fa | #1e181d |
neutral-3 | #f4ecf2 | #262025 |
neutral-4 | #eae2e8 | #2d272c |
neutral-5 | #ded6dc | #363035 |
neutral-6 | #d0c8ce | #423c41 |
neutral-7 | #bcb5bb | #534d52 |
neutral-8 | #a39ca2 | #6b6469 |
neutral-9 | #766f75 | #938c92 |
neutral-10 | #686166 | #a49da3 |
neutral-11 | #5a5358 | #c7bfc5 |
neutral-12 | #171216 | #f4ecf2 |
magenta
| Token | Light | Dark |
|---|---|---|
magenta-1 | #fffafd | #080506 |
magenta-2 | #fff3fa | #11080d |
magenta-3 | #ffe6f4 | #1f0d18 |
magenta-4 | #ffd7ee | #2b0e22 |
magenta-5 | #fdc6e7 | #3b122e |
magenta-6 | #f6b2db | #4e183d |
magenta-7 | #e99acb | #682552 |
magenta-8 | #d979b6 | #8d3370 |
magenta-9 | #a4237f | #cd4ea4 |
magenta-10 | #930a70 | #e261b7 |
magenta-11 | #731058 | #f88ed1 |
magenta-12 | #3b0c2c | #ffe1f2 |
coral
| Token | Light | Dark |
|---|---|---|
coral-1 | #fffbf9 | #070504 |
coral-2 | #fef4f1 | #100a07 |
coral-3 | #ffebe4 | #1d100b |
coral-4 | #ffe1d6 | #29140d |
coral-5 | #fdd6c7 | #381b10 |
coral-6 | #f9c9b7 | #4a2516 |
coral-7 | #f3b9a3 | #633421 |
coral-8 | #eba48a | #854730 |
coral-9 | #e88c69 | #e88c69 |
coral-10 | #d77c5a | #fd9f7b |
coral-11 | #824027 | #ffbaa1 |
coral-12 | #37170b | #ffe5db |
peach
| Token | Light | Dark |
|---|---|---|
peach-1 | #fffbf8 | #070504 |
peach-2 | #fdf5ee | #0f0a06 |
peach-3 | #feeee0 | #1c1107 |
peach-4 | #ffe6d0 | #271605 |
peach-5 | #ffdec1 | #351e04 |
peach-6 | #fed6b1 | #472804 |
peach-7 | #fbcca0 | #5f380a |
peach-8 | #fbc088 | #804d0f |
peach-9 | #ffb162 | #ffb162 |
peach-10 | #eea151 | #ffcd9d |
peach-11 | #7b4701 | #ffd7b1 |
peach-12 | #341b00 | #ffe6d0 |
plum
| Token | Light | Dark |
|---|---|---|
plum-1 | #fffafe | #070507 |
plum-2 | #fdf3fa | #0f090d |
plum-3 | #fbe8f6 | #1c0f19 |
plum-4 | #f7dbf0 | #261322 |
plum-5 | #f2cce8 | #34192e |
plum-6 | #e8badc | #45213e |
plum-7 | #daa4cc | #5d3053 |
plum-8 | #c785b8 | #7e4271 |
plum-9 | #5b054f | #b863a7 |
plum-10 | #48003e | #cc75ba |
plum-11 | #420338 | #e49cd3 |
plum-12 | #32142c | #ffe1f7 |
red
| Token | Light | Dark |
|---|---|---|
red-1 | #fffbfa | #0a0404 |
red-2 | #fff4f2 | #140706 |
red-3 | #ffe9e5 | #260907 |
red-4 | #ffdbd5 | #360705 |
red-5 | #ffcbc3 | #490403 |
red-6 | #ffb5aa | #610203 |
red-7 | #ff9688 | #800808 |
red-8 | #fe6657 | #ac090b |
red-9 | #ff1b1b | #ff1a1a |
red-10 | #e8010d | #ff6152 |
red-11 | #a30006 | #ff9688 |
red-12 | #470001 | #ffe4e0 |
amber
| Token | Light | Dark |
|---|---|---|
amber-1 | #fffbf8 | #070504 |
amber-2 | #fef5ee | #100a06 |
amber-3 | #ffedde | #1d1106 |
amber-4 | #ffe3ce | #291504 |
amber-5 | #ffdabb | #381c02 |
amber-6 | #fccea9 | #4a2600 |
amber-7 | #f8c093 | #633502 |
amber-8 | #f2af76 | #854a03 |
amber-9 | #f39a46 | #f39a46 |
amber-10 | #e28a34 | #ffb16e |
amber-11 | #7e4500 | #ffc798 |
amber-12 | #351a00 | #ffe6d2 |
green
| Token | Light | Dark |
|---|---|---|
green-1 | #f8fef9 | #040704 |
green-2 | #effaf0 | #060d07 |
green-3 | #dff7e3 | #07180b |
green-4 | #cff1d4 | #04210c |
green-5 | #bdebc4 | #012d0f |
green-6 | #a8e2b2 | #003c16 |
green-7 | #8ed59c | #005120 |
green-8 | #6ac57e | #006e2e |
green-9 | #26b759 | #27b759 |
green-10 | #00a74a | #43cb6c |
green-11 | #00672b | #6ed185 |
green-12 | #002a0e | #c6fbcf |
Categorical
The planner's lane colours: 15 named colours a person gives a bar on the
Gantt, kept for the whole workspace. Each is six tokens per mode. Three draw a
bar: the fill, the ink written on it (-foreground) and the shade its
handles take (-hover). Three draw a tag, a chip that names the colour: the
tint (-tint), its inset ring (-tint-ring) and the ink written on it
(-tint-foreground). They are the same in every theme. The bar's ink is the
dark neutral in both modes; the tag's ink is the lane's own hue, dark on a
light tint in light and light on a dark tint in dark. build:tokens stops on
a bar's ink that reads below 4.5:1 on its fill or its hover shade, and on a
tag's ink below 4.5:1 on its tint. A component never picks one for
decoration: they mean "somebody chose this", or one value of the field a view
is coloured by.
| Token | Light | Dark |
|---|---|---|
--category-red | #FB817A | #F17E76 |
--category-red-foreground | #171216 | #171216 |
--category-red-hover | #ED6B65 | #E36862 |
--category-red-tint | #ffebeb | #4e1b28 |
--category-red-tint-ring | #ffdcdb | #692623 |
--category-red-tint-foreground | #ba2525 | #ffd1d1 |
--category-orange | #FFA56D | #FA9E63 |
--category-orange-foreground | #171216 | #171216 |
--category-orange-hover | #F68E47 | #EC8947 |
--category-orange-tint | #feeee1 | #432410 |
--category-orange-tint-ring | #fee0c8 | #593217 |
--category-orange-tint-foreground | #9e3f00 | #ffc89e |
--category-amber | #FFC25B | #F7BC59 |
--category-amber-foreground | #171216 | #171216 |
--category-amber-hover | #F1AE30 | #E8A934 |
--category-amber-tint | #fff3cc | #3a2d12 |
--category-amber-tint-ring | #ffe59e | #523817 |
--category-amber-tint-foreground | #874d00 | #ffd269 |
--category-yellow | #F4E15E | #ECDA60 |
--category-yellow-foreground | #171216 | #171216 |
--category-yellow-hover | #E3CE35 | #DCC83A |
--category-yellow-tint | #fdf7c4 | #373313 |
--category-yellow-tint-ring | #fcef7e | #423e17 |
--category-yellow-tint-foreground | #665a00 | #f5e242 |
--category-lime | #B7E367 | #B2DC68 |
--category-lime-foreground | #171216 | #171216 |
--category-lime-hover | #A4D248 | #9FCB49 |
--category-lime-tint | #f4fbcb | #2f3802 |
--category-lime-tint-ring | #e9f797 | #3b4217 |
--category-lime-tint-foreground | #536300 | #d7eb67 |
--category-green | #79DA90 | #77D28C |
--category-green-foreground | #171216 | #171216 |
--category-green-hover | #5DCA7A | #5CC277 |
--category-green-tint | #e0fced | #1d4034 |
--category-green-tint-ring | #cbf7e1 | #244a3a |
--category-green-tint-foreground | #007d53 | #a7f2cf |
--category-teal | #65CCBC | #64C5B6 |
--category-teal-foreground | #171216 | #171216 |
--category-teal-hover | #3FBDAB | #40B6A5 |
--category-teal-tint | #dcfaf4 | #183e38 |
--category-teal-tint-ring | #cbf4ec | #0a5047 |
--category-teal-tint-foreground | #007669 | #a2f1e3 |
--category-aqua | #8DDDEB | #8BD5E3 |
--category-aqua-foreground | #171216 | #171216 |
--category-aqua-hover | #6FCDDD | #6DC5D5 |
--category-aqua-tint | #ddf7ff | #1a3946 |
--category-aqua-tint-ring | #d0eff7 | #0a4e6b |
--category-aqua-tint-foreground | #056c87 | #a9ebfc |
--category-blue | #7ABAF7 | #77B4ED |
--category-blue-foreground | #171216 | #171216 |
--category-blue-hover | #60A9EB | #5EA2E2 |
--category-blue-tint | #e5eeff | #1d2e55 |
--category-blue-tint-ring | #d6e5ff | #2b3e6d |
--category-blue-tint-foreground | #215bc4 | #c2d6ff |
--category-indigo | #9B98F3 | #9593E8 |
--category-indigo-foreground | #171216 | #171216 |
--category-indigo-hover | #8A86E7 | #8580DD |
--category-indigo-tint | #eeefff | #2a2558 |
--category-indigo-tint-ring | #e0e1ff | #3a3476 |
--category-indigo-tint-foreground | #5745be | #ccceff |
--category-purple | #D2A3FB | #CA9EF1 |
--category-purple-foreground | #171216 | #171216 |
--category-purple-hover | #C28FEE | #BB8BE4 |
--category-purple-tint | #f5f0ff | #2f1e5a |
--category-purple-tint-ring | #e8ddfe | #45297d |
--category-purple-tint-foreground | #6238b5 | #d8c4ff |
--category-magenta | #F5B4F2 | #EDAFEA |
--category-magenta-foreground | #171216 | #171216 |
--category-magenta-hover | #E7A0E4 | #DE9BDC |
--category-magenta-tint | #fdedff | #431b4b |
--category-magenta-tint-ring | #fad6ff | #5c2169 |
--category-magenta-tint-foreground | #9c1bab | #f6bdfc |
--category-pink | #FA96C3 | #F092BC |
--category-pink-foreground | #171216 | #171216 |
--category-pink-hover | #EC81B3 | #E27DAC |
--category-pink-tint | #feecf3 | #4e1b30 |
--category-pink-tint-ring | #fdddea | #642640 |
--category-pink-tint-foreground | #b81c5d | #ffbfda |
--category-rose | #F9C5C5 | #F1BFC0 |
--category-rose-foreground | #171216 | #171216 |
--category-rose-hover | #EEB0B1 | #E5ABAB |
--category-rose-tint | #ffecec | #501b21 |
--category-rose-tint-ring | #ffdddd | #68252c |
--category-rose-tint-foreground | #bb1f3b | #ffcacb |
--category-slate | #B3BBC8 | #ADB5C1 |
--category-slate-foreground | #171216 | #171216 |
--category-slate-hover | #9EAABE | #98A4B7 |
--category-slate-tint | #f6f7f7 | #1b1c1f |
--category-slate-tint-ring | #eeeff1 | #2f3033 |
--category-slate-tint-foreground | #505155 | #d9dade |
Brand
The primitives never change with the theme: ground #171216, ink
#121212, paper #FFFFFF, and the sunset gradient at
217 degrees. They are the mark's own colours, so a theme that
re-pointed them would put the interface out of step with the logo on it.
The interface has three gradients, all built from the sunset's stops. Each is
a variable on :root and a string on BRAND.gradients, and each may appear
only in the places its row names. A component reads one as
bg-(image:--gradient-wash), or as BRAND.gradients.wash where CSS variables
do not reach, such as a share image. On the hero, the element's own opacity
holds fade at 12% or less. --brand-gradient resolves to
--gradient-sweep for one release; new code uses the name.
| Token | Stops | Angle | Allowed placements |
|---|---|---|---|
--gradient-sweep | #FFB162 0% → #E88C69 22% → #A4237F 60% → #5B054F 100% | 217° | The mark's treads, share images |
--gradient-fade | #5B054F 0% → #A4237F 30% → #E88C69 60% → transparent 100% | 0° | The bottom edge of the purple band; the hero backdrop at 12% opacity or less |
--gradient-wash | #FFB162 at 18% opacity, 0% → transparent 100% | 180° | Behind charts (chart.tsx), behind the pricing heading |
The kit's seven patterns render through BrandPattern from @tempio/ui/brand.
The kit draws each as a 1080 px square swatch rather than a repeat, so the
component crops one swatch to fill its frame. sync:brand cuts the swatches
off the kit's boards, drops each swatch's purple ground so only the shapes
remain, and writes them into brand/patterns/ and every app's
public/brand/patterns/.
stone-course: steps, solid, dark. Section backgrounds and card surfaces.sunlit-course: steps and gradient, solid, bright. A surface for share images and cover crops, never a backdrop for copy.dry-joint: steps, hairline, dark. The quietest; long copy and dense UI sit on it cleanly.tracery: arch and gradient, hairline, bright. Hero textures and full-bleed section breaks.scalework: arch, solid, dense. Dividers and banner bands, with no type on it.arcade: arch, solid, bold. Hero corners and footers, never behind the lockup.rib-line: arch, hairline, dark. Long-form backgrounds and rails; the best of the seven under text.
A pattern has three placements. band is the purple band, cropped from the
right edge; panel is a portrait panel beside a form, cropped from the
bottom-left corner; share is an OG or social image, cropped from the centre. The file is
a CSS mask over a fill, so the shapes paint in white at 8% for the dark tone
(over purple) or in plum at 6% for the light tone (over the white page), and
the parent's ground shows between them. sunlit-course, tracery, scalework
and arcade cover their frame, so their mask reads each shape's lightness;
the other three read its outline. satori has no CSS masks, so a share image
drawn by next/og composites the shapes from the file itself. Text on a
pattern needs a scrim or display-size type.
In use
Primary is signal, not decoration: primary actions, the approval moment, live-status indicators, the blended chart series. At most two primary objects on a screen, glows counted; a third means one of them is doing nothing.
A gradient is one of the three tokens above, in one of the places its row
lists. It never sits on a button, and never inside a table, a card or a form.
tests/gradient-placement.test.ts fails a gradient in any file outside that
list.
The Approve ring is the only place energy visibly touches spend. Nothing else glows.
Status as a fill is the semantic solid with its foreground: bg-success with
text-success-foreground. Status as text or an icon is step 11 of the hue:
text-green-11, text-amber-11. Both are gated at build — the solids for
their ink, step 11 for its legibility on the page and on a card.
The kit's success, warning and danger solids are the seeds of green, amber
and red, so each is step 9. White reads 2.6:1 on the green and 2.2:1 on the
amber, so success and warning carry dark ink. destructive is gated as text on
the page as well as under white, and in light only red-11 clears both (the
kit's red takes white at 3.9:1); in dark it is red-9 with the ground as its ink.
The kit also gives each status a tint and a wash. The ramps cover them; this is the light step nearest each one, measured in OKLab.
| Status | Solid | Kit tint | Nearest step | Kit wash | Nearest step |
|---|---|---|---|---|---|
| success | green-9 | #B5FFCF | green-4 | #E0FFEB | green-3 |
| warning | amber-9 | #F9BE85 | amber-7 | #FFE9D4 | amber-3 |
| danger | red-9 | #FF8A8A | red-7 | #FFE0E0 | red-4 |
Typography
Geist carries headings and body; Geist Mono carries every figure that is
data. Both self-host through next/font from @tempio/ui/fonts, so no font
request leaves the page.
Headings are Medium, weight 500, as in the kit's creatives, which never set
a headline in Bold. They take their face and weight from one base-layer rule;
a component sizes a heading with a text-* utility and never re-declares
either. text-display-96 and text-display-72 are for the marketing hero
only. The app never sets a display size, and
apps/app/tests/no-display-type.test.ts fails on one in its pages or
components. The role scale below is for blocks, templates and docs; the
primitives keep shadcn's own text-sm and text-xs.
| Utility | Size / line-height | Weight | Tracking | Case |
|---|---|---|---|---|
text-display-96 | 96 / 100 | 500 | -0.03em | as written |
text-display-72 | 72 / 76 | 500 | -0.025em | as written |
text-heading-56 | 56 / 60 | 500 | -0.02em | as written |
text-heading-48 | 48 / 52 | 500 | -0.02em | as written |
text-heading-40 | 40 / 44 | 500 | -0.02em | as written |
text-heading-32 | 32 / 36 | 500 | -0.02em | as written |
text-heading-24 | 24 / 30 | 500 | -0.01em | as written |
text-heading-20 | 20 / 26 | 500 | -0.01em | as written |
text-heading-16 | 16 / 22 | 500 | 0 | as written |
text-copy-18 | 18 / 29 | 300 | 0 | as written |
text-copy-16 | 16 / 26 | 300 | 0 | as written |
text-copy-14 | 14 / 22 | 400 | 0 | as written |
text-copy-13 | 13 / 20 | 400 | 0 | as written |
text-label-14 | 14 / 18 | 500 | 0 | as written |
text-label-13 | 13 / 16 | 500 | 0 | as written |
text-label-12 | 12 / 16 | 500 | 0.06em | uppercase |
Weights carry meaning. Marketing body runs light at 16px and above, which reads as air on a wide measure. Data-dense app text at 13-14px stays at 400, because 300 at that size loses the thin strokes on the digits. Eyebrows are 500, uppercase, wide.
Every figure that is data — money, ratios, counts, dates in a table — wears
.font-data: the mono face, tabular figures, tracking pulled in slightly, so a
column of money aligns to the digit. A null ratio renders an em dash, never
0%.
Layout
Spacing is Tailwind's 4px scale, unchanged. Sections pad 80px, and 112px from
the md breakpoint up.
Three container widths: prose at 65ch for reading, content at 88rem for a
page, wide at 80rem for a gallery or a table that earns the room.
Breakpoints are Tailwind's defaults, plus 3xl at 1600px and 4xl at 2000px
for the app's wide dashboards.
Whitespace is the layout tool of first resort. A rule or a border is the second, and there is rarely a third.
Elevation
This section is tempio's, the look of the site, the docs and the emails.
Under neutral, which the app and the console wear, surfaces part by the
shadow set and 1px inset rings in the Feel section below, and a card carries
a ring and no shadow.
Surfaces separate without a shadow. In light the page and a card are both
white, so a card is drawn by its hairline border; in dark the page is the
ground, a card is a step up the neutral ramp and a popover a step above that.
Shadows appear on popovers and dialogs only — the two things that genuinely
float — as Tailwind's shadow-md and shadow-lg.
Depth in a dark interface comes from the ramp. A shadow on a dark ground reads as a smudge.
Shapes
The radius and border rules below are tempio's; the mark's hold in every
theme. Under neutral, which the app and the console wear, each radius step
is a fixed value that follows a control's height, listed in the Feel section
below.
Radius base is 0.625rem. 2xs, sm, chip, md, lg, xl and tile derive from it, and
xs, 2xl, 3xl and 4xl are fixed at 0.125rem, 1rem, 1.5rem and 2rem, so a new value in
brand.json moves the derived steps and leaves the fixed ones where they are.
Borders are hairlines on border-border. Geist's materials page describes its
shadows in words and lists 6px, 12px and 16px radii; the numbers above are
Tempio's own and are not attributed to Geist.
The mark is designer-made and is never redrawn, recoloured, stretched, mirrored
or glowed. The on-dark files have white treads and a white wordmark, as in the
kit's dark variant, and sit on the dark sidebar or any dark surface. The
on-light files have near-black treads and an ink wordmark, as in the kit's
light variant; the two marks differ only in those colours.
Clear space is 1/6 of the mark's height on every side. The
mark alone goes no smaller than 20px on screen or 6mm in print; the
lockup no smaller than 24px, below which BrandLockup drops the wordmark
and renders the mark by itself.
Motion
The motion below is tempio's. Under neutral, which the app and the
console wear, motion is the fit sheet's and nothing else: menus open over
80ms, dialogs and ⌘K over 60ms, a button's hover runs 200ms with no pressed
transform, loaded content replaces its loading state in one frame, and an
animated glyph rests. The Feel section below lists its durations and easings.
Entrances rise 8-12px with a fade, run 400-600ms, and play once. No parallax, no scroll-jacking, no marquees, no number tickers. At most one attention-seeking element per viewport.
A server component animates with the keyframe utilities in styles/base.css —
animate-page-in, animate-slide-in-bottom, animate-shimmer,
animate-pulse-glow — and never imports a motion library. Colour hovers are CSS
transitions; transforms are Motion, with every value from @tempio/ui/motion.
Nobody invents a spring or a duration.
The presets, in motion/presets.ts:
spring:gentlefor panels and drawers,snappyfor dialogs and popovers,bouncyfor toasts and badges,stifffor press feedback.duration, in ms:instant75,fast150,normal200,slow300,slower500.ease:outfor entrances,infor exits,inOut,bounce.interaction:button,buttonIconandcard, spread on a motion element.- The variants
fadeIn,slideUp,slideIn,scaleIn,staggerandstaggerSlow.
The helpers are client modules. Under reduced motion each draws its final frame, and none of them starts or ticks while the tab is hidden:
Revealrises 12px and fades in over 500ms onease.out, once, when 20% of it is in view. Withstagger, its direct children follow 60ms apart; the seventh child and every one after it start with the sixth.InViewOncerenderschildren(false)until itsthresholdis in view, thenchildren(true)for good. A sequence that plays once starts on it.DrawPathdraws an SVG stroke from nothing to whole overduration, once in view.ScrollTilttakes its content from a 12° tilt at 0.94 scale to flat as its top scrolls from the bottom of the viewport to the middle.useAutoAdvancesteps an index everyintervalwith a 0-to-1progress, holds while its element is off screen, and stops for good on the first pointer, key or focus inside it (autoAdvanceStopProps).
Which moment uses which helper, and at what numbers, is §14.3 of
docs/superpowers/specs/2026-09-23-design-system-v3-design.md.
prefers-reduced-motion flattens the CSS, in base.css, for every consumer
of the package at once.
Feel
The radius steps, the shadow set, motion, the hover, selection and table
fills, the skeleton, the UI type roles, the face, focus and the icon stroke
are tokens too, set per theme in a feel block (scripts/tokens/feel.ts).
Tailwind reads them as utilities (rounded-md, shadow-float,
duration-fast, ease-standard, text-ui, bg-hover), so a component
names a role and the theme decides the number.
The default theme's feel is written as references to its own roles
(var(--muted), calc(var(--radius) - 4px)), and every theme without a feel
of its own takes it, so those themes draw what they drew before the feel
existed. neutral carries the values measured off Attio in
docs/superpowers/research/2026-10-21-attio-teardown/50-fit-sheet.md: Inter
at 500 on 14/20, colour by alpha on a near-black ink, shadows instead of
borders, small fast motion, and every Lucide glyph at stroke 1.5. The console
and the app wear it. A feel's text pairs (placeholders, subtle ink, the tooltip,
the sidebar's labels) are gated at AA for the themes that set their own feel,
tempio and neutral. An inheriting theme's section label is its own
sidebar-foreground at 70%, which is the preset's and is not gated.
| Token | Read by | tempio | neutral |
|---|---|---|---|
--hover | bg-hover / text-hover | var(--muted); dark color-mix(in oklab, var(--muted) 50%, transparent) | rgba(0,0,0,0.02); dark rgba(255,255,255,0.03) |
--active | bg-active / text-active | var(--accent) | rgba(0,0,0,0.04); dark rgba(255,255,255,0.05) |
--primary-hover | bg-primary-hover / text-primary-hover | color-mix(in oklab, var(--primary) 80%, transparent) | #215bc4; dark #4e8cfc |
--secondary-hover | bg-secondary-hover / text-secondary-hover | color-mix(in oklch, var(--secondary), var(--foreground) 5%) | #f6f7f7; dark #1b1c1f |
--subtle-foreground | bg-subtle-foreground / text-subtle-foreground | var(--muted-foreground) | rgba(0,0,0,0.55); dark rgba(255,255,255,0.55) |
--placeholder | bg-placeholder / text-placeholder | var(--muted-foreground) | rgba(0,0,0,0.54); dark rgba(255,255,255,0.46) |
--border-strong | bg-border-strong / text-border-strong | var(--border); dark var(--input) | #e6e7ea; dark #212224 |
--link-underline | bg-link-underline / text-link-underline | var(--link) | rgba(0,0,0,0.09); dark rgba(255,255,255,0.09) |
--selection | bg-selection / text-selection | color-mix(in oklch, var(--primary) 25%, transparent) | rgba(38,109,240,0.2) |
--cell-active-tint | bg-cell-active-tint / text-cell-active-tint | transparent | rgba(38,109,240,0.04) |
--row-selected-tint | bg-row-selected-tint / text-row-selected-tint | var(--muted) | rgba(38,109,240,0.10) |
--enriched-tint | bg-enriched-tint / text-enriched-tint | transparent | rgba(155,105,255,0.04); dark rgba(155,105,255,0.06) |
--skeleton | bg-skeleton / text-skeleton | var(--muted) | rgba(16,17,18,0.05); dark rgba(241,242,243,0.05) |
--skeleton-highlight | bg-skeleton-highlight / text-skeleton-highlight | var(--accent) | rgba(16,17,18,0.03); dark rgba(241,242,243,0.03) |
--tooltip | bg-tooltip / text-tooltip | var(--foreground) | #101112 |
--tooltip-foreground | bg-tooltip-foreground / text-tooltip-foreground | var(--background) | #eeeff1 |
--sidebar-hover | bg-sidebar-hover / text-sidebar-hover | var(--sidebar-accent) | rgba(0,0,0,0.02); dark rgba(255,255,255,0.03) |
--sidebar-muted-foreground | bg-sidebar-muted-foreground / text-sidebar-muted-foreground | color-mix(in oklab, var(--sidebar-foreground) 70%, transparent) | rgba(0,0,0,0.63); dark rgba(255,255,255,0.6) |
--frost | bg-frost / text-frost | transparent | rgba(255,255,255,0.6); dark rgba(28,29,31,0.6) |
--badge-foreground | bg-badge-foreground / text-badge-foreground | var(--secondary-foreground) | #505155; dark #d9dade |
--control-border | bg-control-border / text-control-border | var(--input) | rgba(0,0,0,0.09); dark rgba(255,255,255,0.09) |
--chart-6 | bg-chart-6 / text-chart-6 | var(--destructive) | #ff5454; dark #eb3b3b |
--chart-7 | bg-chart-7 / text-chart-7 | var(--warning) | #f5a300 |
--control-thumb-ring | ring-control-thumb-ring | var(--border) | #d9dade; dark #2f3033 |
--object-campaign | bg-object-campaign / text-object-campaign | var(--primary) | #266df0 |
--object-campaign-tint | bg-object-campaign-tint / text-object-campaign-tint | color-mix(in oklab, var(--object-campaign) 12%, transparent) | #e5eeff; dark #1d2e55 |
--object-campaign-tint-ring | ring-object-campaign-tint-ring | color-mix(in oklab, var(--object-campaign) 24%, transparent) | #d6e5ff; dark #2b3e6d |
--object-campaign-tint-foreground | bg-object-campaign-tint-foreground / text-object-campaign-tint-foreground | var(--foreground) | #215bc4; dark #c2d6ff |
--object-plan | bg-object-plan / text-object-plan | var(--success) | #00d17e; dark #02ad6e |
--object-plan-tint | bg-object-plan-tint / text-object-plan-tint | color-mix(in oklab, var(--object-plan) 12%, transparent) | #e0fced; dark #1d4034 |
--object-plan-tint-ring | ring-object-plan-tint-ring | color-mix(in oklab, var(--object-plan) 24%, transparent) | #cbf7e1; dark #244a3a |
--object-plan-tint-foreground | bg-object-plan-tint-foreground / text-object-plan-tint-foreground | var(--foreground) | #007d53; dark #a7f2cf |
--object-review | bg-object-review / text-object-review | var(--chart-2) | #f97514; dark #c95908 |
--object-review-tint | bg-object-review-tint / text-object-review-tint | color-mix(in oklab, var(--object-review) 12%, transparent) | #feeee1; dark #432410 |
--object-review-tint-ring | ring-object-review-tint-ring | color-mix(in oklab, var(--object-review) 24%, transparent) | #fee0c8; dark #593217 |
--object-review-tint-foreground | bg-object-review-tint-foreground / text-object-review-tint-foreground | var(--foreground) | #9e3f00; dark #ffc89e |
--object-library | bg-object-library / text-object-library | var(--warning) | #f5a300 |
--object-library-tint | bg-object-library-tint / text-object-library-tint | color-mix(in oklab, var(--object-library) 12%, transparent) | #fff3cc; dark #3a2d12 |
--object-library-tint-ring | ring-object-library-tint-ring | color-mix(in oklab, var(--object-library) 24%, transparent) | #ffe59e; dark #523817 |
--object-library-tint-foreground | bg-object-library-tint-foreground / text-object-library-tint-foreground | var(--foreground) | #874d00; dark #ffd269 |
--object-creative | bg-object-creative / text-object-creative | var(--chart-1) | #fa4b94 |
--object-creative-tint | bg-object-creative-tint / text-object-creative-tint | color-mix(in oklab, var(--object-creative) 12%, transparent) | #feecf3; dark #4e1b30 |
--object-creative-tint-ring | ring-object-creative-tint-ring | color-mix(in oklab, var(--object-creative) 24%, transparent) | #fdddea; dark #642640 |
--object-creative-tint-foreground | bg-object-creative-tint-foreground / text-object-creative-tint-foreground | var(--foreground) | #b81c5d; dark #ffbfda |
--object-agent | bg-object-agent / text-object-agent | var(--chart-4) | #9b69ff; dark #864aff |
--object-agent-tint | bg-object-agent-tint / text-object-agent-tint | color-mix(in oklab, var(--object-agent) 12%, transparent) | #f5f0ff; dark #2f1e5a |
--object-agent-tint-ring | ring-object-agent-tint-ring | color-mix(in oklab, var(--object-agent) 24%, transparent) | #e8ddfe; dark #45297d |
--object-agent-tint-foreground | bg-object-agent-tint-foreground / text-object-agent-tint-foreground | var(--foreground) | #6238b5; dark #d8c4ff |
--object-connection | bg-object-connection / text-object-connection | var(--destructive) | #ff5454; dark #eb3b3b |
--object-connection-tint | bg-object-connection-tint / text-object-connection-tint | color-mix(in oklab, var(--object-connection) 12%, transparent) | #ffebeb; dark #4e1b28 |
--object-connection-tint-ring | ring-object-connection-tint-ring | color-mix(in oklab, var(--object-connection) 24%, transparent) | #ffdcdb; dark #692623 |
--object-connection-tint-foreground | bg-object-connection-tint-foreground / text-object-connection-tint-foreground | var(--foreground) | #ba2525; dark #ffd1d1 |
--object-company | bg-object-company / text-object-company | var(--primary) | #266df0 |
--object-company-tint | bg-object-company-tint / text-object-company-tint | color-mix(in oklab, var(--object-company) 12%, transparent) | #e5eeff; dark #1d2e55 |
--object-company-tint-ring | ring-object-company-tint-ring | color-mix(in oklab, var(--object-company) 24%, transparent) | #d6e5ff; dark #2b3e6d |
--object-company-tint-foreground | bg-object-company-tint-foreground / text-object-company-tint-foreground | var(--foreground) | #215bc4; dark #c2d6ff |
--object-person | bg-object-person / text-object-person | var(--primary) | #266df0 |
--object-person-tint | bg-object-person-tint / text-object-person-tint | color-mix(in oklab, var(--object-person) 12%, transparent) | #e5eeff; dark #1d2e55 |
--object-person-tint-ring | ring-object-person-tint-ring | color-mix(in oklab, var(--object-person) 24%, transparent) | #d6e5ff; dark #2b3e6d |
--object-person-tint-foreground | bg-object-person-tint-foreground / text-object-person-tint-foreground | var(--foreground) | #215bc4; dark #c2d6ff |
--object-deal | bg-object-deal / text-object-deal | var(--chart-2) | #f97514; dark #c95908 |
--object-deal-tint | bg-object-deal-tint / text-object-deal-tint | color-mix(in oklab, var(--object-deal) 12%, transparent) | #feeee1; dark #432410 |
--object-deal-tint-ring | ring-object-deal-tint-ring | color-mix(in oklab, var(--object-deal) 24%, transparent) | #fee0c8; dark #593217 |
--object-deal-tint-foreground | bg-object-deal-tint-foreground / text-object-deal-tint-foreground | var(--foreground) | #9e3f00; dark #ffc89e |
--object-list | bg-object-list / text-object-list | var(--success) | #00d17e; dark #02ad6e |
--object-list-tint | bg-object-list-tint / text-object-list-tint | color-mix(in oklab, var(--object-list) 12%, transparent) | #e0fced; dark #1d4034 |
--object-list-tint-ring | ring-object-list-tint-ring | color-mix(in oklab, var(--object-list) 24%, transparent) | #cbf7e1; dark #244a3a |
--object-list-tint-foreground | bg-object-list-tint-foreground / text-object-list-tint-foreground | var(--foreground) | #007d53; dark #a7f2cf |
--object-object | bg-object-object / text-object-object | var(--destructive) | #ff5454; dark #eb3b3b |
--object-object-tint | bg-object-object-tint / text-object-object-tint | color-mix(in oklab, var(--object-object) 12%, transparent) | #ffebeb; dark #4e1b28 |
--object-object-tint-ring | ring-object-object-tint-ring | color-mix(in oklab, var(--object-object) 24%, transparent) | #ffdcdb; dark #692623 |
--object-object-tint-foreground | bg-object-object-tint-foreground / text-object-object-tint-foreground | var(--foreground) | #ba2525; dark #ffd1d1 |
--tile-ring | ring-tile-ring | color-mix(in oklab, var(--foreground) 10%, transparent) | rgba(0,0,0,0.06); dark rgba(255,255,255,0.07) |
--tile-glyph | bg-tile-glyph / text-tile-glyph | var(--primary-foreground) | #ffffff |
--tile-neutral | bg-tile-neutral / text-tile-neutral | var(--muted) | #f6f7f7; dark #1b1c1f |
--tile-neutral-ring | ring-tile-neutral-ring | var(--border) | #e6e7ea; dark #2d2f31 |
--tile-fallback | bg-tile-fallback / text-tile-fallback | var(--muted) | #f9fafa; dark #2e3032 |
--tile-fallback-ring | ring-tile-fallback-ring | var(--border) | #eeeff1; dark #202224 |
--tile-fallback-glyph | bg-tile-fallback-glyph / text-tile-fallback-glyph | var(--muted-foreground) | #959596; dark #6a6c6d |
--tag-grey | bg-tag-grey / text-tag-grey | #f6f7f7; dark #1b1c1f | #f6f7f7; dark #1b1c1f |
--tag-grey-ring | ring-tag-grey-ring | #eeeff1; dark #2f3033 | #eeeff1; dark #2f3033 |
--tag-grey-foreground | bg-tag-grey-foreground / text-tag-grey-foreground | #505155; dark #d9dade | #505155; dark #d9dade |
--tag-red | bg-tag-red / text-tag-red | #ffebeb; dark #4e1b28 | #ffebeb; dark #4e1b28 |
--tag-red-ring | ring-tag-red-ring | #ffdcdb; dark #692623 | #ffdcdb; dark #692623 |
--tag-red-foreground | bg-tag-red-foreground / text-tag-red-foreground | #ba2525; dark #ffd1d1 | #ba2525; dark #ffd1d1 |
--tag-orange | bg-tag-orange / text-tag-orange | #feeee1; dark #432410 | #feeee1; dark #432410 |
--tag-orange-ring | ring-tag-orange-ring | #fee0c8; dark #593217 | #fee0c8; dark #593217 |
--tag-orange-foreground | bg-tag-orange-foreground / text-tag-orange-foreground | #9e3f00; dark #ffc89e | #9e3f00; dark #ffc89e |
--tag-amber | bg-tag-amber / text-tag-amber | #fff3cc; dark #3a2d12 | #fff3cc; dark #3a2d12 |
--tag-amber-ring | ring-tag-amber-ring | #ffe59e; dark #523817 | #ffe59e; dark #523817 |
--tag-amber-foreground | bg-tag-amber-foreground / text-tag-amber-foreground | #874d00; dark #ffd269 | #874d00; dark #ffd269 |
--tag-lime | bg-tag-lime / text-tag-lime | #f4fbcb; dark #2f3802 | #f4fbcb; dark #2f3802 |
--tag-lime-ring | ring-tag-lime-ring | #e9f797; dark #3b4217 | #e9f797; dark #3b4217 |
--tag-lime-foreground | bg-tag-lime-foreground / text-tag-lime-foreground | #536300; dark #d7eb67 | #536300; dark #d7eb67 |
--tag-green | bg-tag-green / text-tag-green | #e0fced; dark #1d4034 | #e0fced; dark #1d4034 |
--tag-green-ring | ring-tag-green-ring | #cbf7e1; dark #244a3a | #cbf7e1; dark #244a3a |
--tag-green-foreground | bg-tag-green-foreground / text-tag-green-foreground | #007d53; dark #a7f2cf | #007d53; dark #a7f2cf |
--tag-cyan | bg-tag-cyan / text-tag-cyan | #ddf7ff; dark #1a3946 | #ddf7ff; dark #1a3946 |
--tag-cyan-ring | ring-tag-cyan-ring | #d0eff7; dark #0a4e6b | #d0eff7; dark #0a4e6b |
--tag-cyan-foreground | bg-tag-cyan-foreground / text-tag-cyan-foreground | #056c87; dark #a9ebfc | #056c87; dark #a9ebfc |
--tag-blue | bg-tag-blue / text-tag-blue | #e5eeff; dark #1d2e55 | #e5eeff; dark #1d2e55 |
--tag-blue-ring | ring-tag-blue-ring | #d6e5ff; dark #2b3e6d | #d6e5ff; dark #2b3e6d |
--tag-blue-foreground | bg-tag-blue-foreground / text-tag-blue-foreground | #215bc4; dark #c2d6ff | #215bc4; dark #c2d6ff |
--tag-purple | bg-tag-purple / text-tag-purple | #f5f0ff; dark #2f1e5a | #f5f0ff; dark #2f1e5a |
--tag-purple-ring | ring-tag-purple-ring | #e8ddfe; dark #45297d | #e8ddfe; dark #45297d |
--tag-purple-foreground | bg-tag-purple-foreground / text-tag-purple-foreground | #6238b5; dark #d8c4ff | #6238b5; dark #d8c4ff |
--tag-fuchsia | bg-tag-fuchsia / text-tag-fuchsia | #fdedff; dark #431b4b | #fdedff; dark #431b4b |
--tag-fuchsia-ring | ring-tag-fuchsia-ring | #fad6ff; dark #5c2169 | #fad6ff; dark #5c2169 |
--tag-fuchsia-foreground | bg-tag-fuchsia-foreground / text-tag-fuchsia-foreground | #9c1bab; dark #f6bdfc | #9c1bab; dark #f6bdfc |
--tag-pink | bg-tag-pink / text-tag-pink | #feecf3; dark #4e1b30 | #feecf3; dark #4e1b30 |
--tag-pink-ring | ring-tag-pink-ring | #fdddea; dark #642640 | #fdddea; dark #642640 |
--tag-pink-foreground | bg-tag-pink-foreground / text-tag-pink-foreground | #b81c5d; dark #ffbfda | #b81c5d; dark #ffbfda |
--tag-yellow | bg-tag-yellow / text-tag-yellow | #fdf7c4; dark #373313 | #fdf7c4; dark #373313 |
--tag-yellow-ring | ring-tag-yellow-ring | #fcef7e; dark #423e17 | #fcef7e; dark #423e17 |
--tag-yellow-foreground | bg-tag-yellow-foreground / text-tag-yellow-foreground | #665a00; dark #f5e242 | #665a00; dark #f5e242 |
--theme-shadow-control | shadow-control | 0 1px 2px 0 rgb(0 0 0 / 0.05) | inset 0 0 0 1px rgba(0,0,0,0), 0 0 2px 0 rgba(28,40,64,0.18), 0 1px 3px 0 rgba(0,0,0,0.04); dark inset 0 0 0 1px #212224, 0 0 2px 0 rgba(0,0,0,0.04), 0 1px 3px 0 rgba(0,0,0,0.12) |
--theme-shadow-primary | shadow-primary | 0 0 #0000 | inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); dark inset 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08) |
--theme-shadow-float | shadow-float | 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) | inset 0 0 0 1px rgba(0,0,0,0), 0 0 0 1px rgba(28,40,64,0.04), 0 4px 8px -4px rgba(28,40,64,0.12), 0 4px 12px -2px rgba(24,41,75,0.16); dark inset 0 0 0 1px #212224, 0 0 0 1px rgba(0,0,0,0.16), 0 4px 8px -4px rgba(0,0,0,0.24), 0 4px 12px -2px rgba(0,0,0,0.32) |
--theme-shadow-modal | shadow-modal | 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent) | 0 8px 28px -6px rgba(28,40,64,0.12), 0 18px 88px -4px rgba(28,40,64,0.16), 0 0 1px 0 rgba(28,40,64,0.16); dark 0 8px 28px -6px rgba(0,0,0,0.48), 0 18px 88px -4px rgba(0,0,0,0.64) |
--theme-shadow-panel-ring | shadow-panel-ring | 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent) | 0 0 0 1px rgba(0,0,0,0.07); dark 0 0 0 1px rgba(255,255,255,0.07) |
--theme-shadow-card-ring | shadow-card-ring | 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent), 0 1px 2px 0 rgb(0 0 0 / 0.05) | 0 0 0 1px rgba(0,0,0,0.06); dark 0 0 0 1px rgba(255,255,255,0.07) |
--theme-shadow-chip-ring | shadow-chip-ring | inset 0 0 0 1px var(--border) | inset 0 0 0 1px #e6e7ea; dark inset 0 0 0 1px #212224 |
--theme-shadow-badge-ring | shadow-badge-ring | inset 0 0 0 1px var(--border) | inset 0 0 0 1px #eeeff1; dark inset 0 0 0 1px #2f3033 |
--theme-shadow-kbd-ring | shadow-kbd-ring | 0 0 #0000 | inset 0 0 0 1px rgba(0,0,0,0.06); dark inset 0 0 0 1px rgba(255,255,255,0.07) |
--theme-shadow-segment | shadow-segment | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) | 0 1px 2px -1px rgba(0,0,0,0.04) |
--theme-shadow-pinned-column | shadow-pinned-column | 0 0 #0000 | 6px 0 16px 4px rgba(0,0,0,0.12); dark 6px 0 16px 4px #000000 |
--theme-shadow-frame | shadow-frame | 0 0 0 1px color-mix(in oklab, var(--foreground) 10%, transparent) | inset 0 0 0 1px rgba(0,0,0,0.07), 0 8px 28px -6px rgba(28,40,64,0.12), 0 18px 88px -4px rgba(28,40,64,0.16), 0 0 1px 0 rgba(28,40,64,0.16); dark inset 0 0 0 1px rgba(255,255,255,0.07), 0 8px 28px -6px rgba(0,0,0,0.48), 0 18px 88px -4px rgba(0,0,0,0.64) |
--theme-radius-2xs | rounded-2xs | calc(var(--radius) - 8px) | 2px |
--theme-radius-xs | rounded-xs | 0.125rem | 4px |
--theme-radius-sm | rounded-sm | calc(var(--radius) - 4px) | 6px |
--theme-radius-chip | rounded-chip | calc(var(--radius) - 3px) | 7px |
--theme-radius-md | rounded-md | calc(var(--radius) - 2px) | 8px |
--theme-radius-lg | rounded-lg | var(--radius) | 9px |
--theme-radius-xl | rounded-xl | calc(var(--radius) + 4px) | 10px |
--theme-radius-2xl | rounded-2xl | 1rem | 12px |
--theme-radius-3xl | rounded-3xl | 1.5rem | 14px |
--theme-radius-4xl | rounded-4xl | 2rem | 16px |
--theme-radius-tile | rounded-tile | calc(var(--radius) - 2px) | 30% |
--theme-duration-instant | duration-instant | 100ms | 60ms |
--theme-duration-fast | duration-fast | 100ms | 80ms |
--theme-duration-bulkbar | duration-bulkbar | 200ms | 100ms |
--theme-duration-base | duration-base | 150ms | 140ms |
--theme-duration-exit | duration-exit | 100ms | 160ms |
--theme-duration-hover | duration-hover | 150ms | 200ms |
--theme-duration-toast | duration-toast | 400ms | 400ms |
--theme-duration-spin | duration-spin | 1000ms | 900ms |
--theme-duration-board-shimmer | duration-board-shimmer | 2000ms | 1000ms |
--theme-duration-shimmer | duration-shimmer | 1500ms | 1500ms |
--theme-duration-nav | duration-nav | 150ms | 160ms |
--theme-ease-standard | ease-standard | cubic-bezier(0.4, 0, 0.2, 1) | ease |
--theme-ease-overlay | ease-overlay | cubic-bezier(0.4, 0, 0.2, 1) | ease-in-out |
--theme-ease-tooltip | ease-tooltip | ease | cubic-bezier(0.7, 0, 0.39, 0.98) |
--theme-ease-reveal | ease-reveal | ease-in | ease-in |
--theme-tooltip-delay | the tooltip's open delay (data) | 0ms | 590ms |
--theme-toast-lifetime | a toast's life (data) | 4000ms | 4000ms |
--theme-enter-scale | an overlay's entrance scale | 0.95 | 0.97 |
--theme-enter-y | an overlay's entrance offset | -0.5rem | -1px |
--theme-text-ui | text-ui | 14px | 14px |
--theme-text-ui-leading | text-ui (leading) | 20px | 20px |
--theme-text-ui-tracking | text-ui (tracking) | 0 | -0.07px |
--theme-text-ui-weight | text-ui (weight) | 400 | 500 |
--theme-text-ui-strong | text-ui-strong | 14px | 14px |
--theme-text-ui-strong-leading | text-ui-strong (leading) | 20px | 20px |
--theme-text-ui-strong-tracking | text-ui-strong (tracking) | 0 | -0.07px |
--theme-text-ui-strong-weight | text-ui-strong (weight) | 500 | 600 |
--theme-text-ui-prose | text-ui-prose | 14px | 14px |
--theme-text-ui-prose-leading | text-ui-prose (leading) | 22px | 24px |
--theme-text-ui-prose-tracking | text-ui-prose (tracking) | 0 | -0.07px |
--theme-text-ui-prose-weight | text-ui-prose (weight) | 400 | 500 |
--theme-text-ui-small | text-ui-small | 12px | 12px |
--theme-text-ui-small-leading | text-ui-small (leading) | 16px | 16px |
--theme-text-ui-small-tracking | text-ui-small (tracking) | 0 | 0 |
--theme-text-ui-small-weight | text-ui-small (weight) | 400 | 500 |
--theme-text-ui-input-lg | text-ui-input-lg | 16px | 16px |
--theme-text-ui-input-lg-leading | text-ui-input-lg (leading) | 24px | 20px |
--theme-text-ui-input-lg-tracking | text-ui-input-lg (tracking) | 0 | -0.08px |
--theme-text-ui-input-lg-weight | text-ui-input-lg (weight) | 400 | 500 |
--theme-text-ui-title | text-ui-title | 16px | 16px |
--theme-text-ui-title-leading | text-ui-title (leading) | 22px | 20px |
--theme-text-ui-title-tracking | text-ui-title (tracking) | 0 | -0.16px |
--theme-text-ui-title-weight | text-ui-title (weight) | 500 | 600 |
--theme-text-ui-record-title | text-ui-record-title | 18px | 18px |
--theme-text-ui-record-title-leading | text-ui-record-title (leading) | 28px | 24px |
--theme-text-ui-record-title-tracking | text-ui-record-title (tracking) | 0 | -0.36px |
--theme-text-ui-record-title-weight | text-ui-record-title (weight) | 500 | 600 |
--theme-text-ui-h2 | text-ui-h2 | 20px | 20px |
--theme-text-ui-h2-leading | text-ui-h2 (leading) | 26px | 24px |
--theme-text-ui-h2-tracking | text-ui-h2 (tracking) | -0.01em | -0.4px |
--theme-text-ui-h2-weight | text-ui-h2 (weight) | 500 | 600 |
--theme-text-ui-h1 | text-ui-h1 | 24px | 24px |
--theme-text-ui-h1-leading | text-ui-h1 (leading) | 30px | 28px |
--theme-text-ui-h1-tracking | text-ui-h1 (tracking) | -0.01em | -0.48px |
--theme-text-ui-h1-weight | text-ui-h1 (weight) | 500 | 600 |
--theme-text-ui-display | text-ui-display | 32px | 32px |
--theme-text-ui-display-leading | text-ui-display (leading) | 36px | 36px |
--theme-text-ui-display-tracking | text-ui-display (tracking) | -0.02em | -0.64px |
--theme-text-ui-display-weight | text-ui-display (weight) | 500 | 600 |
--theme-text-ui-kbd | text-ui-kbd | 12px | 11px |
--theme-text-ui-kbd-leading | text-ui-kbd (leading) | 16px | 11px |
--theme-text-ui-kbd-tracking | text-ui-kbd (tracking) | 0 | 0.22px |
--theme-text-ui-kbd-weight | text-ui-kbd (weight) | 500 | 400 |
--theme-text-ui-kbd-sm | text-ui-kbd-sm | 12px | 10px |
--theme-text-ui-kbd-sm-leading | text-ui-kbd-sm (leading) | 16px | 10px |
--theme-text-ui-kbd-sm-tracking | text-ui-kbd-sm (tracking) | 0 | 0.2px |
--theme-text-ui-kbd-sm-weight | text-ui-kbd-sm (weight) | 500 | 400 |
--theme-text-ui-badge-sm | text-ui-badge-sm | 12px | 10px |
--theme-text-ui-badge-sm-leading | text-ui-badge-sm (leading) | 16px | 14px |
--theme-text-ui-badge-sm-tracking | text-ui-badge-sm (tracking) | 0 | 0 |
--theme-text-ui-badge-sm-weight | text-ui-badge-sm (weight) | 500 | 500 |
--theme-font-face | font-sans, the page's face | var(--font-face-sans, ui-sans-serif) | var(--font-face-inter, var(--font-face-sans, ui-sans-serif)) |
--font-face-heading | font-heading | var(--theme-font-face) | var(--theme-font-face) |
--font-features | body's features | "cv11", "ss01" | normal |
--theme-font-data | .font-data | var(--font-face-mono, ui-monospace), ui-monospace, "SFMono-Regular", "Menlo", monospace | var(--theme-font-face), ui-sans-serif, system-ui, sans-serif |
--theme-data-tracking | .font-data | -0.01em | -0.07px |
--theme-focus-width | :focus-visible | 2px | 1px |
--theme-focus-offset | :focus-visible | 2px | 1px |
--theme-caret | fields' caret | auto | var(--ring) |
--icon-stroke | Lucide glyphs, under a theme whose stroke is its own | 2 | 1.5 |
--theme-frame-width | a dialog's frosted frame (border-(length:--theme-frame-width)) | 0px | 3px |
--theme-frame-blur | backdrop-blur-frame, behind a dialog's frame | 0px | 15px |
--theme-chart-wash | ChartContainer's wash (bg-(image:--theme-chart-wash)) | var(--gradient-wash) | none |
Components
Primitives are shadcn's base-vega on Base UI. Import the file, not the barrel:
@tempio/ui/components/ui/button.
Icons are Lucide, through @tempio/ui/icons: <Icon name="Settings" />, or the
named export SettingsIcon. A glyph with a file in icons/animated/, copied
from the lucide-animated package (npm, 1.0.5, MIT; icons/animated/LICENSE),
plays; the rest render lucide-react as is, in the same box. An icon plays
when the pointer enters its button, link or menu item, and when its state
prop changes: 200 ms per element on the ease-out, and a staggered glyph
finishes within 1.2 s. It does not play on mount, does not loop, and renders
the static glyph under reduced motion. Under neutral it never plays, and
the animated file draws its resting frame. The theme is read off the page when
a play would start, so the server and the client render the same markup.
| Name | Import |
|---|---|
accordion | @tempio/ui/components/ui/accordion |
alert-dialog | @tempio/ui/components/ui/alert-dialog |
alert | @tempio/ui/components/ui/alert |
aspect-ratio | @tempio/ui/components/ui/aspect-ratio |
attachment | @tempio/ui/components/ui/attachment |
avatar | @tempio/ui/components/ui/avatar |
badge | @tempio/ui/components/ui/badge |
breadcrumb | @tempio/ui/components/ui/breadcrumb |
bubble | @tempio/ui/components/ui/bubble |
button-group | @tempio/ui/components/ui/button-group |
button | @tempio/ui/components/ui/button |
calendar | @tempio/ui/components/ui/calendar |
card | @tempio/ui/components/ui/card |
carousel | @tempio/ui/components/ui/carousel |
chart | @tempio/ui/components/ui/chart |
checkbox | @tempio/ui/components/ui/checkbox |
collapsible | @tempio/ui/components/ui/collapsible |
combobox | @tempio/ui/components/ui/combobox |
command | @tempio/ui/components/ui/command |
context-menu | @tempio/ui/components/ui/context-menu |
dialog | @tempio/ui/components/ui/dialog |
direction | @tempio/ui/components/ui/direction |
drawer | @tempio/ui/components/ui/drawer |
dropdown-menu | @tempio/ui/components/ui/dropdown-menu |
empty | @tempio/ui/components/ui/empty |
field | @tempio/ui/components/ui/field |
hover-card | @tempio/ui/components/ui/hover-card |
icon-tile | @tempio/ui/components/ui/icon-tile |
input-group | @tempio/ui/components/ui/input-group |
input-otp | @tempio/ui/components/ui/input-otp |
input | @tempio/ui/components/ui/input |
item | @tempio/ui/components/ui/item |
kbd | @tempio/ui/components/ui/kbd |
label | @tempio/ui/components/ui/label |
marker | @tempio/ui/components/ui/marker |
menubar | @tempio/ui/components/ui/menubar |
message-scroller | @tempio/ui/components/ui/message-scroller |
message | @tempio/ui/components/ui/message |
native-select | @tempio/ui/components/ui/native-select |
navigation-menu | @tempio/ui/components/ui/navigation-menu |
pagination | @tempio/ui/components/ui/pagination |
popover | @tempio/ui/components/ui/popover |
progress | @tempio/ui/components/ui/progress |
questionnaire | @tempio/ui/components/ui/questionnaire |
radio-group | @tempio/ui/components/ui/radio-group |
resizable | @tempio/ui/components/ui/resizable |
scroll-area | @tempio/ui/components/ui/scroll-area |
select | @tempio/ui/components/ui/select |
separator | @tempio/ui/components/ui/separator |
sheet | @tempio/ui/components/ui/sheet |
sidebar | @tempio/ui/components/ui/sidebar |
skeleton | @tempio/ui/components/ui/skeleton |
slider | @tempio/ui/components/ui/slider |
sonner | @tempio/ui/components/ui/sonner |
spinner | @tempio/ui/components/ui/spinner |
switch | @tempio/ui/components/ui/switch |
table | @tempio/ui/components/ui/table |
tabs | @tempio/ui/components/ui/tabs |
textarea | @tempio/ui/components/ui/textarea |
toast | @tempio/ui/components/ui/toast |
toggle-group | @tempio/ui/components/ui/toggle-group |
toggle | @tempio/ui/components/ui/toggle |
tooltip | @tempio/ui/components/ui/tooltip |
before-after | @tempio/ui/components/blocks/before-after |
breadcrumbs | @tempio/ui/components/blocks/breadcrumbs |
calculator-shell | @tempio/ui/components/blocks/calculator-shell |
card-grid | @tempio/ui/components/blocks/card-grid |
comparison | @tempio/ui/components/blocks/comparison |
cta-band | @tempio/ui/components/blocks/cta-band |
dark-grid | @tempio/ui/components/blocks/dark-grid |
disqualifier | @tempio/ui/components/blocks/disqualifier |
dotted-backdrop | @tempio/ui/components/blocks/dotted-backdrop |
faq | @tempio/ui/components/blocks/faq |
feature-bento | @tempio/ui/components/blocks/feature-bento |
feature-tabs | @tempio/ui/components/blocks/feature-tabs |
founder-note | @tempio/ui/components/blocks/founder-note |
frame | @tempio/ui/components/blocks/frame |
freshness | @tempio/ui/components/blocks/freshness |
hero | @tempio/ui/components/blocks/hero |
hero-3d | @tempio/ui/components/blocks/hero-3d |
intro | @tempio/ui/components/blocks/intro |
logo-strip | @tempio/ui/components/blocks/logo-strip |
objections | @tempio/ui/components/blocks/objections |
phone-feed | @tempio/ui/components/blocks/phone-feed |
pricing | @tempio/ui/components/blocks/pricing |
prompt-chips | @tempio/ui/components/blocks/prompt-chips |
section | @tempio/ui/components/blocks/section |
site-footer | @tempio/ui/components/blocks/site-footer |
site-nav | @tempio/ui/components/blocks/site-nav |
spec-sheet | @tempio/ui/components/blocks/spec-sheet |
split-drift | @tempio/ui/components/blocks/split-drift |
stat-tiles | @tempio/ui/components/blocks/stat-tiles |
statement | @tempio/ui/components/blocks/statement |
steps | @tempio/ui/components/blocks/steps |
term-article | @tempio/ui/components/blocks/term-article |
testimonial | @tempio/ui/components/blocks/testimonial |
tool-frame | @tempio/ui/components/blocks/tool-frame |
tool-grid | @tempio/ui/components/blocks/tool-grid |
transcript | @tempio/ui/components/blocks/transcript |
two-up | @tempio/ui/components/blocks/two-up |
versus | @tempio/ui/components/blocks/versus |
walkthrough | @tempio/ui/components/blocks/walkthrough |
ad-preview-template | @tempio/ui/components/templates/ad-preview |
alternative-template | @tempio/ui/components/templates/alternative |
calculator-template | @tempio/ui/components/templates/calculator |
channel-template | @tempio/ui/components/templates/channel |
compare-template | @tempio/ui/components/templates/compare |
competitor-pricing-template | @tempio/ui/components/templates/competitor-pricing |
examples-template | @tempio/ui/components/templates/examples |
guide-template | @tempio/ui/components/templates/guide |
home-template | @tempio/ui/components/templates/home |
integration-template | @tempio/ui/components/templates/integration |
pillar-template | @tempio/ui/components/templates/pillar |
safe-zone-template | @tempio/ui/components/templates/safe-zone |
term-template | @tempio/ui/components/templates/term |
icons | @tempio/ui/icons |
Known gaps
The kit gives no clear space or minimum sizes for the mark. The numbers under Shapes are read off the mark's own geometry, and Softriver has been asked for theirs.
The kit's five cool greys, Graphite to Cloud, are print and creative greys. The interface has one neutral, tinted toward the purple, in both modes.
Geist is the kit's face. Geist Mono is not in the kit; it carries figures that are data.
A new value from Softriver lands in the same keys: tokens/brand.json,
tokens/themes/tempio.json, and the font files under fonts/. Then
build:tokens regenerates this document. Nothing under components/
changes; a component that has to was reading a literal, so move it onto the
token.