kleczewsky.com
enpl
Porozmawiajmy

System

System wizualny

Aktualny przegląd kolorów, typografii, odstępów i komponentów strony. Wartości tokenów są odczytywane bezpośrednio ze strony.

01

Tło

Powierzchnie

Niemal czarne powierzchnie z delikatnym zielonym odcieniem i czerwonym akcentem.

--groundbrak danychtło strony
--panel-sunkbrak danychnajgłębszy panel
--panelbrak danychPanel
--panel-raisedbrak danychwypukły panel

Linie

--rulebrak danychcienka linia
--rule-strongbrak danychwzmocniona linia
--rule-solidbrak danychpełna krawędź
02

Tekst

Odcienie tekstu

Stonowane odcienie szarozielone odróżniają tekst pomocniczy od głównej treści.

--inkbrak danychgłówny
--ink-dimbrak danychpomocniczy
--ink-faintbrak danychdodatkowy, etykiety
03

Akcent

Kolor akcentowy

Czerwień wyróżnia elementy interaktywne, bieżące wartości i etykiety sekcji.

--primarybrak danychdomyślny
--primary-hotbrak danychpo najechaniu
--primary-darkbrak danychpo naciśnięciu

Kolory statusu

Osobne kolory sygnalizują powodzenie, ostrzeżenia i błędy.

--okbrak danychonline, powodzenie
--warningbrak danychostrzeżenie
--errorbrak danychbłąd
04

Typografia

t-heroTeko 600 · clamp 3.5–8.5rem · lh .80 · −.03em
Kleczewsky
t-displayTeko 600 · clamp 2.75–4.5rem · lh .82 · −.03em
W czym mogę pomóc
t-titleSpline Sans 600 · clamp 1.5–2rem · lh 1.05
Laravel na dłużej
t-leadSpline Sans 400 · clamp 1.06–1.25rem · ink-dim
Ludzie · Laravel · Livewire · Filament · React · WebGL
t-bodySpline Sans 400 · 1rem · lh 1.6
Tekst główny ma rozmiar 1 rem, interlinię 1,6 i szerokość do 64 znaków.
t-smallSpline Sans 400 · .875rem
Dodatkowe informacje i podpisy.
t-labelJetBrains Mono 500 · 11px · tracking .14em
03 / Projekty
t-microJetBrains Mono 400 · 10px · tabular · tracking .2em
Status Otwarty na współpracę · Czas lokalny 19:40

Kroje pisma

Teko do dużych nagłówków, Spline Sans do tekstu głównego i JetBrains Mono do etykiet oraz wskaźników.

Teko · nagłówki
Kleczewsky
Spline Sans · tekst główny
Kleczewsky
JetBrains Mono · etykiety
Kleczewsky
05

Odstępy

--s1brak danych
--s2brak danych
--s3brak danych
--s4brak danych
--s5brak danych
--s6brak danych
--s7brak danych
--s8brak danych
--s9brak danych
06

Animacja

Szybkie przejścia z łagodniejszym zakończeniem. Najedź na wiersz, aby zobaczyć czas i przebieg animacji.

--d-instantbrak danychpotwierdzenie stanu
--d-fastbrak danychnajechanie, fokus
--d-basebrak danychpanele, rozwijanie treści
--d-slowbrak danychpojawianie się sekcji
--d-cinebrak danychsekwencja wprowadzająca
07

Komponenty

Przyciski

Wypełniony przycisk wyróżnia główną akcję. Przyciski z obramowaniem służą do działań dodatkowych.

Wskaźniki

Status
Otwarty na współpracę
Czas lokalny
19:40
Grafika
A

Panel i linia

Panel

Półprzezroczysty panel ze znacznikami narożników pozwala zobaczyć scenę w tle.