IADEOS/Marka
Tasarım Sistemi 1.0 · Web katmanı
IADEOS marka sistemi
İşaret, renk, yazı, durum biçimleri, hareket ve örnek motorları. Sitedeki her öğe bu sayfadaki kurallardan türetilir.
01 · İşaret ve logo
İki bıçak, tek harf.
İşaret, logodaki A harfinin iki mavi bıçağıdır. Ortada buluşan iki çizgi iki kaydı anlatır: hastanenin kaydı ve sizin hakkınız. Yazı biçimi mürekkep, işaret her zaman IADEOS mavisidir; tek renkli kullanımda ikisi aynı rengi alır.
iadeos-logo.svg
iadeos-logo-on-ink.svg
iadeos-logo-ink.svg
iadeos-logo-white.svg
iadeos-mark.svg
iadeos-mark-white.svg02 · Üç boyutlu işaret
Aynı geometri, derinlikle.
Üç boyutlu işaret, orijinal SVG yolundan ekstrüde edilir; çizilmez, türetilir. Çevresindeki şerit 120 harmonik eğriden oluşur. Sürükleyerek çevirin.
three.js r160 · MeshPhysicalMaterial, açık kaplama 1.0, pürüzlülük 0.2 · şerit konumları GPU'da hesaplanır.
03 · Alan ve ölçü
İşarete nefes alanı bırakın.
Logonun çevresinde en az bir bıçak yüksekliğinin yarısı kadar boşluk bırakılır. Bu alana metin, çizgi ya da başka bir işaret girmez.
xxxx- Boşluk (x)
- Logo yüksekliğinin %50'si
- En küçük logo
- Ekranda 88 px genişlik · baskıda 24 mm
- En küçük işaret
- Ekranda 16 px · favicon için yalnızca işaret
- Zemin
- Beyaz, yüzey ya da mürekkep. Fotoğraf üzerine konmaz.
04 · Renk
Üç ana renk, altı destek tonu.
Beyaz zemin, mürekkep metin, IADEOS mavisi eylem. Kırmızı, yeşil ve sarı kullanılmaz. Bir renge tıklayınca kodu kopyalanır.
| Örnek | Kullanım | Ön / arka | Oran | Düzey |
|---|---|---|---|---|
| Aa | Metin beyaz zeminde | #0B1220 / #FFFFFF | 18.72:1 | AAA |
| Aa | Beyaz metin mürekkep zeminde | #FFFFFF / #0B1220 | 18.72:1 | AAA |
| Aa | Beyaz metin mavi butonda | #FFFFFF / #176BFD | 4.61:1 | AA |
| Aa | İkincil metin beyaz zeminde | #4A5363 / #FFFFFF | 7.75:1 | AAA |
| Aa | Koyu mavi seçili satırda | #0F4FC4 / #EEF4FF | 6.48:1 | AA |
05 · Yazı
IBM Plex: biri konuşur, biri sayar.
Plex Sans başlık ve metin için; ince (300) ağırlık büyük boyutta otorite verir. Plex Mono etiket, kod ve rakam içindir; rakamlar her zaman tablo hizasındadır. İki aile de Türkçe karakterlerin tamamını taşır.
Display · 300
104/0.98 · −4.5%HakkınızıBaşlık 2 · 300
68/1.02 · −3.8%Beş adım, tek dosya.Başlık 3 · 500
26/1.2Kalemler ayrıştırılırMetin · 400
17/1.6Özel hastaneler size yalnızca bir toplam gösterir. Kalemler dökümlü faturada yazar.Etiket · Mono 500
12 · +8% · büyük harfYöntem · 04 / 10Rakam · Mono
tabular-nums27.000,00 ₺06 · Durumlar
Renk hüküm vermez. Biçim verir.
Dört durum yalnızca dolgu, çerçeve kalınlığı ve kesik çizgiyle ayrılır. Renk körlüğünde, siyah-beyaz baskıda ve faksta aynı okunur.
Dolgu. Belgeyle desteklenen aşım.
Mavi çerçeve. Hesapta aşım var, belge bekleniyor.
Kalın çerçeve. Kayıtlar birbirini tutmuyor.
Kesik çizgi. Henüz karşılaştırılamadı.
07 · Hareket
Hareket bir şeyi açıklarsa vardır.
Sayfa kaydırıldıkça hikâye ilerler: kelimeler yerine oturur, buzdağı katmanları genişler, merdiven basamak basamak çizilir. Hareketi azaltma tercihi açık olan ziyaretçiler her şeyi durağan ve eksiksiz görür.
| Belirteç | Değer | Kullanım | Örnek |
|---|---|---|---|
| --ease | cubic-bezier(.22, 1, .36, 1) | Tüm girişler ve geçişler | |
| doğrusal (kullanılmaz) | linear | Karşılaştırma için | |
| --t-fast | 160 ms | Üzerine gelme, renk, çerçeve | — |
| --t-med | 600 ms | Adım açılması, ikon dönüşü | — |
| görünür olma | 900 ms · y 28px → 0 | Ekran altındaki bloklar | — |
| kinetik kelime | opaklık .22→1 · y 24→0 · rotateX 40°→0 | Kaydırmaya bağlı başlıklar; bulanıklık yok | — |
| harmonik sürüklenme | ω = 0.29 · 0.211 · 0.131 · 0.091 rad/s | Toroidal şerit ve moiré örnekleri | — |
Eğrilerin farkını görmek için satırların üzerine gelin.
08 · Örnek motorları
On altı çizim, her biri bir adımı anlatır.
Tümü tek bir kanvas motorunda çalışır, yalnızca ekranda görünürken çizilir. Bulanıklık ve gölge kullanılmaz; çizgiler 0.5 px kıl inceliğindedir. Süs için değil, sürecin bir adımını göstermek için kullanılır.
09 · Kurallar
Yapılır, yapılmaz.
- Ekranda tek birincil mavi buton.
- Katmanları 1 px çizgiyle ayırın; gölge kullanmayın.
- Durumu biçimle anlatın: dolgu, çerçeve, kesik çizgi.
- Rakamları Plex Mono ve tablo hizasıyla yazın.
- Her hareketi bir sürece bağlayın; azaltılmış harekette durağan gösterin.
- Eksik bilgi için köşeli parantezli yer tutucu bırakın; uydurmayın.
- Kırmızı, yeşil, sarı ile “iyi/kötü” anlatmak.
- Logoyu eğmek, gölgelemek ya da renklerini değiştirmek (üç boyutlu işaret yalnızca kendi bölümünde döner).
- Arka plana anlamsız nokta ızgarası ya da degrade koymak.
- Bulanıklık filtresiyle derinlik taklidi yapmak.
- Aynı ekranda iki mavi buton.
- Uydurma istatistik ya da müşteri yorumu.
10 · Dosyalar
Kaynak paketi
Aşağıdaki dosyalar IADEOS kaynak paketinde yer alır. Web katmanı bu sayfanın kendisidir; React bileşenleri aynı motorları TypeScript ile sarar.