Color System

Frutjam's color system uses semantic CSS tokens designed to meet WCAG AA contrast ratios out of the box. No JavaScript, dark mode aware, compatible with Tailwind CSS v4. Works with Django, HTMX, Laravel, and any CSS-only stack.

Frutjam uses CSS custom properties as design tokens for all colors. Every color is defined per theme and automatically works with Tailwind CSS utility classes — no extra configuration needed. CSS-only, no JavaScript required. WCAG AA contrast guaranteed on every color pair, works with Django, HTMX, Laravel, React, and any Tailwind CSS v4 project.

Color Names

Frutjam defines the following semantic color roles. Each color has a matching on-{color} token for accessible foreground text.

Color Utility Classes

All Frutjam colors work with any Tailwind CSS color utility. Replace {color} with any color name from the table above.

1
2
3

<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>

Opacity Modifier

Control color opacity with the /{value} modifier, just like any Tailwind color.

1
2
3

<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>

Theme CSS Variables

These are the root tokens you define when creating a custom theme. All other color tokens are computed automatically from these.

Computed Color Tokens

Frutjam automatically computes these tokens from your root theme variables — you don't set them manually. They are available for use in custom CSS.

Scale (50–950)

Every color generates a full 11-step tint/shade scale. Replace {color} with any color name.

Soft & Active

State-aware variants for interactive elements, automatically adapting to light and dark themes.

Custom Theme Example

Override root tokens to create a custom theme. Frutjam computes all scales and states automatically.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}