/* ============================================================================= Miejsce dla Ciebie — tokeny systemu identyfikacji wizualnej Wersja 1.0 · 2026-09-07 · właściciel: Graphic Designer Kanon: 02_Concept/03_identyfikacja-wizualna.md Plik produkcyjny. Wartości kontrastu policzone wg WCAG 2.1 i zapisane w komentarzach — nie zmieniaj hexów bez ponownego przeliczenia. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. KROJE Literata — nagłówki. Zmienna (opsz 7–72, wght 200–900), OFL, Latin + Latin Ext + Cyrillic (wersja UA). Fira Sans — tekst i interfejs. OFL, ten sam zasięg. Cyrylica ładuje się wyłącznie na stronach, które jej używają — Google Fonts rozdziela subsety przez unicode-range. -------------------------------------------------------------------------------- */ /* @import url('https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400..700&family=Fira+Sans:wght@400;500;600&display=swap'); W produkcji: self-hosting woff2 + , bez @import. */ :root { --font-display: Literata, Georgia, "Times New Roman", serif; --font-text: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* --------------------------------------------------------------------------- 2. SKALA NEUTRALNA — „Grafit" Reguła: jedna barwa OKLCH H=90°. Chroma 0.018 w zakresie roboczym (L 0.30–0.90); powyżej L 0.90 spada do 0.010, żeby tło strony pozostało kremem i nie barwiło zdjęć; poniżej L 0.30 spada do 0.008, żeby ciemne tło czytało się jako ciepła czerń, nie brąz. Stopnie = percepcyjna jasność. ---------------------------------------------------------------------------- */ --n-0: #FFFFFF; /* karty, tło pod zdjęcia — jedyna czysta biel */ --n-50: #F7F4ED; /* tło strony */ --n-100: #EAE8E0; /* pas sekcji, tło pola formularza */ --n-200: #DCD7CA; /* linie i obramowania dekoracyjne */ --n-300: #BCB7AB; /* obramowanie mocniejsze, stan disabled */ --n-400: #908C80; /* obramowanie znaczące (3.36:1 na n-0), ikona nieaktywna */ --n-600: #6A665A; /* tekst drugorzędny — ≥4.5:1 na każdym tle jasnym */ --n-800: #312E24; /* powierzchnia ciemna wyżej w hierarchii */ --n-900: #171612; /* tekst główny, tło ciemne podstawowe */ --n-950: #0B0A07; /* stopka, tło ciemne najgłębsze */ /* --------------------------------------------------------------------------- 3. MOSIĄDZ — akcent #D4B15F daje 2.05:1 na bieli. Nigdy nie niesie tekstu na jasnym tle. Jest powierzchnią (wtedy tekst na nim jest grafitowy: 8.84:1) albo tekstem, ale tylko na tle ciemnym (8.84:1 na n-900). ---------------------------------------------------------------------------- */ --gold-100: #EFE5CE; /* powierzchnia: wyróżniony blok, plakietka */ --gold-500: #D4B15F; /* akcent bazowy: tło CTA, linia, pole znaku */ --gold-600: #C0A057; /* hover na powierzchni złotej */ --gold-700: #7C5C1B; /* tekst i link na tle jasnym — 5.62:1 na n-50 */ /* --------------------------------------------------------------------------- 4. ZIELEŃ — stan pozytywny (oferta aktywna, potwierdzenie, termin dotrzymany) ---------------------------------------------------------------------------- */ --green-100: #E1E7DE; --green-300: #5DA486; /* na tle ciemnym — 6.14:1 na n-900 */ --green-700: #1D6E52; /* na tle jasnym — 5.62:1 na n-50 */ /* --------------------------------------------------------------------------- 5. CEGLANY — stan negatywny (błąd walidacji, oferta wycofana, termin minął) Ceglany zamiast czerwieni sygnałowej: czysta czerwień w tej palecie wygląda jak wtrącenie z innego systemu. ---------------------------------------------------------------------------- */ --clay-100: #EEE3DA; --clay-300: #CD8472; /* na tle ciemnym — 6.15:1 na n-900 */ --clay-700: #A04632; /* na tle jasnym — 5.60:1 na n-50 */ /* --------------------------------------------------------------------------- 6. ROLE SEMANTYCZNE — używaj TYCH tokenów w kodzie, nie surowych stopni ---------------------------------------------------------------------------- */ --bg-page: var(--n-50); --bg-raised: var(--n-0); --bg-sunken: var(--n-100); --bg-inverse: var(--n-900); --bg-inverse-raised: var(--n-800); --fg: var(--n-900); --fg-muted: var(--n-600); --fg-on-inverse: var(--n-50); --fg-muted-on-inverse: var(--n-300); --fg-link: var(--gold-700); --fg-link-on-inverse: var(--gold-500); --border: var(--n-200); --border-strong: var(--n-400); --border-inverse: #3A362C; --focus-ring: var(--gold-700); --focus-ring-inverse: var(--gold-500); /* --------------------------------------------------------------------------- 7. SKALA TYPOGRAFICZNA Krok rośnie od 1.14 w rozmiarach czytelniczych do 1.33 w nagłówkach: małe rozmiary muszą różnić się subtelnie, duże — wyraźnie. Nagłówki są płynne (clamp), tekst nie: 16 px to 16 px na każdym ekranie. ---------------------------------------------------------------------------- */ --t-display: clamp(2.5rem, 1.55rem + 4.2vw, 4rem); /* 40 → 64 */ --t-h1: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 → 48 */ --t-h2: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem); /* 26 → 36 */ --t-h3: clamp(1.375rem, 1.15rem + 0.75vw, 1.75rem);/* 22 → 28 */ --t-h4: 1.25rem; /* 20 */ --t-lead: 1.125rem; /* 18 */ --t-base: 1rem; /* 16 */ --t-sm: 0.875rem; /* 14 */ --t-xs: 0.75rem; /* 12 — przypisy i etykiety, nigdy akapit */ --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.18; --lh-h3: 1.25; --lh-h4: 1.35; --lh-lead: 1.55; --lh-base: 1.6; --lh-sm: 1.5; --lh-xs: 1.45; --ls-display: -0.022em; --ls-h1: -0.02em; --ls-h2: -0.015em; --ls-h3: -0.01em; --ls-h4: 0em; --ls-base: 0em; --ls-sm: 0.005em; --ls-label: 0.09em; /* etykieta wersalikowa 12 px / 500 */ --measure: 68ch; /* maksymalna długość wiersza tekstu ciągłego */ /* --------------------------------------------------------------------------- 8. ODSTĘPY — jednostka bazowa 4 px, rytm pionowy 8 px ---------------------------------------------------------------------------- */ --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.5rem; /* 24 */ --sp-6: 2rem; /* 32 */ --sp-7: 3rem; /* 48 */ --sp-8: 4rem; /* 64 */ --sp-9: 6rem; /* 96 */ --sp-10: 8rem; /* 128 */ --section-y: var(--sp-7); /* odstęp pionowy sekcji — mobile */ --container: 75rem; /* 1200 */ --gutter: var(--sp-5); /* 24 */ --page-margin: 1.25rem; /* 20 */ /* --------------------------------------------------------------------------- 9. PROMIENIE Znak ma narożniki ostre. System trzyma się blisko kąta prostego — 8 px to maksimum, promienie „przyjaznego bąbla" nie należą do tej marki. ---------------------------------------------------------------------------- */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-pill: 999px; /* wyłącznie plakietki statusu i awatary */ /* --------------------------------------------------------------------------- 10. CIENIE Marka jest papierowa: pierwszym narzędziem oddzielenia warstw jest linia, cień dopiero drugim. Cienie są ciepłe (grafit), nie czarne. ---------------------------------------------------------------------------- */ --sh-1: 0 1px 2px rgba(23, 22, 18, 0.06); --sh-2: 0 2px 4px rgba(23, 22, 18, 0.05), 0 8px 16px rgba(23, 22, 18, 0.05); --sh-3: 0 4px 8px rgba(23, 22, 18, 0.05), 0 16px 32px rgba(23, 22, 18, 0.07); /* --------------------------------------------------------------------------- 11. RUCH ---------------------------------------------------------------------------- */ --dur-1: 120ms; /* stan drobnej kontrolki: hover, focus, checkbox */ --dur-2: 200ms; /* wejście/wyjście elementu: dropdown, akordeon, podpowiedź */ --dur-3: 320ms; /* panel, modal, arkusz mobilny */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); /* --------------------------------------------------------------------------- 12. TRYB KOLORU Trybu ciemnego nie ma i nie planujemy go. Powód: tożsamość tej marki niesie kremowe podłoże — odwrócenie go zabiera połowę tego, co ją odróżnia od branży, a druga wersja wymagałaby drugiego zestawu obróbki zdjęć, których biuro dopiero nie ma. Ciemność jest w systemie obecna jako pas sekcji (.on-inverse), nie jako alternatywna skóra całości. color-scheme: light blokuje automatyczne przyciemnianie przez przeglądarkę. ---------------------------------------------------------------------------- */ color-scheme: light; } /* Sekcja na ciemnym tle — odwraca role, nie tokeny bazowe. */ .on-inverse { --bg-page: var(--n-900); --bg-raised: var(--n-800); --bg-sunken: var(--n-950); --fg: var(--n-50); --fg-muted: var(--n-300); --fg-link: var(--gold-500); --border: var(--border-inverse); --border-strong: var(--n-600); --focus-ring: var(--gold-500); background: var(--bg-page); color: var(--fg); } /* ----------------------------------------------------------------------------- 13. WARSTWA BAZOWA -------------------------------------------------------------------------------- */ html { font-size: 100%; /* nie nadpisujemy rozmiaru bazowego przeglądarki */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-page); color: var(--fg); font-family: var(--font-text); font-size: var(--t-base); line-height: var(--lh-base); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-optical-sizing: auto; /* Literata: oś opsz dobiera rysunek do rozmiaru */ margin: 0 0 var(--sp-4); text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } h4 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); } .display { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } .lead { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--fg-muted); } small, .text-sm { font-size: var(--t-sm); line-height: var(--lh-sm); letter-spacing: var(--ls-sm); } /* Etykieta sekcji — wersaliki 12 px. Nigdy dłuższa niż trzy słowa. */ .label { font-size: var(--t-xs); line-height: 1.2; font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); } /* ----------------------------------------------------------------------------- 14. LICZBY Nieruchomości to metraż, cena, piętro, rok, numer księgi. Wszędzie, gdzie liczby stoją jedna pod drugą albo się porównują, muszą mieć równą szerokość. Cyfry tabelaryczne i zero z ukośnikiem sprawdzone w obu krojach: Fira Sans tnum → 560/1000, Literata tnum → 582/1000. W zdaniu ciągłym zostawiamy cyfry proporcjonalne — tabelaryczne rozstrzeliwują tekst. -------------------------------------------------------------------------------- */ .tabular, table, th, td, .price, .area, .spec-value, input[type="number"], time { font-variant-numeric: tabular-nums slashed-zero; font-feature-settings: "tnum" 1, "zero" 1; } /* ----------------------------------------------------------------------------- 15. SIATKA -------------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-margin); } .grid-12 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); /* mobile: 4 kolumny */ gap: var(--gutter); } section { padding-block: var(--section-y); } @media (min-width: 48rem) { /* 768 */ :root { --page-margin: 2.5rem; --section-y: var(--sp-8); } .grid-12 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 64rem) { /* 1024 */ :root { --page-margin: 4rem; --gutter: var(--sp-6); --section-y: var(--sp-9); } .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /* ----------------------------------------------------------------------------- 16. STANY WSPÓLNE -------------------------------------------------------------------------------- */ a { color: var(--fg-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); } /* Przycisk główny: złoto niesie grafit — 8.84:1. Odwrotnie (złoty tekst na jasnym) nie przechodzi i jest w systemie zakazane. Rozstrzygnięcie D8 (CMO, 2026-09-07): powierzchnia złota zostaje, granicę elementu sterującego niesie obramowanie — gold-600 dawało 2.27:1 wobec tła strony, gold-700 daje 5.62:1 i spełnia WCAG 1.4.11. */ .btn-primary { background: var(--gold-500); color: var(--n-900); border: 1px solid var(--gold-700); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); font: var(--fw-medium) var(--t-base)/1.2 var(--font-text); cursor: pointer; transition: background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std); } .btn-primary:hover { background: var(--gold-600); } .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-5); font: var(--fw-medium) var(--t-base)/1.2 var(--font-text); cursor: pointer; transition: background-color var(--dur-1) var(--ease-std), border-color var(--dur-1) var(--ease-std); } .btn-secondary:hover { background: var(--n-100); border-color: var(--n-600); } .status-ok { color: var(--green-700); background: var(--green-100); } .status-error { color: var(--clay-700); background: var(--clay-100); } .on-inverse .status-ok { color: var(--green-300); background: transparent; } .on-inverse .status-error { color: var(--clay-300); background: transparent; } /* ----------------------------------------------------------------------------- 17. OGRANICZENIE RUCHU Ruch w tej marce potwierdza działanie użytkownika i nic poza tym. Przy prefers-reduced-motion znikają przesunięcia i skalowania; zostaje wyłącznie zmiana koloru, żeby stan hover i focus dalej był widoczny. -------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ----------------------------------------------------------------------------- 18. FORMAT PIONOWY 9:16 (materiały social) Jednostka bazowa = szerokość kanwy / 90. Dla 1080 × 1920 px → u = 12 px. Marginesy 8u, siatka 6 kolumn, odstęp 2u. Strefy bezpieczne: 240 px u góry i 380 px u dołu wolne od tekstu — tam siedzi interfejs Instagrama i TikToka. -------------------------------------------------------------------------------- */ .canvas-9x16 { --u: calc(100cqw / 90); container-type: inline-size; width: 1080px; height: 1920px; padding: calc(var(--u) * 8); background: var(--bg-page); color: var(--fg); } .canvas-9x16 .grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(var(--u) * 2); } .canvas-9x16 .safe-top { height: 240px; } .canvas-9x16 .safe-bottom { height: 380px; }