Dizajn manuál · KK referencia

01

Farebná paleta

Backgrounds

Background

--bg

#FAFAF7

Hlavné pozadie stránky. Teplá krémová, nie čistá biela.

Background Alt

--bg-alt

#F2F1EC

Sekundárne pozadie — intel-nav, tabuľky hlavičky, sticky bary.

Ink (text)

Ink

--ink

#0A0A0A

Primárny text, nadpisy, footer bg, btn-primary bg.

Ink Soft

--ink-soft

#2A2A2A

Nav linky, perex text, menej dôležitý ale stále čitateľný text.

Muted

--muted

#6B6B66

Eyebrow texty, label popisky, metadáta, placeholder texty.

Akcent & brand

Accent — Terracotta

--accent

#C2410C

CTA farba. Aktívne taby, hover na linkoch, eyebrow akcenty, active state. Nepoužívať na veľké plochy.

Accent Soft

--accent-soft

#E8DDD3

Badge pozadie, svetlý tint akcentu. Kombinácia s --accent textom.

Doplnkové

Line

--line

#D8D6CF

Oddeľovače, borders kariet, border formulárových polí.

Green

--green

#2D5A3F

Kladné hodnoty, úspech, zelený sentiment. Len pre číselné výstupy.

Amber

(inline)

#92400e

Varovanie, stredné hodnoty, amber sentiment. Len pre výstupy.

/* CSS Custom Properties — :root */
:root {
  --bg: #FAFAF7;         /* hlavné pozadie */
  --bg-alt: #F2F1EC;     /* sekundárne pozadie */
  --ink: #0A0A0A;       /* primárny text */
  --ink-soft: #2A2A2A;  /* mäkší text */
  --muted: #6B6B66;    /* label / meta text */
  --line: #D8D6CF;      /* borders */
  --accent: #C2410C;    /* terracotta CTA */
  --accent-soft: #E8DDD3; /* badge bg */
  --green: #2D5A3F;     /* pozitívne hodnoty */
  --max: 1180px;         /* max šírka obsahu */
}

02

Typografia

Hero H1

Predaj nehnuteľností
s číslami

Georgia / weight 300
clamp(24px, 2.4vw, 30px)
line-height: 0.98
letter-spacing: -0.035em
.accent → italic + color --accent

Page H1

Kalkulačka ocenenia

Georgia / weight 300
clamp(24px, 2.4vw, 30px)
line-height: 1.08
letter-spacing: -0.035em

Section Title

Vybrané projekty

Georgia / weight 300
clamp(20px, 1.8vw, 24px)
letter-spacing: -0.025em
em → italic + --accent

Card H3 / modal

Investičná kalkulačka

Georgia / weight 400
17–18px
letter-spacing: default

Page lead / perex

Kalkulačka ocenenia bytu na základe mediánu cien v regióne, korigovaného faktormi stavu, poschodia a orientácie.

Tahoma / 15.5px
color: --ink-soft
line-height: 1.58
max-width: 640px

Body text

Štandardný text článku alebo popisky. Používa sa pre obsah sekcií, popisky kariet a dlhší text.

Tahoma / 14px
line-height: 1.6
color: --ink

Small / meta

Doplnkový text, metadáta, popisky pod hodnotami

Tahoma / 13px
color: --muted
line-height: 1.55

Eyebrow (muted)

Interná sekcia

Tahoma / 12px
uppercase / ls: 0.18–0.22em
color: --muted
::before: 24–32px čiara --accent

Eyebrow (accent)

Interná referencia

Tahoma / 12px
uppercase / ls: 0.20em
color: --accent
Bez čiary pred textom

Label / field

Plocha v m²

Tahoma / 11px
uppercase / ls: 0.14em
color: --muted
Nad formulárovými poľami

Micro / tag

Tabuľková hlavička

Tahoma / 11px
uppercase / ls: 0.12em
color: --muted
Thead, badge text

Output číslo

210 000 €

Georgia / weight 300
clamp(32px, 4vw, 46px)
letter-spacing: -0.03em
V dark karte (bg --ink)

Font stack

/* Sans-serif — telo stránky, UI */
font-family: Tahoma, Verdana, Geneva, sans-serif;

/* Serif — nadpisy, display text, výstupy */
font-family: Georgia, 'Times New Roman', serif;

/* Mono — kód, tabuľkové čísla */
font-family: 'Courier New', Courier, monospace;

03

Logo & brand

Logo mark — svetlé pozadie

Primárne — bg #FAFAF7

Na --bg-alt pozadí

Inverzné — dark bg

Logo špecifikácia

SVG viewBox	`0 0 120 80`
Výška v nav	`height: 52px; width: auto`
Typ písma	`Georgia, serif`
Font size	`60px` (v SVG súradniciach)
Font weight	`400`
Letter spacing	`-2` (SVG units)
Fill — light	`#0A0A0A` (--ink)
Fill — dark bg	`#FAFAF7` (--bg)
Anchor	`text-anchor: middle; x=60; y=62`

Logo SVG kód

<svg viewBox="0 0 120 80" height="52" xmlns="http://www.w3.org/2000/svg">
  <text
    x="60" y="62"
    text-anchor="middle"
    font-family="Georgia, serif"
    font-size="60"
    font-weight="400"
    fill="#0A0A0A"   // alebo #FAFAF7 na dark bg
    letter-spacing="-2"
  >KK</text>
</svg>

Brand tone

Odborný, priamy, bez reklamného jazyka. Karol Korman vystupuje ako expert na realitný trh — nie predajca. Komunikácia je analytická, faktická a rešpektuje čas čitateľa.

✓ Áno

Konkrétne čísla
Krátke vety
Serif nadpisy s light weight
Terracotta len na CTA/active

✗ Nie

Dekoratívne prvky bez funkcie
Gradient backgrounds
Viac ako 2 farby textu na 1 karte
Bold nadpisy (vždy weight 300–400)

04

Komponenty & UI

Navigácia (nav)

Domov Projekty Postrehy Interné 0911 123 456

Position: fixed; top: 0; z-index: 100 · Padding: 22px 48px (desktop) / 16px 22px (mobile) · Bg: rgba(250,250,247, 0.88) + backdrop-filter blur(12px) · Výška: ~97px (desktop) / ~85px (mobile)

Tlačidlá (buttons)

Primárne tlačidlo → Sekundárne → Malé CTA Pill link

Variant	Bg	Text	Hover	Padding
`.btn-primary`	--ink	--bg	bg: --accent + translateY(-2px)	16px 28px
`.btn-secondary`	transparent	--ink	bg: --ink, text: --bg + translateY(-2px)	16px 28px
`.btn-sm` (nav phone)	transparent	--ink	bg: --ink, text: --bg	8px 16px

border-radius: 100px;  /* pill shape */
font-size: 15px; font-weight: 500; font-family: inherit;
transition: all 0.25s ease;

Badge / tag

Interné Aktívny Čaká Nové Archív

Všetky badge:

font-size: 11px; padding: 4px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700

badge-accent: bg --accent-soft / text --accent · badge-green: bg #d1fae5 / text --green · badge-amber: bg #fef3c7 / text #92400e · badge-ink: bg --ink / text --bg

Karty (cards)

Investičná kalkulačka

Výpočet výnosu z prenájmu, ROI a kapitálového zhodnotenia nehnuteľnosti.

Otvoriť →

Štandardná karta: bg #fff; border 1px --line; border-radius 12px; padding 24px

Odhadovaná hodnota

195 000 €

± 5 % · Stav: štandard · 65 m²

Dark output karta: bg --ink; color --bg; border-radius 12px; padding 28px

Formulárové prvky

Región

Plocha (m²)

Label: 11px · uppercase · ls 0.14em · --muted
Input/Select: padding 11px 14px · border 1px --line · border-radius 8px · 14px · bg --bg
Focus: border-color: --accent · outline: none
appearance: none (cross-browser reset)

Tabuľky

Región	Medián (€/m²)	Zmena	Zásoby
Žilina	3 420	▲ 2,1 %	38
Bratislava	5 180	▲ 1,4 %	142
Košice	2 850	▼ 0,8 %	67

thead: font 11px · uppercase · ls 0.12em · --muted · bg --bg-alt · border-bottom --line · tbody td: 13px · padding 11px 16-18px · border-bottom --line · hover: bg --bg-alt

Intel sub-nav (sticky tabs)

Prehľad Trh Ocenenie Zlacnenia Faktory

Position: sticky · top: 97px (desktop) / 85px (mobile) · z-index: 90 · bg: --bg-alt · Tab: padding 12px 20px · border-bottom 2px transparent · 13px · --muted · .active: color --accent · border-color --accent

Eyebrow vzory

Stredné Slovensko

Eyebrow muted + linka: ::before { width:24–32px; height:1px; background:--accent }

Interná referencia

Eyebrow accent — bez čiary. Len na page-header nad H1.

Vybrané projekty

Section label: ::before { width:24px; background:--ink }

Štatistiky bar (dark)

Rokov na trhu

12+

Predaných bytov

7 420

Sentiment

Stable

bg: --ink · padding: 64px 48px · grid 3 stĺpce · oddeľovač: 1px rgba(255,255,255,.1) · Číslo: Georgia weight 300 · ~36px · Accent variant: color --accent

Snapshot bar

Snapshot: 13.05.2026 · Zdroj: MASTER_DB · 13 regiónov · 160 mikrolokalít

upraviť faktory

bg: --bg-alt · border-top: 1px --line · padding: 14px 48px · font-size: 12px · color: --muted · justify-content: space-between

Footer

bg: --ink · color: rgba(250,250,247, 0.68) · font-size: 13px · padding: 34px 48px · text-align: center · links: color --bg

Range bar (ocenenie)

Cenový rozsah

Q1

177 000 €

Medián

195 000 €

Q3

214 000 €

05

Anatómia stránky

Štandardná interná stránka (intel / kalkulačky)

A — NAV

KK

Domov · Projekty · …

B — PAGE HEADER

C

Domov / Kalkulačky

D

Interné

E

Kalkulačka ocenenia

F

Výpočet hodnoty bytu podľa trhových mediánov…

G — INTEL-NAV

Prehľad Ocenenie Faktory

H — CONTENT

Formulár / vstup

Výstup / result

I — SNAPSHOT

13.05.2026 · 13 regiónov · 160 mikrolokalít

A — NAV
Fixed, z-index 100, ~97px high

B — PAGE HEADER
padding-top: 112px (kvôli fixed nav)

C — Breadcrumb
12px · uppercase · --muted

D — Eyebrow
12px · uppercase · --accent

E — H1
Georgia 300 · clamp(24–30px)

F — Lead / perex
15.5px · --ink-soft · max-w 640px

G — Intel sub-nav
sticky top: 97px · z-index 90

H — Hlavný obsah
max-width --max (1180px) · padding 40px 48px

I — Snapshot bar
bg --bg-alt · border-top --line · 12px

J — Footer
bg --ink · rgba(--bg, .68) · 13px

Detailná anatómia

Otvoriť anatómia-stranky.html →

Vizuálna mapa všetkých zón s farebnými overlaymi pre každý typ stránky

06

Spacing & Grid

Spacing škála

4px

· gap v badge ikonách

6px

· label margin-bottom, gap v badge

8px

· nav-phone padding-y, malé gapy

12px

· grid gap (malý), eyebrow gap

14px

· field margin-bottom

16px

· btn gap, grid gap (štandard)

20px

· calc-form margin-bottom h2

24px

· card padding, section-label margin

28px

· btn padding-x, dark card padding

32px

· eyebrow line šírka, hero margin-bottom

48px

· nav padding-x, section padding-x, content padding

80px

· section padding-y, hero gap

112px

· page-header padding-top (kompenzácia fixed nav)

Grid systém

Layout	Columns	Použitie
`--max: 1180px`	max-width kontajner	Všetky stránky — obsah v strede
Hero grid	`1.2fr 1fr`	Hlavná stránka hero (text + foto)
Kalkulačka	`380px 1fr`	Formulár + výstup
2 stĺpce	`1fr 1fr`	Karta páry, out-grid
3 stĺpce	`repeat(3, 1fr)`	Stats grid, karty regiónov
4 stĺpce	`repeat(4, 1fr)`	Faktor karty (faktory.html)
Sections	single column	max-width var(--max); padding 80px 48px

07

Responzivita

≤ 768px ≤ 900px

Breakpoint	Čo sa mení
`max-width: 900px`	Nav: padding 16px 22px · nav-links skryté (display:none) · hamburger viditeľný Intel-nav: top: 85px (nie 97px); overflow-x: auto; padding 0 22px Page-header: padding 96px 22px 22px Main content: padding 24px 22px Gridy: 2-stĺpcové → 1 stĺpec Hero: 1 stĺpec, padding 120px 24px 60px
`max-width: 768px`	Sections: padding 80px 24px Nav: padding 16px 24px (hlavná stránka)

Mobile hamburger menu

/* Toggle button (hamburger) */
.kk-mobile-toggle {
  display: none; /* visible only on mobile */
  width: 44px; height: 44px;
  border: 1px solid #0A0A0A;
  border-radius: 999px;
  background: #FAFAF7;
}
.kk-mobile-toggle.is-open {
  background: #0A0A0A;
  color: #FAFAF7;
}

/* Full-screen mobile panel */
.kk-mobile-panel {
  display: none;
  position: fixed; inset: 0;
  background: #FAFAF7;
  z-index: 10000;
  padding: 92px 28px 28px;
}
.kk-mobile-panel.is-open { display: block; }

Fluid typografia (clamp)

/* Nadpisy — fluid medzi breakpointmi */
Hero H1:     font-size: clamp(24px, 2.4vw, 30px)
Section:     font-size: clamp(20px, 1.8vw, 24px)
Output num:  font-size: clamp(32px, 4vw, 46px)