Visual snapshot of the current colors and typography based on the design system.
Click HEX code to copy. Visual verification recommended.
Background
Main page background
OKLCH: oklch(0.983 0.005 90)
Foreground
Main text color
OKLCH: oklch(0.15 0.002 90)
Card
Card component background
OKLCH: oklch(0.983 0.005 90)
Card Foreground
Text color within cards
OKLCH: oklch(0.15 0.002 90)
Popover
Popover component background
OKLCH: oklch(0.983 0.005 90)
Popover Foreground
Text color within popovers
OKLCH: oklch(0.15 0.002 90)
Primary
Primary interactive elements (e.g., text)
OKLCH: var(--foreground)
Primary Foreground
Text color on primary elements
OKLCH: var(--background)
Secondary
Secondary interactive elements
OKLCH: oklch(0.48 0.05 145)
Secondary Foreground
Text color on secondary elements
OKLCH: oklch(0.983 0.005 90)
Muted
Muted backgrounds
OKLCH: oklch(0.95 0.008 110)
Muted Foreground
Muted text color
OKLCH: oklch(0.38 0.015 85)
Accent
Accent color for highlights
OKLCH: oklab(0.75 -0.16 -0.12)
Accent Foreground
Text color on accent elements
OKLCH: var(--foreground)
Destructive
Destructive actions
OKLCH: oklch(0.577 0.245 27.325)
Destructive Foreground
Text on destructive elements
OKLCH: oklch(0.577 0.245 27.325)
Border
Borders and dividers
OKLCH: oklch(0.93 0.01 100)
Input
Input field backgrounds
OKLCH: oklch(0.93 0.01 100)
Ring
Focus ring indicator
OKLCH: oklab(0.75 -0.16 -0.12 / 0.5)
Homepage Highlight
Highlight text on homepage
OKLCH: N/A (Custom?)
Background
Main page background
OKLCH: oklch(0.145 0 0)
Foreground
Main text color
OKLCH: oklch(0.985 0 0)
Card
Card component background
OKLCH: oklch(0.145 0 0)
Card Foreground
Text color within cards
OKLCH: oklch(0.985 0 0)
Popover
Popover component background
OKLCH: oklch(0.145 0 0)
Popover Foreground
Text color within popovers
OKLCH: oklch(0.985 0 0)
Primary
Primary interactive elements
OKLCH: oklch(0.985 0 0)
Primary Foreground
Text color on primary elements
OKLCH: oklch(0.205 0 0)
Secondary
Secondary interactive elements
OKLCH: oklch(0.269 0 0)
Secondary Foreground
Text color on secondary elements
OKLCH: oklch(0.985 0 0)
Muted
Muted backgrounds
OKLCH: oklch(0.269 0 0)
Muted Foreground
Muted text color
OKLCH: oklch(0.708 0 0)
Accent
Accent color for highlights
OKLCH: oklch(0.81 0.21 218)
Accent Foreground
Text color on accent elements
OKLCH: oklch(0.145 0 0)
Destructive
Destructive actions
OKLCH: oklch(0.396 0.141 25.723)
Destructive Foreground
Text on destructive elements
OKLCH: oklch(0.637 0.237 25.331)
Border
Borders and dividers
OKLCH: oklch(0.269 0 0)
Input
Input field backgrounds
OKLCH: oklch(0.269 0 0)
Ring
Focus ring indicator
OKLCH: oklch(0.439 0 0)
Accent Glow
Effect color for glowing elements
OKLCH: oklch(0.81 0.21 218 / 0.4)
Charcoal Deep
Very dark background variant
OKLCH: oklch(0.08 0 0)
Midnight Blue
Very dark blue variant
OKLCH: oklch(0.12 0.02 255)
Homepage Highlight
Highlight text on homepage
OKLCH: N/A (Custom?)
Used for headlines, body text, and general UI elements.
Aa - Heading 1 (Bold)
Aa - Heading 2 (Semibold)
Aa - Heading 3 (Medium)
Aa - Body Text (Normal)
The quick brown fox jumps over the lazy dog. Providing a practical, actionable document for Jex based on the current codebase state.
Aa - Muted Text (Normal)
Used for code snippets and displaying raw data.
const codeExample = {
name: 'Geist Mono',
usage: 'Code snippets'
};Used for elements *without* shadows (inputs, dividers, etc).
Recommended *instead* of border on Cards, Modals, etc.
Current default Tailwind shadows likely used (e.g., shadow-md). Brand-specific shadows pending.
Base radius is --radius: 0.5rem; (8px)
rounded-lg
(0.5rem / 8px)
rounded-md
(0.375rem / 6px)
rounded-sm
(0.25rem / 4px)
Multiply your potential, exponentially.