Wewnętrzny katalog

Design system Coffee Class.

Źródło prawdy dla komponentów, typografii, kolorów i zachowań interaktywnych. Strona nie jest linkowana z głównej nawigacji i nie jest indeksowana.

01 · Komponenty

Jeden system, wiele miejsc użycia.

Każdy element ma własną nazwę oraz jedno przeznaczenie. Zmiana w komponencie powinna być widoczna wszędzie, gdzie jest używany.

SiteHeader

Stały nagłówek: logo, język, skrócona nawigacja i główne CTA.

PageHero

Wspólny hero dla podstron, z eyebrow, H1, opisem oraz opcjonalnym panelem faktów.

SectionHeading

Nagłówek sekcji z Fragment Mono jako eyebrow i Bricolage Grotesque w H2.

ActionLink

Wspólny przycisk HUG z rolowanym tekstem, ikoną arrow_outward i pięcioma wariantami. Header CTA używa tego rytmu bez ikony.

TextLink

Mały link kontekstowy z Fragment Mono, Material arrow_outward i linią blisko tekstu.

BlogTag

Mały pill tag: 35 px wysokości, padding 18 px, radius 18 px, Fragment Mono i biały fill.

FaqAccordion

Jednootwarty, płynny akordeon z pełną obsługą ARIA.

TestimonialsCarousel

Karuzela opinii sterowana przyciskami i przewijaniem poziomym.

ProcessCardStack

Trzy karty przesuwające się po łuku podczas scrollowania na desktopie.

InquiryForm

Formularz rezerwacji i vouchera z globalnym stylem pól, stanów i podglądu ceny.

WorkshopSelect

Własny dropdown formularza: zaokrąglone menu, padding 24 px i Material Symbol jako kontrolka.

ParticipantStepper

HUG kontrolka liczby osób: minus, liczba i plus mają ten sam rozmiar, a limit pokazuje komunikat.

SmoothScroll

Lenis podpięty globalnie z obsługą prefers-reduced-motion.

HomeMotion

Lekki mechanizm ujawniania elementów oznaczonych data-reveal, z obsługą reduced motion.

SiteFinalCta / SiteFooter

Wspólne domknięcie podstron: CTA oraz stopka kontaktowa.

02 · Typografia

Dwanaście nazwanych stylów.

Rendering fontów jest ustawiony globalnie: antialiasing, kerning, ligatury i geometric precision bez blurów ani rozmycia.

Display Hero

Więcej smaku

--type-display-hero

Duży komunikat wizualny w hero i momentach kampanijnych. Bricolage Grotesque, uppercase, width 75, weight 600, optical size auto, letter spacing 0, responsywne skalowanie.

Display H1

Warsztaty kawowe

--type-display-h1

Główne nagłówki stron i hero podstron. Bricolage Grotesque, uppercase, width 75, weight 600, optical size auto, letter spacing 0, responsywne skalowanie.

Display H2

Wybierz swój format

--type-display-h2

Główne nagłówki sekcji. Bricolage Grotesque, uppercase, width 75, weight 600, optical size auto, letter spacing 0, responsywne skalowanie.

Display H3

Degustacja

--type-display-h3

Karty, kroki i podsekcje. Bricolage Grotesque, uppercase, width 75, weight 600, optical size auto, letter spacing 0, responsywne skalowanie.

Body Large

Kameralne warsztaty, które zaczynają się od smaku.

--type-body-lg

Lead, intro w hero i najważniejsze wyjaśnienia.

Body

Konkretny tekst, który prowadzi przez ofertę i informacje praktyczne.

--type-body

Domyślny tekst opisowy i treść sekcji.

Body Small

Dopowiedzenia, pomocnicze opisy i podpisy.

--type-body-sm

Treść wspierająca, nigdy jako główny akapit.

Label

WROCŁAW · STARE MIASTO

--type-label

Eyebrow, formularze, nawigacja i systemowe etykiety. Fragment Mono, minimum 13 px.

Mała paleta, wyraźna hierarchia.

Paper

#E9E3DB

--paper

Paper soft

#F2EDE7

--paper-soft

Brown

#3D211A

--brown

Blue

#1B45E0

--blue

White

#FFFFFF

--white

Lime

#C9F24E

--lime · primary CTA only

Error

#B65B52

--error · form validation only

04 · ActionLink

Trzy poziomy, pięć wariantów.

Primary · rezerwuj warsztat

Jedyny limonkowy wariant. Tylko dla głównej akcji.

Secondary · zobacz ofertę

Niebieska akcja drugiego poziomu na jasnym tle.

Tertiary · kup voucher

Konturowa alternatywa na jasnym tle.

Secondary inverse · napisz

Biała akcja drugiego poziomu na ciemnym tle.

Tertiary inverse · pytania

Konturowa alternatywa na ciemnym tle.

TextLink · Google opinie

Mały link kontekstowy z Fragment Mono i linią pod tekstem. Używany przy opiniach, historii i linkach pomocniczych.

Demo

BlogTag: HUG, 35 px wysokości, 18 px paddingu poziomego, radius 18 px, biały fill.

05 · Hover states

Każda interakcja ma swój stan.

To jest mapa hoverów dla wszystkich elementów klikalnych. Zasada: ruch jest wspólny i miękki, kolor służy hierarchii, a layout nigdy nie skacze.

Primary CTA

Rezerwuj warsztat

Lift 2 px, roll tekstu i spokojny ruch ikony. Limonka tylko dla głównej akcji.

Secondary / Tertiary

Zobacz ofertę FAQ

Ten sam rytm ruchu, różna hierarchia koloru. Secondary jest niebieski, tertiary konturowy.

TextLink

5,0 w Google · 17 opinii

Linia zostaje blisko tekstu, a Material arrow_outward przesuwa się subtelnie po skosie.

Navigation link

Na hover przesuwa się wyłącznie tekst. Tło batona nie zmienia koloru.

BlogTag

Demo Kawa

Pill zmienia fill na brown i tekst na white. Nie używa stylu buttona.

WorkshopSelect

Dropdown i opcje reagują niebieskim focusem albo miękkim paper-soft.

ParticipantStepper

Plus i minus mają ten sam HUG rozmiar co input; hover jest niebieski.

Tooltip trigger

Ikona bez obrysu. Hover wzmacnia kolor i delikatnie podbija tło.

FAQ trigger

Jak nazywa się ten komponent?

FaqAccordion. Używa płynnego przejścia wysokości i może mieć tylko jedną otwartą odpowiedź.

Klikalny wiersz akordeonu zachowuje układ, a hover tylko podpowiada interakcję.

Carousel controls

Okrągłe przyciski opinii przechodzą w blue + white bez zmiany layoutu.

Footer language

PL EN

Mały przełącznik w stopce dostaje jasny pill hover i aktywny stan white.

Footer social icons

Material Symbols w okręgu zmieniają się na blue + white.

06 · InquiryForm

Pola miękkie jak Made With GSAP.

Forma: białe pole, duży promień, padding 24 px, niebieski focus. Limonka należy wyłącznie do przycisku wysłania.

Imię i nazwiskoAdres e-mailPreferowana dataPole z błędem

Wpisz poprawny adres e-mail.

Wiadomość

07 · Interakcje

Ruch ma prowadzić, nie przeszkadzać.

FaqAccordion

Jak nazywa się ten komponent?

FaqAccordion. Używa płynnego przejścia wysokości i może mieć tylko jedną otwartą odpowiedź.

Jak zachowuje się po kliknięciu?

Otwarcie nowej odpowiedzi zamyka poprzednią. Przycisk aktualizuje aria-expanded dla czytników ekranu.

Display

Bricolage Grotesque

--display

Nagłówki i duże liczby. Uppercase, --display-width 75, --display-weight 600, --display-opsz auto, --display-tracking 0.

Body

Schibsted Grotesk

--body

Akapity, statement i czytelne teksty interfejsu.

Mono

Fragment Mono

--mono

Etykiety, meta, przyciski i informacje systemowe. Minimum 13 px.

TestimonialsCarousel

Spójny system sprawia, że każda podstrona mówi tym samym językiem.
Anna · opinia uczestnika

Karty, przyciski i tekst mają wspólny rytm, bez przypadkowych wyjątków.
Michał · opinia uczestnika

08 · Ikony

Material Symbols

Jedna biblioteka ikon.

arrow_outward

Material Symbols Outlined

FILL 0/1 · wght 100–700 · GRAD -50–200 · opsz 20–48

Używaj komponentu MaterialSymbol; domyślnie: 20 px, waga 400, bez wypełnienia.

expand_more

Dropdown control

expand_more · close

Dropdown formularza używa Material Symbols, a nie natywnej strzałki systemowej.

09 · ProcessCardStack

Karty płyną po łuku na scrollu.

Degustacja

Pierwsza karta wjeżdża z prawej i otwiera sekwencję.

Sensoryka

Druga przejmuje środek kadru w kontrolowanym rytmie.

Zrozumienie

Trzecia domyka łuk, zanim całość odpłynie w lewo.