Megis Brand

Tutarlı bir marka deneyimi için tasarım ilkeleri, renk paleti ve UI kuralları.

Renkler

Tek accent rengi. Geri kalan her şey nötr.

Accent

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

Nötr

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

İki 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

İçerik odaklı, sade, geniş boşluklu tasarım ilkeleri.

Max Width
980px
İçerik alanı standardı
Section Padding
py-20 sm:py-28
Bölümler arası genişlik
Navbar Height
h-12 (48px)
İnce, 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 ayırma

Kurallar

Marka tutarlılığı için uyulması gereken ilkeler.

Yapin

  • +İçerik süslemeye her zaman baskın olmalı
  • +Geniş boşluk ve nefes alan layout kullanın
  • +Tek accent rengi tutarlı kullanın
  • +Border yerine whitespace ile ayırın
  • +Hover sadece renk değişimi olsun
  • +Tipografi hiyerarsisini net tutun

Yapmayin

  • −Gradient, glow veya shadow efekti kullanmayın
  • −Kartları border ile çevreleyin
  • −Birden fazla accent rengi kullanmayın
  • −Animasyonu dikkat dağıtıcı yapmayın
  • −Logoya efekt veya dekorasyon eklemeyin
  • −980px container genişliğini aşmayın