Dla żłobków, przedszkoli i szkół
Ciastoterapia
Edukacja, którą można poczuć. Autorska metoda edukacyjna angażująca wszystkie zmysły.
Poznaj CiastoterapięKolory i dostępne połączenia
Orange to akcent graficzny (kształty, kropki list, kwadraty przy zdjęciach), nigdy kolor zwykłego tekstu. Tekst i elementy interaktywne korzystają z ciemniejszych wariantów. Współczynniki kontrastu według WCAG 2.1 (z `03_DESIGN_SYSTEM_WYMAGANIA.md`).
Paleta [WEB 1]
- Aa
- Aa 7.86
- Aa 6.86
- Aatylko ≥ 24 px
- Aatylko ≥ 24 px
- Aa 5.96
- Aa 6.10
Kolory pochodne [propozycja]
- Aa 7.86
- Aa 5.55
- 4.64
- Aa 4.56
- Aa 4.65
- Aa
Logo ma własny pomarańcz #FE7E03, używany wyłącznie w logo. Sand Deep i Line nie występują w briefie, dodane dla stanów i podziałów (do akceptacji).
Dozwolone połączenia (użyte w makietach)
| Próbka | Para | Kontrast | Zastosowanie |
|---|---|---|---|
| Tekst treści | Brown na Ivory / Sand / Biały | 7.86 / 6.86 / 8.56 | tekst, nagłówki |
| Tekst na ciemnym | Ivory na Brown | 7.86 | stopka, pas CTA |
| Link w treści | Orange Dark na Ivory / Biały | 5.47 / 5.96 | linki, nadtytuł H1, numery programów |
| Na Sand ≥ 16 px | Orange Dark na Sand | 4.78 | tylko linki ≥ 16 px; na Sand preferować Brown |
| Etykieta | Teal Dark na Ivory / Sand / Biały | 5.60 / 4.89 / 6.10 | etykiety odbiorców, nadtytuły, focus |
| Przycisk główny | Biały na Orange Dark | 5.96 | przycisk główny |
| Przycisk jasny | Brown na Ivory (na tle Brown) | 7.86 | przycisk na ciemnym tle |
| Duży | Orange na Ivory, tylko ≥ 24 px i grafika | 3.20 | kwadraty, kropki list, dekoracje |
Zakazane połączenia
| Para | Kontrast | Zamiast tego |
|---|---|---|
| Nie: Orange jako tekst zwykły (na Ivory) | 3.20 | Orange Dark |
| Nie: jakikolwiek tekst Orange na Sand | 2.79 | Brown lub Orange Dark ≥ 16 px |
| Nie: biały tekst zwykły na Orange / Muted Teal | 3.48 / 4.28 | biały na Orange Dark / Teal Dark |
| Nie: Orange, Orange Dark, Teal Dark na Brown (tekst lub focus) | 1.40-2.46 | Ivory; focus Ivory na Brown |
| Nie: Sand jako jedyna granica karty na Ivory | 1.15 | obramowanie --line lub tło białe |
| Nie: kolor jako jedyny sygnał (link, błąd, aktywna pozycja) | - | podkreślenie, ikona + słowo „Błąd:”, belka pod pozycją menu |
Typografia
Bricolage Grotesque 600/700 (nagłówki, nazwy programów) i Instrument Sans 400/500/600 (tekst i UI). Rozmiary płynne: wartość mobilna do 390 px, desktopowa od 1280 px (CSS clamp). Fonty hostowane lokalnie (WOFF2, latin + latin-ext).
H1 w dwóch stopniach
Fundacja Food & Mind -edukacja żywieniowa
Jeden znacznik H1. Linia 1: Bricolage 600, 24 / 20 px, Orange Dark. Linia 2: Bricolage 700, 60 / 38 px, interlinia 1.08, −0.02 em [WEB 1]H2Nasze programyBricolage 600 · 38 / 28 px · 1.15 [WEB 1]
H2 z dopowiedzeniemCiastoterapia- program dla żłobków, przedszkoli i szkółDruga część: Bricolage 600 · 20 / 18 px. Jeden znacznik H2 (nagłówki SEO bez skracania)
H3Przepis na Pamięć i SprawczośćBricolage 600 · 26 / 22 px · 1.25 [WEB 1]
H4 / tytuł w karcieFormy współpracyInstrument Sans 600 · 20 / 18 px · 1.3 [propozycja]
LeadŁączymy naukę o wpływie żywienia na zdrowie psychiczne z edukacją opartą na doświadczeniu.Instrument Sans 400 · 20 / 18 px · 1.5 [propozycja]
BodyPomagamy dzieciom, szkołom, firmom i społecznościom budować zdrowie, dobrostan i trwałe nawyki.Instrument Sans 400 · 17 / 16 px · 1.6 [WEB 1]; maks. ok. 70 znaków w wierszu
MałeŹródło: MEN / Badanie Nowej Ery, 2023Instrument Sans 400 · 15 / 14 px · 1.5; nigdy mniej niż 14 px [propozycja]
NadtytułDla firm i organizacjiInstrument Sans 600 · 14 px · wersaliki, rozstrzał 0.08 em · Teal Dark. Stosowany oszczędnie, tylko gdy dodaje informację
Przyciski, nawigacjaPoznaj programy · Oferta · ZespółInstrument Sans 600 · 16 px · 1.2
Polskie znaki we wszystkich wagach
| Bricolage 600 | ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ |
|---|---|
| Bricolage 700 | ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ |
| Instrument Sans 400 | ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ |
| Instrument Sans 500 | ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ |
| Instrument Sans 600 | ąćęłńóśźż ĄĆĘŁŃÓŚŹŻ |
Siatka, kontenery i odstępy
Wszystkie wartości [propozycja] na podstawie WEB 1 i wymagań systemu.
| Szerokość | Kolumny | Odstęp kolumn | Margines boczny | Nagłówek |
|---|---|---|---|---|
| ≥ 1280 px (makieta 1440) | 12 · kontener 1200 px | 24 px | 32 px (min.) | pełne menu, 80 px |
| 1024-1279 px | 12 | 24 px | 32 px | pełne menu z przyciskami „Dla firm” i „Wesprzyj” (sprawdzone przy 1024 px) |
| 768-1023 px | 8 (układy 2-kolumnowe) | 24 px | 24 px | menu mobilne, 64 px |
| < 768 px (makieta 390, kontrola 320) | 4 · jedna kolumna treści | 16 px | 16 px | menu mobilne, 64 px |
12 kolumn · 1200 px
4 kolumny · 358 px treści przy 390 px
Skala odstępów (baza 4/8)
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
- 128
Zastosowanie
| Odstęp między sekcjami | 112 / 64 px |
| Nagłówek sekcji → treść | 32 / 24 px |
| Odstęp kart w siatce | 28 / 16 px |
| Wewnętrzny margines karty | 24-28 / 20 px |
| Między elementami interaktywnymi | min. 8 px |
| Cel dotykowy | min. 44 px, przyciski 48 px |
Zaokrąglenia i podział sekcji
8 · przycisk, pole
12 · zdjęcie
14 · karta, panel
pełne · etykieta
Sekcje dzielone kolorem tła, nie cieniem. Cień tylko w panelu rozwijanym „Programy” i przy hover karty programu. Motyw z WEB 1: zdjęcie hero z kwadratem Brown i małym kwadratem Orange (dekoracja, aria-hidden).
Przyciski i linki
Wysokość 48 px (w nagłówku 44 px). Etykiety opisują cel („Poznaj Ciastoterapię”, „Zapytaj o wdrożenie”), nigdy samo „Dowiedz się więcej”. Focus: obrys 3 px Teal Dark z odstępem 2 px, na ciemnym tle Ivory. Stany statyczne poniżej; ostatni wiersz działa na żywo.
DomyślnyHoverFocusActiveNieaktywny
Główny
Poznaj programyPoznaj programyPoznaj programyPoznaj programyPoznaj programy
Drugorzędny
Zapytaj o wdrożenieZapytaj o wdrożenieZapytaj o wdrożenieZapytaj o wdrożenieZapytaj o wdrożenie
Link CTA
Poznaj CiastoterapięPoznaj CiastoterapięPoznaj CiastoterapięPoznaj Ciastoterapiębrak (link)
Jasny na Brown
Napisz do nasNapisz do nasNapisz do nasNapisz do nasbrak (nieużywany)
Link na Brown
Zobacz ofertęZobacz ofertęZobacz ofertę
Na żywo (najedź, kliknij, przejdź klawiszem Tab)
Link w treści jest zawsze podkreślony, np. polityka prywatności; po najechaniu podkreślenie pogrubia się do 3 px. Link zewnętrzny ma ikonę: kurs edukatora - ciastoterapia.pl (strona zewnętrzna) [DO DECYZJI] czy otwierać w nowej karcie
Etykiety odbiorców
Element informacyjny, nie przycisk. Teal Dark z obramowaniem na białym tle (6.10). Wariant spokojny dla informacji dodatkowej.
Dla żłobków, przedszkoli i szkół
Dla szkół podstawowych
Dla firm i organizacji
Bezpłatne materiały · klasy 1-8
Na tle Sand
Dla żłobków, przedszkoli i szkółDla firm i organizacji
Formularze
Etykiety zawsze nad polem, „(wymagane)” przy polach obowiązkowych. Walidacja przy wysłaniu, po pierwszej próbie także przy opuszczeniu pola. Przycisk nigdy nie jest wyłączony przed wysłaniem. Ten sam komponent działa na stronach Kontakt i Dla firm; pod spodem działa na żywo (wyślij pusty formularz, aby zobaczyć błędy).
Pola: stany
Domyślny (obramowanie 1,5 px, 4.64:1)
Focus (obrys Teal Dark 3 px)
Błąd: wpisz adres e-mail w formacie nazwa@domena.pl
Wypełnione (wartość przykładowa)
Formularz kontaktowy (ContactForm) · na żywo
Dziękujemy, wiadomość została wysłana
Odpowiemy na adres e-mail podany w formularzu.
Stany wysyłki
Podsumowanie błędów (focus przechodzi tutaj)
Formularz zawiera 2 błędy
Wysyłanie
Tekst przycisku zmienia się, aria-busy, blokada podwójnego wysłania. Dane w polach bez zmian.
Wysłano (formularz zastąpiony komunikatem)
Dziękujemy, wiadomość została wysłana
Odpowiemy na adres e-mail podany w formularzu.
Błąd wysyłki (dane zostają w polach)
Błąd: nie udało się wysłać wiadomości
Spróbuj ponownie za chwilę albo napisz bezpośrednio na adres kontakt@foodandmind.org. Wpisane dane pozostały w formularzu.
Newsletter: stany
Pusty · na żywo (wpisz adres, kliknij „Zapisz się”)
Błąd adresu e-mail
Zapisz się
Błąd: wpisz adres e-mail w formacie nazwa@domena.pl
Wysyłanie · sukces · błąd wysyłki
Wysyłanie…
Sprawdź skrzynkę i potwierdź zapis
Wysłaliśmy wiadomość z linkiem potwierdzającym.
Błąd: nie udało się zapisać
Spróbuj ponownie za chwilę. Adres pozostaje w polu.
Wariant ze zgodą jako pole wyboru (do decyzji prawnej)
Zapisz się
Komunikaty
Ikona + tytuł + treść, tekst Brown. Informacja nigdy tylko kolorem: błąd zawsze ze słowem „Błąd:”. Paleta nie ma czerwieni; błąd = Orange Dark + ikona ostrzeżenia [DO DECYZJI] osobny kolor błędu (WCAG go nie wymaga).
Błąd: nie udało się wysłać formularza
Sprawdź połączenie i spróbuj ponownie. role="alert"
Gotowe
Komunikat sukcesu. role="status"
Informacja
Tło Sand z obramowaniem --border-input. role="status"
Karty i moduły
Karty tylko tam, gdzie element jest osobnym obiektem z jednym celem (program, kafelek oferty, materiał). Listy, artykuły i projekty bez ramek, żeby strona nie była ścianą identycznych kart.
Karta programu (ProgramCard) · cała karta klikalna, jeden link
Domyślny (na żywo)
Dla żłobków, przedszkoli i szkół
Ciastoterapia
Edukacja, którą można poczuć. Autorska metoda edukacyjna angażująca wszystkie zmysły.
Poznaj CiastoterapięHover: cień, zdjęcie 1.03, pogrubione podkreślenie
Dla żłobków, przedszkoli i szkół
Ciastoterapia
Edukacja, którą można poczuć. Autorska metoda edukacyjna angażująca wszystkie zmysły.
Poznaj CiastoterapięFocus: obrys całej karty
Kafelek oferty (OfferTile) · zdjęcie po lewej, tekst po prawej (prośba klientki); na telefonie miniatura 88 px opływana tekstem
Szkolenia i warsztaty dla firm
Od rozwoju kompetencji pracowników i zespołów, przez tematykę stresu i dobrostanu, po zdrowie, żywienie i angażujące warsztaty.
Poznaj szkolenia i warsztaty- Miejsce na zdjęcie stockowe
Komunikacja i współpraca
Wariant z numerem tematu i neutralnym miejscem na zdjęcie stockowe (jedyny dopuszczalny placeholder w projekcie).
Karta artykułu (ArticleCard, wariant wyróżniony)
Projekty fundacji
Wpływ reklamy na dzieci - jak uczyć krytycznego myślenia
Karta osoby (PersonCard) · pełny biogram, 2 kolumny na desktopie
Karolina Bruchal-Bąk
Zespół programowy
Karolina jest dowodem na to, że wielka zmiana w żywieniu dzieci zaczyna się od małego kroku - i od człowieka, który wierzy, że ten krok ma sens.
Lista korzyści (BenefitList) · kwadrat Orange jako znacznik, semantycznie <ul>
- Więcej energii i większa świadomość
Pomagamy pracownikom lepiej rozumieć, co wpływa na ich samopoczucie, koncentrację i motywację oraz jak wspierać je na co dzień.
- Lepsza komunikacja i współpraca
Rozwijamy umiejętności komunikacyjne, wspieramy budowanie relacji i pomagamy lepiej radzić sobie z wyzwaniami pojawiającymi się w pracy zespołowej.
- Praktyczne sposoby radzenia sobie ze stresem
Pokazujemy, jak rozpoznawać napięcie, reagować na przeciążenie i korzystać z narzędzi, które pomagają w codziennych wyzwaniach.
Lista numerowana (NumberedList) · tylko gdy kolejność lub numeracja jest w treści
Rozpoznawanie
Uczniowie odkrywają, jak reklama przyciąga uwagę i wpływa na wybory.
Rozumienie
Uczą się dostrzegać intencje reklamodawcy oraz związek między emocjami a jedzeniem.
Tworzenie
Wykorzystują zdobytą wiedzę, aby przygotować własny przekaz promujący zdrowe produkty.
Formy do wyboru (OptionList) · bez numeracji
Materiał do pobrania (DownloadCard)
Wyróżnione zdanie (Quote, wariant hasło)
Nie teoria oderwana od codzienności, lecz edukacja, która pomaga dzieciom lepiej rozumieć świat, w którym dorastają.
Akordeon (Accordion) · na żywo, domyślnie zwinięty, wiele może być otwartych
Realizujemy szkolenia, warsztaty i działania wellbeingowe oraz CSR, pokazując, jak świadome odżywianie wpływa na emocje, efektywność i jakość życia.
Uzupełnieniem szkoleń są autorskie warsztaty Ciastoterapii - angażujące doświadczenie, które integruje zespoły i buduje relacje w naturalny sposób.
Tworzymy rozwiązania dopasowane do potrzeb zespołów - od jednorazowych warsztatów po długofalowe programy wspierające zdrowie, współpracę i odporność psychiczną.
Stan widoczny kształtem (+ / −), nie tylko kolorem. Treść panelu w DOM. W projekcie: menu mobilne (Programy), spis treści artykułu na telefonie; gotowy do FAQ, gdy fundacja dostarczy pytania.
Adnotacja o dofinansowaniu (GrantNotice) · tekst w HTML, nie obraz
Nawigacja i stopka
Pełna specyfikacja zachowań, stany i zrzuty: Specyfikacja nawigacji. Stopka jest na dole tej strony (komponent na żywo).
Desktop: panel „Programy” otwarty 
Telefon: menu z rozwiniętymi Programami
Komponenty Astro: odpowiedniki elementów makiet
Każdy element makiet ma odpowiednik na liście z 03_DESIGN_SYSTEM_WYMAGANIA.md §10. Nowe komponenty są nazwane i uzasadnione na końcu tabeli. Nazwy klas CSS w prototypie odpowiadają komponentom.
| Komponent | Klasa w prototypie | Gdzie używany | Uwagi |
|---|---|---|---|
| SkipLink | .skip-link | każda strona | pierwszy w kolejności focusu |
| Header + NavDropdown | .site-header, [data-dropdown] | każda strona | disclosure, nie ARIA menu; aria-current na aktywnej pozycji |
| MobileMenu | .mobile-menu | < 1024 px | role="dialog", pułapka focusu, Esc |
| Breadcrumbs | .breadcrumbs | wszystkie podstrony | zgodne z BreadcrumbList |
| Button, ArrowLink | .btn, .arrow-link | wszędzie | 3 warianty przycisku + .btn--compact (44 px) |
| Badge | .badge, .badge--quiet | karty, hero programów | |
| HeroSplit | .hero (główna), .page-hero (podstrony), .photo-frame | wszystkie widoki | wariant tekstowy .page-hero--text |
| SectionHeading | .section-head, .two-col | wszędzie | H2 po lewej, treść po prawej na desktopie |
| ProgramCard | .program-card, .program-row | Główna, Programy | wariant layout="row" dla hubu |
| OfferTile | .offer-tile, .tiles | Dla firm | miniatura 88 px opływana tekstem na telefonie |
| BenefitList, OptionList | .benefits, .squares, .options | Dla firm, NE, Ciastoterapia, Oferta | |
| Accordion | .accordion, [data-accordion] | menu mobilne, spis treści artykułu | |
| ComparisonTable | .compare | Programy | tabela → karty < 768 px |
| DownloadCard | .download, .downloads, .download__meta | W sieci reklam, Standardy | bezpośrednie pobieranie pliku z domeny fundacji (download), typ i rozmiar pod tytułem |
| Quote | .callout, .manifesto | Główna, KMO, Misja, NE | wariant „hasło” bez atrybucji |
| StatsGrid | .facts | Główna, Misja | wyłącznie dane z obecnej strony; moduł „Efekty w liczbach” nieużyty |
| LogoStrip | .funders | Główna | jeden potwierdzony finansujący |
| GrantNotice | .grant | W sieci reklam | obowiązkowa adnotacja MEN |
| PersonCard, TeamTeaser | .person-full, .founder, .person | Zespół, Główna, KMO (.expert) | |
| CTABand | .cta-band | każda strona | panel w kontenerze, oddzielony od stopki |
| ContactForm, NewsletterForm, Alert | [data-contact], .nl-form, .alert | Kontakt, Dla firm, stopka | |
| ArticleCard, ArticleList | .article-feature, .article-card | Artykuły | |
| TableOfContents, RelatedProgram, Prose | .toc, .related, .prose | Artykuł, Misja, Standardy | spis treści zwinięty na telefonie |
| Footer | .site-footer | każda strona | |
| AudienceList (nowy) | .audience | Główna, Kontakt, 404 | wiersze-odnośniki (nazwa + cel linku); żaden komponent z listy nie łączy tych dwóch informacji |
| AnchorNav (nowy) | .anchor-nav | Programy, Dla firm, Oferta, Zespół | pasek skrótów wymagany w briefie dla długich stron |
| Gallery (nowy) | .gallery | Programy (Głodni Zmian), Ciastoterapia | 2-4 zdjęcia bez karuzeli; zdjęcia projektów bez przypisywania do pojedynczych działań |
| Chips (nowy) | .chips | Ciastoterapia | lista informacyjna (nie przyciski) dla „Dla kogo” |
| TeamPhotos (wycofany) | .kadra | trzy portrety: nieużywane (usunięte z głównej i Misji 30.10.2026); wariant .kadra--single (jedno zdjęcie z wydarzenia, 4:3): Misja „Kto za tym stoi” | jeden komponent: trzy portrety (lewy, założycielka w środku, prawy), kadr każdego zdjęcia w --pos (object-position) |
| SupportBlock (nowy) | .support | W sieci reklam | blok wsparcia z tekstem klientki i przyciskiem „Wesprzyj nasze działania”; ten sam adres płatności co „Wesprzyj” w nagłówku |