✦ Arayüz

Arayüz & Tasarım

Claude'a arayüz yaptırırken elinin altında olması gereken referanslar: stiller canlı örnekle, paletler kopyalanabilir kodla, font eşleşmeleri gerçek yazıyla.

8Uçtan Uca Sistem 20UI Stili 24Renk Paleti 20Font Eşleşmesi 12Sayfa Düzeni 12Grafik Türü 15UX Kuralı

Karta tıkla, arkasındaki hazır prompt'u kopyala.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Space Grotesk + Inter

Teknoloji

Geometrik başlık, nötr gövde. SaaS ve geliştirici ürünlerinin varsayılan ikilisi.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Space Grotesk', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Space Grotesk + Inter

Use this font pairing: Space Grotesk for headings, Inter for body text.

Load from Google Fonts (Space Grotesk, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Space Grotesk', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Playfair Display + Source Sans 3

Editoryal

Yüksek kontrastlı serif başlık, sakin gövde. Dergi ve uzun okuma için.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Playfair Display', 'sans-serif'],
  body: ['Source Sans 3', 'sans-serif'],
}

↻ Prompt

Playfair Display + Source Sans 3

Use this font pairing: Playfair Display for headings, Source Sans 3 for body text.

Load from Google Fonts (Playfair Display, Source Sans 3) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Playfair Display', 'sans-serif'],
  body: ['Source Sans 3', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

DM Serif Display + DM Sans

Zarif

Aynı aileden serif-sans ikilisi; uyum kendiliğinden gelir.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['DM Serif Display', 'sans-serif'],
  body: ['DM Sans', 'sans-serif'],
}

↻ Prompt

DM Serif Display + DM Sans

Use this font pairing: DM Serif Display for headings, DM Sans for body text.

Load from Google Fonts (DM Serif Display, DM Sans) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['DM Serif Display', 'sans-serif'],
  body: ['DM Sans', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Fredoka + Nunito

Eğlenceli

Yuvarlak hatlar, çocuk ve evcil hayvan ürünlerinde sıcak durur.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Fredoka', 'sans-serif'],
  body: ['Nunito', 'sans-serif'],
}

↻ Prompt

Fredoka + Nunito

Use this font pairing: Fredoka for headings, Nunito for body text.

Load from Google Fonts (Fredoka, Nunito) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Fredoka', 'sans-serif'],
  body: ['Nunito', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Outfit + Work Sans

Modern

Geniş başlık, dengeli gövde. Ajans ve portfolyo sitelerinde iyi çalışır.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Outfit', 'sans-serif'],
  body: ['Work Sans', 'sans-serif'],
}

↻ Prompt

Outfit + Work Sans

Use this font pairing: Outfit for headings, Work Sans for body text.

Load from Google Fonts (Outfit, Work Sans) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Outfit', 'sans-serif'],
  body: ['Work Sans', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

IBM Plex Sans + IBM Plex Serif

Kurumsal

Mühendislik kokan nötr aile; teknik dokümantasyonda güven verir.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['IBM Plex Sans', 'sans-serif'],
  body: ['IBM Plex Serif', 'sans-serif'],
}

↻ Prompt

IBM Plex Sans + IBM Plex Serif

Use this font pairing: IBM Plex Sans for headings, IBM Plex Serif for body text.

Load from Google Fonts (IBM Plex Sans, IBM Plex Serif) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['IBM Plex Sans', 'sans-serif'],
  body: ['IBM Plex Serif', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Bebas Neue + Roboto

Etkili

Sıkışık büyük harf başlık; spor ve etkinlik sayfalarında dikkat çeker.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Bebas Neue', 'sans-serif'],
  body: ['Roboto', 'sans-serif'],
}

↻ Prompt

Bebas Neue + Roboto

Use this font pairing: Bebas Neue for headings, Roboto for body text.

Load from Google Fonts (Bebas Neue, Roboto) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Bebas Neue', 'sans-serif'],
  body: ['Roboto', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Lora + Lato

Klasik

Yumuşak serif başlık, hafif gövde. Blog ve kişisel siteler için.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Lora', 'sans-serif'],
  body: ['Lato', 'sans-serif'],
}

↻ Prompt

Lora + Lato

Use this font pairing: Lora for headings, Lato for body text.

Load from Google Fonts (Lora, Lato) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Lora', 'sans-serif'],
  body: ['Lato', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Manrope + Manrope

Minimal

Tek aile, iki ağırlık. En az karar veren ve en zor bozulan seçim.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Manrope', 'sans-serif'],
  body: ['Manrope', 'sans-serif'],
}

↻ Prompt

Manrope + Manrope

Use this font pairing: Manrope for headings, Manrope for body text.

Load from Google Fonts (Manrope) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Manrope', 'sans-serif'],
  body: ['Manrope', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Syne + Inter

Yaratıcı

Sıra dışı harf formları; tasarım stüdyoları ve sanat projelerinde.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Syne', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Syne + Inter

Use this font pairing: Syne for headings, Inter for body text.

Load from Google Fonts (Syne, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Syne', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Sora + Inter

Ürün

Yapay zekâ ve veri ürünlerinde sık tercih edilen serin geometrik başlık.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Sora', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Sora + Inter

Use this font pairing: Sora for headings, Inter for body text.

Load from Google Fonts (Sora, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Sora', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Cormorant Garamond + Montserrat

Lüks

İnce, uzun serif başlık; moda ve güzellik markalarında.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Cormorant Garamond', 'sans-serif'],
  body: ['Montserrat', 'sans-serif'],
}

↻ Prompt

Cormorant Garamond + Montserrat

Use this font pairing: Cormorant Garamond for headings, Montserrat for body text.

Load from Google Fonts (Cormorant Garamond, Montserrat) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Cormorant Garamond', 'sans-serif'],
  body: ['Montserrat', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Archivo + Libre Franklin

Haber

Gazete başlığı hissi; yoğun bilgi taşıyan sayfalarda okunur.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Archivo', 'sans-serif'],
  body: ['Libre Franklin', 'sans-serif'],
}

↻ Prompt

Archivo + Libre Franklin

Use this font pairing: Archivo for headings, Libre Franklin for body text.

Load from Google Fonts (Archivo, Libre Franklin) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Archivo', 'sans-serif'],
  body: ['Libre Franklin', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Poppins + Open Sans

Dostane

Geometrik ve yuvarlak başlık; kurumsal olmayan, ulaşılabilir bir ton.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Poppins', 'sans-serif'],
  body: ['Open Sans', 'sans-serif'],
}

↻ Prompt

Poppins + Open Sans

Use this font pairing: Poppins for headings, Open Sans for body text.

Load from Google Fonts (Poppins, Open Sans) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Poppins', 'sans-serif'],
  body: ['Open Sans', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

JetBrains Mono + Inter

Geliştirici

Monospace başlık terminal hissi verir; geliştirici araçlarında kimlik kurar.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['JetBrains Mono', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

JetBrains Mono + Inter

Use this font pairing: JetBrains Mono for headings, Inter for body text.

Load from Google Fonts (JetBrains Mono, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['JetBrains Mono', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Figtree + Figtree

Temiz

Yumuşak geometrik tek aile; ürün arayüzlerinde her ölçekte okunur.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Figtree', 'sans-serif'],
  body: ['Figtree', 'sans-serif'],
}

↻ Prompt

Figtree + Figtree

Use this font pairing: Figtree for headings, Figtree for body text.

Load from Google Fonts (Figtree) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Figtree', 'sans-serif'],
  body: ['Figtree', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Crimson Pro + Inter

Akademik

Kitap serifi başlık, ekran serifi gövde; araştırma ve doküman siteleri.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Crimson Pro', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Crimson Pro + Inter

Use this font pairing: Crimson Pro for headings, Inter for body text.

Load from Google Fonts (Crimson Pro, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Crimson Pro', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Unbounded + Inter

Cesur

Geniş ve iddialı başlık; kampanya sayfalarında tek başına yeter.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Unbounded', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Unbounded + Inter

Use this font pairing: Unbounded for headings, Inter for body text.

Load from Google Fonts (Unbounded, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Unbounded', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Instrument Serif + Inter

Şık

İtalik serif başlık ile nötr gövde: 2020'lerin en çok kopyalanan ikilisi.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Instrument Serif', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

↻ Prompt

Instrument Serif + Inter

Use this font pairing: Instrument Serif for headings, Inter for body text.

Load from Google Fonts (Instrument Serif, Inter) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Instrument Serif', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Merhaba Claude

Arayüzü kurarken başlık ve gövde arasındaki karşıtlık okumayı yönetir. Bu iki aile birlikte dengeli durur.

Chivo + Karla

Sıcak Teknoloji

Sert olmayan grotesk başlık; startup sitelerinde dengeli durur.

Tailwind

// tailwind.config.js
fontFamily: {
  display: ['Chivo', 'sans-serif'],
  body: ['Karla', 'sans-serif'],
}

↻ Prompt

Chivo + Karla

Use this font pairing: Chivo for headings, Karla for body text.

Load from Google Fonts (Chivo, Karla) with display=swap.

tailwind.config.js:
fontFamily: {
  display: ['Chivo', 'sans-serif'],
  body: ['Karla', 'sans-serif'],
}

Rules:
- Headings use the display family at 500-700 weight with tight tracking (-0.02em).
- Body copy stays at 400 weight, line-height 1.6, measure capped around 68 characters.
- Do not introduce a third family; use weight and size for hierarchy instead.

Arayüz işi yapan skill ve subagent'ları arıyorsan: kütüphanedeki UI kaynakları →