vibeeval 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