Megis Brand

Tutarli bir marka deneyimi icin tasarim ilkeleri, renk paleti ve UI kurallari.

Renkler

Tek accent rengi. Geri kalan her sey notr.

Accent

Dark
Light
Accent
Links, buttons, interactive
Dark
Light
Accent Hover
Hover states

Notr

Background
Foreground
Muted
Surface
Border

Tipografi

Geist font ailesi. Temiz, okunabilir, modern.

Geist Sans
Geist Mono
Display
Megis Dijital
48-60px / Bold
Title 1
Megis Dijital
36-48px / Bold
Title 2
Megis Dijital
24-30px / Semibold
Title 3
Megis Dijital
20px / Semibold
Body
Megis Dijital
18px / Regular
Caption
Megis Dijital
14px / Regular
Footnote
Megis Dijital
12px / Regular

Butonlar

Iki buton stili: filled ve text link.

Filled

DefaultHoverDisabledSmall

rounded-full bg-accent px-7 py-3 text-lg text-white

Text Link

Default linkSmall link

text-accent hover:underline + chevron

Layout

Icerik odakli, sade, genis bosluklu tasarim ilkeleri.

Max Width
980px
Icerik alani standardi
Section Padding
py-20 sm:py-28
Bolumler arasi genislik
Navbar Height
h-12 (48px)
Ince, minimal header
Card Radius
rounded-2xl (16px)
Kartlar ve gruplar
Nav Font
text-xs (12px)
Navigasyon metni
Hover
color change only
Efekt yok, sadece renk
Backdrop
blur-xl saturate-150
Saydam arka planlar
Divider
border-t border-border
Border ile ayirma

Kurallar

Marka tutarliligi icin uyulmasi gereken ilkeler.

Yapin

  • +Icerik suslemeye her zaman baskin olmali
  • +Genis bosluk ve nefes alan layout kullanin
  • +Tek accent rengi tutarli kullanin
  • +Border yerine whitespace ile ayirin
  • +Hover sadece renk degisimi olsun
  • +Tipografi hiyerarsisini net tutun

Yapmayin

  • −Gradient, glow veya shadow efekti kullanmayin
  • −Kartlari border ile cevreleyin
  • −Birden fazla accent rengi kullanmayin
  • −Animasyonu dikkat dagitici yapmayin
  • −Logoya efekt veya dekorasyon eklemeyin
  • −980px container genisligini asmayin