Style Guide
Color Palette
Complete color system used throughout the application. Colors are automatically read from theme.css.
brand
primary
Variable: primary
OKLCH: oklch(0 0 0)
primary light
Variable: primary-light
OKLCH: oklch(0.0% 1.000 0)
primary dark
Variable: primary-dark
OKLCH: oklch(0.0% 1.000 0)
secondary
Variable: secondary
OKLCH: oklch(1 0 0)
secondary light
Variable: secondary-light
OKLCH: oklch(100.0% 1.000 0)
secondary dark
Variable: secondary-dark
OKLCH: oklch(100.0% 1.000 0)
tertiary
Variable: tertiary
OKLCH: oklch(48.8% 0.243 264.376)
tertiary light
Variable: tertiary-light
OKLCH: oklch(48.8% 1.000 264)
tertiary dark
Variable: tertiary-dark
OKLCH: oklch(48.8% 1.000 264)
text
primary text
Variable: primary-text
OKLCH: oklch(12.9% 0.042 264.695)
secondary text
Variable: secondary-text
OKLCH: oklch(0 0 0)
light text
Variable: light-text
OKLCH: oklch(12.9% 1.000 265)
light text-dark
Variable: light-text-dark
OKLCH: oklch(12.9% 1.000 265)
link text
Variable: link-text
OKLCH: oklch(0 0 0)
link text-hover
Variable: link-text-hover
OKLCH: oklch(from var(--color-link-text) clamp(0, calc(l - 0.2), 1) c h)
icon
Variable: icon
OKLCH: oklch(48.8% 0.243 264.376)
icon hover
Variable: icon-hover
OKLCH: oklch(from var(--color-icon) clamp(0, calc(l - 0.2), 1) c h)
icon bg
Variable: icon-bg
OKLCH: oklch(from var(--color-icon) clamp(0, calc(l + 0.95), 1) c h /20%)
neutrals
white
Variable: white
OKLCH: oklch(1 0 0)
black
Variable: black
OKLCH: oklch(0 0 0)
transparent
Variable: transparent
OKLCH: oklch(0 0 0 / 0%)
gray 100
Variable: gray-100
OKLCH: oklch(0.967 0.003 264.542)
gray 300
Variable: gray-300
OKLCH: oklch(0.872 0.01 258.338)
gray 500
Variable: gray-500
OKLCH: oklch(0.551 0.027 264.364)
gray 700
Variable: gray-700
OKLCH: oklch(37.3% 0.034 259.733)
background
background primary
Variable: background-primary
OKLCH: oklch(0 0 0)
background light
Variable: background-light
OKLCH: oklch(from var(--color-background-primary) clamp(0, calc(l + 0.8), 1) c h)
background dimmed
Variable: background-dimmed
OKLCH: oklch(from var(--color-background-primary) clamp(0, calc(l + 0.95), 1) c h / 50%)
background dark
Variable: background-dark
OKLCH: oklch(from var(--color-background-primary) clamp(0, calc(l + 0.5), 1) c h)
background transparent-light
Variable: background-transparent-light
OKLCH: oklch(from var(--color-background-primary)l c h / 10%)
background transparent-dark
Variable: background-transparent-dark
OKLCH: oklch(from var(--color-background-primary) l c h / 40%)
background secondary-transparent
Variable: background-secondary-transparent
OKLCH: oklch(20.0% 0.000 0)
border
primary border
Variable: primary-border
OKLCH: oklch(0 0 0)
primary border-light
Variable: primary-border-light
OKLCH: oklch(from var(--color-primary-border) clamp(0, calc(l + 0.7), 1) c h)
secondary border
Variable: secondary-border
OKLCH: oklch(1 0 0)
secondary border-light
Variable: secondary-border-light
OKLCH: oklch(from var(--color-secondary-border) clamp(0, calc(l + 0.8), 1) c h)
tertiary border
Variable: tertiary-border
OKLCH: oklch(48.8% 0.243 264.376)
tertiary border-light
Variable: tertiary-border-light
OKLCH: oklch(from var(--color-tertiary-border) clamp(0, calc(l + 0.8), 1) c h)
semantic
green
Variable: green
OKLCH: oklch(62.7% 0.194 149.214)
green light
Variable: green-light
OKLCH: oklch(62.7% 1.000 149)
green dark
Variable: green-dark
OKLCH: oklch(62.7% 1.000 149)
red
Variable: red
OKLCH: oklch(57.7% 0.245 27.325)
red light
Variable: red-light
OKLCH: oklch(57.7% 1.000 27)
red dark
Variable: red-dark
OKLCH: oklch(57.7% 1.000 27)
blue
Variable: blue
OKLCH: oklch(54.6% 0.245 262.881)
blue light
Variable: blue-light
OKLCH: oklch(54.6% 1.000 263)
blue dark
Variable: blue-dark
OKLCH: oklch(54.6% 1.000 263)
gradient
gradient primary
Variable: gradient-primary
OKLCH: oklch(0.5 0.134 242.749)
gradient secondary
Variable: gradient-secondary
OKLCH: oklch(0.865 0.127 207.078)
gradient tertiary
Variable: gradient-tertiary
OKLCH: oklch(0.5 0.01 0)
gradient quaternary
Variable: gradient-quaternary
OKLCH: oklch(0.95 0.01 0)