Szablon #2: nocne pasmo

Język wizualny linii Open Radio. Drugi szablon systemu obok głównego „Engineered Dark" z fiedoruk.pl; trzeci dojdzie, gdy urodzi się kolejny produkt. Każdy ma własną duszę i wspólną dyscyplinę rzemiosła.

Pięć zasad

  1. Front dla ludu, technika dla ciekawych. Strony produktowe mówią, co człowiek z tego ma; adresy magistrali i tiery żyją na stronach technicznych.
  2. Zero defaultów, zero bibliotek. Ikony rysujemy sami, elementy budujemy sami, fonty hostujemy u siebie. Jak w szablonie głównym, tylko innym alfabetem.
  3. Tożsamość z urządzenia. Paleta, cyfry i pasek widma pochodzą z ekranu kostki, więc strona i sprzęt wyglądają jak rodzina.
  4. Rytm noc-krem. Sekcje przeplatają granat nocny z ciepłym kremem; pasek widma je szyje.
  5. Ruch za zgodą. Każda animacja ma wariant spoczynkowy pod prefers-reduced-motion i nigdy nie niesie treści.

Paleta

Kolory noszą polskie imiona, bo to nasz szablon. Mięta i bursztyn to żywe kolory pasków z ekranu; róż zamyka widmo po stronie ostrzeżeń.

noc
#081010 · tło sekcji ciemnych
noc-2
#101821 · kafle i okazy na nocy
linia-n
#1E2937 · kreski na nocy
mięta
#42DBAD · akcent marki, igła, ikony
bursztyn
#FFB652 · środek widma, ostrożnie
róż
#FF7D7B · koniec widma, nigdy ozdobnie
krem
#F5F1E8 · tło sekcji jasnych
mgła
#9AACBC · tekst drugi na nocy
atrament
#14181D · tekst na kremie
mięta-atrament
#167C5B · mięta w wersji na jasne tło

Typografia

Nagłówki mówią głosem wyświetlacza, treść milczy systemowo. Unbounded jest zmienny (200-900), hostowany u nas w dwóch plikach: latin i latin-ext dla polskich znaków.

Kostka, która gra. Ośmiuset.
OPEN·RADIO · WAGA 500 · ŚWIATŁO .14EM

Treść składamy systemowym stosem, rozmiar 14-17 px, interlinia 1.5-1.65. Zdania różnej długości, bo metronom zdradza maszynę. Krótko. A czasem jednym tchem przez półtorej linii, żeby ucho miało po czym poznać człowieka.

display: Unbounded 800, clamp(24-64 px), letter-spacing −.01…−.025em · etykiety: Unbounded 500, 10.5-15 px, letter-spacing .06-.16em, wersaliki · liczby stroju: tabular-nums

Elementy podpisowe

Sześć rzeczy, po których poznasz ten szablon z drugiego końca pokoju. Używamy ich oszczędnie i zawsze w tej samej roli.

Skala strojenia

Motyw hero sekcji nocnych. Igła dryfuje 16 s tam i z powrotem; przy reduced-motion stoi na 101.3.

Pasek widma

Szew między sekcjami, 4 px, mięta→bursztyn→róż. Zawsze pełna szerokość, nigdy jako ozdoba w treści.

Rama kostki

Zrzut ekranu zawsze w korpusie z trzema guzikami i pikselowym renderingiem 1:1.

Equalizer

Pięć słupków przy wordmarku albo jako akcent „gra". Tańczy tylko za zgodą użytkownika.

Ptaszek i piguła

korzyść na liście zestawu

BEZ CHMURY

Ptaszek miętowy 2.5 px do list korzyści; piguła wersalikowa do wartości i statusów.

Kafel funkcji

Szum do snu

Noc-2, ramka linia-n, promień 16 px, ikona + tytuł Unbounded 500 + dwa zdania mgłą. Siatka kafli trzyma parzysty rytm; kafel raczej wypada w całości, niż psuje wiersz.

Ikony

Rysowane ręcznie w siatce 24, obrys 1.8 px, końcówki okrągłe, zawsze mięta na nocy. Narysowanych dziesięć, w obiegu na stronie zestawów osiem: zegar i cichy alert czekają w szufladzie, aż znajdą swoje miejsce. Nowe ikony dochodzą tylko z nową funkcją i tylko własną kreską.

fala / stacje
głośnik
szum do snu
zegar · w szufladzie
cyfry powietrza
prognoza
ciśnienie
alert cichy · w szufladzie
portal wi-fi
bateria

Głos

Piszemy do znajomych, nie do targów elektroniki. Progi ze skanera trzymamy jak bramkę w firmware.

  1. Korzyść przed parametrem: „mówi, kiedy przewietrzyć", nie „SCD41, 5000 ppm".
  2. Rytm ludzki: odchylenie długości zdań co najmniej 5; myślniki 2-6 na tysiąc słów; antytezy „nie X — Y" najwyżej trzy na tysiąc.
  3. Nominalizacje pod kontrolą, czasownik przed rzeczownikiem odczasownikowym.
  4. Uczciwość produktu w jednym zdaniu tam, gdzie trzeba: czym kostka nie jest, mówi wprost.
  5. Każdy tekst widoczny dla ludzi przechodzi skaner i rundę redaktorską przed zdjęciem noindex.

Dwa szablony, jedna dyscyplina

Szablon główny to warsztat doradcy: gęsty, techniczny, granatowo-cyjanowy blueprint. Nocne pasmo to półka domowa: mniej słów, większe światło, ciepły krem. Liczby poniżej — stan na 30.07.2026.

#1 Engineered Dark (fiedoruk.pl)#2 Nocne pasmo (Open Radio)
Rolaportfolio i oferta doradcyfront produktu dla ludzi
Fundament CSStheme-2.0.css: 614 linii, ~138 klas, 12 tokenówself-contained na stronę: ~330 linii, ~34 klasy, 13 tokenów
Architekturasilnik partiali PHP (6 wspólnych) + słowniki lang/strony samowystarczalne; para PL/EN utrzymywana ręcznie
TypografiaSpace Grotesk + IBM Plex (12 plików woff2)Unbounded zmienny (2 pliki) + stos systemowy
Ikonysprite inline symbolami10 autorskich SVG rysowanych w miejscu użycia
Elementy podpisoweblueprint, stamp, siatki techniczneskala strojenia, pasek widma, rama kostki, equalizer
Tłociemne stalerytm noc-krem szyty widmem
Wspólnefonty self-hosted pod CSP · Plausible · skaner + redaktor QC · strażnik powierzchni · zero bibliotek zewnętrznych i zero defaultów

Szablon #3 dostanie własny język w dniu, w którym urodzi się produkt, który na niego zasłuży. Dyscyplina pozostaje ta sama: pixel perfect, własna kreska, żadnego stylu z automatu.