Kültür Envanteri

Design System

Color tokens, typography scale, buttons, and UI components.

Colors

Brand — Golden/Earth (Primary)

50 #f7f5ef --color-brand-50
100 #ede9d8 --color-brand-100
200 #ddd6bc --color-brand-200
300 #c9b88a --color-brand-300
400 #b09e75 --color-brand-400
500 #958a6b --color-brand-500
600 #8a7f61 --color-brand-600
700 #796d49 --color-brand-700
800 #5c5337 --color-brand-800
900 #3d3724 --color-brand-900

Accent — Blue/Purple (Interactive)

50 #eeeaff --color-accent-50
100 #d5ccff --color-accent-100
200 #b8aaff --color-accent-200
300 #9580ff --color-accent-300
400 #7355ff --color-accent-400
500 #5533ff --color-accent-500
600 #4400fb --color-accent-600
700 #3600d4 --color-accent-700
800 #2800a8 --color-accent-800
900 #19006b --color-accent-900

Neutral — Gray Scale

0 #ffffff --color-neutral-0
50 #f9fafb --color-neutral-50
100 #f3f4f6 --color-neutral-100
200 #e5e7eb --color-neutral-200
300 #d1d5db --color-neutral-300
400 #9ca3af --color-neutral-400
500 #6b7280 --color-neutral-500
600 #4b5563 --color-neutral-600
700 #374151 --color-neutral-700
800 #1f2937 --color-neutral-800
900 #111827 --color-neutral-900
950 #212121 --color-neutral-950

Status

danger #dc3545 --color-danger
success #198754 --color-success
warning #f0ad4e --color-warning
info #0dcaf0 --color-info

Surface (Dark Backgrounds)

dark #1c1917 --color-surface-dark
darker #44403c --color-surface-darker

Semantic Aliases

--color-primary --color-brand-500 (#958a6b) Brand button/accent, default CTA
--color-accent --color-accent-500 (#5533ff) Links, active states, interactive elements
--color-dark --color-neutral-950 (#212121) Dark page backgrounds
--color-light #f8f9fa Light page backgrounds
--color-muted --color-neutral-400 (#9ca3af) Subdued text, placeholder, icons
--color-secondary --color-neutral-500 (#6b7280) Secondary text
--color-border --color-neutral-300 (#d1d5db) Default borders
--ke-primary → --color-brand-500 Backward compat (PHP templates)
--ke-dark → --color-neutral-950 Backward compat
--ke-light → --color-neutral-50 Backward compat

Typography

h1 / 2.75rem

Kültür Envanteri

h2 / 2.3rem

Kültür Envanteri

h3 / 1.6rem

Kültür Envanteri

h4 / 1.25rem

Kültür Envanteri

h5 / 1.1rem
Kültür Envanteri
h6 / 0.9rem
Kültür Envanteri
body / 1.1rem

The quick brown fox jumps over the lazy dog. Türkiye'nin kültürel mirası.

small / 0.875remThe quick brown fox jumps over the lazy dog.

Font Family

--font-sans Inter, sans-serif All UI text
Libre Baskerville Serif editorial face Decorative / hero headings

Buttons

Core Buttons

Specialty Buttons

Hero Button

Haritayı Keşfet Listeye Bak

Wiki Buttons

Components

Badges

Brand Accent Dark Danger Success Warning

Alerts

Hata mesajı örneği.
Başarılı işlem mesajı örneği.
Uyarı mesajı örneği.
Bilgi mesajı örneği.

Card

Görsel Alanı
Kart Başlığı

Kısa açıklama metni buraya gelir.

Nav Pills

Nav Tabs

Form Controls

Bu alan geçersiz.

Search Pills

İstanbul Cami Osmanlı

Background Utilities

Tailwind'in bg-* class'larına karşılık gelen tüm renkler. Her class @theme'den otomatik türetilir.

Semantic — Kısa Kullanım

bg-primary #958a6b Ana buton rengi, CTA alanları
bg-dark #212121 Koyu sayfa arka planları
bg-light #f8f9fa Açık sayfa arka planları
bg-brand #958a6b bg-primary ile aynı, eski şablon uyumu
bg-brand-dark #212121 bg-dark ile aynı, eski şablon uyumu
bg-accent #5533ff Etkileşimli öğeler, vurgu
bg-surface-dark #1c1917 Tooltip, koyu toast arka planı
bg-surface-darker #44403c Koyu zemin üzeri aktif durum
bg-danger #dc3545 Hata durumları
bg-success #198754 Başarı durumları
bg-warning #f0ad4e Uyarı durumları
bg-info #0dcaf0 Bilgi durumları

Brand Scale — bg-brand-{step}

bg-brand-50 #f7f5ef
bg-brand-100 #ede9d8
bg-brand-200 #ddd6bc
bg-brand-300 #c9b88a
bg-brand-400 #b09e75
bg-brand-500 #958a6b
bg-brand-600 #8a7f61
bg-brand-700 #796d49
bg-brand-800 #5c5337
bg-brand-900 #3d3724

Accent Scale — bg-accent-{step}

bg-accent-50 #eeeaff
bg-accent-100 #d5ccff
bg-accent-200 #b8aaff
bg-accent-300 #9580ff
bg-accent-400 #7355ff
bg-accent-500 #5533ff
bg-accent-600 #4400fb
bg-accent-700 #3600d4
bg-accent-800 #2800a8
bg-accent-900 #19006b

Neutral Scale — bg-neutral-{step}

bg-neutral-0 #ffffff
bg-neutral-50 #f9fafb
bg-neutral-100 #f3f4f6
bg-neutral-200 #e5e7eb
bg-neutral-300 #d1d5db
bg-neutral-400 #9ca3af
bg-neutral-500 #6b7280
bg-neutral-600 #4b5563
bg-neutral-700 #374151
bg-neutral-800 #1f2937
bg-neutral-900 #111827
bg-neutral-950 #212121

Misc Tokens

--ke-radius 0.5rem Default border radius
--shadow-lg-hard -4px 4px 20px 0px rgb(0 0 0 / 40%) Hard directional shadow (map controls, cards)
--shadow-inset-img inset 0px -15px 30px 2px rgba(0,0,0,0.8) Image overlay gradient

Icons

Phosphor Icons web font — ph ph-{name} class ile kullanılır. Weight varyantları: ph-bold, ph-fill, ph-light.

Navigation & Arrows

ph-arrow-left Geri / önceki gezinme (slider, sayfalama)
ph-arrow-right İleri / sonraki gezinme (slider, bağlantılar)
ph-arrow-up-right Çapraz yönlendirme (hero bağlantıları)
ph-arrow-circle-up-right Yer kutusundan haritada göster
ph-arrow-circle-down-left Haritadan yer sayfasına git
ph-arrow-square-out Harici bağlantı — yeni sekmede aç
ph-arrow-bend-up-left Yorum yanıtla
ph-arrow-clockwise Yenile / tekrar dene (wiki)
ph-caret-left Küçük geri oku (explorer panel)
ph-caret-right Küçük ileri oku (explorer panel)
ph-caret-down Aşağı aç / genişlet (dropdown)
ph-arrows-out Tam ekrana genişlet (galeri)

Maps & Location

ph-map Harita görünümü (hero buton, intro)
ph-map-pin Yer konumu işaretleyicisi (arama hapı, bağlam menüsü)
ph-map-trifold Harita ile ilgili içerik / liste özelliği
ph-compass-tool Taksonomi keşfi, kategori navigasyonu

UI Controls

ph-x Kapat / iptal et (modal, filtre)
ph-x-circle Toast bildirimi kapat
ph-plus Listeye öğe ekle (ke-list)
ph-plus-circle Bağlam menüsüyle yeni yer ekle
ph-stack Katman görünümü / kaynak koleksiyonu
ph-list Liste görünümü (header, hero buton)
ph-list-bullets Madde işaretli liste / alt menü
ph-grid-four Izgara görünümü (sub-menu)
ph-sliders-horizontal Filtreler / ayarlar paneli (sub-menu)
ph-share-network Paylaş (yer, kaynak, wiki)
ph-traffic-sign Yer türü göstergesi / yön işareti (geocoder)
ph-dot-outline Revizyon zaman çizelgesi noktası

User & Profile

ph-user Kullanıcı profili (modal header, meta)
ph-envelope E-posta alanı (profil düzenle)
ph-at Kullanıcı adı / sosyal medya kullanıcı adı
ph-pencil Wiki düzenle (ikon buton)
ph-pencil-simple Düzenle eylemi (yazar sayfası, bağlam menüsü)
ph-sign-out Oturumu kapat (modal header)
ph-lock Şifre alanı (giriş, profil)
ph-gear Profil ayarları bağlantısı
ph-eye Şifreyi göster/gizle (login modal)

Social Media

ph-x-logo X (Twitter) sosyal bağlantı
ph-telegram-logo Telegram sosyal bağlantı
ph-instagram-logo Instagram sosyal bağlantı
ph-github-logo GitHub bağlantısı (footer)
ph-youtube-logo YouTube bağlantısı (footer)
ph-globe Dil seçici / web sitesi / genel URL

Content & Media

ph-file Dosya / kaynak belgesi
ph-image Görsel / fotoğraf yer tutucusu (arama sonuçları)
ph-calendar Tarih etiketi (arama hapı)
ph-calendar-blank Post tarihi meta verisi (yazar sayfası)
ph-chat-circle Yorumlar bölümü (yer sayfası)
ph-book-open Makale / okuma içeriği (home)
ph-article Kullanıcı biyografi alanı (profil düzenle)
ph-upload-simple Wikimedia'ya yükle
ph-cloud-slash Çevrimdışı / bağlantı yok durumu (wiki)

Status & Feedback

ph-info Bilgi / açıklama notu (fotoğraf başlığı, home)
ph-warning Uyarı durumu (wiki modal)
ph-check-circle Başarı onayı (ke-list)
ph-heart Yer favorile (ke-list)
ph-bookmark-simple Yer işareti ekle (ke-list özelliği)
ph-trash Yer işaretini sil (ke-list)
ph-trend-up Trend / popüler içerik (modal header)
ph-clock-clockwise Revizyon geçmişi (yer sayfası)
ph-clock-counter-clockwise Son arama geçmişi (arama modal)