Sistem Warna

Sistem warna Frutjam menggunakan token CSS semantik yang dirancang untuk memenuhi rasio kontras WCAG AA yang siap pakai. Tanpa JavaScript, mendukung mode gelap, kompatibel dengan Tailwind CSS v4. Bekerja dengan Django, HTMX, Laravel, dan tumpukan khusus CSS apa pun.

Frutjam menggunakan properti khusus CSS sebagai token desain untuk semua warna. Setiap warna ditentukan per tema dan secara otomatis berfungsi dengan kelas utilitas Tailwind CSS — tidak diperlukan konfigurasi tambahan. Hanya CSS, tidak diperlukan JavaScript. Kontras WCAG AA dijamin pada setiap pasangan warna, berfungsi dengan Django, HTMX, Laravel, React, dan proyek Tailwind CSS v4 apa pun.

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 secara otomatis menghitung token ini dari variabel tema root Anda — Anda tidak mengaturnya secara manual. Mereka tersedia untuk digunakan dalam CSS khusus.

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