yuzeysel.
marka rehberi
Logolarımız, renklerimiz, yazı fontumuz ve tasarım dilimiz. Yeni bir şey tasarlarken önce buraya bakın.
Logolar
İki ana logomuz var: yazı logosu ve ikon. Her birini SVG, PNG, JPEG, WebP veya GIF olarak indirebilirsiniz. Animasyonlu olanların SVG ve WebP hâli de var.
Yazı logosu
İkon
Ok ikonu
Yukarı çık düğmesinde ve “İletişime Geç” butonunda kullandığımız ok. Ucundaki pembe nokta imzamızdır; ok dönerken nokta da onunla döner.
Durum animasyonları
Arayüzde bir durumu anlatmak için kullandığımız on bir animasyonlu logo. Sitedeki logo hover, uyku ve çevrimdışı durumlarını, iletişim formu da odak durumunu canlı olarak kullanır.
Kullanım kuralları
- · Nokta her zaman gül pembesi (
#e36896), harfler mürekkep ya da beyaz. - · Harf arası boşluk ölçülüdür: harf aralığı −0,04em, nokta için +0,04em, yazı tipinin kerning değerleri korunur. Elle değiştirmeyin.
- · Logonun etrafında en az “l” harfinin genişliği kadar boş alan bırakın.
- · Koyu zeminde yalnızca harfler beyaza döner, nokta pembe kalır.
- · GIF, WebP ve JPEG dosyalarının zemini düzdür. Renkli ya da fotoğraflı zeminde SVG veya PNG kullanın.
Yapmayın
- · Logoyu başka bir font ile yeniden yazmayın.
- · Noktayı başka renge çevirmeyin ya da kaldırmayın.
- · Gradyan, gölge ya da çizgi eklemeyin.
- · İkon üzerindeki “y” harfini ve noktayı birbirinden ayırmayın.
Kaynak dosyalar: src/assets/logo (durum animasyonları dahil) ve src/assets/icon.
İmleç
Marka kimliğinde bir şeyi göstermek ve ekran kayıtlarında nereye tıklandığını anlatmak için kullandığımız yuzeysel. imleci.
Deneyin
İmleci buraya getirin ve tıklayın
Videolarda kullanım
- · Tıklanacak yerin üstüne animasyonu koyun; imlecin ucu tıklanacak noktaya denk gelsin.
- · Önce imleci düz hâliyle gezdirin, tıklama anında animasyona geçin.
- · Arka planı koyu olan videolarda da kullanılır; beyaz kenar imleci ayırır.
- · Halka rengi her zaman gül pembesi (
#e36896) kalır.
Web sitesinde imleç olarak
.kutu {
cursor: url("/brand/yuzeysel-cursor-sm.svg") 5 3, auto;
}28 × 30 piksellik küçük sürüm. 5 3 değerleri imlecin ucudur. Tıklanabilir öğelerde sistem imlecini bozmamak için yalnızca gösterim alanlarında kullanın.
Kaynak dosyalar: src/assets/cursor.
Renkler
Bir renge tıklayarak kodunu kopyalayın. Pembe tonlar markayı, nötrler metni taşır.
Marka renkleri
Nötr renkler
Degrade
linear-gradient(135deg, #ffffff 0%, #fdeaf2 50%, #f9d8e4 100%)
Tipografi
Tek bir font ailesi kullanıyoruz: Plus Jakarta Sans. Türkçe karakterleri tam destekler.
Plus Jakarta Sans
Aa Ğğ Şş
ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ
abcçdefgğhıijklmnoöprsştuüvyz 0123456789
Google Fonts · next/font/google ile yüklenir · var(--font-jakarta)
Aa
Medium 500
Menü, yardımcı metin
Aa
SemiBold 600
Butonlar, etiketler
Aa
Bold 700
Başlıklar, logo
Aa
ExtraBold 800
Banner başlığı
yuzeysel. Banner
ExtraBold · ekrana göre 72–240px · boşluk özel
yuzeysel. Başlık 1
ExtraBold · 36–72px · -0,025em
yuzeysel. Başlık 2
Bold · 24px · -0,025em
yuzeysel. Gövde
Medium · 16px · #6e6469
E-TİCARETİN EN BÜYÜK ALTYAPISI
Bold · 12px · büyük harf · 0,14em
İkon seti
Arayüzde, araçlarda ve sayfalarda kullandığımız 28 çizgi ikon. Bir ikona tıklayarak SVG kodunu kopyalayın ya da indirin.
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
- Tıkla: kopyala
currentColor ile her renge uyar.Çizim kuralları
- · 24 × 24 ızgara, kenarlarda en az 2px boşluk.
- · 2px çizgi kalınlığı,
stroke-linecapvestroke-linejoinher zamanround. - · Dolgu yok, yalnızca çizgi. Tek istisna: Instagram ikonundaki küçük nokta.
- · Renk
currentColorile verilir; ikon bulunduğu metnin rengini alır. - · Boyutlar: 18px (düğme içi), 20px (menü), 22px (kart), 28–32px (vurgu).
Çizim kuralları Feather Icons (MIT lisanslı) ile uyumludur. İkonların çoğu Feather'dan uyarlanmıştır; birkaçı aynı kurallarla özel çizilmiştir.
Kullanım
- · İkonu yeniden boyamak için
colorkullanın, çizgiyi elle değiştirmeyin. - · Kalınlığı ve köşe stilini değiştirmeyin; yeni ikonlar da aynı kurallarla çizilir.
- · Tek başına anlamı belirsiz ikonların yanına metin ekleyin.
Tasarım dilimiz
Yeni nesil, yumuşak ve sakin. Altı temel kural:
Yumuşak cam yüzeyler
Kartlar yarı saydam beyaz, 24–32px bulanıklık ve %180 doygunlukla cam gibi durur. İnce beyaz kenarlık ve içte pembe bir ışıma verir.
Yuvarlak köşeler
Kartlar 28px, büyük bannerlar 40px, butonlar ve etiketler tam yuvarlak (pill). Keskin köşe kullanılmaz.
Pembe gölge, siyah değil
Gölgeler gül pembesi tonunda ve geniş yayılır. Yükselme hissi verir ama ağır görünmez.
Sakin hareket
Animasyonlar yavaş ve oyunbaz: dalgalanan harfler, nefes alan nokta. Hareketi azalt ayarına saygı duyulur.
Bol boşluk
Az öğe, büyük tipografi. Başlıklar büyük ve sıkı, açıklamalar küçük ve sakin olur.
Nokta imza
Pembe nokta markanın imzasıdır: logoda, ikonda, durum etiketlerinde ve küçük vurgularda tekrar eder.
Köşe yuvarlaklığı
16px
28px
40px
pill
Cam efekti
background: rgba(255,255,255,.6); backdrop-filter: blur(24px) saturate(180%); border: 1px solid rgba(255,255,255,.9);
Gölge
0 20px 40px -12px rgba(227,104,150,.35)
Bileşenler
Arayüzü HeroUI ile kuruyoruz. Ana renk gül pembesi olarak ayarlı.
Butonlar ve etiketler her zaman tam yuvarlak (rounded-full) olur.