Yazı Stilleri

Falcon’da tipografi iki kanaldan gelir; karıştırmayın:

Kanal	Ne zaman	Sınıflar
Fix UI rolleri	Marketing blokları, Fix UI katalog	`fix-type-h1` … `fix-type-muted`
Tailwind (blog)	MDX gövdesi, liste/post başlıkları	`prose` + modifier’lar; `text-3xl`, `text-xl`

Tailwind yalnızca yerleşim için her iki kanalda da kullanılır: flex, gap, grid, max-w-*.

Fix UI Rolleri (`fix-type-*`)

Tekrarlayan marketing metni için token tabanlı roller:

Ne yazıyorsun?	Sınıf
Sayfa / hero başlığı	`fix-type-h1`
Bölüm başlığı	`fix-type-h2`
Alt başlık	`fix-type-h3` / `fix-type-h4`
Giriş paragrafı	`fix-type-lead`
Normal paragraf	`fix-type-body`
Küçük etiket / menü	`fix-type-small`
İkincil açıklama	`fix-type-muted`
Vurgulu kısa satır	`fix-type-large`
Satır içi kod	`fix-type-code`

Örnek — Marketing sayfası

<PageShell>
  <h1 class="fix-type-h1">Ana başlık</h1>
  <p class="fix-type-lead">Kısa giriş cümlesi.</p>
  <h2 class="fix-type-h2">Bölüm</h2>
  <p class="fix-type-body">Gövde metni.</p>
</PageShell>

PageShell ve flex / gap = Tailwind; başlık ve paragraf rolleri = fix-type.

Blog Tipografi (Tailwind)

Post başlığı ve meta

Tek seferlik sayfa başlıkları için Tailwind kabul edilir (BlogPostView.astro):

<h1 class="m-0 text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h1>
<p class="text-xl text-muted-foreground">{description}</p>

MDX gövdesi (`prose`)

Uzun içerik @tailwindcss/typography ile stillenir:

<article
  class:list={[
    'prose max-w-none dark:prose-invert',
    'prose-headings:font-semibold prose-headings:text-foreground',
    'prose-p:text-foreground/90',
    'prose-a:text-foreground hover:prose-a:text-foreground/80',
    /* … BlogPostView ile aynı zincir */
  ]}
>
  <Content />
</article>

Tam sınıf listesi: falcon-fixrav/src/components/blog/BlogPostView.astro.

fix-prose kaldırıldı; blog gövdesi için fix-prose kullanmayın.

Boyutu Değiştirmek

Hedef	Nerede
Tüm `fix-type-h2` boyutu	`src/styles/tokens/_typography.css` → `--text-h2`
Blog `prose` başlık / paragraf	`BlogPostView` içindeki `prose-*` modifier’ları veya Typography plugin varsayılanları
Semantic renk	Renk Ve Tema — `text-foreground`, `text-muted-foreground`

Marketing metninde tercihen fix-type-*; blog’da text-3xl gibi utility’ler normaldir.

Yap / Yapma

Yap	Yapma
Marketing’de `fix-type-h2`	Marketing başlığında `text-3xl font-bold` (tercihen fix-type)
Blog gövdesinde `prose`	MDX içine inline stil
Layout için `flex gap-8`	Blog gövdesinde `fix-type-body` ile uzun makale

Canlı Referans

Geliştirme sunucusunda /fix-ui → Typography bölümü tüm fix-type-* rolleri gösterir.

Blog önizlemesi: herhangi bir /blog/{id}/ yazısı.

İlgili Sayfalar

CSS Kullanımı — katmanlar
Fix UI Kullanımı — buton, kart
Renk Ve Tema
Font & UI Kullanımı — Inter fontu
MDX Kullanımı — blog route’ları

Özet

Marketing metni = fix-type-*; blog gövdesi = prose; blog başlığı = Tailwind utility; düzen = PageShell + Tailwind.