Generator tokenów projektowych
Tworzenie koloru semantycznego, odstępów, promienia i symboli typograficznych z podglądem komponentów na żywo. Eksport CSS właściwości niestandardowe lub JSON, wolny bez SI.
Znaczniki projektu
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}Tekst eksportu pozostaje po angielsku; wpisane dane nie są zmieniane.
Nie ma rejestracji. Żadnych kredytów na sztuczną inteligencję. Narzędzie to przypomina wyjście w przeglądarce.
Od pomysłu do czegoś pożytecznego.
- 01
Ustaw swoje semantyczne kolory i wartości bazowe.
- 02
Sprawdzić żywą próbkę i wytworzyć skalę odstępów.
- 03
Kopiuj CSS zmienne lub eksportuj dopasowanie JSON wartości.
Trochę kontekstu.
Znak semantyczny daje powtarzające się decyzje projektowe nazwę. To narzędzie buduje kompaktową paletę i skalę odstępów z wyboru. CSS oraz JSON eksport ma te same wartości. W JSON jest prostym dokumentem symbolu wartości klawiszowej, a nie roszczeniem o zgodność z określonym standardem wymiany symboli.
Dobre pytania.
Czy mogę użyć tego z moim istniejącym tematem?
Tak. Mapa lub zmienić nazwę eksportowanych żetonów do konwencji tematu, zamiast zastępowania założonego systemu ślepo.
Czy to tworzy jasne i ciemne motywy?
Eksportuje jedną paletę na raz. Tworzenie i pobieranie każdej palety oddzielnie i przegląd kontrastu w każdym trybie.