MOCferencja — Przewodnik kolorystyczny

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { —red: #FF0000; —yellow: #FFFC00; —black: #000000; —white: #FFFFFF; —light: #EFEFEF; —gradient: linear-gradient(135deg, #FF0000 0%, #FF7A00 40%, #FFAA00 70%, #FFFC00 100%); } body { background: #efefef; color: #111; font-family: ‘Roboto’, sans-serif; font-size: 14px; line-height: 1.6; padding: 60px 40px; max-width: 960px; margin: 0 auto; } header { margin-bottom: 64px; border-bottom: 1px solid #ccc; padding-bottom: 40px; } .brand-label { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #FF0000; margin-bottom: 16px; } h1 { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 52px; line-height: 1; text-transform: uppercase; letter-spacing: -1px; color: #000; } h1 span { background: var(—gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .subtitle { margin-top: 12px; color: #777; font-size: 13px; letter-spacing: 1px; } section { margin-bottom: 64px; } .section-label { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: #888; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; } .section-label::after { content: ”; flex: 1; height: 1px; background: #ccc; } .palette-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .swatch { border-radius: 4px; overflow: hidden; } .swatch-color { height: 120px; width: 100%; position: relative; } .swatch-color.gradient { background: var(—gradient); } .swatch-color.white { background: #ffffff; border: 1px solid #333; } .swatch-meta { background: #fff; padding: 14px 16px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; } .swatch-name { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; color: #111; } .swatch-hex { font-family: ‘Roboto’, monospace; font-size: 11px; color: #888; letter-spacing: 1px; } .swatch-role { margin-top: 8px; font-size: 11px; color: #666; line-height: 1.5; } .percent-bar { margin-top: 12px; height: 3px; background: #ddd; border-radius: 2px; overflow: hidden; } .percent-fill { height: 100%; border-radius: 2px; } .usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .usage-card { background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 24px; } .usage-card.highlight { border-color: #FF0000; border-left: 3px solid #FF0000; } .usage-card.warning { border-color: #ddd; border-left: 3px solid #FFFC00; } .usage-title { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 16px; color: #666; } .usage-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #333; line-height: 1.5; } .dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .dot.red { background: #FF0000; } .dot.yellow { background: #FFFC00; } .dot.white { background: #ffffff; } .dot.gray { background: #888; } .dot.black { background: #555; border: 1px solid #777; } .distribution { display: flex; height: 48px; border-radius: 4px; overflow: hidden; margin-bottom: 12px; } .dist-seg { display: flex; align-items: center; justify-content: center; font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 11px; transition: flex 0.3s; } .do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .do-card, .dont-card { border-radius: 4px; padding: 20px; font-size: 12px; line-height: 1.6; color: #333; } .do-card { background: #f0faf0; border: 1px solid #c8e6c9; } .dont-card { background: #fdf0f0; border: 1px solid #ffcdd2; } .do-label { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; color: #2e7d32; } .dont-label { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; color: #c62828; } .rule-item { display: flex; gap: 8px; margin-bottom: 8px; font-size: 12px; } .rule-item::before { content: ’—’; color: #bbb; flex-shrink: 0; } .gradient-preview { background: var(—gradient); border-radius: 4px; padding: 32px 24px; margin-bottom: 16px; text-align: center; } .gradient-preview-text { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 32px; text-transform: uppercase; color: #000; letter-spacing: 2px; text-shadow: none; } .gradient-stops { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #666; } .stop-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .arrow { color: #444; font-size: 10px; } .type-showcase { border: 1px solid #ddd; border-radius: 4px; overflow: hidden; background: #fff; } .type-row { display: grid; grid-template-columns: 1fr 300px; align-items: center; gap: 24px; padding: 28px 28px; border-bottom: 1px solid #eee; } .type-row:last-child { border-bottom: none; } .type-specimen { font-size: 44px; line-height: 1.1; letter-spacing: -1px; color: #000; white-space: nowrap; } .type-name { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #111; margin-bottom: 6px; } .type-weight { color: #FF0000; font-weight: 700; } .type-role { font-size: 12px; color: #666; line-height: 1.6; } .combo-feature { background: #EFEFEF; border: 1px solid #bbb; border-radius: 4px; padding: 32px; margin-bottom: 8px; } .combo-feature-title { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 32px; text-transform: uppercase; line-height: 1.05; letter-spacing: -1px; color: #000; } .combo-feature-body { display: flex; gap: 16px; margin-top: 20px; align-items: flex-start; } .combo-feature-number { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 28px; line-height: 1; color: #FF0000; flex-shrink: 0; } .combo-feature-subtitle { font-family: ‘Roboto’, sans-serif; font-weight: 500; font-size: 14px; color: #000; margin-bottom: 6px; } .combo-feature-text { font-size: 12px; color: #666; line-height: 1.6; max-width: 480px; } .combo-caption { font-size: 10px; color: #555; text-align: center; letter-spacing: 1px; } .combo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .combo-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .combo-photo { border-radius: 4px; overflow: hidden; margin-bottom: 8px; padding: 16px; background: linear-gradient(135deg, #2b0000 0%, #1a0a00 45%, #000 100%); } .combo-photo-item { background: rgba(255,255,255,0.94); border: 1px solid #000; border-radius: 3px; padding: 10px 14px; display: flex; gap: 12px; align-items: flex-start; } .combo-photo-item + .combo-photo-item { margin-top: 10px; } .combo-photo-number { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 20px; line-height: 1; color: #FF0000; flex-shrink: 0; } .combo-photo-title { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; color: #000; margin-bottom: 2px; } .combo-photo-text { font-size: 10px; color: #555; line-height: 1.5; } .combo-overlay { border-radius: 4px; overflow: hidden; margin-bottom: 8px; position: relative; height: 180px; background: linear-gradient(135deg, #330000 0%, #000 65%); display: flex; align-items: center; justify-content: center; text-align: center; } .combo-overlay::before { content: ”; position: absolute; inset: 0; background: rgba(0,0,0,0.35); } .combo-overlay-content { position: relative; z-index: 1; } .combo-overlay-title { font-family: ‘Saira Condensed’, sans-serif; font-weight: 900; font-size: 28px; text-transform: uppercase; color: #fff; } .combo-overlay-subtitle { font-family: ‘Roboto’, sans-serif; font-size: 13px; color: #fff; margin-top: 6px; letter-spacing: 2px; text-transform: uppercase; } footer { border-top: 1px solid #ccc; padding-top: 32px; font-size: 11px; color: #aaa; display: flex; justify-content: space-between; align-items: center; } .version { font-family: ‘Saira Condensed’, sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 10px; text-transform: uppercase; color: #bbb; }

Mocferencja 2026 · Identyfikacja Wizualna

Paleta Kolorów

Wersja 1.0 · Maj 2026

01 · Typografia

SAIRA CONDENSED BLACK

Saira Condensed — 900 / Black

Nagłówki H1, tytuły hero, nazwa wydarzenia, duże liczby (np. „1200 OSÓB”). Zawsze WERSALIKAMI, maksymalny kontrast.

SAIRA CONDENSED BOLD

Saira Condensed — 700 / Bold

Etykiety sekcji, podtytuły, przyciski CTA, tytuły w kartach i kombinacjach.

Roboto

Roboto — 400 / Regular, 500 / Medium

Tekst podstawowy, opisy, treści pomocnicze, dane kontaktowe, podpisy.

02 · Kolory podstawowe

Jasnoszary GŁÓWNE TŁO

#EFEFEF

Dominujące tło strony, newslettera, social media, materiałów drukowanych. Baza dla całej komunikacji online i offline.

~50% powierzchni

Biały

#FFFFFF

Karty, sekcje wyróżnione, tło formularzy, obszary treści na tle #EFEFEF. Daje oddech i kontrast.

~25% powierzchni

Czarny TŁO ALT.

#000000

Tło alternatywne (sekcje hero, dark mode, scena, rollup, LED wall). Tekst na jasnych powierzchniach. Buduje dramatyzm.

~15% powierzchni

Czerwony

#FF0000

CTA, akcenty, wyróżnienia, przyciski sprzedażowe. Używać z wstrzemięźliwością.

maks. 4% powierzchni

Żółty

#FFFC00

Akcent energii, highlight na czarnym tle, ikony, podkreślenia, akcenty na ciemnych materiałach.

maks. 4% powierzchni

Gradient Ognisty

#FF0000 → #FF7A00 → #FFFC00

Logo, hero materiałów premium, efekty specjalne. Nigdy jako tło całej strony.

maks. 3% powierzchni

03 · Gradient ognisty — specyfikacja

Mocferencja 2026

#FF0000 →→→#FF7A00 (pośredni) →→→#FFAA00 (pośredni) →→→#FFFC00

Kiedy używać gradientu

Tekst z efektem gradient clip (tytuły hero)

Logo w wersji pełnokolorowej

Dekoracyjne linie i separatory premium

Tła przycisków CTA na ciemnych powierzchniach

Elementy brandingowe na scenie (rollup, LED wall)

Kiedy NIE używać

Jako tło całej strony lub slajdu

Na treści długich tekstów (nieczytelność)

Razem z dużymi płaskimi plamami czerwieni

Na białym tle — traci kontrast i siłę

W więcej niż 1 miejscu na jednym projekcie

04 · Proporcje kolorystyczne

WIZUALNA DYSTRYBUCJA NA MATERIALE

50%

25%

15%

■ #EFEFEF (główne tło) 50% ■ Biały (karty/sekcje) 25% ■ Czarny (alt. tło/tekst) 15% ■ Czerwony maks. 5% ■ Żółty maks. 5%

05 · Zasady stosowania

✓ Rób tak

#EFEFEF jako dominujące tło — online, druk, social media, prezentacje.

Czarny jako tło sekcji specjalnych (hero, scena, rollup, ciemne wersje kart) — buduje dramatyzm tam, gdzie trzeba.

Biały na kartach i sekcjach wyróżnionych na tle #EFEFEF — daje głębię bez użycia kolorów.

Czerwony tylko na elementach wymagających natychmiastowej akcji (CTA, przyciski “Kup bilet”, alerty sprzedażowe).

Żółty jako akcent energii na czarnym tle — ikony, podkreślenia, wyróżnienia liczb.

Gradient ognisty tylko w hero, logo lub jako element dekoracyjny premium — jeden na projekt.

✗ Unikaj

Czarnego jako tła głównego całej komunikacji — to zarezerwowane dla sekcji dramatycznych, nie dla całości.

Nadmiar czerwonego — traci moc. Jeśli wszystko jest czerwone, nic nie przyciąga uwagi.

Czerwony i żółty razem na dużych powierzchniach — wygląda jak fast food.

Gradient jako tło całego projektu lub strony — zbyt agresywny, nieczytelny.

Żółty jako kolor tekstu na białym lub #EFEFEF tle — zbyt niski kontrast.

Pastelowe lub “złamane” warianty kolorów — marka jest twarda i wyraźna, nie miękka.

Więcej niż 3 kolory akcentowe na jednym materiale.

06 · Zatwierdzone kombinacje

Główna
Kombinacja

Podtytuł

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

SZARE TŁO #EFEFEF, CZARNA OBWÓDKA + CZERWONY NUMER + DELIKATNE AKCENTY #FF0000

Tytuł

Treść główna, wyliczenia, konkrety.
Treść główna, wyliczenia, konkrety.
Treść główna, wyliczenia, konkrety.

Przycisk

BIAŁY + CZARNY TEKST + CZERWONE CTA

Tytuł

Treść pomocnicza

CTA

CZARNY + BIAŁY + CZERWONY CTA

Mocferencja

2 – 3 Grudnia 2026

CZARNY + GRADIENT + TEKST #888888

1200 OSÓB

Tauron Arena Kraków

SZARY + CZARNY + LINIA CZERWONA

Tytuł

Treść wyliczenia, treść wyliczenia, treść wyliczenia, treść wyliczenia.

Tytuł

Treść wyliczenia, treść wyliczenia, treść wyliczenia, treść wyliczenia.

Tytuł

Treść wyliczenia, treść wyliczenia, treść wyliczenia, treść wyliczenia.

ZDJĘCIE + WYLICZENIA W SZAREJ RAMCE Z CZARNĄ OBWÓDKĄ + CZERWONA LICZBA

Tytuł

Podtytuł

ZDJĘCIE ROZMYTE, OPACITY 35% NA CZARNYM TLE + BIAŁE NAPISY

07 · Kontrast i czytelność

Dozwolone pary tekstowe

Biały tekst na #000000 ✓

Szary #EFEFEF na #000000 ✓

Czarny tekst na #FFFFFF ✓

Czarny tekst na #EFEFEF ✓

Biały tekst na #FF0000 ✓

Czarny tekst na #FFFC00 ✓

Niedozwolone pary ✗

Biały tekst na #FFFC00 ✗ niski kontrast

Żółty tekst na #FF0000 ✗ wibracja

Szary tekst na #EFEFEF ✗ za mało kontrastu

Żółty tekst na #FFFFFF ✗ niewidoczny

Zawsze sprawdź kontrast narzędziem WCAG przed publikacją materiałów dostępnych publicznie.

MOCNO Sp. z o.o. — Mocferencja 2026

Dokument wewnętrzny · Identyfikacja wizualna · Wersja 1.0

Maj 2026