Design Token Generator

protect filer gratis online. 100% lokalt i webbläsaren. Ingen uppladdning, full integritet, ingen registrering.

Free
No Signup
No Daily Limit
Browser-Based
No Server Upload
Fast Processing
Works on Mobile

colors

50: #f1f2fd
100: #e4e4fc
200: #bfc0f8
300: #9596f4
400: #6062f1
500: #6366f1

spacing

0: 0
1: 0.25rem
2: 0.5rem
3: 0.75rem
4: 1rem
5: 1.25rem

radius

none: 0
sm: 0.125rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
2xl: 1rem

shadow

soft: 0px 1px 2px 0px rgba(15, 23, 42, 0.06), 0px 1px 3px 0px rgba(15, 23, 42, 0.1)
medium: 0px 4px 6px -1px rgba(15, 23, 42, 0.1), 0px 2px 4px -2px rgba(15, 23, 42, 0.1)
strong: 0px 10px 15px -3px rgba(15, 23, 42, 0.15), 0px 4px 6px -4px rgba(15, 23, 42, 0.1)
glass: 0px 8px 32px 0px rgba(15, 23, 42, 0.12), 0px 1px 0px 0px rgba(255, 255, 255, 0.4)

typography

h1: 2.441rem
h2: 1.953rem
h3: 1.563rem
h4: 1.250rem
body: 1.000rem
small: 0.800rem

Eingabe-JSON

Ausgabetext

:root {
  --color-50: #f1f2fd;
  --color-100: #e4e4fc;
  --color-200: #bfc0f8;
  --color-300: #9596f4;
  --color-400: #6062f1;
  --color-500: #6366f1;
  --color-600: #191ccd;
  --color-700: #15189d;
  --color-800: #11126f;
  --color-900: #0b0c41;
  --color-950: #08082b;
  --color-primary: #6366f1;
  --color-secondary: #a96de9;
  --color-accent: #f6f360;
  --color-background: #f3f3fe;
  --color-surface: #e6e7fd;
  --color-text: #0f172a;
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  --shadow-soft: 0px 1px 2px 0px rgba(15, 23, 42, 0.06), 0px 1px 3px 0px rgba(15, 23, 42, 0.1);
  --shadow-medium: 0px 4px 6px -1px rgba(15, 23, 42, 0.1), 0px 2px 4px -2px rgba(15, 23, 42, 0.1);
  --shadow-strong: 0px 10px 15px -3px rgba(15, 23, 42, 0.15), 0px 4px 6px -4px rgba(15, 23, 42, 0.1);
  --shadow-glass: 0px 8px 32px 0px rgba(15, 23, 42, 0.12), 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
  --font-size-h1: 2.441rem;
  --font-size-h2: 1.953rem;
  --font-size-h3: 1.563rem;
  --font-size-h4: 1.250rem;
  --font-size-body: 1.000rem;
  --font-size-small: 0.800rem;
}

Related dev tools

CSS variables

Dieses Tool bewerten

4.8/52,074 Bewertungen

Empfohlene ergänzende Tools

Lämna en kommentar

Så här använder du: design-token-generator

Dra filer till uppladdningsytan eller klicka för att välja. Justera alternativ och klicka på „design-token-generator“. Nedladdningen startar automatiskt — utan konto eller installation.

All bearbetning sker lokalt i webbläsaren — dina filer laddas inte upp till en server.

Varför SnapKit? 100% privat, ingen serveruppladdning, direkt i webbläsaren och utan filstorleksgräns. Dina filer stannar på enheten.

Varför SnapKit? 100% privat, ingen serveruppladdning, direkt i webbläsaren och utan storleksgräns. Dina filer stannar på enheten.

When should you use this tool?

protect filer gratis online. 100% lokalt i webbläsaren. Ingen uppladdning, full integritet, ingen registrering.

Is my data uploaded to the server?

No. SnapKit processes your files entirely in your browser using client-side WebAssembly, Canvas, and Web APIs. Your documents, images, and audio never leave your device, and we do not store uploads on our servers.

Warum SnapKit?

Vier Versprechen: Datenschutz, Geschwindigkeit, Freiheit und Zugang.

100% privat — ohne Upload
WebAssembly und Canvas auf Ihrem Gerät. Keine Bytes an Server.
Sofort im Browser
Keine Netzwerk-Wartezeit. CPU/GPU lokal.
Keine Größenbegrenzung — kostenlos
Kein Wasserzeichen, kein Konto.
Auf jedem Gerät
iPhone, Android, Windows und Mac.

Vanliga frågor

Är design-token-generator online säkert?

Ja. Filer bearbetas client-side i webbläsaren. Inget laddas upp till en server.

Är design-token-generator gratis utan vattenstämpel?

Ja. Helt gratis, utan vattenstämpel, konto eller användningsgränser.

Fungerar design-token-generator på mobil och surfplatta?

Ja. Välj filer på mobilen och ladda ner resultatet direkt.

Är mina data säkra med det här verktyget?

Ja. 100% lokal bearbetning med WebAssembly och webbläsar-API:er.

Varför går det så snabbt?

Eftersom filen aldrig lämnar webbläsaren. SnapKit använder WebAssembly och Canvas lokalt.

Design Token Generator

colors

spacing

radius

shadow

typography

Related dev tools

Empfohlene ergänzende Tools

CSS-variabelgenerator

Färgpalettgenerator

Typografiskalagenerator

Box shadow-generator

Tailwind-färggenerator

Kontrastkontroll

Lämna en kommentar

Så här använder du: design-token-generator

When should you use this tool?

Is my data uploaded to the server?

Warum SnapKit?

100% privat — ohne Upload

Sofort im Browser

Keine Größenbegrenzung — kostenlos

Auf jedem Gerät

Vanliga frågor

colors

spacing

radius

shadow

typography

Related dev tools