Przejdź do treści
Sweet Lava Design System
↗ Strona

Fundamenty Kolory

Fundamenty

Kolory

Paleta zredukowana do neutralnych szarości z miętą jako jedynym akcentem. Mniej kolorów = czytelniejsza hierarchia. Kliknij dowolną próbkę, by skopiować jej token.

Paleta podstawowa

Wszystkie kolory definiuje blok @theme w global.css i są dostępne jako utilisy Tailwind (bg-*, text-*, border-*).

Atrament i tekst

Nagłówki na pełnym ink, tekst body lekko jaśniejszy. Hierarchia przez wagę, nie kolor.

Powierzchnie

Tła i separatory. Głębię budują, schodząc od bieli ku jasnym szarościom.

Akcent – mięta

Jedyny kolor sygnałowy. Pojawia się przy działaniach i wyróżnieniach – nigdy jako dekoracja.

Semantyczne i stany

Aliasy interaktywne (pine = ink) oraz kolor błędu walidacji.

html 
<!-- Utilisy koloru Tailwind generowane z @theme -->
<p class="text-ink">Nagłówek</p>
<p class="text-body">Tekst podstawowy</p>
<span class="text-muted">Meta</span>
<div class="bg-mint text-ink">Akcent</div>
<hr class="border-line" />

Przezroczystość

Tailwind dopisuje krycie ukośnikiem (np. bg-ink/10). Stosujemy je do nakładek, subtelnych teł i obwódek. Próbki leżą na szachownicy, by pokazać kanał alfa.

ink – nakładki i przyciemnienia

mint – podświetlenia akcentu

html 
<!-- Krycie przez ukośnik -->
<div class="bg-ink/40">Zasłona modala</div>
<span class="text-cream/55">Podpis na ciemnym tle</span>
<button class="border border-cream/25">Przycisk na ciemnym</button>

color-mix() w praktyce

Tam, gdzie potrzebujemy odcienia pomiędzy tokenami, używamy natywnego color-mix – bez dorzucania nowych zmiennych. Tak powstaje m.in. ramka boksu odpowiedzi.

css 
/* Ramka boksu „kluczowa odpowiedź" (global.css) */
.key-answer {
  background: var(--color-mint-soft);
  border: 1px solid color-mix(in srgb, var(--color-mint) 60%, transparent);
}

Gradienty z palety

Gradienty budujemy wyłącznie z istniejących tokenów, żeby zostać w tonacji. Tematyczny system pasteli okładek opisuje osobna strona – Gradienty.

html 
<div class="h-32" style="background:linear-gradient(135deg, var(--color-ink), var(--color-pine-deep))"></div>

Kontrast i dostępność

Każde zestawienie tekst/tło sprawdzamy względem WCAG 2.1. muted = #767676 to najjaśniejsza szarość przechodząca AA (4,5:1) na bieli – dlatego meta-tekst zostaje na paper, nie na cream.

Podgląd Tekst / tło Kontrast Ocena
Aa Próbka ink / paper 17,4:1 AAA
Aa Próbka body / paper 13,6:1 AAA
Aa Próbka ink / mint 13,9:1 AAA
Aa Próbka error / paper 6,5:1 AA
Aa Próbka muted / paper 4,54:1 AA
Aa Próbka muted / cream ≈4,2:1 poniżej AA