Generator Tokens de Design

Construiți scale de tokens cu mai multe culori și exportați ca variabile CSS, config Tailwind, SCSS, JSON sau tokens Figma.

Color Scales

brand

100

200

300

400

500

600

700

800

900

950

:root {
  --brand-50: #f7f5ff;
  --brand-100: #ede8fe;
  --brand-200: #dad2fc;
  --brand-300: #beb3fa;
  --brand-400: #998ff6;
  --brand-500: #6366f1;
  --brand-600: #4e52bc;
  --brand-700: #3c408d;
  --brand-800: #2d3269;
  --brand-900: #21264a;
  --brand-950: #191f38;
}

Întrebări Frecvente

Ce sunt tokens de design?

Tokens de design sunt valori de culori cu nume care formează baza unui sistem de design. În loc să hardcodați #6366f1 peste tot, folosiți --primary-500, facilitând actualizarea culorilor.

Pot adăuga mai multe scale de culori?

Da — apăsați 'Adaugă' pentru a adăuga mai multe scale (ex: primary, success, danger, warning). Fiecare primește propria scală de 11 trepte, toate exportate împreună.

Ce este formatul Figma tokens?

Formatul Figma generează o structură JSON compatibilă cu plugin-ul Figma Tokens. Importați-l pentru a sincroniza tokens direct în Figma.