Plac zabaw UI

Podgląd fontów, kolorów, typografii i elementów interfejsu Grupy Pino

Fonty

Czcionki używane w serwisach Grupy Pino

Roboto Sans-serif

Domyślna czcionka

Roboto to nowoczesna, geometryczna czcionka bezszeryfowa zaprojektowana przez Google. Idealna do długich tekstów i interfejsów.

AaBbCcDdEeFf 0123456789 ąęćłńóśźż
Playfair Display Serif

Eleganckie nagłówki

Playfair Display to klasyczna czcionka szeryfowa z eleganckimi proporcjami. Doskonała do nagłówków i akcentów.

AaBbCcDdEeFf 0123456789 ąęćłńóśźż
Space Grotesk Sans-serif

Techniczny charakter

Space Grotesk to nowoczesna czcionka o technicznym charakterze. Świetnie sprawdza się w interfejsach aplikacji.

AaBbCcDdEeFf 0123456789 ąęćłńóśźż
Nunito Sans-serif

Przyjazny styl

Nunito to zaokrąglona czcionka bezszeryfowa o przyjaznym charakterze. Idealna do treści skierowanych do szerokiego odbiorcy.

AaBbCcDdEeFf 0123456789 ąęćłńóśźż
Fira Code Monospace

Kod i dane

Fira Code to czcionka o stałej szerokości z ligaturami programistycznymi. Używana do prezentacji kodu.

AaBbCcDdEeFf 0123456789 => !== ===

Kolory

Paleta kolorów CSS Variables

Kolory podstawowe

Primary #428648
Primary Dark #1D4641
Primary Light #e8f5e9

Skala zieleni

Green 50 #f0fdf4
Green 100 #dcfce7
Green 600 #428648
Green 700 #1D4641

Skala szarości

Gray 50 #f9fafb
Gray 100 #f3f4f6
Gray 200 #e5e7eb
Gray 300 #d1d5db
Gray 400 #9ca3af
Gray 500 #6b7280
Gray 600 #4b5563
Gray 700 #374151
Gray 800 #1f2937
Gray 900 #111827

Typografia

Skala wielkości tekstu i stylów

Nagłówki

H1 / 2.5rem

Nagłówek H1

H2 / 2rem

Nagłówek H2

H3 / 1.5rem

Nagłówek H3

H4 / 1.25rem

Nagłówek H4

H5 / 1rem
Nagłówek H5
H6 / 0.875rem
Nagłówek H6

Tekst

XL / 1.25rem

Tekst XL

LG / 1.125rem

Tekst LG

Base / 1rem

Tekst bazowy

SM / 0.875rem

Tekst SM

XS / 0.75rem

Tekst XS

Wagi czcionki

400 Regular

Przykładowy tekst

500 Medium

Przykładowy tekst

600 Semibold

Przykładowy tekst

700 Bold

Przykładowy tekst

Odstępy (Spacing)

0.25rem (4px)
0.5rem (8px)
0.75rem (12px)
1rem (16px)
1.5rem (24px)
2rem (32px)
3rem (48px)
4rem (64px)

Elementy UI

Komponenty interfejsu użytkownika

Przyciski

Odznaki (Badges)

Primary Gray Success

Alerty

Info: To jest komunikat informacyjny.
Sukces: Operacja zakończona pomyślnie.
Uwaga: To jest ostrzeżenie.
Błąd: Wystąpił problem.

Karty

Tytuł karty

To jest przykładowy tekst w karcie. Karty służą do grupowania powiązanych treści.

Inna karta

Karty mogą zawierać różne elementy: tekst, obrazy, przyciski.

Nowe

Karta z odznaką

Można łączyć różne elementy UI w kartach.

Stany ładowania

Spinner

Pulse

Dots

Progress

Skeleton loader: