Piękno i brutalizm: jak zaprojektowałem blakecrosley.com na ich styku

Zaprojektowałem blakecrosley.com bez kolorów, gradientów, ilustracji i elementów dekoracyjnych. Tylko biała typografia na absolutnej czerni (#000000), z warstwami przezroczystości na poziomie 5%, 10%, 40% i 65% tworzącymi całą hierarchię wizualną. Strona uzyskuje wynik 100/100 w Lighthouse performance i osiąga to, co nazywam „szczerym pięknem”: strukturalną klarowność połączoną z precyzyjnym rzemiosłem.¹

Podsumowanie

Brutalizm w projektowaniu cyfrowym sprowadza interfejsy do strukturalnej szczerości: surowa typografia, widoczne siatki, minimalna dekoracja. Piękno dodaje wyrafinowanie: harmonijne relacje kolorystyczne, precyzyjne odstępy, mikrointerakcje. Najbardziej przekonujące współczesne produkty (Linear, Notion, Arc Browser) działają na tym właśnie styku. Zbudowałem blakecrosley.com w tym samym punkcie przecięcia, a ten wpis dokumentuje konkretne decyzje CSS, elementy które usunąłem i dlaczego napięcie między szczerością a rzemiosłem daje lepsze interfejsy niż każda z tych zasad osobno.

Mój system projektowy: brutalizm jako fundament

Nie-paleta kolorów

Większość systemów projektowych zaczyna od palety kolorów. Mój zaczyna od jej braku:

:root {
  --color-bg-dark:        #000000;
  --color-bg-elevated:    #111111;
  --color-bg-surface:     #1a1a1a;
  --color-text-primary:   #ffffff;
  --color-text-secondary: rgba(255,255,255,0.65);
  --color-text-tertiary:  rgba(255,255,255,0.4);
  --color-border:         rgba(255,255,255,0.1);
  --color-border-subtle:  rgba(255,255,255,0.05);
  --color-accent:         #ffffff;
}

Żadnych kolorów marki. Żadnych kolorów semantycznych poza poziomami przezroczystości. Cała hierarchia wizualna opiera się na czterech progach transparentności: 100% (podstawowy), 65% (drugorzędny), 40% (trzeciorzędny) i 10% (strukturalne obramowania). Jest to brutalistyczne w swojej zasadzie: materiał (światło na ciemnym tle) jest używany bezpośrednio, bez dekoracji.²

Decyzja była świadoma. Podczas moich 16 studiów projektowania produktów zauważyłem, że produkty, które najbardziej szanuję (Linear, Vercel, Raycast), używały stonowanych palet, w których hierarchię budowały typografia i odstępy. Produkty z ponad 8 kolorami semantycznymi często używały koloru jako substytutu strukturalnej klarowności.

Typografia jako główna hierarchia

Bez koloru niosącego hierarchię, typografia niesie wszystko:

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-size-display:  5rem;     /* 80px - hero headlines */
  --font-size-7xl:      3.875rem; /* 62px */
  --font-size-base:     1rem;     /* 16px - body text */
  --font-size-xs:       0.75rem;  /* 12px - metadata */
}

Fonty systemowe, nie niestandardowe fonty webowe. Jest to zarówno wybór brutalistyczny (użycie natywnego materiału platformy), jak i wybór wydajnościowy (zero opóźnień ładowania fontów, co przyczynia się do doskonałych wyników Lighthouse). Rozmiar display (80px) z ciasnym rozstawem liter (-0.03em) nadaje nagłówkom wagę bez dekoracji. Tekst treści w rozmiarze 16px z hojną interlinią (1.7) stawia czytelność ponad gęstością.³

8-punktowy system odstępów

Każda wartość odstępu wywodzi się z bazy 8-punktowej:

:root {
  --spacing-xs:  0.5rem;  /* 8px */
  --spacing-sm:  1rem;    /* 16px */
  --spacing-md:  1.5rem;  /* 24px */
  --spacing-lg:  2rem;    /* 32px */
  --spacing-xl:  3rem;    /* 48px */
  --spacing-2xl: 4rem;    /* 64px */
  --spacing-3xl: 6rem;    /* 96px */
  --spacing-4xl: 8rem;    /* 128px */
}

Żadnych arbitralnych wartości. Jeśli odstęp nie istnieje w systemie, to projekt jest błędny, nie system. Nauczyłem się tego na własnej skórze, gdy użyłem --spacing-2xs w marginesie podtytułu (tokenu, który nie istniał), a układ zepsuł się po cichu. Rozwiązaniem była zmiana na --spacing-xs, a nie tworzenie nowego tokenu.⁴

Co usunąłem (i dlaczego)

Brak gradientów

Gradienty służą dwóm celom: wizualnej atrakcyjności i symulacji głębi. Na stronie zbudowanej wokół treści (wpisy blogowe, opisy projektów) gradienty konkurują z treścią o uwagę wizualną. Usunąłem wszystkie gradienty i pozwoliłem, by to treść stanowiła wizualną atrakcję.

Brak ilustracji i ikon

Żadnych dekoracyjnych SVG, ilustracji bohaterskich, bibliotek ikon. Fotografia służy jako jedyny nietypograficzny element wizualny (osobiste zdjęcia na stronie głównej). Każde zdjęcie ma kontener o proporcjach 4/3 z samym border-radius — bez cieni, nakładek czy obróbki kolorystycznej.

Brak cieni (stan domyślny)

Elementy w stanie domyślnym mają zerowy cień. Stany najechania dodają subtelną głębię:

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

Cienie pojawiają się wyłącznie jako funkcjonalna informacja zwrotna (ten element jest interaktywny i właśnie z nim wchodzisz w interakcję), nigdy jako dekoracja.

Brak trybu jasnego

Strona nie posiada zapytania medialnego prefers-color-scheme. Działa wyłącznie w trybie ciemnym. Jest to świadomie bezkompromisowy wybór: zamiast utrzymywać dwa systemy wizualne i nieuchronnie iść na kompromis w obu, zaprojektowałem jeden system dobrze. Absolutnie czarne tło (#000000 zamiast #0a0a0a czy #1a1a1a) zapewnia typografii maksymalny kontrast.⁵

Gdzie wkracza piękno

Sama brutalistyczna struktura wytwarza wrogość. Piękno w moim projekcie pochodzi z rzemiosła wykonania, nie z dekoracji:

Mikrointerakcje jako funkcjonalna informacja zwrotna

Każdy interaktywny element ma przejście, ale żadne przejście nie istnieje dla estetycznej przyjemności:

:root {
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav a::after {
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav a:hover::after {
  transform: scaleX(1); /* Underline grows from left */
}

Linki nawigacyjne odsłaniają podkreślenie po najechaniu (funkcjonalne: potwierdza interaktywność). Karty projektów skalują się do 1,08x (funkcjonalne: wskazuje klikalny obszar). Mobilny hamburger animuje się do ikony X (funkcjonalne: komunikuje zmianę stanu). Żadna animacja nie istnieje bez funkcjonalnego celu.⁶

Animacje wejścia dla grup kart

Karty pojawiają się ze schodkową animacją translateY(16px):

@keyframes socialCardIn {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

Służy to celowi funkcjonalnemu: komunikuje, że treść się załadowała i kieruje uwagę na nowo widoczne elementy. Efekt schodkowy (każda karta opóźniona o 100ms) tworzy rytm pomagający użytkownikom skanować grupę. Animacja trwa 500ms z wygładzaniem cubic-bezier — wystarczająco szybka, by nie opóźniać interakcji, wystarczająco płynna, by sprawiać wrażenie dopracowanej.

Nagłówek z efektem glassmorphism

Jedyny element zbliżony do dekoracyjnego:

.header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-overlay); /* rgba(0,0,0,0.8) */
}

Rozmyty nagłówek służy celowi funkcjonalnemu: wskazuje, że treść przewija się za nawigacją, ustanawiając nagłówek jako stałą warstwę. Ale rozmycie dodaje również wizualne rzemiosło — to jeden z niewielu momentów, w których projekt stawia piękno obok funkcji.

Produkty odnajdujące tę samą równowagę

Linear: brutalistyczna struktura, piękne wykonanie

Interfejs zarządzania projektami Linear jest gęsty, sterowany klawiaturą i zakłada profesjonalnych użytkowników. Żadnych ilustracji, żadnego stopniowego wdrażania. Struktura jest brutalistyczna. Wykonanie jest piękne: precyzyjna typografia, harmonijny ciemny motyw, płynne animacje 60fps. Każdy piksel służy celowi. Cel jest realizowany z rzemiosłem.⁷

Notion: surowe bloki, wyrafinowany system

Notion ujawnia swój bazowy model danych (bloki) bezpośrednio użytkownikom. Strukturalna szczerość jest brutalistyczna. Wyrafinowanie pojawia się w projektowaniu interakcji: płynne przeciąganie i upuszczanie, responsywna edycja inline oraz paleta poleceń, która sprawia, że system bloków wydaje się bezwysiłkowy.⁸

Arc Browser: brutalistyczna nawigacja, piękna oprawa

Arc ujawnia bazowy system zarządzania kartami przeglądarki (pionowe karty, przestrzenie robocze, widoki dzielone). Strukturalna szczerość jest brutalistyczna. Wizualne wykonanie (motywy gradientowe, płynne animacje) sprawia, że zarządzanie kartami jest przyjemne zamiast kliniczne.⁹

Punkt równowagi

Najskuteczniejsze podejście wykorzystuje zasady brutalistyczne dla struktury i zasady piękna dla wykonania:

Kluczowe wnioski

Dla projektantów: - Stosuj zasady brutalistyczne dla struktury (układ, architektura informacji, kolor), a zasady piękna dla wykonania (typografia, odstępy, mikrointerakcje); połączenie tworzy interfejsy, które są szczere i przyjemne - Usuń każdy element dekoracyjny i sprawdź, co się zepsuje; jeśli nic się nie zepsuje, dekoracja była zbędna - Projektuj dobrze dla jednego trybu zamiast przeciętnie dla dwóch; moje podejście wyłącznie ciemne daje bardziej spójny system niż kompromisowy przełącznik jasny/ciemny

Dla programistów: - Implementuj tokeny projektowe jako niestandardowe właściwości CSS bez arbitralnych wartości; jeśli odstęp nie istnieje w systemie, napraw projekt zamiast dodawać jednorazową wartość - Traktuj mikrointerakcje jako funkcjonalną informację zwrotną; przejście hover 150ms komunikuje interaktywność, podczas gdy 2-sekundowa animacja wejścia nie komunikuje niczego użytecznego

Dla liderów produktu: - Dopasuj pozycję estetyczną do kontekstu użytkownika; profesjonalne narzędzia skłaniają się ku brutalizmowi, produkty konsumenckie ku pięknu, a najlepsze produkty odnajdują punkt przecięcia

Źródła