# Helix — pravidlá značky v1

**Stav 27. 9. 2026:** identita ikony zostáva zachovaná. Tesnejší podpis je návrh čakajúci na Mariánovo schválenie; zatiaľ platí iba v náhľade Relay. [Otvoriť vizuálny brandbook](http://127.0.0.1:4173/brandbook/).

Základom je zelená ikona s bielym malým **h**, ktorú vybral majiteľ produktu. Táto ikona tvorí prvé písmeno názvu: hlavný podpis sa skladá z **ikony + „elix.“**. Samostatne napísané „helix.“ za ikonou opakuje písmeno a nepoužíva sa.

![Základná ikona Helixu](redesign/icons/helix-192.png)

## Podpis a použitie

| Situácia | Podoba |
| --- | --- |
| Hlavička webu, bočný panel aplikácie, registrácia | Ikona `h` + `elix.` v jednom riadku |
| Ikona aplikácie, favicon, avatar | Samostatná zelená ikona `h` |
| Text, nadpis, zmluvný alebo prístupný názov | `Helix` |
| Faktúra používateľa | Logo jeho firmy; značka Helix sa na doklad automaticky nepridáva |

Prístupný názov odkazu s logom je vždy **Helix**. Obrázok v podpise je dekoratívny (`alt=""`), pretože názov nesie odkaz. Písmeno v ikone sa neprepisuje inou fontovou podobou.

## Konštrukcia

- Ikona má pomer strán 1 : 1. V UI má bežne 38 px a zaoblenie rohov 11–12 px.
- Medzera medzi ikonou a textom má približne štvrtinu šírky ikony (pri 38 px je to 8–10 px).
- Text `elix.` je zarovnaný na optický stred ikony. Bodka používa primárnu zelenú; nemení sa na výrazný akcent.
- Pri zmenšení udržte ikonu aspoň 32 px. Ak sa názov nezmestí, použite samotnú ikonu s prístupným názvom, nie deformovaný podpis.
- Okolo podpisu nechajte voľný priestor najmenej polovice šírky ikony. Nevkladajte doň navigáciu ani dekorácie.

## Návrh úpravy podpisu — čaká na schválenie

Dôvod: v náhľade Relay sa uplatňovala medzera 12 px a text bol voči ikone malý.

- Ikona: pôvodný raster, 32 × 32 px, zaoblenie 9 px.
- Medzera medzi okrajom ikony a textom: **4 px** (1/8 šírky ikony).
- Text `elix.`: systémové písmo, 26 px / riadok 32 px, váha 600, rozstup písmen −1,3 px.
- Optické zarovnanie textu: posun o 1 px nahor.
- Pri zväčšení sa rozmery podpisu menia spoločne v rovnakom pomere.
- Rovnaký podpis v hlavičke aj pätičke Relay, vrátane mobilu.
- Po schválení tento pomer nahradí pôvodné pravidlo medzery a prenesie sa do aplikácie, registrácie a hlavnej landing page. Dovtedy ostatné miesta zachovávajú doterajší stav.

## Farby a typografia

| Rola | Hodnota | Použitie |
| --- | --- | --- |
| Hlavná zelená | `#285D5C` | Ikona, aktívne prvky, bodka podpisu |
| Tmavý atrament | `#193D38` | Podpis a text na svetlom marketingovom pozadí |
| Svetlý podklad | `#F7F7F1` | Landing page a pokojné plochy |
| Jemná zelená | `#E9EEE6` | Oddelenie sekcií, podporné karty |
| Varovná terakota | `#8F3E34` | Len právne termíny a upozornenia |

Na obrazovke sa používa systémové písmo (`-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, sans-serif). Hierarchiu robí veľkosť, váha a priestor, nie ďalšie ozdobné písmo. Rozhranie má zostať čitateľné aj bez priehľadnosti a animácie.

## Obraz a tón

Fotografie a 3D ukážky majú ukazovať konkrétny úkon: pridať doklad, skontrolovať údaje, potvrdiť ďalší krok. Ukážkové obrazovky sa označujú ako ilustrácia. Texty sú stručné, vecné a nepoužívajú tvrdenia o hotových integráciách, kým neprejdú skúškou v aplikácii. Sklo a jemný odraz môžu podporiť hĺbku, nesmú znížiť kontrast údajov.

Nepoužívať druhé `h` vedľa ikony, novú kresbu ikony, obrys navyše, otáčanie, deformáciu, neónové efekty, zámeny farby pozadia ikony ani cudzie logo na doklade používateľa.

## Zdrojové súbory a rozsah

- Kanonický raster: [`redesign/icons/helix-logo-master.png`](redesign/icons/helix-logo-master.png).
- Odvodené veľkosti aplikácie: `helix-180.png`, `helix-192.png`, `helix-512.png` v rovnakom priečinku.
- Miestne nové rozhranie, registrácia a landing používajú podpis **ikona + elix.**
- Staršia nasadená aplikácia `web/owner/` ešte používa odlišný podpis. Jej zjednotenie patrí do samostatného kontrolovaného nasadenia.

Tento dokument fixuje identitu pre ďalší návrh. Pred tlačou vo veľkom formáte bude potrebné pripraviť presný vektorový master podľa existujúceho rastra bez prekreslenia tvaru.