Tasarım Sistemi
Bulutfon
Kurumsal Kimlik
Tutarlı Bulutfon arayüzleri oluşturmak için renk paleti, tipografi ve bileşen referansı.
01
Logo
Bulutfon logosu yatay ve sadece ikon formatlarında. Açık arka planlarda açık sürümü, koyu arka planlarda koyu sürümü kullanın.
Logo Yapısı
Logo, geometrik daireler ve dikdörtgen yapı blokları üzerine inşa edilmiştir. Kılavuz çizgileri, "b" simgesinin oranlarını ve hizalama kurallarını tanımlar.
Yatay - metin ile
Açık arka planlar - mavi logo
Koyu arka planlar - beyaz logo
Simge - metin olmadan
Beyaz üzerinde
Primary-900 üzerinde
Base-200 üzerinde
Gray-800 üzerinde
Mevcut dosyalar
logo-wireframe.png
horizontal-light.svg
horizontal-dark.svg
icon-light.svg
icon-dark.svg
02
Renk Paleti
Her ölçek derin (900) tondan açık (50) tona uzanır. 600 adımı, her renk grubu için birincil referanstır.
Primary
Ana marka rengi - güven, otorite, profesyonellik900
#02315A
700
#024988
600
#025196
500
#1B62A0
400
#3574AB
300
#4e7dc7
200
#80A7CA
100
#B3CADF
50
#D8E4EE
Secondary
Vurgu sıcaklığı - öne çıkanlar, CTA butonları, enerji900
#402902
600
#FCBA4C
500
#FDC870
400
#FDCF82
300
#FDD694
200
#FDDCA5
100
#FDE2B6
50
#FEEAC9
Danger
Hatalar, yıkıcı işlemler, kritik uyarılar900
#8D1C21
600
#B9242B
500
#C03A40
400
#C75055
300
#CE666B
200
#DC9295
100
#EABEC0
50
#F5DEDF
Warning
Dikkat durumları, bekleyen işlemler, uyarılar900
#704000
600
#F08700
500
#F19319
400
#F39F33
300
#F5AB4D
200
#F8C380
100
#FBDBB3
50
#FDEDD9
10
#FEF4E3
Success
Olumlu sonuçlar, onaylar, aktif durumlar900
#2F5606
600
#447D08
500
#578A21
400
#699739
300
#7DA453
200
#A2BE84
100
#C7D8B5
50
#E3ECDA
10
#EBF1E5
Gray
Nötr tonlar - metin, kenarlıklar, arka planlar (Slate)950
#020617
900
#0f172a
800
#1e293b
700
#334155
600
#475569
500
#64748b
400
#94a3b8
300
#cbd5e1
200
#e2e8f0
100
#f1f5f9
50
#f8fafc
03
Tema
Bulutfon paletine eşlenen semantik renkler. Tüm daisyUI bileşenlerini bu renkler yönlendirir.
primary
#025196
secondary
#FCBA4C
accent
#4e7dc7
neutral
#1e293b
info
#3574AB
success
#447D08
warning
#F08700
error
#B9242B
Butonlar
Rozetler
Uyarılar
Kartlar
Bulut Santral
Akıllı çağrı yönlendirme ve IVR menüleri ile bulut tabanlı VoIP.
Çağrı Merkezi
Kuyrukları yönetin, temsilcileri izleyin ve performansı gerçek zamanlı takip edin.
Entegrasyonlar
CRM, yardım masası ve 100'den fazla araçla bağlantı kurun.
Form Kontrolleri
04
Tipografi
Üç katmanlı yazı tipi sistemi: Başlıklar için Montserrat, gövde metni için Inter ve kod için JetBrains Mono.
Montserrat
Başlıklar / Gösterim
--font-display İnsancıl sıcaklıkla geometrik sans-serif. Tüm başlıklar, butonlar, navigasyon ve CTA'lar için kullanılır. Kalın ağırlıkları dikkat çeker.
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Inter
Gövde / Okuma
--font-sans Mükemmel x-yüksekliği ve açık apertürleriyle ekran okunabilirliği için tasarlanmıştır. Paragraflar, açıklamalar ve tüm uzun içerikler için kullanılır.
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
JetBrains Mono
Kod / Teknik
--font-mono Artırılmış harf yüksekliği ve belirgin karakter formlarına sahip monospace yazı tipi. Kod parçacıkları, dosya yolları, simge adları ve teknik referanslar için kullanılır.
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Hızlı kahverengi tilki tembel köpeğin üzerinden atlar
Başlık Ölçeği
Önerilen Tailwind sınıflarıyla canlı olarak işlenen başlık hiyerarşisi.
<h1> Sayfa Başlığı · Montserrat · font-black (900) Bulut Telefon Sistemi
font-display text-3xl sm:text-4xl md:text-5xl font-black tracking-[-0.02em] leading-[1.1] <h2> Bölüm Başlığı · Montserrat · font-bold (700) Neden Bulutfon?
font-display text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight <h3> Alt Bölüm · Montserrat · font-bold (700) Akıllı Çağrı Yönlendirme
font-display text-lg sm:text-xl font-bold <h4> Kart Başlığı · Montserrat · font-bold (700) Sesli Yanıt Sistemi
font-display text-base font-bold Gövde Metin Ölçeği
Paragraflar, açıklamalar, altyazılar ve etiketler için metin stilleri.
Bulutfon, ekiplerin verimli iletişim kurmasına yardımcı olan bulut tabanlı bir iş telefonu sistemidir. Sanal telefon numaranızı dakikalar içinde kurun ve her yerden arama yapmaya başlayın.
font-sans text-base text-base-content leading-relaxed 80'den fazla ülkede yerel ve ücretsiz numaralarla kullanılabilir. Donanım gerekmez — herhangi bir cihazla çalışır.
font-sans text-sm text-base-content/80 leading-relaxed Son güncelleme 3 saat önce · 5 dk okuma
font-sans text-xs text-base-content/80 Telefon Sistemi
font-display text-xs font-semibold tracking-[0.15em] uppercase text-primary Kod Tipografisi
Teknik içerik için JetBrains Mono — simge adları, dosya yolları ve kod.
currentColor özelliğini simge renk devralması için kullanın.
src/icons/sector-technology.svg
sector-technology
import { Icon } from 'astro-icon/components';
// Sektör simgesini semantik renkle işle
<Icon
name="sector-technology"
class="w-6 h-6 text-primary"
/>Karakter Setleri
Montserrat
ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ
abcçdefgğhıijklmnoöprsştuüvyz
0123456789 & ? ! @ # %
Inter
ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ
abcçdefgğhıijklmnoöprsştuüvyz
0123456789 & ? ! @ # %
JetBrains Mono
ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZ
abcçdefgğhıijklmnoöprsştuüvyz
0123456789 & ? ! @ # %
05
Sektör Simgeleri
Sektör açılış sayfaları için sektöre özel simgeler. Monokrom SVG formatında - currentColor ile renk devralır.
Muhasebe
sector-accounting Dernek ve Vakıf
sector-association Otomotiv
sector-automotive Kimya ve Eczacılık
sector-chemical Danışmanlık
sector-consulting E-ticaret
sector-ecommerce Eğitim
sector-education Enerji
sector-energy Mühendislik ve Mimarlık
sector-engineering Finans
sector-finance Gıda
sector-food Sağlık
sector-healthcare Sigortacılık
sector-insurance Hukuk
sector-legal Lojistik
sector-logistics Üretim
sector-manufacturing Medya
sector-media Dış Kaynak
sector-outsourcing Kamu
sector-public Gayrimenkul
sector-realestate Perakende
sector-retail Hizmet
sector-service Teknoloji
sector-technology Tekstil
sector-textile Turizm
sector-tourism Ulaşım
sector-transportation Boyut Referansı
Koyu Arka Plan Üzerinde
Simge dosyaları
src/icons/ dizininde bulunur - <Icon name="sector-*" /> ile kullanılır
sector-accounting.svg
sector-association.svg
sector-automotive.svg
sector-chemical.svg
sector-consulting.svg
sector-ecommerce.svg
sector-education.svg
sector-energy.svg
sector-engineering.svg
sector-finance.svg
sector-food.svg
sector-healthcare.svg
sector-insurance.svg
sector-legal.svg
sector-logistics.svg
sector-manufacturing.svg
sector-media.svg
sector-outsourcing.svg
sector-public.svg
sector-realestate.svg
sector-retail.svg
sector-service.svg
sector-technology.svg
sector-textile.svg
sector-tourism.svg
sector-transportation.svg