Üç rol: marka kimliği için "primary ", yazı tipi ve yüzeyler için "ink ", renk tonları ve kenarlıklar için "signals". Herhangi bir hex veya RGB koduna tıklayarak kopyalayabilirsiniz.

Ana ve marka

Mürekkep ve yazı tipi

Sinyaller ve yüzeyler

Başlıklar için serif, geri kalan her şey için sans serif. DM Serif Display, sıcaklık ve editoryal ağırlık katarken; Inter, uzun metin okumalarını ve kullanıcı arayüzünü dikkat dağınıklığı yaratmadan ele alıyor.

İki ölçek. Makale uzun metinli içerikler, blog yazıları ve program sayfaları içindir. Ekran Bu, yazı tipinin daha fazla işlev görmesi gereken kahraman bölümleri, açılış sayfaları ve pazarlama anları içindir. Aşağıdaki boyutlar masaüstü ekranlar için üst sınırdır — başlıklar şu şekilde sunulur: clamp() bu yüzden telefonlarda boyutları küçültülüyor.

Inter 16 / 600, dolgu: 1rem 2rem, 8 piksel yarıçap, 0,18 saniye renk geçişi. Squarespace’teki bağlantı stilleri kod bloklarına da yansıyor, bu nedenle düğme bağlantı adresleri her zaman renk ve metin süslemesi ile !important.

Yeniden kullanılabilir yapı taşları. Bunlar blog yazılarında, program sayfalarında ve bağışçılara yönelik içeriklerde yer alır. Yeni bir şablon oluşturmadan önce mevcut şablonlardan yararlanın — marka, yenilikçilikle değil, tekrarlama yoluyla tutarlılığını korur.

Hareket bir ipucudur, bir performans değildir. Her şey aynı kısa eğri üzerinde hareket eder ve gerekmedikçe hiçbir şey hareket etmez.

• Geçişler

  0,18 saniye ile 0,2 saniye arası kolaylık renk, arka plan, kenarlık ve saydamlık ayarları. Daha uzun ya da zıplayan bir şey olmasın.

• Kart üzerine fareyi getirdiğinizde

  Kenarlık, 1 piksel genişliğinde uyumlu bir halka ile birlikte TCF Cyan rengine ayarlanır (box-shadow: 0 0 0 1 piksel #00B4DB). Hayır transY Yeni çalışmada kartlı asansör — sayfalar yeniden oluşturuldukça eski asansörler kaldırılıyor.

• Ledger üzerine fareyi getirdiğinizde

  Bir satırın üzerine fareyi getirdiğinizde, aynı satırdaki diğer öğeler opasite: 0,55, italik yazılan kısmı camgöbeği rengine çevirir ve oku 4 piksel kaydırır. Fareyle üzerine gelindiğinde satırın opaklığı tam olarak korunur.

• Odak

  Her etkileşimli öğe :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Odak halkalarını, yerine yenilerini takmadan asla çıkarmayın.

• İzin verilmez

  Nabız, parlama, zıplama, paralaks veya otomatik oynatma hareketi olmamalıdır. Sayfa hareketsizken tekrarlanan animasyonlar olmamalıdır.

Site Squarespace 7.1 üzerinde çalışıyor; bu nedenle yeni tasarım çalışmalarının çoğu, Fluid Engine bölümüne yerleştirilen bağımsız bir kod bloğu olarak sunuluyor. Bu kurallar, söz konusu blokların birbirleriyle veya platformla çakışmasını önlüyor.

• Sınıf öneki

  Her yeni blok, tcfx- ön ek. tcf- eski Custom CSS'ye aittir ve çakışma yaratacaktır.

• Yalnızca kapsamlı sıfırlama

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } ve daha geniş bir şey yok. Sayfa genişliğinde bir * Sıfırlama işlemi daha önce de sitenin bozulmasına neden olmuştu.

• Her şeye ad alanı atayın

  Blokun kök sınıfı altındaki tüm kuralları tarayın. Bir kod bloğu, herhangi bir yan etki yaratmadan herhangi bir sayfaya güvenle yapıştırılabilmelidir.

• Önce içe aktar

  Eğer bir <style> kullanım alanları @import Yazı tipleri için, bu etiket içindeki ilk satırda yer alması gerekir; aksi takdirde tarayıcı bunu yok sayar.

• Yorum yok

  Üretim amaçlı HTML ve CSS dosyaları yorum içermez. Bunun yerine, bloğu proje notlarında belgelendirin.

• Simge olarak emoji kullanılmıyor

  Metin, rakamlar veya satır içi SVG. Emojiler farklı platformlarda tutarsız bir şekilde görüntülenir ve gayri resmi bir izlenim bırakır.

• Lacivert, siyah değil

  UI’nin her yerinde siyah yerine koyu lacivert kullanılır. Saf siyah ise medya öğeleri için ayrılmıştır.

• Önce mobil

  Telefon düzenini temel alarak tasarlayın ve şunları ekleyin min-width yukarı doğru sorgular. Tek sütunlu yığınlar, clamp() yazı tipi, 640 pikselin altındaki genişliklerde daraltılmış dolgu, dokunmaya uygun hedefler.

• Dış bağlantılar

  target="_blank" her zaman aşağıdakilerle birlikte gönderilir: rel="noopener noreferrer".

• Metin aynen aktarılmıştır

  Mevcut bir sayfayı yeniden düzenlerken, başlıkları, ana metni, URL’leri ve UTM parametrelerini aynen koruyun. Herhangi bir değişikliği sessizce yapmak yerine, bunu açıkça belirtin.

• H1'i koruyun

  Yeniden oluşturulan kahramanlar, SEO amacıyla orijinal metnini aynen koruyan tam olarak bir adet H1 başlığı içerir. Squarespace’in kare kök ölçekli metin sarmalayıcı — çalışma zamanında satır içi boyutu kaybolabilir ve başlığı daraltabilir.

• Bölüm devralma

  Bir bloğun bölümünü karanlık hale getirmek için, bölüm kutusunu değil arka plan katmanını hedefleyin — boyama .page-section herhangi bir clip-path ayırıcısını ortadan kaldırır.

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}