01 / STANDARD
Bir fikrin
katmanları.
Başlık, kısa açıklama ve tek bir bağlam. Daha fazlası için boşluk.
01 / MARKA
A NEW DIMENSION
DIMENSION.
INDEPENDENT CREATIVE AGENCY
Fikre biçim.
Markaya boyut.
Tasarım, dijital deneyim ve görsel üretim için ortak bir ifade.
FORM / LIGHT / DEPTH
01—26
01 / NET
Az öğe. Güçlü karar.
Her yüzeyde tek bir odak, açık bir hiyerarşi.
02 / BOYUTLU
Işıkla derinlik.
Cam, yansıma ve hacim markanın görsel imzası.
03 / BAĞIMSIZ
Kendi perspektifi.
Alışılmış formun içinde beklenmedik bir detay.
NAME ARCHITECTURE
DIMENSION ana marka adı. .istanbul dijital adresin parçası; konum bilgisi gerektiğinde ikincil ölçekte.
02 / LOGO
Bir işaret.
Bir işaret.
Birden fazla boyut.
D gövdesi ve ayrık nokta. İşaret bu aşamada tek başına kullanılır; nihai çizim güncellendiğinde bu örnekler yenilenir.
02 / LIGHT
SYMBOL / IVORY FIELD
03 / SOURCE
SOURCE MARK
SOURCE MARK
04 / CLEAR SPACE
x
x
x = NOKTA ÇAPI / 2
DON’T / 01
ESNETME
DON’T / 02
DÖNDÜRME
DON’T / 03
EFEKT EKLEME
DON’T / 04
DÜŞÜK KONTRAST
Güvenli alan
İşaretin çevresinde en az x boşluk.
Minimum boyut
Dijitalde 24 px, baskıda 8 mm.
Düz kullanım
Temel logo tek renk. Cam versiyon görsel anlatım için.
03 / RENK
Karanlık zemin.
Karanlık zemin.
Sıcak bir ışık.
Davutilbak.com’dan gelen dört ana ton. Şampanya, yüzeylerde kontrollü bir ışık vurgusu.
CHAMPAGNE LIGHT
Bir renk değil,
Bir renk değil,
bir yansıma.
Geniş yüzeylerde düşük opaklık.
Keskin vurgularda küçük alan.
#EAE9D0
#FFF3D9
#D8B866
#F4DFA8
Kaynak sitedeki ışık geçişi
70% / DARK
20% / LIGHT
10%
Şampanya tonunu ana metin rengi yerine vurgu ve ışık katmanı olarak kullan. Gövde metninde Ivory veya Stone tercih et.
04 / TİPOGRAFİ
Satoshi.
Satoshi.
Net, ama nötr değil.
Yuvarlak formlar, dengeli genişlik ve sade detaylar. Marka, başlık ve gövde metninde tek bir ana aile.
PRIMARY TYPEFACE
REGULAR / MEDIUM / BOLD
SatoshiAa
Aa Bb Cc Çç Dd Ee Ff Gg Ğğ Hh Iı İi Jj
Kk Ll Mm Nn Oo Öö Pp Rr Ss Şş Tt Uu Üü Vv Yy Zz
0123456789
Font ailesini incele
DISPLAY / 88 / 700
Dimension.
HEADING / 48 / 500
Yeni bir perspektif.
SUBHEAD / 24 / 500
Fikir, biçim ve etki.
BODY / 16 / 400
İyi bir marka, her temas noktasında aynı karakteri taşır. Sözü, görüntüsü ve deneyimi tek bir bütüne dönüşür.
LABEL / 12 / MONO
DIMENSION / SYSTEM 01 / ISTANBUL
05 / GRID
Boşluk da
Boşluk da
tasarımın parçası.
12 kolonlu ana yapı. 8 px boşluk ritmi; küçük ayrıntılarda 4 px ara adım.
DESKTOP / 12 COLUMNS / 24 PX GUTTER
01
02
03
04
05
06
07
08
09
10
11
12
01 / FOCAL AREA
02 / CONTEXT
SECTION COMPOSITION
Tek ritim değil.
Tek ritim değil.
Üç ayrı sahne.
01 / EDITORIAL
Metin + kanıt
Açık hiyerarşi ve yan yana bilgi.
02 / IMMERSIVE
Tek büyük odak
Objeye alan bırakan sahne.
03 / SYSTEM
Parçaların ilişkisi
Kurallar ve örnekler için grid.
Maksimum içerik
1280 px
Kenar boşluğu
Desktop 48 / tablet 25–32 / mobil 20 px
Bölüm aralığı
Desktop 138 / mobil 100 px
06 / BUTONLAR
Harekete davet.
Tek güçlü aksiyon, net öncelik. Kapsül formu ve sakin bir ışık geçişi.
40 PX
48 PX
56 PX
DISABLED
LOADING
07 / ETİKETLER
Küçük tanımlar.
İçeriği sınıflandıran hafif yüzeyler. Aynı satırda tutarlı yükseklik ve boşluk.
CATEGORY / QUIET
Brand identity
Digital experience
3D & motion
SELECTED / CHAMPAGNE
08 / ROZETLER
Durum, açıkça.
Etiket konuyu, rozet durumu belirtir. Renk kadar metin ve işaret de anlam taşır.
Onaylandı
APPROVED
İncelemede
IN REVIEW
Taslak
DRAFT
V.01
VERSION
09 / KARTLAR
Işığı tutan
Işığı tutan
yüzeyler.
Füme cam, ince kenar ve tek yönden ışık. İçeriği taşıyan yüzey, sahnenin bir parçası.
Bir fikrin
02 / FEATURED
Farklı açı.
Aynı karakter.
Vurgulu kartta daha güçlü ışık, aynı tipografik düzen.
03 / IMAGE
MARK STUDY / DRAFT
Symbol preview
RADIUS / 28 PX
BORDER / 1 PX · 16%
BLUR / 16 PX
ELEVATION / 24 PX
10 / FORM
Sade bir diyalog.
Koyu alan, kalıcı etiket ve belirgin odak çizgisi. Hata mesajı alanın hemen altında.
11 / DESEN
Yüzeyde bir kırılma.
Tekrar yerine yön ve müdahale. Üç desen de ışık, kesik çizgi ve koordinat üzerinden farklı ölçeklerde çalışır.
01 / PHASE SHIFT
02 / CUTLINE
03 / COORDINATE TYPE
Phase Shift kapakta büyük ölçekte; Cutline yönlendirmede; Coordinate Type ise küçük alanlarda tek vurgu olarak kullanılır.
12 / İKONLAR
İşaretten doğan
İşaretten doğan
bir çizgi dili.
24 × 24 px alan, 1.5 px çizgi ve yuvarlak uçlar. Geometrik ama mekanik değil; aynı optik ağırlık.
01 / CORE GESTURE
MONOLINE · 1.5
Bir çizgi.
Bir boşluk.
Bir işaret.
SYMBOL LIBRARY / 12 GLYPHS
INTERFACE / 18 GLYPHS
Stroke
1.5 px / round cap
Optik alan
20 × 20 px
Renk
Ivory veya Stone / tek renk
İkonlar medya kütüphanesinde gerçek SVG dosyası; Elementor’da SVG öğesiyle eklenir, rengi yazı renginden (currentColor) alır.
13 / GÖRSEL
Görsel bir
Görsel bir
imza: artifact.
Tek obje, gerçekçi malzeme, kontrollü ışık. Görselin çevresindeki boşluk da kompozisyonun bir parçası.
ARTIFACT №01 / WEB SYSTEM
Original geometry & motion
DIMENSION
MATERIAL ARCHIVE
ARTIFACT №02 / KNOT
Original object
ARTIFACT №03 / SIGNAL
Original object
Üç sahne, davutilbak.com ana sayfası ve iç sayfalarındaki özgün 3D obje sisteminden aktarılmıştır.
MATERIAL
Koyu krom ve cam.
Net kenar, cilalı yüzey ve kontrollü yansıma.
LIGHT
Şampanya kenar ışığı.
Derin koyuluk içinde yüzeyi tanımlayan sıcak vurgu.
COMPOSITION
Objeye alan aç.
Tek odak. Geniş negatif alan. Az aksesuar.
14 / HAREKET
Hafif. Akıcı.
Hafif. Akıcı.
Yerinde.
Hareket, ışığın ve katmanların devamı. Kısa arayüz tepkileri; daha yavaş ortam hareketi.
01 / DEPTH
1440 ms · perspektif → netlik
02 / LIFT
260 ms · 4 px yükselme
03 / LIGHT
1200 ms · yumuşak ışık geçişi
04 / ORBIT
1600 ms · tek dönüş
05 / MASK
DIMENSION
720 ms · tipografik açılım
06 / HELLO
1200 ms · hafif salınım
SECTION ENTRY / 03 BEATS
Sahne bir anda açılmaz.
Önce bağlam, sonra ana içerik, en son ayrıntılar. Her bölüm kendi temposuyla aynı hareket diline katılır.
00 MS
Başlık
Yukarı kayma + görünürlük
+65 MS
Ana sahne
Derinlik ve ışık
+130 MS
İkincil detay
Hafif gecikmeli giriş
EASING
cubic-bezier(0.22, 1, 0.36, 1)
Azaltılmış hareket tercihi tüm animasyonlarda geçerli.
15 / LOGO GİRİŞİ
Derinlikten.
Derinlikten.
Tek bir işarete.
İşaret dar bir perspektiften döner; gerisindeki katmanlar tek yüzeyde netleşir.
D / 01 — IDENTITY IN MOTION
FORM / SPACE / LIGHT
SIGNATURE / 1440 MS
Perspektif değişir.
İşaret oturur. Önce ince bir profil; ardından hacim ve netlik. Tek hareket, her ölçekte aynı açılış imzası.
16 / LOADING
Bekleyişin de
Bekleyişin de
bir ritmi var.
İçerik hazırlanırken ince bir ışık hattı ilerler. Tamamlandığında sahne katmanları sırayla görünür.
DIMENSION / SYSTEM
00%
PAGE READY / 01
Yeni bir boyut.
LOAD → REVEAL
Yükleme durumu gerçek bir işlemdeki ilerlemeyi göstermeli; dekoratif bekleme süresi eklenmez.
17 / MENÜ
Az seçenek.
Az seçenek.
Doğru yön.
İşaret tek başına durur. Aktif bağlantının ışığı yer değiştirir. Mobil panel açılırken bağlantılar hafif aralıklarla görünür.
DIMENSION
DIMENSION / STUDIO
Başka bir
perspektif.
perspektif.
18 / SSS
Net yanıtlar.
Net yanıtlar.
Sade açılım.
Akordeon satırı, başlık ve ayrıntı arasında sakin bir geçiş sağlar. Klavye ile açılır ve içerik kendi yüksekliğinde kalır.
Evet. Bu sürümde işaretin yanına DIMENSION kelime markası eklenmez. Büyük başlıklarda marka adı ayrıca kullanılabilir.
Hayır. Bir sahnede tek güçlü obje yeterli. İçerik ve ürün örneklerinin önüne geçmeyecek boşluk bırakılır.
Kısa vurgu, çizgi ve aktif durum için kullanılır. Uzun metinlerde Ivory ve Stone daha dengeli bir okuma sağlar.
Objeler sabit kalır; içerik animasyon beklemeden görünür. Etkileşimler çalışmaya devam eder.
19 / TOKEN’LAR
Aynı dil.
Aynı dil.
Her yüzeyde.
Renk, boşluk, köşe ve hareket değerleri. Tasarımdan uygulamaya aynı isimler, aynı kararlar.
:root { /* RENK · Elementor global değişkenleri */ --d-ink: #0E0F0F; --d-carbon: #141514; --d-stone: #BBBAA6; --d-ivory: #FEFCE1; --d-champagne: #F4DFA8; --d-gold: #D8B866; --d-light-cream: #EAE9D0; --d-light-warm: #FFF3D9; --d-muted: #97988B; --d-label: #858E7B; --d-label-warm: #D4BC83; --d-line: rgba(234,233,208,0.16); --d-line-soft: rgba(234,233,208,0.094); --d-surface: rgba(222,220,196,0.055); --d-panel: #141613; --d-deep: #0B0C0C; --d-error: #D49985; --d-error-line: #B87665; /* TİPOGRAFİ */ --d-font: Satoshi; --d-mono: 'SFMono-Regular', Consolas, monospace; /* FORM */ --d-r-input: 10px; --d-r-card: 28px; --d-r-panel: 24px; --d-r-pill: 999px; /* BOŞLUK · 8 px ritim */ --d-s1: 4px; --d-s2: 8px; --d-s3: 16px; --d-s4: 24px; --d-s5: 32px; --d-s6: 48px; --d-s7: 64px; --d-s8: 96px; /* YERLEŞİM */ --d-wrap: 1280px; --d-gutter: clamp(20px, 3.4vw, 48px); --d-rhythm: clamp(100px, 9.6vw, 138px); /* HAREKET */ --d-t-fast: 180ms; --d-t-lift: 260ms; --d-t-mask: 720ms; --d-t-entry: 780ms; --d-t-light: 1200ms; --d-t-hello: 1200ms; --d-t-logo: 1440ms; --d-t-orbit: 1600ms; --d-t-menu: 560ms; --d-t-accordion: 580ms; --d-ease: cubic-bezier(0.22, 1, 0.36, 1); /* DERİNLİK VE ATMOSFER */ --d-perspective: 1600px; --d-plane-gap: clamp(80px, 9vw, 140px); --d-atmos-size: 0.5; --d-atmos-alpha: 0.5; }
20 / ATMOSFER
Işığı kıran
Işığı kıran
bir imza.
Cam marka yazısı, hero’daki ufuk ışığı ve aurora izi. İz yalnız koyu adalarda: ana sayfa hero’su ve alt bilgi. İçerik hep önde kalır.
GLASS WORDMARK / HOVER
Üzerine gel: ışık imleci izler, harfler mercek gibi büyür, kenarlar hafifçe kırılır. Dokunmatikte ilk görünüşte ışık bir kez geçer.
KATMANLAR
DOM metni (erişilebilir, şeffaf) · buzlu cam · WebGL ışık
ETKİLEŞİM
Işık imleci izler, harfler %12 büyür, kenarda sıcak kırılma
PERFORMANS
Yalnız görünürken ve hareket varken çizer; sonra durur
YEDEK
WebGL yoksa CSS cam; azaltılmış harekette sabit kare
Yer
Site alt bilgisi ve bu rehberin kapanışı.
Bileşen
data-glassword + d-glassword sınıfı; metin Elementor’da düzenlenir.
Erişilebilirlik
Yazı ekran okuyucudan gizli (dekoratif); marka adı sayfada ayrıca var.
HORIZON / HERO
Fikre biçim.
Markaya boyut.
Ana sayfa hero’su: ilk boyama saf CSS (0 KB). Sitede ufuktan yükselen parçacıklar sayfa yüklenip tarayıcı boşalınca eklenir; imleç ışığı yay boyunca taşır.
UFUK
CSS posteri ilk boyamada; WebGL parçacıklar boşta, 30 fps
İZ
Aurora akışkanı: %50 boyut, %50 görünürlük; yalnız hero ve alt bilgide, imleç oradayken
MOTOR
Tek worker + OffscreenCanvas; ana iş parçacığı yalnız olay taşır
KAPALI
Dokunmatikte iz yok; azaltılmış hareket ve veri tasarrufunda hiçbiri
Ayar
--d-atmos-size ve --d-atmos-alpha Elementor değişkeni; panelden değişir.
Performans
Lighthouse fareyi oynatmaz: iz skoru etkilemez. Hiçbir ada görünmüyorken, sekme gizliyken ve 3,6 sn hareketsizlikte çizim durur.
Kaynak
İz: davutilbak.com aurora efekti, DIMENSION paletinde. Ufuk: kendi shader’ımız.
21 / ERİŞİLEBİLİRLİK
Herkes için
Herkes için
okunur.
Renk çiftleri WCAG kontrast oranıyla. Gövde metni en az AA; şampanya kısa vurgu ve aktif durumlar için.
Aa · Fikre biçim.
IVORY / OBSIDIAN
18.5 : 1 · AAA
Aa · Fikre biçim.
STONE / OBSIDIAN
9.8 : 1 · AAA
Aa · Fikre biçim.
MUTED / OBSIDIAN
6.6 : 1 · AA
Aa · Fikre biçim.
CHAMPAGNE / CARBON
13.9 : 1 · AAA
Aa · Fikre biçim.
OBSIDIAN / IVORY
18.5 : 1 · AAA
Aa · Fikre biçim.
OBSIDIAN / CHAMPAGNE
14.6 : 1 · AAA
Odak
2 px şampanya çizgi, 5 px boşluk; klavyede her zaman görünür.
Dokunma alanı
Etkileşimli öğeler en az 44 × 44 px.
Hareket
Azaltılmış harekette animasyon yok; içerik beklemeden görünür.
22 / SES VE TON
Az söz.
Az söz.
Net karar.
Türkçe ana dil. Mikro etiketler bilinçli olarak İngilizce ve büyük harf: tek dil değil, tek görsel dil.
Kısa.
Bir cümle, bir fikir. Okur ilk satırda ne yaptığımızı anlar.
EVET
Birlikte üretelim.
HAYIR
Hayallerinizi gerçeğe dönüştüren yaratıcı çözümler sunuyoruz!
Somut.
Sıfat yerine iş: ne tasarlandı, hangi yüzeyde, kimin için.
EVET
Kimlik, web sitesi ve kampanya görselleri.
HAYIR
360° dijital dönüşüm deneyimi.
Sakin.
Ünlem, üstünlük iddiası ve klişe yok. Güveni ton değil iş taşır.
EVET
Fikre biçim. Markaya boyut.
HAYIR
Sektörün en iyisi, rakipsiz kalite!
Başlıklar nokta ile biter ve iki kısa cümleye bölünebilir: “Fikre biçim. Markaya boyut.” Gövde metni sade ve doğrudan.
23 / ELEMENTOR
Sistem,
Sistem,
editörün içinde.
Bu sayfa da sitenin kendisi gibi Elementor V4 ile kuruldu: token’lar değişken, stiller global sınıf, tekrar eden parçalar bileşen.
VARIABLES
50
Renk, font, köşe, boşluk ve hareket. Değişkenler panelinden değişince tüm site güncellenir.
--d-ink
#0E0F0F
--d-carbon
#141514
--d-stone
#BBBAA6
--d-ivory
#FEFCE1
--d-champagne
#F4DFA8
--d-gold
#D8B866
--d-muted
#97988B
--d-line
16%
--d-font
Satoshi
--d-r-card
28px
--d-s3
16px
--d-t-logo
1440ms
--d-ease
cubic-bezier(0.22, 1, 0.36, 1)
GLOBAL CLASSES
d- / bs-
d- tasarım sistemi (site), bs- yalnız bu rehber. Yeni sayfada önce bu sınıflar; yerel stil yalnız istisna.
d-btn · --primary/--secondary/--tertiary
Buton
d-tag · --selected
Etiket
d-badge · --gold/--muted/--edition
Rozet
d-glass · d-specimen · d-panel
Yüzey
d-card · --feature/--image
Kart
d-field · d-label · d-input
Form
d-head · d-faq · d-depth
Yapı
d-mono · d-h2 · d-h3 · d-text
Tipografi
d-icon · --sm/--md/--lg/--xl
İkon
COMPONENTS
9
Metin, bağlantı ve ikon her kullanımda değişebilir; tasarım bileşenin kendisinde tek yerden düzenlenir.
Buton · Birincil
2 alan
Buton · İkincil
2 alan
Buton · Metin
2 alan
Etiket
1 alan
Bölüm başlığı
3 alan
Kart · Standart
5 alan
Kart · Öne çıkan
5 alan
SSS satırı
3 alan
İşaret · DIMENSION
sabit
İkon
Medya’daki SVG + SVG öğesi; renk yazı renginden.
SEO
Rank Math; sayfa başlığı ve açıklaması her sayfada.
Kod
Etkileşimler Özel Kod’da, sayfaya göre koşullu.
24 / PROJE SİSTEMİ
Derinlikten.
Derinlikten.
Tek projeye.
İşler bir derinlik yığınında durur; seçilen düzlem proje sayfasının kapağına dönüşür. Veriler ACF alanlarında, tasarım bu sistemde.
PROJECT CARD / LOOP ITEM
OVERVIEW
Masaüstünde 3D yığın: kaydırma derinliktir; --d-perspective 1600px
INDEX
№ / Proje / Disiplin / Yıl; imleci izleyen önizleme
GEÇİŞ
Düzlem → proje kapağı (View Transitions, 720 ms, d-ease)
MOBİL
Tek sütun kart akışı; 3D ve sürükleme kapalı
GALLERY / DRAG + LIGHTBOX
Masaüstünde sonsuz sürükleme ve atalet; tıklanan görsel büyür (ok tuşları, Esc). Mobilde iki sütunlu akış.
CREDITS / KÜNYE
Kreatif direktör
Ad Soyad
Tasarım
Ad Soyad, Ad Soyad
3D
Ad Soyad
ACF PRO tekrarlayıcısı: her satır rol ve isim.
Veri
ACF alan grubu “Proje”: müşteri, yıl, disiplin, rol, özet, yaklaşım, galeri, künye, bağlantı, ana sayfada.
Şablon
Tek şablon, tüm projeler: Tema Oluşturucu → Proje · tekil şablon.
İstisna
V4’te galeri öğesi yok: galeri ve künye kısa kodla basılır ([d_galeri], [d_kunye]); veriler yine ACF’de.
25 / PERSPEKTİF
Önce dene.
Önce dene.
Sonra yaz.
DIMENSION’ın yazı alanı. Her yazı bir tez, birinci elden bir kanıt ve okurun kendi işine götüreceği bir kontrol listesi taşır.
POST ROW / LOOP ITEM
06.10.2026
Kimlik
7 dk
Türkçe bir yazı karakteri seçmeden önce: İ, ı, ş, ğ testi.
“Ş var mı?” sorusu bir testin başlangıcı. Yedi fontu yedi Türkçe testten geçirdik.
LİSTE
/perspective/ · tarih, kategori, okuma süresi, başlık, özet, kapak
YAZI
Başlık 1,12 satır aralığı · künye · kapak 16:9 · içindekiler (≥ 3 ara başlık)
GÖVDE
Gutenberg blokları · blok CSS’i yok, biçim .d-prose’tan
SON
Tüm yazılar · seçili işler · tek satır iletişim
POST FACTS / KÜNYE
YAZAN
Ad Soyad
YAYIN
6 Ekim 2026
GÜNCELLEME
12 Ekim 2026
OKUMA
7 dk
Görünür yazar ve tarihler; şemadaki tarihlerle aynı (Rank Math BlogPosting). Güncelleme yalnız yayından bir gün sonra değiştiyse görünür.
PROSE / UZUN METİN
Ara başlık nokta ile biter.
Gövde metni 18 piksel, satır aralığı 1,72; okuma genişliği yaklaşık 68 karakter. Vurgu fildişi, bağlantı altı çizili ve şampanya ışığında.
- Liste imleri altın.
- Her madde tek bir fikir.
Önce dene, sonra yaz.
DIMENSION / PERSPECTIVE
:lang(tr) { font-variant-ligatures: no-common-ligatures; }| Test | Sonuç |
|---|---|
| Harf seti | Tam |
| ₺ | Yok |
Yapı
Tez (özet), birinci elden kanıt, “siz nasıl uygularsınız” bölümü, yumuşak bağlantı. Kanıt yoksa yazı yok.
Başlık
Nokta ile biter; SEO başlığı soru olabilir. Çok satırlı Türkçe başlıkta satır aralığı en az 1,12.
Görsel
Kapak 1600×900 (öne çıkan görsel), paylaşım 1200×630; her görselde alt metin ve açıklama.
Kategori
Kimlik · Sistem · Deneyim. Arşivler dolana kadar indeks dışı.
Yapay zekâ
Taslakta olabilir; her yazıyı bir insan editör doğrular ve birinci elden katkıyı ekler.
26 / TEMA
Koyu varsayılan.
Koyu varsayılan.
Açık bir seçenek.
Site koyu temayla açılır; ziyaretçi üst bilgideki düğmeyle açık temaya geçer. Hero, alt bilgi ve büyütme penceresi her temada koyu kalır.
DIMENSION / TEMA
Fikre biçim.
Gövde metni, ikincil metin ve vurgu aynı token’lardan gelir; tema yalnız değerleri değiştirir.
Kimlik, web sitesi, 3D ve dijital pazarlama.
DIMENSION / TEMA
Fikre biçim.
Gövde metni, ikincil metin ve vurgu aynı token’lardan gelir; tema yalnız değerleri değiştirir.
Kimlik, web sitesi, 3D ve dijital pazarlama.
HEADER / TOOLS
TR
EN
Dil seçici şimdilik göstermelik (TR etkin, EN yakında). Tema düğmesi koyuda güneşi, açıkta ayı gösterir; ekran okuyucuya “Açık tema” düğmesi olarak basılı / basılı değil diye söyler.
TOKENS / DARK → LIGHT
--d-ink
Zemin · #0E0F0F → #F5F3E6
--d-ivory
Başlık, birincil düğme · #FEFCE1 → #111211 · 16,8:1
--d-stone
Gövde · #BBBAA6 → #45463E · 8,6:1
--d-muted
İkincil · #97988B → #64655A · 5,3:1
--d-label-warm
Sıcak etiket · #D4BC83 → #7A5E22 · 5,5:1
--d-champagne
Vurgu · #F4DFA8 → #87661B · 4,8:1
--d-gold
Çizgi, işaret · #D8B866 → #A8822C · yalnız dekoratif
--d-line
Ayırıcı · açık %16 → koyu %14
Varsayılan
Koyu. Seçim tarayıcıda saklanır ve sayfa çizilmeden önce uygulanır; yanıp sönme yok.
Koyu adalar
.d-tone-dark: hero, alt bilgi, büyütme penceresi. Aurora ve ufuk ışığı yalnız orada; üst bilgi bir adanın üstündeyken koyu tona geçer.
Token
Renkler V4 değişkenlerinden; açık tema aynı adları kitte yeniden tanımlar. Yarı saydam tonlar kanal token’ıyla yazılır: rgba(var(--d-gold-rgb),.3).
Kontrast
Açık temada bütün metin token’ları WCAG AA’yı geçer; altın yalnız çizgi ve işarette.
Rehber
Bu sayfa her zaman koyu; açık tema yalnız yukarıdaki örnekte.
Farklı boyutlar.
Aynı DIMENSION.
27 / FOTOĞRAF
Fotoğrafla
Fotoğrafla
beslenen sayfa.
Bölümler arasında fotoğraf alanları: tam boy, sütun, kemer, daire, hap, kesik köşe ve satır içi. Görsel yokken kutu yer tutucu renginde bekler.
INLINE / TİPOGRAFİ İÇİNDE
Biçim,
ışık
boyut.
Kaynak
Önce gerçek fotoğraf ya da kendi render’ımız. Ana sayfadaki kareler kozmetik ve ambalaj render çalışmalarımızdan; zamanla stüdyo ve süreç fotoğraflarıyla değişebilir.
Biçim
Kemer, daire, hap ve kesik köşe yalnız fotoğrafta; metin kutuları dikdörtgen kalır. Bir bölümde en fazla iki biçim.
Yerleşim
Tam boy bant (21:9, mobilde 4:5), kademeli sütunlar, mozaik ve şerit. Görsel her bölümde değil; iki metin bölümü arasında nefes.
Yükleme
Her görselde sizes ve lazy loading; görsel gelene kadar kutu --d-placeholder.
Erişilebilirlik
Her görselin alt metni var. Şeridin kopyası ekran okuyucudan gizli; hareketi azalt açıksa şerit durur.
Değiştirme
Elementor’da görsele tıklayıp yenisini seçmek yeterli; biçim kapsayıcı sınıftan gelir, görselle birlikte değişmez.
28 / HİZMET SAYFASI
Bir hizmet,
Bir hizmet,
tek bir akış.
Dört hizmet sayfası aynı şablonu kullanır: önce ne yaptığımız, sonra nasıl yaptığımız, en son kanıt ve sorular.
01
Baş
Etiket, iki satırlık başlık, giriş, iki düğme, görsel ve üç maddelik künye.
02
Yaklaşım
Tek cümlelik tez, bir paragraf ve üç kısa adım.
03
Kapsam
Altı modül kartı; gerekirse küçük bir etiketle.
04
Fotoğraf
Pano, galeri ya da ölçü çerçeveleri: görsel her sayfada.
05
Süreç
Dört ya da altı adım; her adımın çıktısı yazılı.
06
Fark
Sık görülen ve bizde: beşer satır.
07
Özel bölüm
Sayfaya özgü: yaşayan rehber, teknik temel, kullanım alanları, teşhis, haftalık ritim.
08
İşler
Proje döngüsü: kanıt kendi işimiz.
09
SSS
Beş soru; fiyat, süre, kapsam, teslim.
10
Çağrı
Diğer üç hizmet ve iletişim.
SERVICE / 01
Kurumsal kimlik
SERVICE / 02
Web sitesi
SERVICE / 03
3D ürün render
SERVICE / 04
Dijital pazarlama
Adres
Türkçe ve aranan kelimeyle: /kurumsal-kimlik/, /web-sitesi/, /3d-urun-render/, /dijital-pazarlama/.
Başlık
H1 iki satır: hizmetin adı ve tek cümlelik vaat; satır aralığı 1,12.
Kanıt
Rakam, ödül ve müşteri adı yok. Kanıt kendi işimiz: marka sistemi, bu site, render çalışmaları, Perspektif yazıları.
Bağlantı
Ana sayfa ve stüdyodaki hizmet kartları, alt bilgideki Hizmetler sütunu ve her sayfanın sonundaki diğer hizmetler aynı dört adrese gider.