✦ 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.

SaaS Mavi

☀️

Kurumsal yazılımın varsayılanı: güven veren mavi, nötr gri zemin, turuncu eylem rengi.

#saas

CSS değişkenleri

:root {
  --primary: #3B82F6;
  --secondary: #60A5FA;
  --cta: #F97316;
  --background: #F8FAFC;
  --surface: #FFFFFF;
  --text: #1E293B;
  --border: #E2E8F0;
}

↻ Prompt

SaaS Mavi

Use this light color system (SaaS):

--primary:    #3B82F6
--secondary:  #60A5FA
--cta:        #F97316
--background: #F8FAFC
--surface:    #FFFFFF
--text:       #1E293B
--border:     #E2E8F0

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

SaaS Koyu

🌙

Gece çalışan ekipler için: derin lacivert yüzeyler, parlak mavi vurgu.

#saas

CSS değişkenleri

:root {
  --primary: #60A5FA;
  --secondary: #93C5FD;
  --cta: #FB923C;
  --background: #0B1120;
  --surface: #151E32;
  --text: #E2E8F0;
  --border: #243049;
}

↻ Prompt

SaaS Koyu

Use this dark color system (SaaS):

--primary:    #60A5FA
--secondary:  #93C5FD
--cta:        #FB923C
--background: #0B1120
--surface:    #151E32
--text:       #E2E8F0
--border:     #243049

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Fintech Güven

☀️

Para söz konusuysa koyu lacivert ve yeşil: istikrar ve artış çağrışımı.

#fintech

CSS değişkenleri

:root {
  --primary: #0F3D5C;
  --secondary: #1C6E8C;
  --cta: #00A878;
  --background: #F7F9FB;
  --surface: #FFFFFF;
  --text: #0B2233;
  --border: #DEE7ED;
}

↻ Prompt

Fintech Güven

Use this light color system (Fintech):

--primary:    #0F3D5C
--secondary:  #1C6E8C
--cta:        #00A878
--background: #F7F9FB
--surface:    #FFFFFF
--text:       #0B2233
--border:     #DEE7ED

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Kripto Neon

🌙

Saf siyah zeminde neon yeşil ve mor: grafik ağırlıklı panolar için.

#kripto

CSS değişkenleri

:root {
  --primary: #00E28A;
  --secondary: #7C5CFF;
  --cta: #FFB020;
  --background: #050507;
  --surface: #0F1014;
  --text: #E9EAF0;
  --border: #1D1F27;
}

↻ Prompt

Kripto Neon

Use this dark color system (Kripto):

--primary:    #00E28A
--secondary:  #7C5CFF
--cta:        #FFB020
--background: #050507
--surface:    #0F1014
--text:       #E9EAF0
--border:     #1D1F27

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Sağlık Sakin

☀️

Klinik ama soğuk olmayan: yumuşak turkuaz, geniş beyaz alan, yüksek okunabilirlik.

#sağlık

CSS değişkenleri

:root {
  --primary: #0E7C86;
  --secondary: #5FBDB0;
  --cta: #FF6B57;
  --background: #F6FBFB;
  --surface: #FFFFFF;
  --text: #12333A;
  --border: #DAECEC;
}

↻ Prompt

Sağlık Sakin

Use this light color system (Sağlık):

--primary:    #0E7C86
--secondary:  #5FBDB0
--cta:        #FF6B57
--background: #F6FBFB
--surface:    #FFFFFF
--text:       #12333A
--border:     #DAECEC

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

E-ticaret Sıcak

☀️

Ürün fotoğrafını öne çıkaran nötr zemin, satın alma düğmesi için doygun kırmızı.

#e-ticaret

CSS değişkenleri

:root {
  --primary: #B4232A;
  --secondary: #E4574C;
  --cta: #F5A524;
  --background: #FFFCF8;
  --surface: #FFFFFF;
  --text: #2A1D18;
  --border: #EFE4D8;
}

↻ Prompt

E-ticaret Sıcak

Use this light color system (E-ticaret):

--primary:    #B4232A
--secondary:  #E4574C
--cta:        #F5A524
--background: #FFFCF8
--surface:    #FFFFFF
--text:       #2A1D18
--border:     #EFE4D8

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Lüks Koyu

🌙

Az renk, çok boşluk: kömür siyahı üstünde altın vurgu. Premium vitrinler için.

#e-ticaret

CSS değişkenleri

:root {
  --primary: #C9A227;
  --secondary: #E8D48B;
  --cta: #FFFFFF;
  --background: #0C0B09;
  --surface: #161410;
  --text: #EFEAE0;
  --border: #2A2620;
}

↻ Prompt

Lüks Koyu

Use this dark color system (E-ticaret):

--primary:    #C9A227
--secondary:  #E8D48B
--cta:        #FFFFFF
--background: #0C0B09
--surface:    #161410
--text:       #EFEAE0
--border:     #2A2620

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Eğitim Dostu

☀️

Genç kitleye hitap eden canlı mor-sarı ikilisi; ilerleme göstergelerinde okunur.

#eğitim

CSS değişkenleri

:root {
  --primary: #6D5BFF;
  --secondary: #A99BFF;
  --cta: #FFC107;
  --background: #FAF9FF;
  --surface: #FFFFFF;
  --text: #241B4D;
  --border: #E6E2FA;
}

↻ Prompt

Eğitim Dostu

Use this light color system (Eğitim):

--primary:    #6D5BFF
--secondary:  #A99BFF
--cta:        #FFC107
--background: #FAF9FF
--surface:    #FFFFFF
--text:       #241B4D
--border:     #E6E2FA

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Geliştirici Araçları

🌙

Kod editörü estetiği: nötr koyu gri yüzeyler, sözdizimi renkleriyle uyumlu vurgu.

#geliştirici

CSS değişkenleri

:root {
  --primary: #4D9EFF;
  --secondary: #7FD4A0;
  --cta: #FF7B72;
  --background: #0D1117;
  --surface: #161B22;
  --text: #C9D1D9;
  --border: #26303B;
}

↻ Prompt

Geliştirici Araçları

Use this dark color system (Geliştirici):

--primary:    #4D9EFF
--secondary:  #7FD4A0
--cta:        #FF7B72
--background: #0D1117
--surface:    #161B22
--text:       #C9D1D9
--border:     #26303B

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Anthropic Kil

☀️

Anthropic'in kendi paleti: kil turuncusu, fildişi zemin, sıcak nötrler.

#yapay zekâ

CSS değişkenleri

:root {
  --primary: #D97757;
  --secondary: #E8A188;
  --cta: #C25E3E;
  --background: #FAF9F5;
  --surface: #FFFFFF;
  --text: #1F1E1D;
  --border: #E8E4DA;
}

↻ Prompt

Anthropic Kil

Use this light color system (Yapay Zekâ):

--primary:    #D97757
--secondary:  #E8A188
--cta:        #C25E3E
--background: #FAF9F5
--surface:    #FFFFFF
--text:       #1F1E1D
--border:     #E8E4DA

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Yapay Zekâ Koyu

🌙

Sohbet arayüzleri için: düşük kontrastlı koyu yüzeyler, tek sıcak vurgu.

#yapay zekâ

CSS değişkenleri

:root {
  --primary: #E29175;
  --secondary: #8B7BFF;
  --cta: #D97757;
  --background: #141312;
  --surface: #1F1E1D;
  --text: #F0EEE6;
  --border: #34322E;
}

↻ Prompt

Yapay Zekâ Koyu

Use this dark color system (Yapay Zekâ):

--primary:    #E29175
--secondary:  #8B7BFF
--cta:        #D97757
--background: #141312
--surface:    #1F1E1D
--text:       #F0EEE6
--border:     #34322E

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Yemek İştah

☀️

İştah açan sıcak tonlar: domates kırmızısı, hardal sarısı, krem zemin.

#yemek

CSS değişkenleri

:root {
  --primary: #D6453D;
  --secondary: #F2994A;
  --cta: #2E9E5B;
  --background: #FFF9F2;
  --surface: #FFFFFF;
  --text: #33201B;
  --border: #F0E1D2;
}

↻ Prompt

Yemek İştah

Use this light color system (Yemek):

--primary:    #D6453D
--secondary:  #F2994A
--cta:        #2E9E5B
--background: #FFF9F2
--surface:    #FFFFFF
--text:       #33201B
--border:     #F0E1D2

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Seyahat Ufuk

☀️

Gökyüzü mavisi ve kum tonu; fotoğraf ağırlıklı sayfalarda arka planda kalır.

#seyahat

CSS değişkenleri

:root {
  --primary: #0284C7;
  --secondary: #7DD3FC;
  --cta: #F59E0B;
  --background: #F7FBFE;
  --surface: #FFFFFF;
  --text: #0C2B3A;
  --border: #DCEAF3;
}

↻ Prompt

Seyahat Ufuk

Use this light color system (Seyahat):

--primary:    #0284C7
--secondary:  #7DD3FC
--cta:        #F59E0B
--background: #F7FBFE
--surface:    #FFFFFF
--text:       #0C2B3A
--border:     #DCEAF3

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Emlak Sağlam

☀️

Koyu yeşil ve taş grisi: kalıcılık ve değer çağrışımı.

#emlak

CSS değişkenleri

:root {
  --primary: #14532D;
  --secondary: #4D7C5A;
  --cta: #B45309;
  --background: #F8F9F7;
  --surface: #FFFFFF;
  --text: #1A2420;
  --border: #E1E6E1;
}

↻ Prompt

Emlak Sağlam

Use this light color system (Emlak):

--primary:    #14532D
--secondary:  #4D7C5A
--cta:        #B45309
--background: #F8F9F7
--surface:    #FFFFFF
--text:       #1A2420
--border:     #E1E6E1

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Oyun Arena

🌙

Yüksek doygunluk, mor-camgöbeği kontrastı; skor ve seviye göstergeleri için.

#oyun

CSS değişkenleri

:root {
  --primary: #A855F7;
  --secondary: #22D3EE;
  --cta: #F43F5E;
  --background: #0A0A12;
  --surface: #14141F;
  --text: #E8E8F5;
  --border: #242438;
}

↻ Prompt

Oyun Arena

Use this dark color system (Oyun):

--primary:    #A855F7
--secondary:  #22D3EE
--cta:        #F43F5E
--background: #0A0A12
--surface:    #14141F
--text:       #E8E8F5
--border:     #242438

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Spor Enerji

🌙

Siyah zeminde limon yeşili: hareket ve performans vurgusu.

#spor

CSS değişkenleri

:root {
  --primary: #BEF264;
  --secondary: #84CC16;
  --cta: #F97316;
  --background: #0B0C0A;
  --surface: #15171280;
  --text: #ECEFE6;
  --border: #242719;
}

↻ Prompt

Spor Enerji

Use this dark color system (Spor):

--primary:    #BEF264
--secondary:  #84CC16
--cta:        #F97316
--background: #0B0C0A
--surface:    #15171280
--text:       #ECEFE6
--border:     #242719

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Güzellik Yumuşak

☀️

Pudra pembesi ve şampanya; ince tipografiyle birlikte kullanılır.

#güzellik

CSS değişkenleri

:root {
  --primary: #C77D8E;
  --secondary: #EAC4CE;
  --cta: #8C5A6B;
  --background: #FEF9FA;
  --surface: #FFFFFF;
  --text: #3B252C;
  --border: #F2E3E7;
}

↻ Prompt

Güzellik Yumuşak

Use this light color system (Güzellik):

--primary:    #C77D8E
--secondary:  #EAC4CE
--cta:        #8C5A6B
--background: #FEF9FA
--surface:    #FFFFFF
--text:       #3B252C
--border:     #F2E3E7

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Hukuk Resmî

☀️

Lacivert ve bordo: kurumsal ciddiyet, serif başlıklarla eşleşir.

#hukuk

CSS değişkenleri

:root {
  --primary: #1E3A5F;
  --secondary: #456B95;
  --cta: #8C1C2B;
  --background: #FAFAF8;
  --surface: #FFFFFF;
  --text: #1A2333;
  --border: #E3E5E9;
}

↻ Prompt

Hukuk Resmî

Use this light color system (Hukuk):

--primary:    #1E3A5F
--secondary:  #456B95
--cta:        #8C1C2B
--background: #FAFAF8
--surface:    #FFFFFF
--text:       #1A2333
--border:     #E3E5E9

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Yaratıcı Cesur

☀️

Portfolyo işleri için çarpıcı ikili: elektrik moru ve asit sarısı.

#yaratıcı

CSS değişkenleri

:root {
  --primary: #5B21B6;
  --secondary: #C4B5FD;
  --cta: #EAB308;
  --background: #FDFDFB;
  --surface: #FFFFFF;
  --text: #1B1035;
  --border: #E7E4F2;
}

↻ Prompt

Yaratıcı Cesur

Use this light color system (Yaratıcı):

--primary:    #5B21B6
--secondary:  #C4B5FD
--cta:        #EAB308
--background: #FDFDFB
--surface:    #FFFFFF
--text:       #1B1035
--border:     #E7E4F2

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Sivil Toplum Toprak

☀️

Toprak tonları ve yaprak yeşili: samimiyet ve sürdürülebilirlik.

#stk

CSS değişkenleri

:root {
  --primary: #4D7C0F;
  --secondary: #A3B18A;
  --cta: #D97706;
  --background: #FBFAF6;
  --surface: #FFFFFF;
  --text: #26301C;
  --border: #E6E7DC;
}

↻ Prompt

Sivil Toplum Toprak

Use this light color system (STK):

--primary:    #4D7C0F
--secondary:  #A3B18A
--cta:        #D97706
--background: #FBFAF6
--surface:    #FFFFFF
--text:       #26301C
--border:     #E6E7DC

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Analitik Nötr

☀️

Grafiklerin rengini bozmayan nötr arayüz; veri renkleri tek vurgu kaynağı.

#veri

CSS değişkenleri

:root {
  --primary: #334155;
  --secondary: #64748B;
  --cta: #2563EB;
  --background: #FBFCFD;
  --surface: #FFFFFF;
  --text: #0F172A;
  --border: #E4E9EF;
}

↻ Prompt

Analitik Nötr

Use this light color system (Veri):

--primary:    #334155
--secondary:  #64748B
--cta:        #2563EB
--background: #FBFCFD
--surface:    #FFFFFF
--text:       #0F172A
--border:     #E4E9EF

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Analitik Koyu

🌙

Pano ekranları için: düşük parlaklıkta yüzeyler, veri renkleri öne çıksın.

#veri

CSS değişkenleri

:root {
  --primary: #94A3B8;
  --secondary: #CBD5E1;
  --cta: #38BDF8;
  --background: #0B0F17;
  --surface: #141A25;
  --text: #DDE3EC;
  --border: #222A38;
}

↻ Prompt

Analitik Koyu

Use this dark color system (Veri):

--primary:    #94A3B8
--secondary:  #CBD5E1
--cta:        #38BDF8
--background: #0B0F17
--surface:    #141A25
--text:       #DDE3EC
--border:     #222A38

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Müzik Canlı

🌙

Kapak görselleriyle yarışmayan koyu zemin, tek parlak vurgu.

#müzik

CSS değişkenleri

:root {
  --primary: #1DB954;
  --secondary: #1ED760;
  --cta: #FF3B6B;
  --background: #0A0A0A;
  --surface: #151515;
  --text: #E8E8E8;
  --border: #232323;
}

↻ Prompt

Müzik Canlı

Use this dark color system (Müzik):

--primary:    #1DB954
--secondary:  #1ED760
--cta:        #FF3B6B
--background: #0A0A0A
--surface:    #151515
--text:       #E8E8E8
--border:     #232323

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

Kurumsal Nötr

☀️

Marka rengi belli değilken güvenli başlangıç: gri skala + tek mavi vurgu.

#kurumsal

CSS değişkenleri

:root {
  --primary: #475569;
  --secondary: #94A3B8;
  --cta: #0EA5E9;
  --background: #FFFFFF;
  --surface: #F8FAFC;
  --text: #111827;
  --border: #E5E7EB;
}

↻ Prompt

Kurumsal Nötr

Use this light color system (Kurumsal):

--primary:    #475569
--secondary:  #94A3B8
--cta:        #0EA5E9
--background: #FFFFFF
--surface:    #F8FAFC
--text:       #111827
--border:     #E5E7EB

Rules:
- Reserve --cta for the single most important action per screen; never use it for secondary buttons.
- --primary carries links, active states and focus rings.
- Every surface sits on --background and is separated by --border, not by shadow alone.
- Define these as CSS custom properties on :root and reference them everywhere — no hardcoded hex in components.

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