Tasarım Sistemi (Polaris-flat)

Achidemy Polaris-flat tasarım sistemi — semantic color token'lar, tipografi, spacing, elevation ve component stilleri.

Bu sayfa Achidemy projesinin Polaris-flat tasarım sistemini açıklar. Tasarım sistemi Shopify Polaris felsefesinden esinlenmiş, monokromatik mavi paletli, kurumsal/modern bir görsel dil kullanır.

Brand & Stil

Tasarım sistemi bir eğitim platformunun otoriter, verimli ve açıklayıcı kişiliğini yansıtır. Arayüz “üretken sakinlik” hissi uyandırır — araçlar ihtiyaç duyulana kadar görünmez kalır, içerik her zaman odak noktasıdır.

Görsel stil: Corporate / Modern (Shopify Polaris etkili)

Renk Sistemi (Semantic Tokens)

Renk stratejisi monokromatik mavi spektrumu kullanır. Tüm renkler semantic token’lar olarak tanımlanmıştır ve Tailwind CSS class’ları ile kullanılır.

Surface Token’ları

Token	Hex	Tailwind Class	Kullanım
`surface`	`#f8fbff`	`bg-surface`	Sayfa arka planı
`surface-container-lowest`	`#ffffff`	`bg-surface-container-lowest`	Kartlar, input’lar
`surface-container-low`	`#f2f8ff`	`bg-surface-container-low`	Alt bölümler, header’lar
`surface-container`	`#e6f0ff`	`bg-surface-container`	Orta yoğunluklu alanlar
`surface-container-high`	`#dbeafe`	`bg-surface-container-high`	Vurgulu alanlar, badge’ler
`on-surface`	`#0f172a`	`text-on-surface`	Ana metin rengi
`on-surface-variant`	`#334155`	`text-on-surface-variant`	İkincil metin
`inverse-surface`	`#283044`	`bg-inverse-surface`	Koyu arka plan (önizleme vb.)
`inverse-on-surface`	`#eef0ff`	`text-inverse-on-surface`	Koyu arka plan üzeri metin

Primary Token’ları

Token	Hex	Tailwind Class	Kullanım
`primary`	`#2b7fff`	`bg-primary`, `text-primary`	Ana aksiyon rengi, butonlar
`on-primary`	`#ffffff`	`text-on-primary`	Primary arka plan üzeri metin
`primary-container`	`#155dfc`	`bg-primary-container`	Hover, vurgulu durumlar
`secondary-container`	`#dbeafe`	`bg-secondary-container`	Açık mavi dolgu, badge’ler
`on-secondary-container`	`#0f172a`	`text-on-secondary-container`	Secondary container üzeri metin

Outline Token’ları

Token	Hex	Tailwind Class	Kullanım
`outline`	`#8ec5ff`	`border-outline`	Güçlü border
`outline-variant`	`#bedbff`	`border-outline-variant`	Hafif border (kartlar, input’lar)

Error Token’ları

Token	Hex	Tailwind Class	Kullanım
`error`	`#ba1a1a`	`text-error`, `bg-error`	Hata durumları
`error-container`	`#ffdad6`	`bg-error-container`	Hata arka planı
`on-error`	`#ffffff`	`text-on-error`	Error üzeri metin

Tipografi

Tüm metinler Inter font ailesi kullanır.

Stil	Font Size	Weight	Line Height	Kullanım
H1	32px	700	1.2	Sayfa başlıkları
H2	24px	600	1.3	Bölüm başlıkları
H3	20px	600	1.4	Kart başlıkları
body-lg	16px	400	1.6	Ana içerik metni
body-md	14px	400	1.5	Genel metin
label-sm	12px	600	1.0	Etiketler, mikro-kopya

Spacing

8px tabanlı lineer ölçek kullanılır:

Token	Değer	Kullanım
`xs`	4px	Mikro ayarlamalar
`sm`	8px	İç boşluklar
`md`	16px	Standart padding
`lg`	24px	Bölüm aralıkları
`xl`	32px	Büyük aralıklar
`xxl`	64px	Sayfa bölümleri
`container-max`	1280px	Maksimum içerik genişliği
`gutter`	20px	Grid gutter

Elevation & Depth

Derinlik, tonal katmanlar ve ambient gölgeler ile iletilir:

Gölge yerine border: Kartlarda shadow-none ve border-outline-variant tercih edilir
Floating elementler: Dropdown/modal için shadow-lg (15-20px blur, %8 opacity)
Surface değişimi: Derinlik genellikle yüzey renk değişimiyle iletilir

// Kart örneği - gölge yerine border
<Card className="shadow-none border-outline-variant">
  <CardContent>...</CardContent>
</Card>

Border Radius

Token	Değer	Kullanım
`sm`	0.25rem (4px)	Küçük elementler
`DEFAULT`	0.5rem (8px)	Butonlar, input’lar
`md`	0.75rem (12px)	Kartlar
`lg`	1rem (16px)	Büyük kartlar, modal’lar
`xl`	1.5rem (24px)	Hero bölümleri
`full`	9999px	Pill şekli (badge, chip)

Component Stilleri

Butonlar

// Primary (varsayılan)
<Button>Kaydet</Button>

// Secondary
<Button variant="secondary">İptal</Button>

// Ghost (border ile)
<Button variant="ghost" className="border border-outline-variant">
  Filtre
</Button>

// Destructive
<Button variant="destructive">Sil</Button>

Kartlar

<Card className="shadow-none border-outline-variant">
  <CardHeader className="bg-surface-container-low border-b border-outline-variant">
    <div className="flex items-center gap-3">
      <div className="w-8 h-8 rounded-lg bg-secondary-container text-primary flex items-center justify-center">
        <Icon size={16} aria-hidden="true" />
      </div>
      <h2 className="font-semibold text-on-surface">Başlık</h2>
    </div>
  </CardHeader>
  <CardContent className="p-5">
    <p className="text-on-surface-variant">İçerik</p>
  </CardContent>
</Card>

Badge’ler

// Default
<Badge>Yeni</Badge>

// Outline (semantic colors ile)
<Badge variant="outline" className="text-primary bg-secondary-container border-transparent">
  Aktif
</Badge>

// Error
<Badge variant="outline" className="text-error bg-error-container border-transparent">
  Hata
</Badge>

Input’lar

<Input
  className="rounded-lg border-outline-variant focus:border-primary focus:ring-2 focus:ring-primary/20 h-11"
  placeholder="Placeholder"
/>

Switch

<Switch
  checked={isActive}
  onCheckedChange={setIsActive}
  aria-label="Toggle"
/>
// Aktif: mavi arka plan, beyaz thumb
// Pasif: beyaz arka plan, mavi thumb

Erişilebilirlik

aria-hidden: Dekoratif ikonlara aria-hidden="true" eklenir
aria-label: Interaktif ikonlara aria-label eklenir
Focus states: focus:ring-primary/20 ile görünür focus
Renk kontrastı: on-surface / surface-container-lowest kombinasyonu WCAG AA uyumlu

// İkon erişilebilirlik örneği
<FileText size={16} aria-hidden="true" /> // Dekoratif
<Button aria-label="Sil"><Trash2 size={16} /></Button> // İnteraktif

CSS Token Tanımları

Tüm token’lar app/app.css dosyasında @theme inline bloğu içinde tanımlanır:

@theme inline {
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f8ff;
  --color-surface-container-high: #dbeafe;
  --color-on-surface: #0f172a;
  --color-on-surface-variant: #334155;
  --color-primary: #2b7fff;
  --color-on-primary: #ffffff;
  --color-secondary-container: #dbeafe;
  --color-outline-variant: #bedbff;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  /* ... diğer token'lar */
}

İlgili Dosyalar

app/app.css — Global CSS ve token tanımları
registry/components/ui/* — Polaris-flat UI componentleri
.cursor/rules/design-system.mdc — Tasarım sistemi kuralları
Component Library — Tüm componentlerin listesi