Dizajnový systém · Radio Group

Základy

Tri stavebné kamene: farba, typografia, priestor. Nič mimo nich nevzniká.

Farby

Magenta je akcia a značka — nikdy nie dekorácia. Pastelové tóny nesú náladu kariet.

Značka

Text a podklad

Pastelové tóny

PravidloNa pastelovej karte nepoužívaj pastelový chip — splynie. Použi biely s obrysom (.sc-chip).

Typografia

Clash Display na nadpisy, Inter na text. Oba sú self-hosted — žiadne cudzie CDN.

h1 · displayHity, ktoré miluješ

h2 · displayČerstvé zo sveta hudby

leadDoplňujúci riadok pod nadpisom.

bodyBežný text článku. Riadkovanie 1,7 a šírka stĺpca do 760 px kvôli čitateľnosti.

microlabelNovinka

Zaoblenie a tiene

Tri polomery, tri tiene. Viac nie je potrebných.

--r-sm18px

--r-md22px

--r-lg28px

--shadow-soft

--shadow-lift

--shadow-mag

Pohyb

Dve krivky. Spring pre vstupy a hravé prvky, out pre stavy a hover. Pri prefers-reduced-motion sa nehýbe nič.

Komponenty

Živé ukážky s kódom. Skopíruj a vlož — používajú CSS webu, takže vyzerajú presne tak ako v produkcii.

Chip

Štítok alebo sekundárna akcia. Nikdy nie hlavné CTA.

Podcast NAŽIVO

Kód

<span class="chip chip--plain">Podcast</span>
<span class="chip chip--live"><span class="live-dot"></span>NAŽIVO</span>

Hlavička sekcie

Otvára každú sekciu. Microlabel → nadpis → voliteľný lead.

Novinky

Čerstvé zo sveta hudby

Krátky doplňujúci riadok.

Kód

<div class="section-head">
  <span class="microlabel">Novinky</span>
  <h2 class="h2">Čerstvé zo sveta hudby<span class="h-dot">.</span></h2>
  <p class="lead">Krátky doplňujúci riadok.</p>
</div>

Riadok výpisu

Zoznam článkov aj súťaží. Obrázok v kruhovej maske, titulok, dátum vpravo.

Novinka Titulok článku na jeden až dva riadky 10. 7.

Kód

<a class="news-row" href="#">
  <span class="news-thumb pastel-card tone-blush-soft"><span class="masked masked--kruh"><img src="/assets/img/news-1.webp" alt=""></span></span>
  <span>
    <span class="microlabel">Novinka</span>
    <span class="news-title">Titulok článku na jeden až dva riadky</span>
  </span>
  <span class="news-time">10. 7.</span>
</a>

Karta epizódy

Podcastová epizóda. Tlačidlo hrá cez centrálny prehrávač — vždy `data-track`.

Adela a Sajfa 40 min

Názov epizódy

Krátky popis epizódy.

Kód

<article class="pod-ep" data-show="adela-a-sajfa">
  <div class="pe-meta">
    <span class="chip chip--plain">Adela a Sajfa</span>
    <span class="pe-host">40 min</span>
  </div>
  <h3 class="pe-title">Názov epizódy</h3>
  <p class="pe-desc">Krátky popis epizódy.</p>
  <button class="pe-play" data-track="ep1667"><span class="pe-ic"></span><span class="fr-lbl">Pustiť epizódu</span></button>
</article>

Karta relácie

Relácia a moderátori. Biela karta, tón len za avatarom, kontakty ako pilulky.

po–pia · 06:00–10:00

Ranná šou

Popis relácie.

@rano@funradio.sk

Kód

<article class="show-card">
  <div class="sc-head tone-blush-soft">
    <div class="masked masked--kruh sc-ava"><img src="/assets/img/show-ranna-sou.webp" alt=""></div>
  </div>
  <div class="sc-body">
    <span class="microlabel">po–pia · 06:00–10:00</span>
    <h3 class="sc-name">Ranná šou</h3>
    <p class="sc-desc">Popis relácie.</p>
    <div class="sc-contacts"><a class="sc-chip" href="mailto:rano@funradio.sk"><span class="sc-ic">@</span>rano@funradio.sk</a></div>
  </div>
</article>

Stránkovanie

Dlhé archívy (Novinky). Vždy ukáž prvú, poslednú a okolie aktuálnej strany.

Kód

<nav class="pager" aria-label="Stránkovanie">
  <a class="chip chip--plain" href="#">← Novšie</a>
  <span class="pager-nums">
    <a class="chip chip--plain" href="#">1</a><span class="pager-gap">…</span>
    <span class="chip pager-cur" aria-current="page">5</span>
    <a class="chip chip--plain" href="#">6</a>
  </span>
  <a class="chip chip--plain" href="#">Staršie →</a>
</nav>

Načítať ďalšie

Filtrovateľné zoznamy (Podcasty). Nepoužívaj spolu so stránkovaním — filter by sa rozbil.

Kód

<div class="pod-more">
  <button id="podMore" type="button"><span class="pm-dot"></span><span class="pm-label">Načítať ďalšie (77)</span></button>
</div>

Jazyk a tón

Píšeme po slovensky, priamo a bez korporátnej vaty. Každé pravidlo ukazuje, čo píšeme — a čo tým nahrádzame.

Tlačidlo pomenuj tým, čo spraví: Pustiť epizódunamiestoKliknite sem
Dátumy po slovensky, nie číselne: 10. júla 2026namiesto10/07/2026
Skloňuj počty: 1 epizóda · 2–4 epizódy · 5+ epizódnamiesto5 epizóda
Slovenské slovo, ak existuje: epizóda, relácia, vysielanienamiestoepisode, show, broadcast
Tykáme — rovnako ako vo vysielaní: Vyber si reláciunamiestoVyberte si reláciu
Dôraz rieši microlabel, nie veľké písmená: NovinkanamiestoNOVINKA!!!