System projektowy

Jeden zestaw komponentów dla całego sklepu.

Ta strona to żywe lustro systemu — wszystkie elementy poniżej renderują się z tych samych plików CSS, których używają strony produkcyjne. Zmiana tokena lub komponentu w assets/ automatycznie zmienia ten katalog. Buduj nowe strony z tych klocków, nie twórz nowych.

Źródło: tokens-v2 · chrome-v2 · content-v2 · listing-v2 Font: Inter Akcent: #c0392b Estetyka: ostre rogi, biel, foto-first
01

Kolory

Czerwień marki z logo. Neutralne, lekko chłodne szarości pod fotografię.

Marka
Ember
--ember
#c0392b
Ember 700
--ember-700
#a32a1f
Ember 100
--ember-100
#fbe7e3
Inki (tekst i ciemne tła)
Ink 900
--ink-900
#1c1c1b
Ink 800
--ink-800
#2b2a28
Ink 700 · tekst
--ink-700
#44423f
Ink 500 · muted
--ink-500
#6b6966
Ink 300
--ink-300
#a8a6a2
Tła i linie
Białe / bg
--bg
#ffffff
Soft
--bg-soft
#fafaf9
Alt
--bg-alt
#f5f5f4
Linia 100
--line-100
#e7e5e4
Linia 200
--line-200
#d6d3d1
02

Typografia

Inter, wyłącznie. Wagi 400–700, ciasne nagłówki, „pretty” łamanie akapitów.

Display--t-display
48–88px · 600
Kominki
H1--t-h1
36–56px · 600
Ciepło, które zostaje na lata.
H2--t-h2
28–40px · 600
Sekcja katalogu
H3--t-h3
22px · 600
Nagłówek karty
Body--t-body
16px · 400
Akapit tekstu w wadze podstawowej. Używany w opisach produktów, treści wpisów i sekcjach informacyjnych. Wysokość wiersza 1.55.
Small--t-small
14px · 400
Tekst pomocniczy, metadane, podpisy.
Eyebrow--t-micro
12px · 600 · caps
Producenci
03

Spacing

Skala 4px-owa. Zawsze używaj tokenów --s-*, nigdy wartości ad-hoc.

s-1 4px
s-2 8px
s-3 12px
s-4 16px
s-5 24px
s-6 32px
s-7 48px
s-8 64px
s-9 88px
s-10 128px
04

Zaokrąglenia

System jest „ostry”. Domyślnie 0px — drobne zaokrąglenia tylko wyjątkowo.

--r-0
0px · domyślne
--r-sm
2px
--r-md
3px
05

Przyciski

Baza .btn + jeden wariant koloru + opcjonalny rozmiar.

Na jasnym tle
Primary Accent Ghost
<a class="btn btn--primary">Primary</a>
Na ciemnym tle
White White line Accent
Rozmiary
Large Default Small
06

Tagi i eyebrow

Etykiety statusu/kategorii oraz nadtytuł sekcji.

Nowość Bestseller Powietrzny Eyebrow sekcji
<span class="tag">Nowość</span> tag--dark · tag--neutral
08

Page hero

Nagłówek strony. Jeden komponent, trzy warianty tła.

Ciemny — .page-hero (sklep, kontekst „mocny”)
Showroom

Zobacz ogień na żywo.

Ponad 60 kominków rozpalonych w naszej ekspozycji. Przyjdź, poczuj ciepło, porównaj.

Jasny — .page-hero--light (strony indeksowe: Marki, Realizacje, Usługi)
Producenci

Marki, które dla nas pracują.

Każda przeszła nasz wewnętrzny audyt jakości, certyfikatów i dostępności serwisu.

Foto — .page-hero--photo (tu zamiast zdjęcia podaj background-image)
Realizacje

Domy, które ogrzaliśmy.

Galeria wdrożeń od projektu po pierwsze rozpalenie.

09

CTA band

Pas wezwania do działania nad stopką. Jeden komponent — koniec z osobnymi banerami.

Nie wiesz, co wybrać?

Umów bezpłatną konsultację z doradcą.

Dobierzemy moc i typ kominka do metrażu i komina. Bez zobowiązań.

Umów konsultację Zadzwoń
Standard dla bloków przedstopkowych. Istniejące showroom-cta i post-cta są na tej samej palecie — migruj je do .cta-band przy najbliższej edycji strony.
10

Formularze

Pola wejściowe, ostre rogi, focus na ink-900.

Wyślij
11

Placeholdery zdjęć

Neutralne miejsca na fotografię. Każde z proporcją i podpisem.

1:1
4:3
3:4
dark
12

Nagłówek sekcji

Tytuł + opis po lewej, akcja po prawej. Składnik większości sekcji treści.

Katalog

Wkłady kominkowe

Od kompaktowych modeli do salonu po duże wkłady akumulacyjne.

Zobacz wszystkie
13

Top bar + header

Globalna nawigacja. Identyczna na każdej stronie z chrome-v2.css.

  600 000 000Autoryzowany serwis
  Wysyłka w 24hPomoc
Ulubione Konto Koszyk2
14

Stopka

Spójna na wszystkich stronach. Podgląd na żywo poniżej.

Live
Ładowanie stopki z produkcji…
Stopka jest już w pełni spójna — wszystkie strony używają tej samej klasy .site-footer. Nie wymaga zmian.
15

Karta produktu

Siatka PLP + karta z hover-actions. Z listing-v2.css.

Siatka 3-kolumnowa .product-grid
-15% Ekoprojekt
Kratki
Wkład Zuzia 10 kW
2 490 zł 2 930 zł
Nowość
Kalão
Wkład powietrzny 12 kW
3 190 zł
Eko-Vimar
Kominek wolnostojący 8 kW
4 650 zł
.product-card > .product-card__media + .product-card__body .product-card__badge--sale · --new · --eco .product-card__quick (pojawia się na hover) .product-card__add (wysuwa się z dołu na hover)
16

Chipy / filtry

Zestaw filtrów dla galerii i list produktów. Współdzielony: Marki + Realizacje.

Toolbar z chipami .real-toolbar
57 realizacji
<div class="real-toolbar"> <button class="real-chip is-active">Wszystkie</button> <button class="real-chip">Typ <span class="real-chip__count">12</span></button> <span class="real-toolbar__count">48 wyników</span> </div>
17

Zakładki (tabs)

Nawigacja między sekcjami na stronie. Aktywna zakładka — ember underline.

.uslugi-tabs + .uslugi-tab
Treść aktywnej zakładki (.uslugi-block.is-active).
<div class="uslugi-tabs"> <button class="uslugi-tab is-active">Tab A</button> <button class="uslugi-tab">Tab B</button> </div> <section class="uslugi-block is-active">…</section> <section class="uslugi-block">…</section>
18

Kroki procesu

Numerowany schemat procesu. 4 kolumny, siatka 1px z line-100.

.uslugi-steps + .uslugi-step
01 / Kontakt

Wysyłasz zapytanie

Podajesz metraż, typ domu i preferowany budżet. Odpowiadamy w 24h.

02 / Dobór

Dobieramy model

Analizujemy kanał spalinowy, kubaturę i oczekiwania estetyczne.

03 / Montaż

Instalujemy

Certyfikowany zespół. Sprzątamy po sobie. Pierwsze rozpalenie razem z Tobą.

04 / Serwis

Dbamy o urządzenie

Coroczny przegląd, gwarancja producenta, autoryzowane części.

<div class="uslugi-steps"> <div class="uslugi-step"> <span class="uslugi-step__num">01 / Etap</span> <h3 class="uslugi-step__title">Tytuł</h3> <p class="uslugi-step__desc">Opis.</p> </div> </div>
19

Cennik

Siatka pakietów. Wariant .is-feature — ink-900, wyeksponowany.

.uslugi-pricing + .price-card
Podstawowy

Doradztwo

od
0 zł
bezpłatnie
  • Konsultacja telefoniczna
  • Dobór mocy
Zapłytaj
Polecany

Montaż

od
1 200 zł
netto / zlecenie
  • Montaż wkładu
  • Podłączenie do komina
  • Pierwsze rozpalenie
Zamów montaż
Premium

Serwis roczny

od
390 zł
netto / rok
  • Przegląd techniczny
  • Czyszczenie szyby
  • Raport stanu
Zamów serwis
<div class="price-card [is-feature]"> <span class="price-card__label">Pakiet</span> <h3 class="price-card__name">Nazwa</h3> <div class="price-card__price">1 200 zł</div> <ul class="price-card__list"><li>…</li></ul> <a class="btn">CTA</a> </div>
20

FAQ

Akordeon na bazie natywnego <details>. Bez JS.

.faq-item (details + summary)
Jaka moc kominka do salonu 40 m²?

Dla typowego polskiego domu o wysokości 2,5 m przyjmujemy ok. 1 kW na 10 m² przy dobrym ociepleniu. Salon 40 m² = 4–5 kW. Jednak zawsze liczymy kubaturę, nie metraż — antresola i wysoki strop znacząco zmieniają wynik.

Czy kominek wymaga corocznego przeglądu?

Tak. Prawo budowlane i większość ubezpieczycieli wymaga przeglądu przewodów kominowych przynajmniej raz w roku. Oferujemy abonament serwisowy z gwarantowanym terminem.

Jak długo trwa montaż wkładu?

Standardowy montaż wkładu z gotowym kominem to 1 dzień roboczy. Jeśli wymagana jest budowa trzonu lub obudowy — 3–5 dni, zależnie od projektu.

<details class="faq-item" [open]> <summary>Pytanie?</summary> <p>Odpowiedź.</p> </details>
21

CTA artykułu

Box wezwania do działania wewnątrz treści. Ink-900, serif h3. Wymaga: Source Serif 4.

.post-cta — siatka 1fr+auto, zapada się do 1fr na mobile

Nie chcesz liczyć sam?

Wyślij nam zdjęcia domu i podstawowe dane — w 24h dostajesz spersonalizowany dobór z 3 modelami w trzech budżetach. Bezpłatnie.

Poproś o dobór
<div class="post-cta"> <div> <h3>Tytuł (Source Serif 4)</h3> <p>Lead.</p> </div> <a class="btn btn--primary" href="#">CTA</a> </div>
Używany w artykułach bloga (‚Wpis blog v2.html’). Jeśli użyjesz na innej stronie, upewnij się, że strona ładuje font Source Serif 4 z Google Fonts.
22

Listing bloga

Wyszukiwarka, kategorie, wyróżniony post, siatka kart.

Search bar .blog-search
Kategorie .blog-cats + .blog-chip
Ten sam wzorzec wizualny co .real-chip na Realizacjach/Markach. Klasy są odrębne (kontekst bloga), ale styl jest ten sam system.
Wyróżniony post .blog-featured
Wyróżniony
Dobór

Jak dobrać moc kominka do domu?

Wyjaśniamy dlaczego metraż to zły punkt startowy i co tak naprawdę decyduje o komforcie cieplnym.

12 min 12 maja 2025
Czytaj
Siatka kart .blog-grid + .blog-card
Montaż
2025-04-08
Montaż wkładu kominowego krok po kroku
Co sprawdzić przed decyzją o zakupie, jak przebiega instalacja i co zrobić z ekipą montażową.
8 minCzytaj
Dobór
2025-03-22
ECO Design 2022 — co to oznacza dla kupującego?
Normy spalania, efektywność energetyczna i jak sprawdzić certyfikat przed zakupem.
5 minCzytaj
Serwis
2025-02-14
Czyszczenie szyby kominkowej — czym i jak często?
Trzy domowe metody, jeden produkt profesjonalny i zasada której nie wolno łamać.
4 minCzytaj
23

Newsletter + paginacja

Ciemny pas zapisu na newsletter i numerowana paginacja stron.

Newsletter .blog-newsletter

Poradnik prosto do skrzynki.

Co tydzień jeden artykuł od naszego doradcy. Bez spamu.

Bez reklam, tylko wiedza
Wypis jednym klikiem
Paginacja .pagination
<div class="pagination"> <a href="#">1</a> <a href="#" class="is-active">2</a> <a class="dots">…</a> </div>
24

Artykuł — nagłówek i autor

Post-hero z tytułem, metadane, okładka, box autora i tagi.

Post hero .post-hero (wymaga: Source Serif 4)
Dobór mocy

Jak dobrać moc kominka do metrażu i kubatury?

Metraż to zły punkt startowy. Liczy się kubatura, izolacja i typ ogrzewania. Pokażemy Ci jak to policzyć samemu w 5 minut.

Marcin Wojciechowski
Doradca techniczno-handlowy
12 min 8 marca 2025 4 280 wyświetleń
Okładka .post-cover
Fot. Kominek Hitze Albero w realizacji Limanowa 2024 · zdj. INTEBO
Author box .post-author-box

Marcin Wojciechowski

Doradca · 12 lat w branży

Dobiera kominki, montuje, serwisuje. Uważa, że 80% problemów z kominkiem wynika ze złego doboru mocy lub źle dobranego komina — nie ze sprzętu.

Tagi .post-tags
Tagi dobór mocy wkłady powietrzne ECO Design kalkulacja
25

Prose, callout, tabela

Elementy treści artykułu. Wszystkie wymagają Source Serif 4.

Callout .callout — 3 warianty

Informacja

Piec na drzewo i piec na pellet to dwa różne urządzenia. Nie wolno spalać pelletu w zwykłym kominku bez odpowiedniej modyfikacji palnika.

Wskazówka

Zanim zamówisz montaż, poproś kominiarza o protokół kominiarski. To Twoja gwarancja, że komin jest gotowy.

Uwaga

Nigdy nie uszczelniaj wylotu komina — grozi zatruciem tlenkiem węgla.

<div class="callout [callout--tip|callout--warn]"> <i class="fa-solid fa-lightbulb"></i> <div> <p class="callout__label">Wskazówka</p> <p class="callout__body">Treść.</p> </div> </div>
Tabela danych .calc-table
KubaturaIzolacjaSzacowana moc
do 100 m³Dobra (nowy dom)4–5 kW
100–200 m³Dobra6–8 kW
200–350 m³Średnia (dom z lat 90.)10–12 kW
powyżej 350 m³Słaba (stary dom)14–16 kW
26

Strona realizacji

Pasek specyfikacji, karta produktu w sidebarze, nawigacja między realizacjami.

Spec strip .real-specs
ProducentHitze
ModelAlbero wkład
Moc11 kW nom.
PaliwoDrewno
Rok montażu2024
<div class="real-specs"> <div class="real-spec"> <span class="real-spec__label">Moc</span> <span class="real-spec__value">11 kW <small>nom.</small></span> </div> </div>
Karta produktu w sidebarze .used-product
Hitze
Albero 11 kW ECO Design
3 490 zł
Nawigacja między treściami .real-nav
Poprzednia
Dom pod Krakowem · Kratki 10 kW
Następna
Apartament Zakopane · Kalão 8 kW
<div class="real-nav"> <a class="real-nav__link" href="#">…</a> <a class="real-nav__link real-nav__link--next" href="#">…</a> </div>