Year-end giving ends December 31. Be there for the next diagnosis. Give now →
Kolory, typografia i wzory elementów składające się na identyfikację wizualną Fundacji na rzecz Walki z Rakiem Jądra. Proszę kliknąć dowolną wartość szesnastkową lub RGB, aby ją skopiować.
Trzy role: „primary” – tożsamość marki, „ink” – czcionki i powierzchnie, „signals” – odcienie i obramowania. Proszę kliknąć dowolny kod szesnastkowy lub RGB, aby go skopiować.
Marka. Wezwania do działania, akcenty, linki, teksty wyróżniające oraz kluczowe elementy wizualne.
Proszę oznaczyć przyciski, tekst linków w treści oraz stany po najechaniu kursorem kolorem cyjanowym. Należy zapewnić większy kontrast na tle o zabarwieniu.
Stan po najechaniu kursorem na wszystkie elementy o barwie ciemnoniebieskiej, przyciski dodatkowe, linki w kolumnie bocznej oraz linki w kartach.
Tła tagów, opisów i kart wyróżnionych. Subtelna obecność marki, która nie konkuruje z treścią.
Obramowanie, które współgra z wypełnieniem w odcieniu cyjanowym. Zapewnia czytelność kart z tym odcieniem na białej stronie.
Nagłówki, karty główne, bloki wezwań do działania, stopka, kontury wyróżniające. Zastępuje czystą czerń we wszystkich miejscach.
Domyślny tekst na jasnym tle. Niższy kontrast niż w przypadku granatu, co sprawia, że czytanie dłuższych tekstów jest przyjemniejsze.
Podpunkty, opisy list, tekst uzupełniający pod nagłówkiem.
Podpisy, etykiety specyfikacji, przypisy, nazwy punktów sprzedaży, wiersze dotyczące numeru EIN. Dyskretne, ale czytelne.
Tekst główny na tle w kolorze ciemnoniebieskim, elementy wyróżniające, karty wyróżniające, wezwania do działania, stopka.
Domyślne tło strony. Karty i obszary treści.
Zmieniające się tła sekcji, stany przełączników w pozycji wyłączonej, wbudowane fragmenty kodu.
Obramowania kart, cienkie linie pod nagłówkami, linie oddzielające kolumny w tabelach i wiersze na listach.
Kontury przycisków drugorzędnych oraz wszelkie obramowania, które muszą być widoczne na tle powierzchni Slate 100.
Przeznaczone dla mediów (kompozycje z logo, maski fotograficzne). Prosimy nie stosować tego koloru w przypadku tekstu; w tym celu należy używać koloru „Deep Navy”.
Linie włosów na ciemnym tle: na powierzchniach w kolorze ciemnoniebieskim należy stosować przekładki i obramowania rgba(255,255,255,0,08) do rgba(255,255,255,0,12) a nie sześciokąt z łupka.
Istnieje jeden odcień cyjanu: #00B4DB, a dla stanu „deep” i „hover” stosuje się #0091B0. Te starsze warianty nadal pojawiają się na starszych stronach oraz w niestandardowych arkuszy CSS. Należy je zastępować natychmiast po zauważeniu i nigdy nie wprowadzać ich ponownie w nowych projektach.
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.
Czcionka szeryfowa · wyłącznie rozmiar 400 · Nagłówki, cytaty, cyfry
Sans · 400 / 600 / 700 · Tekst główny, interfejs użytkownika, przyciski
Czcionka DM Serif Display jest dostarczana w jednej grubości. Proszę nigdy nie składać wniosku <strong>, <b>, lub grubość czcionki: 600/700 W przypadku czcionek szeryfowych przeglądarka generuje imitację pogrubienia, która wyświetla się jako gruba i rozmazana, co jest szczególnie widoczne w przeglądarce Safari. Jeśli linia czcionki szeryfowej wymaga podkreślenia, należy użyć <em>: kursywa w połączeniu z kolorem TCF Cyan stanowi standardowy wzór podkreślenia stosowany w firmie.
Dwie skale. Artykuł przeznaczone jest dla długich treści, wpisów na blogu oraz stron programów. Wyświetlacz przeznaczone są do sekcji głównych, stron docelowych oraz działań marketingowych, w których czcionka musi odgrywać większą rolę. Poniższe rozmiary stanowią maksymalną wartość dla komputerów stacjonarnych; nagłówki są wyświetlane jako clamp() dlatego na telefonach są one wyświetlane w zmniejszonej skali.
Zaufanie buduje się poprzez wymierną odpowiedzialność i stałą przejrzystość, co dokładnie odzwierciedlają nasze oceny przyznawane przez niezależne podmioty.
Założona w 2009 roku Fundacja na rzecz Walki z Rakiem Jądra jest organizacją non-profit typu 501(c)(3) oraz jedyną w kraju organizacją zajmującą się rakiem jądra, dysponującą pełnoetatowym personelem. Jesteśmy zespołem złożonym z osób, które przeżyły chorobę, opiekunów oraz działaczy, których pasją jest poszerzanie wiedzy i zwiększanie świadomości społecznej.
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.
Kolor cyjan jako podstawowy dla głównej akcji; kolor ciemny cyjan, gdy przycisk znajduje się obok tekstu głównego i wymagany jest kontrast; kontur dla wszystkich elementów drugorzędnych.
Cyjan na granacie. Granat na cyjanie – pasek dotyczący darowizn stanowi jedyny wyraźny akcent w kolorze cyjanowym na tej stronie, dlatego jego przycisk ma ciemny odcień, zamiast kontrastować z tłem.
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 szablon, warto sięgnąć po już istniejący – spójność marki opiera się na powtarzalności, a nie na nowatorstwie.
Etykieta kategorii nad nagłówkiem H1. Tło w delikatnym odcieniu, tekst w kolorze ciemnoniebieskim.
Krótkie podsumowanie lub najważniejsze wnioski. Niebieska barwa z główną lewą ramką o szerokości 3 pikseli.
W skrócie: Candid Platinum, 4 gwiazdki w serwisie Charity Navigator (93%), najwyższa ocena w serwisie GreatNonprofits, niezależne recenzje na Trustpilot.
Ciemny tło z nagłówkiem, podtytułem, akapitem wprowadzającym oraz opcjonalnym cytatem wyróżniającym.
Dla darczyńców i partnerów
Większość organizacji non-profit z naszej kategorii jest obecna na jednej lub dwóch z tych platform. TCF jest oceniana na wszystkich czterech.
„Niezależna weryfikacja stanowi minimum, a nie maksimum”.
Listy schodkowe, oceny, sekcje programowe. Cyfry z serifami w kolorze podstawowym cyjanowym, cienkie linie oddzielające, brak chromowanych elementów w stylu kart.
Dotrzyjcie do młodych mężczyzn tam, gdzie się znajdują, oferując im edukację wolną od piętna.
Prosimy o nawiązanie kontaktu między nowo zdiagnozowanymi pacjentami a osobami, które przeszły tę chorobę.
Opieka długoterminowa, wsparcie społecznościowe oraz dostępne zasoby po zakończeniu leczenia.
Wiersze z tekstem pisanym czcionką szeryfową w pierwszej osobie pełnią rolę punktów orientacyjnych. Po najechaniu kursorem na dany wiersz pozostałe elementy tego samego wiersza zostają przyciemnione, fraza zapisana kursywą zmienia kolor na cyjan, a strzałka przesuwa się. Stosowane w sekcjach nawigacyjnych oraz we wszelkich listach typu „wybierz swoją sytuację”.
Karty o jednakowej wysokości przeznaczone na artykuły prasowe, materiały i pliki do pobrania. Po najechaniu kursorem pojawia się cyjanowa ramka oraz pierścień o szerokości 1 piksela; nigdy nie stosuje się efektu przesunięcia.
Osoba, która przeżyła chorobę, podkreśla znaczenie samokontroli i odsyła czytelników do materiałów TCF dotyczących samobadania.
Przeczytaj artykuł →Recenzowane badanie poświęcone analizie tego, w jaki sposób kampanie oparte na humorze angażują młodych mężczyzn.
Zapoznaj się z badaniem →Osoby, które przeżyły chorobę, opiekunowie, działacze społeczni oraz pracownicy służby zdrowia spotykają się, by wspólnie spędzić weekend poświęcony edukacji.
Przeczytaj artykuł →Duże cyfry napisane czcionką DM Serif. Powyżej umieszczono mikroetykietę, poniżej – opis w języku potocznym. Nigdy nie należy pogrubiać cyfr.
Z każdego dolara trafia bezpośrednio na realizację usług w ramach programu.
Jedyna w kraju grupa zajmująca się rakiem jąder, dysponująca personelem zatrudnionym w pełnym wymiarze godzin.
Niezależne podmioty oceniające organizacje charytatywne; wszystkie wyniki są podawane do wiadomości publicznej.
Głosy osób, które przeżyły, oraz ich partnerów. Czcionka Serif kursywna, drobne napisy z informacją o autorstwie, karta o grubości włoska.
„Nikt mi nie kazał tego sprawdzić. To właśnie tę ciszę mamy zamiar przełamać”.Osoba, która przeżyła chorobę, u której zdiagnozowano ją w wieku 24 lat
Blok z opcją przekazania darowizny lub rejestracji umieszczony na końcu artykułu. Ciemnoniebieski z akcentami w kolorze cyjan, pojedyncza wyśrodkowana kolumna, maksymalna szerokość około 720 pikseli.
Każdy dolar jest zarządzany zgodnie z tymi samymi standardami, które odzwierciedlają nasze niezależne oceny.
Przekaż darowiznę na rzecz TCFRuch 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.
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.
Obramowanie ma kolor TCF Cyan z dopasowanym pierścieniem o szerokości 1 piksela (box-shadow: 0 0 0 1px #00B4DB). Nie transY W ramach nowych prac wprowadzane są nowe moduły kart; stare moduły są usuwane w miarę przebudowy stron.
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ść.
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.
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ą.
Każdy nowy blok wykorzystuje tcfx- przedrostek. tcf- należy do starszej wersji niestandardowego arkusza stylów (Custom CSS) i spowoduje konflikt.
.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.
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.
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ę.
Kod HTML i CSS w wersji produkcyjnej nie zawiera komentarzy. Prosimy o udokumentowanie tego bloku w notatkach projektowych.
Tekst, cyfry lub wbudowane pliki SVG. Emoji wyświetlają się nierównomiernie na różnych platformach i są postrzegane jako nieformalne.
W całym interfejsie użytkownika kolor „Deep Navy” zastępuje czerń. Czysta czerń jest zarezerwowana dla elementów multimedialnych.
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.
target="_blank" zawsze dostarczane wraz z rel="noopener noreferrer".
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.
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.
Aby wymusić ciemny kolor sekcji bloku, należy zaznaczyć warstwę tła, a nie ramkę sekcji, i pomalować .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; }