InstaScope Design System

Semantik renk token'ları, tipografi ölçeği, spacing & radius sistemleri ve yeniden kullanılabilir UI bileşenleri — açık & koyu tema destekli.

Renk paleti · Semantik

Sayfa ve bileşen yüzeyleri

--backgroundSayfa zemini

--foregroundAna metindark fg

--surfaceKart yüzeyi

--surface-hoverHover yüzeyi

--mutedYardımcı yüzey

--muted-foregroundİkincil metindark fg

--border-strongBelirgin kenarlık

Renk paleti · Aksan hueları

Vurgu, chart ve kategori renkleri

--brandMagenta — signaturedark fg

--brand-2Coraldark fg

--brand-3Amber

--violetVioletdark fg

--cyanCyan

--tealTealdark fg

--limeLime

--roseRosedark fg

--oceanOceandark fg

Renk paleti · Durum

Başarı, uyarı, hata, bilgi

--successOlumludark fg

--warningUyarı

--destructiveYıkıcıdark fg

--infoBilgidark fg

Gradyanlar

Hero yüzeyleri ve dekoratif kullanım için

GRADIENT-BRANDmagenta → coral → amber

GRADIENT-AURORAviolet → magenta → amber

GRADIENT-OCEANocean → teal → lime

GRADIENT-SUNSETocean → violet → rose

Tipografi

Instrument Serif (display) + Inter (metin) + JetBrains Mono

DİSPLAY XL60 / 72

Analiz, tasarımla başlar.

DİSPLAY L48 / 56

Analiz, tasarımla başlar.

DİSPLAY M36 / 44

Analiz, tasarımla başlar.

HEADİNG24 / 32

Analiz, tasarımla başlar.

SUBHEADİNG18 / 28

Analiz, tasarımla başlar.

BODY L16 / 26

Analiz, tasarımla başlar.

BODY M14 / 22

Analiz, tasarımla başlar.

CAPTİON12 / 18

Analiz, tasarımla başlar.

MONO14 / 22

Analiz, tasarımla başlar.

Spacing token'ları

4px tabanlı ölçek

1 · 4

2 · 8

3 · 12

4 · 16

6 · 24

8 · 32

12 · 48

16 · 64

24 · 96

Radius token'ları

Yuvarlatma ölçeği

sm · 6px

md · 10px

lg · 14px

xl · 18px

2xl · card

Button

components/AppButton.vue — varyantlar ve boyutlar

Card, Badge & Input

components/AppCard.vue, AppBadge.vue, AppInput.vue

Metrik kartı

184.2K

↑ %4.8 son 30 gün

Badge'ler

InfoSuccessWarningDestructiveBrand

Input

Kullanıcı adı

E-posta

Devre dışı

Hata durumuBu alan geçersiz.

Table

components/AppTable.vue

Hesap	Kaynak	Takipçi	ER
@atolye.studio	API	184.240	6.42%
@zeynepyilmaz	Scrape	92.700	8.11%
@demo.hesap	Mock	12.400	4.05%

Empty State

components/AppEmptyState.vue

Henüz veri yok

İlk Instagram hesabını ekleyerek toplama işini başlat. Verilerin panelde canlanmasını izle.