Identyfikacja Wizualna · V1.0
BrandIdentity.
System operacyjny modulli. Typografia, kolor, siatka i zasady, które spinają każdą powierzchnię — zaprojektowane dla wydajności.
01 · Logotyp
Jak ustawiamy logo?
Font
Inter · Medium (500)
Tracking
letter-spacing: −0.04em
Wielkość liter
Zawsze małe litery
02 · Typografia
Jakich krojów używamy?
Oswald
Display · 400 / 500 / 600 / 700 · letter-spacing −0.02em
Engineering
of Time.
Aa Bb Cc Dd Ee Ff Gg 0 1 2 3 4 5 6 7 8 9
Inter
Tekst · 400 / 600 / 700 · leading-snug
Inter niesie każdy akapit, każdy label, każdy sygnał interfejsu — cichy, wydajny kontrapunkt dla typewriterowej wagi Oswalda. Treść główna ma rozmiar text-lg, white/60, max-w-3xl.
Aa Bb Cc Dd Ee Ff Gg 0 1 2 3 4 5 6 7 8 9
Tytuły drukowane / wyświetlane
Nagłówki sekcji i stron używają Oswalda z ciasnym line-height i celowym nakładaniem się linii. Pierwsza linia jest wyrównana, druga jest podciągnięta w górę ujemnym marginesem tak, by wydłużenia górne i dolne prawie się stykały — nigdy się nie nakładają, nigdy nie zostawiają szerokiej luki. Cel to kilka pikseli oddechu. Użyj leading-none lub leading-[0.9] na kontenerze i zastosuj mały ujemny margines (np. -mt-[2px] do -mt-2) na drugim spanie zależnie od breakpointa. Druga linia jest zawsze text-white/40.
Przykład — hero strony
BrandIdentity.
Przykład — tytuł sekcji
What'snew?
Fonty · role w stylu Canva
System typograficzny Modulla
Title
Oswald · Bold (700) · UPPERCASE
72 / 80
Subtitle
Oswald · Medium (500) · UPPERCASE
44 / 52
Heading
Oswald · Bold (700) · UPPERCASE
28 / 36
Subheading
Oswald · Medium (500) · UPPERCASE
20 / 28
Section header
Inter · Semibold (600) · UPPERCASE · +0.2em
12 / 16
Body
Inter · Regular (400) · leading-snug
18 / 26
Quote
Oswald · Regular (400)
24 / 32
Caption
Inter · Regular (400)
12 / 18
Skala typograficzna
03 · Kolor
Jaka jest nasza paleta?
#151515
21 · 21 · 21
Powierzchnia główna
#1A1A1A
26 · 26 · 26
Karty · moduły
#111111
17 · 17 · 17
Stopka · baza
#FFFFFF
255 · 255 · 255
Nagłówki · akcenty
rgba(255,255,255,.6)
Treść główna
Akapity
#c5ff00
Akcent · focus
Tylko rzadko
04 · Komponenty
Jak używamy klocków budowlanych?
Przyciski
Karta modułu
AI MOVIES
Modularna pipeline AI dla wideo i produkcji reklamowej w jakości kinowej.
Akapit treści
Living Grid to pole konfiguracji, nie klatka. Moduły zatrzaskują się w kolumnach, ale to whitespace jest materiałem dominującym.
Tytuł sekcji (typewriter)
What's
new?
05 · Dyscyplina
Jakie zasady rządzą systemem?
✓ Rób
- +Używaj #151515 jako globalnej powierzchni — nigdy czystej czerni.
- +Łącz Oswalda (display) z Interem (tekst). Żadnych zamienników.
- +Formułuj tytuły sekcji jako pytania — dla AEO i klarowności.
- +Trzymaj akapity w text-lg, white/60, max-w-3xl, leading-snug.
- +Niech whitespace dominuje. Moduły mają unosić się, nie tłoczyć.
- +Używaj Signal Lime oszczędnie — focus, linki, pojedyncze akcenty.
✗ Nie rób
- —Nie wprowadzaj fontów szeryfowych, pisanych ani display poza Oswald/Inter.
- —Nie przebarwiaj sygnetu. Biały na ciemnym, czarny na jasnym — i tyle.
- —Nie umieszczaj logotypów marki na stronie 404.
- —Nie dodawaj linków do social media na stronie Kontakt.
- —Nie używaj fioletowych gradientów ani generycznej estetyki AI.
- —Nie łam formatu tytułu: modulla | [Name] | Boost your performance!
Engineering Beauty. Engineering of Time.