Customization
Colors
A complete reference of all color variables, their light and dark values, and how to use them in your custom components.
All Color Variables
Background
--trinkui-bg
Page and section backgrounds
L: 255 255 255
D: 9 9 11
Foreground
--trinkui-fg
Primary text, headings
L: 10 10 10
D: 250 250 250
Primary
--trinkui-primary
Brand color, buttons, links, focus rings
L: 99 102 241
D: 129 140 248
Primary Foreground
--trinkui-primary-fg
Text on primary-colored backgrounds
L: 255 255 255
D: 255 255 255
Secondary
--trinkui-secondary
Secondary backgrounds, hover states
L: 241 245 249
D: 24 24 27
Secondary Foreground
--trinkui-secondary-fg
Text on secondary backgrounds
L: 15 23 42
D: 228 228 231
Accent
--trinkui-accent
Highlights, badges, attention-grabbing elements
L: 249 115 22
D: 251 146 60
Muted
--trinkui-muted
Secondary text, descriptions, placeholders
L: 100 116 139
D: 113 113 122
Border
--trinkui-border
Borders, dividers, separators
L: 226 232 240
D: 39 39 42
Surface
--trinkui-surface
Cards, elevated surfaces, sidebars
L: 248 250 252
D: 18 18 21
RGB Channel Format
Color values are defined as space-separated RGB channels (e.g. 99 102 241) rather than rgb(99, 102, 241). This format enables opacity modifiers in Tailwind:
/* Full opacity */
className="bg-[rgb(var(--trinkui-primary))]"
/* With opacity (50%) */
className="bg-[rgb(var(--trinkui-primary)/0.5)]"
/* Border with 30% opacity */
className="border-[rgb(var(--trinkui-border)/0.3)]"
/* Text with muted opacity */
className="text-[rgb(var(--trinkui-muted)/0.8)]"Semantic Color Mapping
Colors are semantic, not literal. Instead of --trinkui-indigo, we use --trinkui-primary. This lets you swap your brand color without changing any component code:
Primary / Primary FG
Your brand color. Used for buttons, links, active states, and focus rings. Primary FG is the text color on top of primary backgrounds.
Secondary / Secondary FG
Subtle backgrounds for secondary buttons and hover states. Less prominent than primary.
Accent
An attention color distinct from primary. Used for badges, highlights, and promotional elements.
Muted
Subdued text for descriptions, captions, and less important content.
Surface
Elevated backgrounds for cards, dropdowns, and sidebars. Slightly different from the page background.
Using Colors in Custom Components
When building your own components alongside trink-ui, reference the same CSS variables to stay consistent:
function CustomCard({ title, description }: { title: string; description: string }) {
return (
<div className="rounded-lg border border-[rgb(var(--trinkui-border))] bg-[rgb(var(--trinkui-surface))] p-6">
<h3 className="text-lg font-semibold text-[rgb(var(--trinkui-fg))]">
{title}
</h3>
<p className="mt-2 text-sm text-[rgb(var(--trinkui-muted))]">
{description}
</p>
<button className="mt-4 rounded-lg bg-[rgb(var(--trinkui-primary))] px-4 py-2 text-sm font-medium text-[rgb(var(--trinkui-primary-fg))]">
Learn more
</button>
</div>
);
}