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.

Jetons de couleur calculés

Frutjam calcule automatiquement ces jetons à partir des variables de votre thème racine — vous ne les définissez pas manuellement. Ils sont disponibles pour une utilisation dans du CSS personnalisé.

Échelle (50-950)

Chaque couleur génère une échelle de teinte/teinte complète en 11 étapes. Remplacez {color} par n'importe quel nom de couleur.

Doux et léger. Actif

Variantes sensibles à l'état pour les éléments interactifs, s'adaptant automatiquement aux thèmes clairs et sombres.

Exemple de thème personnalisé

Remplacez les jetons racine pour créer un thème personnalisé. Frutjam calcule automatiquement toutes les échelles et tous les états.

 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);
}