Typography System

Figma tasarımına göre oluşturulmuş tipografi sistemi

Univa Nova (varsayılan) + Glowen (esthetic)

Display (Hero Başlıklar)

display-large (56px / 3.5rem)

Hero Başlık

display-medium (46px / 2.875rem)

Büyük Başlık

display-small (36px / 2.25rem)

Orta Başlık

Headings (Sayfa Başlıkları)

h1 (32px / 2rem)

H1 Başlık

h2 (28px / 1.75rem)

H2 Başlık

h3 (24px / 1.5rem)

H3 Başlık

h4 (20px / 1.25rem)

H4 Başlık

h5 (18px / 1.125rem)
H5 Başlık
h6 (16px / 1rem)
H6 Başlık

Body (Gövde Metinleri)

body-large (18px / 1.125rem)

Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Semibold: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

body-medium (16px / 1rem) - Varsayılan

Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Semibold: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

body-small (14px / 0.875rem)

Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Semibold: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Caption & Label

caption (12px / 0.75rem)Regular: Küçük açıklama metni
Medium: Küçük açıklama metni
Semibold: Küçük açıklama metni
label-large (16px / 1rem)
label-medium (14px / 0.875rem)
label-small (12px / 0.75rem)

Special (Özel Tipler)

overline (12px / 0.75rem) - UppercaseKategori Başlığı
code (14px / 0.875rem) - Monospaceconst hello = "world";

Renkler

Primary Color (#064232)

Secondary Color (gray-600)

Success Color (green-600)

Warning Color (yellow-600)

Error Color (red-600)

Inherit Color

Hizalama

Sola hizalı metin

Ortaya hizalı metin

Sağa hizalı metin

Truncate & Line Clamp

Truncate (tek satır)

Bu çok uzun bir metin ve tek satırda gösterilecek. Geri kalan kısım kesilecek ve sonunda üç nokta görünecek.

Line Clamp (3 satır)

Bu çok uzun bir metin ve sadece 3 satır gösterilecek. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Glowen Font (Esthetic)

glowen prop ile aktif olur

Elegant Hero Başlık

Glowen ile H1 Başlık

Glowen ile H2 Başlık

Karşılaştırma: Varsayılan (Univa Nova) vs Glowen

Univa Nova Font (Varsayılan)

Glowen Font (Esthetic)

Kullanım Örnekleri

Hoş Geldiniz

LegalTech Platform

Modern hukuk teknolojisi çözümleri

Kategori

Kart Başlığı

Kart içeriği buraya gelir. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Son güncelleme: 2 Aralık 2024
Form Örneği

ornek@email.com

Geçerli bir e-posta adresi girin

••••••••

Şifre en az 8 karakter olmalıdır