Trzy role: „primary” – tożsamość marki, „ink” – czcionki i powierzchnie, „signals” – odcienie i obramowania. Proszę kliknąć dowolny kod szesnastkowy lub RGB, aby go skopiować.

Podstawowe i związane z marką

Atrament i czcionka

Sygnały i powierzchnie

Czcionka szeryfowa do nagłówków, bezszeryfowa do wszystkiego innego. DM Serif Display nadaje tekstowi ciepła i redakcyjnej powagi; Inter sprawdza się w długich tekstach i interfejsach użytkownika, nie odwracając uwagi.

Dwie skale. Artykuł przeznaczone jest dla długich treści, wpisów na blogu oraz stron programów. Wyświetlacz przeznaczony jest do sekcji głównych, stron docelowych oraz działań marketingowych, w których czcionka musi odgrywać większą rolę. Poniższe rozmiary stanowią górną granicę dla komputerów stacjonarnych — nagłówki są dostarczane jako clamp() dlatego na telefonach są one wyświetlane w zmniejszonej skali.

Inter 16 / 600, odstępy wewnętrzne: 1rem 2rem, promień 8 pikseli, przejście kolorów trwające 0,18 s. Style linków w serwisie Squarespace przenikają do bloków kodu, dlatego kotwice przycisków są zawsze ustawiane kolor oraz ozdoba tekstu z !important.

Elementy składowe wielokrotnego użytku. Pojawiają się one w wpisach na blogu, na stronach poświęconych programom oraz w treściach skierowanych do darczyńców. Zanim stworzą Państwo nowy wzór, warto sięgnąć po już istniejący — spójność marki wynika z powtarzalności, a nie z nowości.

Ruch jest jedynie wskazówką, a nie samym działaniem. Wszystko porusza się po tej samej krótkiej krzywej, a nic nie porusza się bez konieczności.

• Przejścia

  od 0,18 s do 0,2 s łatwość dotyczących koloru, tła, obramowania i przezroczystości. Proszę nie stosować dłuższych ani podskakujących elementów.

• Efekt najechania kursorem na kartę

  Obramowanie ma kolor TCF Cyan z dopasowanym pierścieniem o szerokości 1 piksela (box-shadow: 0 0 0 1px #00B4DB). Nie transY przenoszenie kart do nowych zasobów — stare elementy są usuwane w miarę przebudowy stron.

• Najechanie kursorem na rejestr

  Po najechaniu kursorem na wiersz jego elementy równorzędne zostają przeniesione do krycie: 0,55, zmienia kolor frazy zapisanej kursywą na cyjanowy i przesuwa strzałkę o 4 piksele. Wiersz, nad którym znajduje się kursor, zachowuje pełną przezroczystość.

• Główny temat

  Każdy element interaktywny otrzymuje :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Nigdy nie należy zdejmować pierścieni ostrości bez ich ponownego założenia.

• Niedozwolone

  Brak pulsowania, świecenia, odbicia, efektu paralaksy ani ruchów odtwarzanych automatycznie. Brak animacji, które powtarzają się, gdy strona pozostaje w stanie bezczynności.

Witryna działa na platformie Squarespace 7.1, dlatego większość nowych projektów graficznych dostarczana jest w postaci samodzielnych bloków kodu umieszczanych w sekcji opartej na silniku Fluid. Zasady te zapobiegają konfliktom między tymi blokami oraz między nimi a platformą.

• Prefiks klasy

  Każdy nowy blok wykorzystuje tcfx- przedrostek. tcf- należy do starszej wersji niestandardowego arkusza stylów (Custom CSS) i spowoduje konflikt.

• Tylko reset w zakresie

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } i nic szerszego. O szerokości strony * Resetowanie już wcześniej spowodowało awarię strony.

• Wszystko należy umieścić w przestrzeniach nazw

  Zastosuj wszystkie reguły obowiązujące w klasie nadrzędnej danego bloku. Blok kodu powinien dać się bezpiecznie wkleić na dowolną stronę bez powodowania skutków ubocznych.

• Najpierw proszę zaimportować

  Jeśli a <style> zastosowania @import W przypadku czcionek musi to być pierwszy wiersz w tym tagu, w przeciwnym razie przeglądarka pominie tę informację.

• Brak komentarzy

  Kod HTML i CSS w wersji produkcyjnej nie zawiera komentarzy. Prosimy o udokumentowanie tego bloku w notatkach projektowych.

• Brak emoji jako ikon

  Tekst, cyfry lub wbudowane pliki SVG. Emoji wyświetlają się nierównomiernie na różnych platformach i są postrzegane jako nieformalne.

• Granatowy, a nie czarny

  W całym interfejsie użytkownika kolor „Deep Navy” zastępuje czerń. Czysta czerń jest zarezerwowana dla elementów multimedialnych.

• Najpierw urządzenia mobilne

  Proszę wykorzystać układ telefonu jako podstawę i dodać min-width zapytania w górę. Stosy jednokolumnowe, clamp() rodzaj czcionki, zmniejszone odstępy przy szerokości poniżej 640 pikseli, elementy przyjazne dla obsługi dotykowej.

• Linki zewnętrzne

  target="_blank" zawsze dostarczane wraz z rel="noopener noreferrer".

• Tekst jest cytatem dosłownym

  Podczas zmiany wyglądu istniejącej strony prosimy o dokładne zachowanie nagłówków, treści, adresów URL oraz parametrów UTM. Wszelkie zmiany należy wyraźnie zaznaczyć, a nie wprowadzać je w sposób niezauważalny.

• Zachowaj nagłówek H1

  W odnowionych opisach bohaterów zachowano dokładnie jeden element H1 z oryginalnym brzmieniem, ze względu na SEO. Proszę unikać stosowania elementów Squarespace’a tekst o kwadratowej skali element otaczający — jego rozmiar w linii może ulec zmniejszeniu w czasie wykonywania, co spowoduje zwinięcie nagłówka.

• Przejęcie sekcji

  Aby wymusić ciemny kolor sekcji bloku, należy zaznaczyć warstwę tła, a nie ramkę sekcji — malowanie .sekcja-strony nadaje prostokątny kształt dowolnemu elementowi dzielącemu typu „clip-path”.

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