🎨 Color System Reference

Developer reference for CSS color variables and usage patterns

Base Colors

Background

--color-bg

Secondary BG

--color-bg-secondary

Text

--color-text

Secondary Text

--color-text-secondary

Interactive Colors

Links & Primary

--color-link

Buttons

--color-secondary

Accent

--color-accent

Feedback & State Colors

Valid

--color-valid

Invalid

--color-invalid

Success

--color-success-bg

Error

--color-error-bg

Typography

Heading 1

Heading 2

Heading 3

Heading 4

This is a paragraph with regular text. It uses --color-text for readability.

This is small text using --color-text-secondary

This is a link using --color-link

Inline code with --color-accent background

Buttons & Interactive Elements

Link Button

Form Elements

This is a real form element as styled by app.css:

Feedback Messages

Block Messages (`.error` / `.success`)

This is an error message using --color-error-bg, --color-error-border, and --color-error-text

This is a success message using --color-success-bg, --color-success-border, and --color-success-text

Inline Messages (Component-specific)

These show smaller inline feedback within forms or components:

Inline error message (e.g. .discovery-error style)

Inline success message (e.g. .discovery-success style)

Tables

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Dark Mode

All colors automatically adapt to dark mode based on prefers-color-scheme: dark. Change your system theme to see the colors update.

Note: Dark mode inverts most colors - backgrounds become dark, text becomes light, while maintaining semantic color meanings.

Back to home