Design System

Brand primitives. Wszystkie tokeny zdefiniowane w snippets/brand-tokens.liquid — zmiana wartości tam aktualizuje całą stronę. Każdy element poniżej renderuje canonical brand token.

Typography

Display + Heading: --brand-font-display / --brand-font-heading (Forta). Body: --brand-font-body (Poppins). Skala fluid przez clamp().

Display · --brand-text-display

Łukasz Kobłański

H1 · --brand-text-h1

Hortensje, róże, ogród

H2 · --brand-text-h2

Co znajdziesz w ebooku

H3 · --brand-text-h3

Sekcja: Pielęgnacja

H4 · --brand-text-h4

Krok 1 — przygotowanie podłoża

H5 · --brand-text-h5

Wskazówka eksperta

H6 · --brand-text-h6

Notatka boczna

Body LG · --brand-text-body-lg

Hortensja to roślina kapryśna, ale wdzięczna. Wystarczy zrozumieć jej rytm, a odwdzięczy się obfitym kwitnieniem przez całe lato.

Body · --brand-text-body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquam velit eget tortor pulvinar, eu congue sapien tristique. Donec consequat, ipsum eget consequat efficitur, libero risus eleifend lacus.

Body SM · --brand-text-body-sm

Mała wersja paragrafu — dobra do meta, opisów dodatkowych, footer text.

Caption · --brand-text-caption

CAPTION — META — TIMESTAMP

Colors

Brand palette zdefiniowana w snippets/brand-tokens.liquid. Edytuj hex tam — zmiana propaguje się wszędzie.

Surfaces / Backgrounds

Cream main #FFF3CF --brand-color-bg

Cream warm #FFFCF4 --brand-color-bg-cream

Brand green #3E603C --brand-color-bg-green

Brown #2C201B --brand-color-bg-brown

Near-black #0A0909 --brand-color-bg-dark

Text

Primary brown Aa Łó --brand-color-text

Body Poppins Aa Łó --brand-color-text-body

Cream on dark Aa Łó --brand-color-text-cream

Warm cream on dark Aa Łó --brand-color-text-cream-warm

Muted Aa Łó --brand-color-text-muted

Brand Accents

Accent green --brand-color-accent

Accent hover --brand-color-accent-hover

Accent light --brand-color-accent-light

Hortensja (TODO) --brand-color-hortensja

Killer dark --brand-color-killer

Semantic

Success --brand-color-success

Warning --brand-color-warning

Error --brand-color-error

Color Schemes — pełne sekcje

Każdy schemat to żywa mini-sekcja: H1, H2, H3, paragraph, button + ikona. Pokazuje jak wszystkie primitives wyglądają razem na danym tle. Schematy: Cream (default), Green (Trawnik), Brown (universal dark / footer), Blue (Hortensja).

Scheme: cream · bg #FFF3CF

Hortensje, róże, ogród

Co znajdziesz w ebooku

Sekcja: pielęgnacja przez cały rok

Hortensja to roślina kapryśna, ale wdzięczna. Wystarczy zrozumieć jej rytm, a odwdzięczy się obfitym kwitnieniem przez całe lato.

Kup teraz

Scheme: green (Trawnik) · bg #3E603C

Trawnik Doskonały

Krok po kroku

Co dostajesz w pakiecie

Kompletny przewodnik po pielęgnacji trawnika — od koszenia, przez nawożenie, po regenerację po zimie. Wszystko, czego potrzebujesz, by mieć trawnik jak z reklamy.

Ok, kupuję!

Scheme: brown · bg #2C201B

Łukasz Kobłański

Ogrodnik (NIE)Doskonały

Newsletter z wiedzą ogrodniczą

Co tydzień konkretne porady — kiedy siać, kiedy nawozić, jak diagnozować choroby roślin. Bez voodoo, bez „eko" pseudonauki. Tylko to, co działa.

Zapisuję się

Hortensja · scheme blue · bg #A6C7E3 · CTA brown→blue text

Hortensje Doskonałe

Uprawa Hydrangei bez błędów

Pełen kalendarz pielęgnacji

Niebieskie, różowe, białe, bordowe — kolor kwiatu zależy od pH gleby. Naucz się sterować barwą i zaplanuj cięcie tak, żeby kwitły każdego roku.

Ok, kupuję!

Hortensja · scheme brown · bg #2C201B · text blue, CTA cream

JEŚLI WIDZISZ SWÓJ BALKON

CZY HORTENSJE GINĄ U CIEBIE?

Sekcja problemów

Brązowe sekcje na Hortensji niosą diagnozę problemu — przeplatają się z niebieskimi sekcjami przedstawiającymi rozwiązanie. Headingi i akcenty są w kolorze blue (`paragraph-hero-1.blue`), buttony używają cream tła.

Ok, kupuję!

Hortensja · scheme cream · bg #FFF3CF · text brown, accent blue

3 RADY OD ŁUKASZA

Co znajdziesz w ebooku

Sekcja FAQ + opinie

Cremowe sekcje na Hortensji to FAQ, „3 rady", autor + opinie klientów. Najlepiej kombinują się z brown CTA (button-primary.black._2) lub blue CTA (button-primary.blue) w zależności od kontekstu.

Ok, kupuję!

Scheme: killer · bg #0A0909 · accent #54FF76

Killer

Od kilera do dilera

Cykl szkoleń online

Pełen przewodnik po stosowaniu herbicydów totalnych — kiedy działają, kiedy nie, i czego absolutnie unikać przy aplikacji.

Ok, kupuję!

Scheme: black (Killer .sekcja-program) · bg #000000

ROZDZIAŁY E-BOOKA

Czego się dowiesz

Rozdział 03 — diagnostyka

Twardy czarny tło. Używane na Killer .sekcja-program oraz .sekcja-opine-desktop. Subtelnie różne od scheme killer (#0A0909 vs #000) — 5-luminance-units seam.

Sprawdź terminy

Scheme: home-cta (samples Home dark CTA bg) · bg #0A0909

(NIE)DOSKONAŁY OGRODNIK

Najnowsze wpisy

Wiedza z pierwszej ręki

Tło CTA na home. Buttony to system "home" — bg near-black, text warm cream, weight 600, fluid font-size przez clamp().

ZOBACZ WIĘCEJ

Buttons

Canonical CTA: radius --brand-radius-button (20px), padding --brand-button-padding-{block,inline}, font weight 600. Każdy button używa tych samych tokenów — zmiana w brand-tokens.liquid propaguje się do wszystkich.