Tailwind CSS Color Palette

A visual reference for the project's color system.

Surface Colors

Primary

bg: bg-surface-primary

text: text-content-primary

Secondary

bg: bg-surface-secondary

text: text-content-primary

Tertiary

bg: bg-surface-tertiary

text: text-content-primary

Interactive

bg: bg-surface-interactive

text: text-content-primary

Hover

bg: bg-surface-hover

text: text-content-primary

Border

bg: bg-surface-border

text: text-content-inverse

Content Colors

Primary Text

text-content-primary

Secondary Text

text-content-secondary

Tertiary Text

text-content-tertiary

Disabled Text

text-content-disabled

Inverse Text

text-content-inverse

Accent Colors

Signal

bg: bg-accent-signal

text: text-content-inverse

Interest

bg: bg-accent-interest

text: text-content-inverse

Disinterest

bg: bg-accent-disinterest

text: text-content-inverse

Secondary

bg: bg-accent-secondary

text: text-content-inverse

Success

bg: bg-accent-success

text: text-content-inverse

Warning

bg: bg-accent-warning

text: text-content-inverse

Link Colors

This is a default link.

This is a hover link.

This is a visited link.