Interfejs

Elementy interfejsu sa stworzone w oparciu o podstatowe założenia projektu. W każdym elemencie należy zastosować myśl przewodnią jaką jest ruch, przezroczystość oraz brak zaokrągleń. Najlepiej widać to na przykładzie ikon, które zostały zmodyfikowane stosując założenia IcyMat Design.

Teksty i nagłówki

Domyślne marginesy dla nagłówków wynoszą: górny - podwójna wartość standardowego marginesu, dolny - połowa domyślnej wartości marginesu. Marginesy dla tekstów wynoszą połowę domyślnej wartości.

Rozmiary nagłówków wraz z wagami przedstawia poniższa tabela:

Przezroczystości

Przezroczystość elementów powinna wynosić zawsze 80%.

Przyciski

Styl IcyMat Design przewiduje istnienie jednego typu buttonów. Standardowy button ma tło zdefiniowane w palecie kolorów oraz odpowiednie dekoratory. Różnica kolorów w przypadku dekoratorów i tła powinna wynosić 20% - zazwyczaj tłem jest kolor zredykowany do 80%, a dekoratorem kolor 100%.

Zarysowane przyciski

Istnieje opcja utworzenia przycisków z samym obrysem. W tym celu należy dodać do przycisków specjalną klasę .imd-button-outline oraz zmienić kolor tekstu na taki sam jak kolor dekoratora.

Powiadomienia

Powiadomienia zostały zaprojektowane jako proste prosotkąty, w których tłem jest kolor bazowy z użyciem 20% maski, a text ma kolor koloru bazowego. Dodatkowo dla tekstu zastosowana została mniejsza waga kroju pisma (300). Wyróżniony tekst powinien mieć wagę równą 700.

W przypadku kiedy tekst byłby nieczytelny dopuszcza się możliwość zmiany kolory tekstu, ale tylko na domyślny szary lub biały (dla ciemnych teł).

Panele

Panele składają się z nagłówka, treści oraz stopki, ale tylko treśc jest elementem obowiązkowym. Różnica w kolorach dla wszystkich elementów wynosi 20pp co oznacza, że jeśli obramowanie ma kolor o wartości 100% to nagłówek i stopka mają tło o wartości 60% koloru, a treść 20%. Teksty w nagłówku oraz w stopce powinny zostać pogrubione względem standardowego tekstu.

Paski postępu

Pasek postępu składa się z tła paska oraz paska zawartości. Tło paska postępu wyznacza się zgodnie z zasadami ustalania koloru tła dla pół tekstowych.

Paski zawartości można łączyć w ramach jednego paska postępu..

Rozmiary paska postępu

Etykiety

Etykiety służą do oznaczania ważnych elementów na stronie. Posiadają boczne marginesy górny i dolny równe 1/4 standardowego marginesu oraz lewy i prawy równe 1/2 standardoweych marginesów. Rozmiar tekstu w etykiecie wynosi 90% rozmiaru bazowego kroju pisma.

<span class="imd-label imd-bg-green imd-text-white">Etykieta</span>