Paleta kolorow

Wlasna paleta oparta na Slate Blue. Zadne kolory nie sa domyslnymi wartosciami Tailwind.

Brand (Primary)

#f0f4ff

100

#dbe4ff

200

#bac8ff

300

#91a7ff

400

#748ffc

500

#5c7cfa

600

#4c6ef5

700

#4263eb

800

#3b5bdb

900

#364fc7

950

#1e2a5e

Accent (Warm Amber)

#fff9eb

100

#ffefc6

200

#ffe08a

300

#ffd43b

400

#fcc419

500

#fab005

600

#f59f00

700

#e8900c

800

#c97a12

900

#a66a16

Surface (Neutrals)

#f8fafc

100

#f1f5f9

200

#e2e8f0

300

#cbd5e1

400

#94a3b8

500

#64748b

600

#475569

700

#334155

800

#1e293b

900

#0f172a

950

#020617

Semantic

Info

#5c7cfa

Success

#16a34a

Warning

#f59e0b

Danger

#dc2626

Typografia

Parowanie EB Garamond (naglowki) z Source Sans 3 (body). Serif dodaje elegancji, sans zapewnia czytelnosc.

Headings

EB Garamond

Elegant. Czytelny. Autorytatywny.

AaBbCcDdEeFfGg

0123456789

ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ

Body / UI

Source Sans 3

Czytelny. Uniwersalny. Zoptymalizowany dla ekranow.

AaBbCcDdEeFfGg

0123456789

ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ

Hierarchia naglowkow

H1 — font-heading text-4xl tracking-[-0.03em] text-surface-900

Generator Liczb Losowych

H2 — font-heading text-3xl tracking-[-0.02em] text-surface-900

Jak korzystac z generatora?

H3 — font-body text-xl font-semibold tracking-[-0.01em] text-surface-800

Parametry losowania

H4 — font-body text-lg font-semibold text-surface-800

Zakres wartosci

Body — font-body text-base leading-[1.7] text-surface-600

Generator liczb losowych to narzedzie pozwalajace na szybkie wylosowanie dowolnej ilosci liczb z zadanego zakresu. Algorytm wykorzystuje kryptograficznie bezpieczny generator pseudolosowy, co gwarantuje wysoka jakosc wynikow.

Body Small — font-body text-sm leading-relaxed text-surface-500

Wyniki losowania sa generowane po stronie klienta i nie sa zapisywane na serwerze.

Label — font-body text-sm font-medium text-surface-700

Zakres od

Caption — font-body text-xs font-semibold uppercase tracking-[0.2em] text-surface-400

Kategoria narzedzia

System spacingu

Celowe tokeny spacingu zamiast losowych wartosci Tailwind.

4px

p-1

Minimalny padding wewnetrzny

8px

p-2

Ciasny spacing, miedzy powiazanymi elementami

12px

p-3

Domyslna mala przerwa

16px

p-4

Standardowy padding elementow, gap formularzy

24px

p-6

Padding kart (mobile), padding wewnetrzny sekcji

32px

p-8

Padding kart (desktop)

48px

p-12

Miedzy glownymi sekcjami

64px

p-16

Spacing pionowy na poziomie strony

96px

p-24

Hero/footer duzy spacing

Cienie i glebokosc

Warstwowe cienie barwione kolorem brand. Trzy poziomy: base, elevated, floating.

Base

shadow-base

Tlo strony, subtleny lift

Elevated

shadow-elevated

Karty, formularze, dropdowny

Floating

shadow-floating

Modale, popovery, search overlay

tailwind.config.js — boxShadow

boxShadow: {
  'base':     '0 1px 2px 0 rgba(92,124,250,0.04), 0 1px 3px 0 rgba(92,124,250,0.06)',
  'elevated': '0 4px 6px -1px rgba(92,124,250,0.06), 0 10px 15px -3px rgba(92,124,250,0.08)',
  'floating': '0 10px 25px -5px rgba(92,124,250,0.10), 0 20px 50px -12px rgba(92,124,250,0.15)',
}

Przyciski

Cztery warianty. Kazdy ma stany: default, hover, focus-visible, active, disabled.

Primary

(disabled)

bg-brand-600 hover:bg-brand-700 hover:scale-[1.02] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-brand-500

Secondary

(disabled)

bg-white border-surface-300 hover:border-brand-300 hover:bg-surface-50 hover:scale-[1.01] active:scale-[0.98]

Destructive

text-red-600 border-red-200 hover:bg-red-50 hover:border-red-300 active:bg-red-100

Ghost

text-surface-600 hover:bg-surface-100 hover:text-surface-900 active:bg-surface-200

Rozmiary

Formularze

Czyste, dostepne pola formularzy z widocznymi stanami fokusa.

Text / Number Input

Zakres od

Zakres do

Input z ikona

Szukaj

Input z bledem

Ilosc liczb

Wartosc musi byc wieksza od zera.

Select

Sortowanie

Textarea

Lista elementow

Checkbox

Unikalne liczby Sortuj wyniki Opcja niedostepna

Radio

Przecinek Nowa linia Spacja

Toggle Switch

Animacja wlaczona

Dzwiek wylaczony

Range Slider

Ilosc liczb 10

Karty

Glowne kontenery: widget generatora, panel informacyjny, karta narzedzia.

Widget generatora

Ilosc

Unikalne liczby

Wyniki

Panele informacyjne (monochromatyczne)

Rozroznienie przez ikone, intensywnosc tla i grubosc bordera - nie przez kolor hue. Cala paleta oparta na brand + surface.

Dostepne parametry

Zakres wartosci od-do
Ilosc losowanych liczb
Opcja unikatowosci

Zalety generatora

Kryptograficznie bezpieczny
Bez limitu uzycia
Dzialanie offline

Uwaga

Przy wlaczonej opcji unikatowosci zakres musi byc wiekszy niz ilosc losowanych liczb.

Neutralny panel

Panel informacyjny bez semantycznego koloru. Uzywany do ogolnych wiadomosci.

Klucz rozpoznawania

Info / pozytywne — brand-50, border-brand-200

Potwierdzenie — brand-50, border-brand-300 (grubszy)

Ostrzezenie / blad — surface-100, border-surface-300+

Karty narzedzi (do stron kategorii)

Generator Liczb

Losuj liczby z zadanego zakresu

Rzut Kostka

Wirtualna kostka do gry online

Generator Hasel

Tworz silne, losowe hasla

Nawigacja

Czysta nawigacja z logotypem tekstowym. Bez gradientow, bez dekoracji.

Nawigacja glowna

Breadcrumbs

Wyswietlanie wynikow

Number balls v2 - solid brand color zamiast gradientu. Czysty, nowoczesny wyglad.

Number Balls

w-14 h-14 rounded-full bg-brand-600 text-white shadow-elevated hover:scale-110

Number Balls - wariant z akcentem

Ostatnia kula w kolorze accent - przydatne np. do wyroznienia numeru bonusowego.

Wynik tekstowy

3, 17, 24, 38, 42, 49

Duzy pojedynczy wynik (np. rzut kostka)

Tabele

Narzedzie	Kategoria	Status
Generator Liczb	Losowanie	Aktywny
Rzut Kostka	Gry	Aktywny
Generator NIP	Generatory	W budowie
Kalkulator BMI	Kalkulatory	Planowany

Bloki kodu

JavaScript

function generateNumbers(min, max, count) {
    const numbers = [];
    for (let i = 0; i < count; i++) {
        const num = Math.floor(Math.random() * (max - min + 1)) + min;
        numbers.push(num);
    }
    return numbers;
}

Inline code

Uzyj funkcji Math.random() do generowania liczb losowych w JavaScript. Wartosc zwracana jest z zakresu [0, 1).

Alerty i powiadomienia

Monochromatyczne alerty oparte na palecie brand + surface. Rozroznienie przez ikone, intensywnosc tla i grubosc bordera.

Informacja

Generator wykorzystuje kryptograficznie bezpieczny algorytm pseudolosowy.

Sukces

Wynik zostal skopiowany do schowka.

Uwaga

Zakres jest za maly dla zadanej ilosci unikalnych liczb.

Blad

Nie udalo sie wygenerowac liczb. Sprawdz parametry i sprobuj ponownie.

Schemat alertow

Info

brand-50 / brand-200

Sukces

brand-50 / brand-300

Uwaga

surface-100 / surface-300

Blad

surface-100 / surface-400

Animacje

Tylko transform i opacity. Spring easing. Nigdy transition-all.

Easing - spring vs linear

cubic-bezier(0.34, 1.56, 0.64, 1)

ease-linear (do porownania)

Hover - zmiana eleacji

Base

Najedz myszka

Elevated

Najedz myszka

Floating

Najedz myszka

Staggered fade-in

animation: fadeInUp 0.5s ease-spring forwards; animation-delay: calc(0.05s * index)

Zasady animacji

Dozwolone

transition-[transform]
transition-[opacity]
transition-[transform,opacity]
ease-spring
duration-200

Zabronione

transition-all
transition-colors (jako jedyna)
ease-in-out (zbyt generyczne)
duration-500+ (zbyt wolne)

Design System v2

GeneratorLiczb.pl

Slate Blue · EB Garamond + Source Sans 3 · Spring Easing

Style Guide v2

Paleta kolorow

Brand (Primary)

Accent (Warm Amber)

Surface (Neutrals)

Semantic

Typografia

Generator Liczb Losowych

Jak korzystac z generatora?

Parametry losowania

Zakres wartosci

System spacingu

Cienie i glebokosc

Przyciski

Formularze

Karty

Dostepne parametry

Zalety generatora

Uwaga

Neutralny panel

Generator Liczb

Rzut Kostka

Generator Hasel

Nawigacja

Wyswietlanie wynikow

Tabele

Bloki kodu

Alerty i powiadomienia

Footer

Animacje

Zasady animacji