Distile · Design System
Component Library
Distile brand system v1.0 — Onlipr ile aynı Stripe-grade disiplin, farklı kimlik: mor primary, pale sarı accent, Titillium Web tipografi.
1 · Renk Paleti
--p (primary)
#600072
--p-deep
#4d005c
--p-soft
#f7eaf9
--y (accent)
#eeee22
--y-soft
#fcfcd2
--ink
#1d1d1d
--surface-2
#f6f6f5
--border
#e8e7e3
--ok
#137a3b
--err
#b8261a
2 · Tipografi (Titillium Web)
Eyebrow · Mono · 0.66rem
Page Title · Titillium 1.85rem / 700
Page sub · 0.92rem · ikincil açıklama metni.
Section title — uppercase 0.78rem
Body 1rem · Titillium Web 400 — humanist sans, geniş x-height ile okunabilirlik yüksek. Tabular numerals zorunlu.
3 · Butonlar
Primary = mor (dominant CTA). Accent = pale sarı (highlight moment). İkisi bir arada CTA olarak kullanılmaz.
4 · Form
Public raporlarda görünen ad.
5 · KPI Cards
Toplam Gösterim
1.284K
Δ +18% / 7g
Tıklama (CTR)
3,4%
Δ +0.4 pt
Conversion
2,1%
Δ −0.1 pt
CPL
₺48,2
healthy
ROAS
4,7x
son 7g
Focal KPI üst 3px mor bar — Distile primary brand kullanımı.
6 · Badge
Aktif
Yavaş
Hata
Çalışıyor
Pasif
Pro
Yeni
7 · Data Table
Kampanyalar
| Kampanya | Durum | Gösterim | CTR | Conv | Son Aktivite |
|---|---|---|---|---|---|
|
Bahar Lansman — Meta
|
Aktif | 412.880 | 4,1% | 2,8% | 1 sa önce |
|
Search Brand TR
|
Çalışıyor | 128.402 | 8,2% | 5,1% | 12 dk önce |
|
SEO — Blog hub
|
Yavaş | 48.214 | 1,9% | 0,8% | dün |
|
TikTok Spark Ads
|
Hata | — | — | — | 3 gün önce |
|
Legacy — display
|
Pasif | — | — | — | — |
8 · Toast
Kampanya yayında — 3 grup aktif edildi.
Hedef CPL'e ulaşıldı.
Bağlantı hatası — tekrar dene.
Yeni rapor hazır.
Highlight: ROAS 5x üstüne çıktı.
9 · Sidebar Nav
Active item solunda 3px mor bar — Distile primary kullanımı.
10 · Modal
11 · Public Share Top Bar
