Architektura Wizualna • Klinika Dr Marcin Nowak

Design System &
Przewodnik Stylu

Poniższy widok agreguje autentyczne tokeny wizualne, paletę kolorów, hierarchię typograficzną oraz rygorystyczne komponenty interaktywne stosowane w całym serwisie Kliniki Dr. Marcina Nowaka.

Rygor Siatki (1440px)

Wszystkie sekcje i klastry od lewej do prawej krawędzi są precyzyjnie osadzone wewnątrz maksymalnego kontenera 1440px z zachowaniem matematycznej harmonii marginesów.

Quiet Luxury Spacing

Każdy komponent operuje luksusowym, wewnętrznym oddechem (np. rygorystyczne 50px w formularzach), zapewniającym nieskazitelną przejrzystość i komfort odbioru.

01. Paleta Kolorów

Autentyczne Barwy

Zestawienie stonowanych, wyrafinowanych odcieni budujących tożsamość wizualną Kliniki Medycyny Estetycznej Dr Marcin Nowak.

Slate Blue (Brand) #C5D0E3

Deep Black #000000

Cool Grey (Alt) #F2F2F2

Card Background #FAFAFA

Crisp Border #E5E5E5

Pure White #FFFFFF

02. Skala i Fonty

Hierarchia Typograficzna

Połączenie autorytetu klasycznej czcionki szeryfowej w nagłówkach z doskonałą czytelnością nowoczesnego kroju bezszeryfowego w opisach i interfejsie.

Nagłówek H1 Font Szeryfowy • 5xl-7xl • leading-1.15

Nasze zabiegi dostosowane do Twoich potrzeb

Nagłówek H2 Font Szeryfowy • 4xl-6xl • tracking-tight

Pasja do naturalnego piękna i rygor medyczny

Nagłówek H3 Font Szeryfowy • 2xl-4xl • leading-snug

Nowoczesne technologie laserowe w klinice

Etykieta Eyebrow Font Sans • text-xs • uppercase • tracking-widest

Założyciel Kliniki, Lekarz Medycyny Estetycznej

Akapit Opisowy Font Sans • text-base • leading-relaxed • text-deep/80

Zatrzymaj czas i przywróć skórze jędrność. Stosujemy zaawansowane techniki wolumetrii, lifting wektorowy oraz mezoterapię igłową, wydobywając wypoczęty, młodszy wygląd z pełnym poszanowaniem naturalnych proporcji twarzy.

03. Interakcja

Przyciski & Akcje

Symetryczne prostokąty o ostrych liniach, operujące fontem bezszeryfowym w kapitalikach z rozstrzelonym trackingiem (uppercase tracking-wider font-bold).

Wariant Primary (Slate Blue #C5D0E3 na jasnym tle)

Wariant Secondary (Cool Grey #F2F2F2 na jasnym tle)

Wariant Outline (Obramowanie z efektem najechania)

Przyciski na Ciemnym Tle (Sekcja CTA / Banery Paralaksa)

Czytaj więcej Poznaj nas

Linki & Odnośniki Akcji (Unifikacja Header, Footer & Blog)

A. Zwykły odnośnik tekstowy (np. Stopka, Cennik) Polityka prywatności & regulamin serwisu

B. Dynamiczny odnośnik akcji (np. Header "Dobierz zabieg" / Blog "Czytaj artykuł") Dobierz zabieg / Czytaj artykuł

04. Ikonografia

Wektorowa Precyzja

Zestawienie minimalistycznych, wektorowych ikon liniowych o stałej grubości 1.5px (Untitled UI / Lucide standard), stosowanych w kartach specyfikacji zabiegowej.

Czas trwania 30 - 60 minut

Rekonwalescencja Brak (powrót do aktywności)

Znieczulenie Miejscowe (krem znieczulający)

Etykiety & Znaczniki (Zunifikowany System Badges)

A. Etykieta Treści (np. Kategorie w Blogu, Certyfikaty HI-TECH)

Medycyna Estetyczna Certyfikat CE / FDA

Minimalistyczny, ostry kontener o zerowym zaokrągleniu (`rounded-none`), z delikatnym cieniem i popielatą ramką. Stosowany na liście technologii i kartach bloga.

B. Wskaźnik Zdjęciowy (np. Numeracja w "Twój Problem")

Podgląd tła zdjęcia

Nakładany bezpośrednio w rogu zdjęć. Używa czcionki szeryfowej `font-serif` (Poppins) i półprzezroczystego tła `bg-white/90` dla zapewnienia maksymalnej czytelności na zróżnicowanych grafikach.

05. Formularze

Pola Wejściowe

Kontener formularza z gwarantowanym paddingiem 50px, oddzielającym cienkie obramowania pół od krawędzi okna.

Imię i nazwisko *

Telefon *

Adres e-mail

Wybór kliniki

Wiadomość

Wyrażam zgodę na przetwarzanie danych w celu umówienia wizyty. Wszystkie procedury spełniają rygorystyczne normy bezpieczeństwa CE i FDA. *

06. Klastry Architektoniczne

Komponenty Złożone

Przykłady gotowych klastrów z potężnym wewnętrznym oddechem, w tym złoty standard zdjęć portretowych o proporcjach 3:4.

A. Karta Oferty (Układ Lewo/Prawo z przyciskiem Slate Blue)

Zabiegi na twarz

Subtelne modelowanie i lifting wektorowy. Odrzucamy przerysowane rezultaty na rzecz świeżego, wypoczętego i naturalnego wyglądu.

Poznaj zabiegi

B. Karta Zespołu (Wzorcowe proporcje pionowe 3:4 z dopasowaniem object-top)

Lek. med. Marcin Nowak