Design System Generator

Input'a gore tutarli design system uret. 3-layer token mimarisi.

Input

Asagidaki bilgileri iste veya cikar:

• Product type: SaaS, e-commerce, blog, dashboard, mobile app
• Industry: Fintech, healthcare, education, developer tools, etc.
• Style preference: Minimal, bold, playful, corporate, dark-first
• Brand colors (varsa): Primary HEX, secondary HEX
• Font preference (varsa): Sans-serif, serif, mono

3-Layer Token Architecture

Layer 1: Primitive Tokens (Ham degerler)

/* Primitive - ASLA direkt kullanilmaz */
--color-blue-50: #eff6ff;
--color-blue-100: #dbeafe;
--color-blue-500: #3b82f6;
--color-blue-600: #2563eb;
--color-blue-700: #1d4ed8;
--color-blue-900: #1e3a5f;

--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-gray-900: #111827;

--color-green-500: #22c55e;
--color-red-500: #ef4444;
--color-yellow-500: #eab308;

Layer 2: Semantic Tokens (Anlam tasiyan)

/* Light mode */
--color-primary: var(--color-blue-600);
--color-primary-hover: var(--color-blue-700);
--color-primary-subtle: var(--color-blue-50);

--color-danger: var(--color-red-500);
--color-success: var(--color-green-500);
--color-warning: var(--color-yellow-500);

--color-text-primary: var(--color-gray-900);
--color-text-secondary: var(--color-gray-500);
--color-text-muted: var(--color-gray-300);

--color-bg-primary: #ffffff;
--color-bg-secondary: var(--color-gray-50);
--color-bg-tertiary: var(--color-gray-100);

--color-border: var(--color-gray-200);
--color-border-strong: var(--color-gray-300);

/* Dark mode */
.dark {
  --color-primary: var(--color-blue-500);
  --color-primary-hover: var(--color-blue-600);
  --color-primary-subtle: var(--color-blue-900);

  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-300);
  --color-text-muted: var(--color-gray-500);

  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: #1a1a2e;
  --color-bg-tertiary: var(--color-gray-700);

  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-500);
}

Layer 3: Component Tokens (Kullanim yeri)

/* Button */
--btn-primary-bg: var(--color-primary);
--btn-primary-hover: var(--color-primary-hover);
--btn-primary-text: #ffffff;
--btn-secondary-bg: transparent;
--btn-secondary-border: var(--color-border-strong);
--btn-danger-bg: var(--color-danger);

/* Input */
--input-bg: var(--color-bg-primary);
--input-border: var(--color-border);
--input-border-focus: var(--color-primary);
--input-text: var(--color-text-primary);
--input-placeholder: var(--color-text-muted);

/* Card */
--card-bg: var(--color-bg-primary);
--card-border: var(--color-border);
--card-shadow: 0 1px 3px rgb(0 0 0 / 0.1);

Typography System

Eleman	Font	Weight	Size	Line Height
Display	Primary	700	3rem (48px)	1.1
H1	Primary	600	2.25rem (36px)	1.2
H2	Primary	600	1.5rem (24px)	1.25
H3	Primary	500	1.25rem (20px)	1.3
Body	Primary	400	1rem (16px)	1.5
Small	Primary	400	0.875rem (14px)	1.4
Caption	Primary	400	0.75rem (12px)	1.3

Font Pairing Onerileri

Industry	Heading	Body	Karakter
SaaS / Tech	Inter	Inter	Temiz, notr
Fintech	DM Sans	DM Sans	Guvenir, profesyonel
Healthcare	Source Sans Pro	Source Sans Pro	Okunabilir, sicak
Education	Nunito	Open Sans	Samimi, erisilebilir
Dev Tools	JetBrains Mono	Inter	Teknik, modern
Luxury	Playfair Display	Lato	Sofistike, zarif

Spacing Scale (4px base)

Token    Value    Use Case
xs       4px      Icon gap, compact badges
sm       8px      Input padding-y, small gaps
md       12px     Button padding-y
base     16px     Card padding, standard gap
lg       24px     Section padding, comfortable gap
xl       32px     Section gap
2xl      48px     Page section gap
3xl      64px     Hero padding

Tailwind Config Ciktisi

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'var(--color-primary)',
          hover: 'var(--color-primary-hover)',
          subtle: 'var(--color-primary-subtle)',
        },
        danger: { DEFAULT: 'var(--color-danger)' },
        success: { DEFAULT: 'var(--color-success)' },
        warning: { DEFAULT: 'var(--color-warning)' },
        surface: {
          DEFAULT: 'var(--color-bg-primary)',
          secondary: 'var(--color-bg-secondary)',
          tertiary: 'var(--color-bg-tertiary)',
        },
      },
      borderColor: {
        DEFAULT: 'var(--color-border)',
        strong: 'var(--color-border-strong)',
      },
      textColor: {
        primary: 'var(--color-text-primary)',
        secondary: 'var(--color-text-secondary)',
        muted: 'var(--color-text-muted)',
      },
    },
  },
} satisfies Config

Checklist

• Primitive token'lar tanimli
• Semantic token'lar tanimli (light + dark)
• Component token'lar tanimli
• Typography scale tanimli
• Spacing scale tanimli
• Tailwind config uretildi
• Kontrast oranlar kontrol edildi (min 4.5:1)
• Dark mode token'lari dogru