Strona główna / Brandbook

Brandbook. System wizualny strony.

Logo, kolory, typografia, komponenty i ton komunikacji. Jeden dokument, do którego wracam, kiedy buduję nowe sekcje, materiały albo grafiki na social.

v1.0 Ostatnia aktualizacja: 12 maja 2026
01Logo

Mark, lockup, trzy backgroundy.

Logo działa w trzech wariantach: ciemnym (główny - hero, footer), jasnym (na białym tle, sekcjach content) i akcentowym (rzadko - eventy, naklejki, social). Mark to litera N w zaokrąglonym kwadracie - kolor zależy od tła.

N Nataniel Łątka
Wariant 01na ciemnym
N Nataniel Łątka
Wariant 02na jasnym
N Nataniel Łątka
Wariant 03na akcencie
N
Mark - bez napisu
Sam mark używaj jako favicon, avatar social media, w bardzo małych formatach (≤ 24px) gdzie pełen lockup byłby nieczytelny.
02Paleta

Cztery role, jeden akcent.

Czerń + biel + neutralne szarości tworzą bazę. Zielony #00DE67 jest jedynym akcentem - używamy oszczędnie, tylko tam gdzie chcemy przyciągnąć wzrok (CTA, statusy, najważniejsze frazy).

Brand

Accent / Green
#00DE67
Buttony, brand-mark, ikony w callout, status live.
--accent
Accent text
#008A40
Tekst akcentowy na białym tle. WCAG AA.
--accent-text
Accent soft
#E6FDEF
Tła chipów kategorii, calloutów, hover state.
--accent-soft
Accent light
#7DF0A8
Tekst akcentowy na ciemnym tle - pillars, newsletter.
#7df0a8

Neutralne

Night / Text
#0A0A0A
Główny tekst, ciemne sekcje (hero, pillars, newsletter).
--text · --night
Text soft
#2A2A2A
Tekst paragrafów - lekko zmiękczony od pełnej czerni.
--text-soft
Text muted
#6B6B6B
Meta-info, daty, labelki, opisy pomocnicze.
--text-muted
Text dim
#A0A0A0
Strzałki, separatory, placeholdery.
--text-dim
Border hi
#D6D6D6
Hover state borderów, focus, akcent linii.
--border-hi
Border
#ECECEC
Standardowy border kart, separatory sekcji.
--border
Background
#FFFFFF
Tło strony, kart, większości sekcji.
--bg
Pulse / Live
#4ADE80
Kropki statusu, indykatory available, live.
#4ade80
03Typografia

Dwa fonty, jasna hierarchia.

Inter dla wszystkiego, co użytkownik czyta normalnie. JetBrains Mono dla labelek, dat, kategorii, danych liczbowych - tam gdzie potrzebujemy "tech feel".

Aa
Inter
Główny font - nagłówki, paragrafy, UI. Variable, optimised for screens.
400 Regular 500 Medium 600 Semibold 700 Bold
Aa
JetBrains Mono
Monospace - kategorie, daty, dane techniczne, labelki sekcji.
400 Regular 500 Medium

Skala

Display 56px / 600 / -3.5%
Buduję marketing, który działa z AI.
H2 Section 36px / 600 / -3%
Trzy obszary, które poruszam.
H3 Card 24px / 600 / -2%
AI i automatyzacje.
Lead 18px / 500 / -1.2%
Workflow z AI, które realnie odbierają godziny z tygodnia.
Body 16px / 400 / -1%
Codziennie używam AI w pracy. Nie do robienia obrazków na LinkedIn - do realnych operacji: pisania briefów, redagowania ofert, analizy kampanii.
Caption 13.5px / 400
Newsletter w każdy poniedziałek rano. Zero spamu, wypiszesz się jednym klikiem.
Eyebrow / Mono JB Mono · 12px · 600 · 12%
01 · O mnie
04Komponenty

Standardowe klocki. Z każdym tłem.

Klocki, które wracają na całej stronie - buttony, chipy, badge'e, callouty. Każdy ma wariant na białym i na ciemnym tle, kontrast zawsze WCAG AA.

Buttony · ciemny2 warianty
AI · Stack Marketing Zdrowie Sortuj ↓
Chipy kategoriina jasnym
AI · Stack Marketing Zdrowie
Chipy kategoriina ciemnym
2026 AI Marketing Operator · Warszawa
Hero badgez pulse-dot
i
Dlaczego tak rygorystycznie? Bo każde narzędzie to nie tylko subskrypcja - to też mentalny ciężar.
Calloutinfo / tip
05Ton komunikacji

Bezpośrednio. Konkretnie. Bez modnych słów.

Jak piszemy w newsletterze, na stronie, w social. Trzy zasady, którym nie odpuszczamy - i kilka przykładów, co zrobić, a czego nie.

01

Konkret zamiast koncepcji.

Każde zdanie ma się dać podstawić pod realny przykład. Zamiast „synergiczny ekosystem AI" - „dwa agenty, które piszą briefy".

„Wymieniłem trzy narzędzia w ostatnim miesiącu."
„Zoptymalizowałem swój ekosystem narzędzi."
02

Krótko. Pauzy są dozwolone.

Zdania krótkie. Akapity 2-3 linijki. Myślnik - jako pauza, nie em-dash . Czyta się jak rozmowę, nie esej.

„Bez gadżeciarstwa. Bez 40 narzędzi."
„Bez nadmiernej fascynacji nowinkami technologicznymi…"
03

Pierwsza osoba. Z dystansem.

Piszę „ja", nie „my" ani „użytkownik". Nie sprzedaję się jako ekspert - opisuję, co u mnie zadziałało i czego nie ruszam.

„U mnie to nie zadziałało po dwóch tygodniach."
„Eksperci są zgodni - to najlepsze podejście."
06Spacing

Skala czwórek. Predictable.

Wszystkie odstępy (padding, gap, margin) opierają się na bazie 4px. Sekcje dostają więcej powietrza - klocki mniej. Konsekwentnie.

xs4px
sm8px
md16px
lg32px
xl56px
2xl80px