Design System

Kompletny system projektowy dla marki Moduzel - stalowe domy modułowe i komponenty konstrukcyjne. Dokument zawiera strategię wizualną, paletę kolorów, typografię, komponenty UI oraz prototyp strony internetowej.

Co proponujemy

Strategia wizualna i komunikacyjna dla marki Moduzel - od fundamentów po gotowy prototyp strony.

Założenia projektu

Moduzel to firma produkująca komponenty stalowe oraz moduły, z których składają się gotowe konstrukcje domów. Marka musi jednocześnie komunikować dwie rzeczy: inżynierską precyzję stali (trwałość, powtarzalność, normy) i ciepło domu (przystępność, komfort, ludzki ton).

System projektowy obsługuje dwa główne zastosowania: stronę internetową (marketing, sprzedaż, generowanie leadów) i materiały reklamowe (slajdy ofertowe, prezentacje, social media).

Założenia komunikacyjne

  • Ton głosu: rzeczowy, ale ludzki - jak dobry inżynier, który tłumaczy bez żargonu. Bez korpomowy („synergia", „dedykowany"), bez wykrzykników, bez emoji.
  • Forma zwracania się: do klienta przez „Ty" („Policzmy Twój dom", „Prześlij rzut"). O sobie mówimy „my" („Projektujemy, produkujemy i montujemy").
  • Nagłówki: krótkie, z jedną mocną myślą. Jedno słowo w kolorze akcentu tworzy punkt wejścia wzroku. Przykłady: „Budujemy dom, który trzyma pion przez pokolenia." / „Lekka konstrukcja. Ciężkie argumenty."
  • Liczby z jednostką budują wiarygodność: „120+ domów", „12 tyg. montażu", „gwarancja 50 lat". Tylko realne, weryfikowalne dane.
  • Etykiety (eyebrow): wersaliki ze szerokim spacjowaniem nad nagłówkami. Rzeczownikowe: DLACZEGO STAL, CO OFERUJEMY, NAJCZĘSTSZE PYTANIA.
  • Wezwania do działania (CTA): czasownik + korzyść, krótko: „Zamów wycenę", „Zobacz realizacje", „Umów konsultację".

Kluczowe decyzje projektowe

  • Akcent limonkowy = jedna iskra na widok. Główne CTA, jedno słowo w nagłówku, ikona - ale nigdy dominujący kolor ekranu. Oszczędność buduje elegancję.
  • Ciemne sekcje (forest) przeplatane z jasnymi (piasek). Maksymalnie 1-2 ciemne sekcje na stronę - tworzą rytm i kontrast.
  • Pigułkowe przyciski (pill). Pełne zaokrąglenie nadaje przystępność - równoważy techniczny charakter marki.
  • Brak gradientów, tekstur i efektów neonowych. Kontrast budujemy dużymi płaszczyznami koloru. Spokój i profesjonalizm.
  • Animacja spokojna: fade + delikatne przesunięcie, bez „bounce". Czasy 140/240/480 ms. Easing naturalny, nie mechaniczny.

Szablon referencyjny

System został zbudowany na bazie języka wizualnego motywu Finovate (VamTam, WordPress/Elementor), wskazanego przez klientkę.

Finovate - motyw referencyjny
Motyw referencyjny: Finovate na Envato Elements

Co przejęliśmy z Finovate

  • Paletę kolorów: żywa limonka jako akcent + głęboka leśna zieleń jako kolor zaufania + ciepła, papierowa biel jako tła.
  • Typografię: geometryczny, humanistyczny krój bezszeryfowy (użyliśmy Plus Jakarta Sans jako najbliższego odpowiednika).
  • Kształt przycisków: pełna pigułka (pill) - miękkie, zapraszające, bez ostrych krawędzi.
  • Układ nagłówkowy: mała etykieta (eyebrow) wersalikami nad głównym nagłówkiem, z jednym słowem w kolorze akcentu.
  • Karty z miękkim zaokrągleniem: duży radius (22px), cienka ramka lub lekki cień.

Co zmieniliśmy

  • Treści i fotografia: Finovate to motyw branży finansowej - wszystkie teksty, ikony i zdjęcia zostały przepisane pod branżę stalowo-modułową.
  • Logo: nowy, masywny znak „M" z blokowymi kształtami (podkreśla przemysłowy charakter). To placeholder - do podmiany na docelowe logo klienta.
  • Ikony: zestaw Lucide (cienka, równa kreska 2px) zamiast custom ikon z Finovate.
  • Dodano rampy kolorów stalowych (steel): chłodne szarości przemysłowe do wykresów i drugorzędnego UI.

Elementy do uzupełnienia przez klienta

  • Logo - obecne assets/logo.svg to placeholder. Po otrzymaniu docelowego pliku (SVG) podmienimy w całym systemie.
  • Fonty - użyto Plus Jakarta Sans (Google Fonts). Jeśli klient ma licencjonowany krój marki - zamienimy.
  • Zdjęcia - w prototypie użyto poglądowych wizualizacji. Docelowo: realne realizacje domów, hala produkcyjna, detale konstrukcji.
  • Nazwa „Moduzel" - przyjęta roboczo. Do potwierdzenia lub zmiany.

Kolory

Paleta oparta na trzech filarach, z psychologią kolorów dopasowaną do branży budowlanej i modułowej.

Psychologia kolorów

Limonka - energia i świeżość

Akcent markowy. Jedna iskra na widok.

Psychologia: Limonkowa zieleń komunikuje innowacyjność, ekologię i energię. W branży budowlanej wyróżnia się na tle szarych, ziemistych palet konkurencji. Mówi: „to nie jest tradycyjny budowniczy - tu jest nowoczesność".

Zastosowanie: główne CTA, jedno słowo w nagłówku, ikony, znak marki. Oszczędne użycie wzmacnia efekt.

Leśna zieleń - zaufanie i solidność

Kolor fundamentu. Ciemne sekcje, nagłówki, stopka.

Psychologia: Głęboka zieleń kojarzy się z trwałością, naturą i stabilnością. W kontekście stalowego budownictwa komunikuje: „budujemy rzeczy, które przetrwają". Budzi zaufanie bez chłodu granatów czy szarości.

Zastosowanie: sekcje „dowodowe" (wartości, certyfikaty), nagłówki, stopka, przyciski primary.

Ciepły piasek - przystępność i dom

Tło strony. Papierowa biel zamiast sterylnej.

Psychologia: Ciepła biel z żółtawym podtonem odróżnia nas od korporacyjnej sterylności (#fff). Mówi: „to jest o domu, nie o fabryce". Papierowy odcień dodaje naturalności i przytulności.

Zastosowanie: tła stron, karty, formularze. Kontrast z ciemnymi sekcjami tworzy rytm oddechu.

Limonka - akcent markowy
lime-50#F4FBDD
lime-100#E7F7B4
lime-200#D6F081
lime-300#C6EA4B
lime-400#B5E614
lime-500#A4D40C
lime-600#87B007
lime-700#688706
Leśna zieleń - kolor zaufania
forest-50#EAF1EE
forest-100#CBDDD6
forest-200#9DBDB1
forest-300#6A9587
forest-400#3F6F5F
forest-500#2C6354
forest-600#204B41
forest-700#183A32
forest-800#102A24
forest-900#0B1F1A
Ciepły piasek - tła
sand-50#FAF8F3
sand-100#F4F1E9
sand-200#ECE7DC
sand-300#DED7C8
sand-400#C9C0AD
Stal - szarości przemysłowe
steel-100#EBEEF0
steel-200#D2D8DC
steel-300#AEB7BD
steel-400#8A949B
steel-500#6B757C
steel-600#4E575D
Kolory statusów
sukces#2E8B57
sukces-soft#E3F1E8
ostrzeżenie#D98A1F
błąd#C0432F

Typografia

Plus Jakarta Sans - geometryczno-humanistyczny krój, przyjazny i uporządkowany. JetBrains Mono do danych technicznych.

Display
800clamp(3rem..5.5rem)-0.02eminterlinia 1.08

Nagłówek H1 - Plus Jakarta Sans

700clamp(2.4rem..3.75rem)-0.015em

Nagłówek H2 - sekcje główne

700clamp(1.9rem..2.85rem)

Nagłówek H3 - podsekcje

700clamp(1.5rem..2rem)

Nagłówek H4 - karty i tytuły

700clamp(1.25rem..1.5rem)

Lead - większy tekst wprowadzający, używany pod nagłówkami sekcji. Linia oddechu dla czytelnika przed właściwą treścią.

4001.25reminterlinia 1.7

Body - standardowy tekst akapitowy. Plus Jakarta Sans regular 1rem z interlinią 1.5. Czytelny, wygodny do dłuższych bloków treści na stronie.

4001reminterlinia 1.5
Etykieta (eyebrow) - mała etykieta nad nagłówkiem
6000.8125remWERSALIKIrozstrzelenie 0.14em
PROFIL C 200×60×2,0 mm  |  S350GD+Z  |  PN-EN 1090-2
JetBrains Monorozstrzelenie 0.02emdane techniczne

Odstępy, zaokrąglenia i cienie

Skala 4px, miękkie zaokrąglenia, niskokontrastowe cienie z lekko zielonkawym odcieniem.

Skala odstępów (podstawa 4px)
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
--space-10
128px
Zaokrąglenia
xs6px
sm10px
md16px
lg22px
xl30px
2xl40px
pigułka999px
Cienie
xs
sm
md
lg
akcent

Komponenty

6 komponentów React: Button, Badge, Card, Stat, Input, FeatureItem. Zbudowane na tokenach, gotowe do użytku w produkcji.

Slajdy

5 typów slajdów reklamowych/ofertowych. Proporcje 16:9 (1280×720px).

Tytuł - otwarcie oferty
Liczby - dowód wiarygodności
Oferta - trzy filary
Cytat - opinia klienta
CTA - wezwanie do działania

Prototyp strony

Pełna strona marketingowa Moduzel - interaktywny prototyp z menu mobilnym, akordeonem FAQ i formularzem kontaktowym.

Otwórz w pełnym oknie →