Paleta i kroje

źródło: tutlo.com

Nagłówki

Elastyczny kurs angielskiego online

Lexend Deca 500 bez zwężania odstępów Google Fonts
46hero, desktop
36sekcja
21nazwa miasta, karta

Tekst

Uczysz się z dowolnego miejsca w Polsce, w godzinach, które sama ustawiasz. Lektor łączy się w kilka sekund, bez umawiania terminu z góry.

Lexend Deca 300 na tekst 16 px / 1,7 jeden krój na całość

Tutlo prowadzi cały serwis na jednym kroju, a lekkie 300 w tekście daje ten przewiewny charakter. Lexend Deca jest w Google Fonts, więc idzie do dem jeden do jednego, bez zamiennika.

Paleta

#333333

Grafit. Nagłówki, kreska ikon, nazwy miast.

#707277

Szary. Akapity, opisy pod nagłówkiem.

#FFD400

Żółty. Plamy pod ikonami, podkreślenia, etykiety.

#FFF3B8

Żółta mgła. Plama w stanie spoczynku, przed najechaniem.

#6D40FE

Fiolet. Przycisk główny, obwódka fokusu.

#ECECEE

Linia. Ramki kart i przycisków drugiego rzędu.

Ikona na plamie

spoczynek po najechaniu

Ikony są rysowane kreską 1,5 px w kolorze tekstu, nigdy wypełnione. Żółte pole pod nimi jest lekko przekrzywione i ma nierówne promienie narożników, dzięki czemu wygląda jak ślad pisaka, a nie jak prostokąt. Po najechaniu mgła ciemnieje do pełnej żółci i plama obraca się o kolejny stopień.

Jak to siedzi razem

Lektor w 10 sekund

Reguła z oryginału: żółty jest kolorem akcentu, nie kolorem działania. Klika się fiolet, a żółty prowadzi wzrok po plamach pod ikonami i po podkreśleniach w nagłówkach. Tło całej strony zostaje białe.