Design systém — Digital Boost Group

Jak to číst

Systém má tři vrstvy. Při rozporu platí pořadí core → profil → katalog. Katalog je referenční implementace, ne zdroj pravdy.

VRSTVA 1

Core

Tato stránka a AGENTS.md. Značka, role barev, typografické role, rytmus, ikony, tón. Bez jednotek, bez technologie.

VRSTVA 2

Profil média

Web, prezentace, dokument. Převádí core do jednotek a možností média. Agent čte core + právě jeden profil.

VRSTVA 3

Vzorníky

Živé ukázky — komponenty webu, devět slide layoutů, dokumentové bloky. Odsud se kopíruje, tady se nic nerozhoduje.

Osm pravidel platných ve všech médiíchvždy

Vše z tokenu

Barva, velikost písma, mezera, rozměr, poloměr. Hodnota „od oka" je chyba, i když vypadá stejně. Chybí-li krok, doplní se do systému — ne lokálně.

Jedna značka

Accent je jediná barevná osa dokumentu. Čtvrtá značková barva ani nový odstín neexistuje.

Role, ne vzhled

Text je body, ne „patnáctka". Plocha je panel, ne „tmavě šedá". Role se v každém médiu vykreslí jinou hodnotou.

Rytmus 4

Všechny mezery a rozměry stojí na 4px mřížce (= 3 pt). Mezi kroky se neinterpoluje.

Barva jen s významem

Success, warning, info a danger nikdy jako dekorace.

Klid místo křiku

Jedna zvýrazněná plocha na obrazovku, slide i stranu. Žádné gradientní pozadí celé plochy, žádné emoji, žádná dekorativní čísla. Jediná výjimka: atmosféra pozadí v režimu screen-dark — měkká radiální vrstva pod obsahem, dopočítaná z accentu značky. Na webu živá v každém pásu, v prezentaci jako předrenderovaný obrázek na každém slidu. Dokument ji nemá — papír zůstává bílý.

Sdělení se kreslí

Tok dat, proces nebo architektura je vždy diagram — zdroje → jádro → výstupy, zvýrazněná jen cesta, o které mluvíme. Web živý a interaktivní, prezentace statický diagram rozfázovaný přes kopie slidu, dokument obrázek se závěrem pod ním. Sloupec boxů pod sebou není diagram. Rozdíl mezi dvěma stavy se kreslí jako dva pruhy na společné ose od nuly, ne jako dvě čísla vedle sebe.

Produkt se ukazuje

Mluví-li výstup o hotové aplikaci, patří do něj skutečný snímek obrazovky v rámu daného média a s popiskem — ne ilustrace, ne UI vykreslené z boxů, ne odrážky o funkcích. Každý snímek se před vložením anonymizuje (e-maily, jména, klienti, čísla dokladů); anonymizovaná kopie jde do assets/, originál se nevkládá.

Značka

Multi-brand přes jediné rozhodnutí. accent je plocha a datová barva, accentInk je tatáž značka ztmavená pro text na papíru (kontrast ≥ 4,5:1). Barva textu na plné accent ploše je per značka — nikdy „vždycky bílá".

Techfides

hue250

accent#0075C9

accentInk#0075C9

na accentu#FFFFFF

Tech It Out

hue128

accent#84BD23

accentInk#5A8118

na accentu#14161D

RTSG

hue56

accent#EB7500

accentInk#B75B00

na accentu#14161D

Dva režimy povrchů

Režimy sdílejí role, liší se hodnotami. V jednom výstupu se nemíchají. Hodnota v závorce je neprůhledný ekvivalent pro média bez alfy (prezentace, dokumenty).

SCREEN-DARK

Web a prezentace

Pozadí #0E0F14, text #EEF1F6. Hloubku dělá vrstvení průhlednosti (web) nebo plocha panelu (prezentace).

PAPER-LIGHT

Dokumenty a tisk

Pozadí bílá, text #14161D. Žádné sklo, stín ani záře — hierarchii dělá typografie a jedna barevná plocha.

ROLE

CO TO JE

SCREEN-DARK

PAPER-LIGHT

SUCCESS

dokončeno, kladná změna

WARNING

čeká, blízko limitu

INFO

neutrální informace

DANGER

chyba, pokles

Typografické role

Dvě rodiny — Inter (nadpisy a čísla) a IBM Plex Sans (všechno ostatní: text, labely, eyebrow, hodnoty, osy grafů). Role je stejná ve všech médiích, mění se jen krok. Monospace se používá jen tam, kde je funkční — kód ve výpisu v dokumentu; nikdy jako dekorace.

ROLE

CO TO JE

WEB px

SLIDES pt

DOCS pt

Line-height: 1,1 nadpisy · 1,5 hustá UI a slidy · 1,6 odstavce

Tracking: −0,02 em nadpisy · 0,05 em label · 0,12 em eyebrow

Minimum: 11 px web · 12 pt slide · 8 pt dokument

Rytmus a rozměry

Základ je 4 px = 3 pt. Díky tomu vychází každý krok celočíselně v obou jednotkách a rytmus webu, slidu i strany je fyzicky stejný.

KROK

TYPICKY

Poloměrypx / pt

xs · 6 / 5

checkbox

sm · 8 / 6

tlačítko, pole, chip

lg · 12 / 9

menu, blok, callout

xl · 16 / 12

karta, panel

pill

badge, avatar

Ikony a tón

Jedna sada — Phosphor. Mění se jen způsob doručení. Nikdy textový glyf (→, +, ×, ✓), emoji ani ručně kreslené SVG.

Web

icon-font

14 / 16 / 20 / 24 / 84 px, barva přes currentColor.

Prezentace

SVG / PNG asset

12 / 16 / 20 / 24 / 64 pt. Icon-font v Google Slides není.

Dokument

vložený obrázek

9 / 11 / 14 pt, střídmě — dokument nese informaci textem.

Obsah a tónplatí všude

Česky, věcně, bez marketingového nadsazování. Krátká věta před dlouhou.

Číslo má vždy jednotku a kontext („1,24 M Kč za poslední kvartál"), nikdy nevisí samo.

Nadpis pojmenovává obsah, ne kategorii — „Tržby vzrostly o 18 %", ne „Přehled tržeb".

Žádná výplň. Prázdná sekce je chyba layoutu, ne díra na text. Jedna myšlenka na slide, jedna otázka na kapitolu dokumentu.

Profily médií

Každé médium má vlastní katalog a vlastní kontrakt. Otevři ten, do kterého tvoříš.

Design systém pro web

AGENTS.web.md

Screen-dark, px, inline styly v .dc.html. Tokeny, komponenty, pět interakčních stavů, pohyb.

katalog: design-system-web.dc.html

Design systém pro prezentace

AGENTS.slides.md

Plátno 960 × 540 pt, mřížka 12 sloupců, neprůhledné barvy, devět layoutů. Export PPTX → Google Slides.

vzorník: vzornik-prezentace.dc.html

Design systém pro dokumenty

AGENTS.docs.md

A4, okraje 2,5 cm, paper-light. Pojmenované styly odstavců, tabulky, callouty. Export DOCX → Google Docs.

vzorník: vzornik-dokument.dc.html

Co se mezi médii mění a co netokens.core.json

Stejné vždy

Značka a accent, role barev, typografické role, rytmus 4 (= 3 pt), ikonová sada Phosphor, tón obsahu.

Mění se

Jednotky (px / pt), režim povrchu, doručení ikon, mřížka a to, co médium technicky umí.

Nikdy se nemíchá

Jeden výstup = jeden režim a jeden profil. Webové stavy a pohyb v prezentaci ani dokumentu neexistují.

Jak systém předat AI

Připoj celý projekt a napiš jednu větu. Barvy, písma, mezery, komponenty, tón i zakázané postupy si agent načte sám — nemusíš je opakovat.

WebAGENTS.web.md

„Použij tento design systém. Přečti DESIGN.md, pak AGENTS.md a profil AGENTS.web.md. Vytvoř prezentační web pro produkt ERP."

PrezentaceAGENTS.slides.md

„Použij tento design systém. Přečti DESIGN.md, pak AGENTS.md a profil AGENTS.slides.md. Vytvoř prezentaci s finančními výsledky za poslední kvartál."

DokumentAGENTS.docs.md

„Použij tento design systém. Přečti DESIGN.md, pak AGENTS.md a profil AGENTS.docs.md. Vytvoř dokument s výsledky auditu webu klienta."

DESIGN.md

Identita v jednom souboru — tokeny strojově, zdůvodnění lidsky. Odpovídá otevřenému formátu, který čtou i jiné nástroje než tento katalog.

AGENTS.md

Závazný kontrakt: osm pravidel, značka, režimy, role, rytmus, ikony, tón a strojová kontrola před odevzdáním (§ 9).

Jeden profil

Podle zadání právě jeden — web, prezentace, nebo dokument. Agent, který píše dokument, nemá číst osm set řádků o webových stavech.

Katalog

Vizuální pravda a inventář hotových komponent. Grepuje se cíleně přes handle, nikdy celý.

Při rozporu

Platí pořadí core → profil → katalog. Katalog je referenční implementace, ne zdroj pravdy.

Když měníš systém

Změna se nejdřív udělá ve výstupu a schválí. Pak se promítne do pěti míst: tokens.core.json, DESIGN.md, core, profil, katalog.

Storybook a MCP

Repozitářové soubory jsou primární vrstva — verzují se a čtou při každém sezení. MCP nad Storybookem dává smysl jako druhá vrstva, ne jako náhrada; vstupem jsou theme.css a tokens.core.json.

Kontrola před odevzdáním

Devět vzorů, které se dají najít grepem v hotovém souboru. Každý nález je chyba, ne návrh. Úplné znění je v AGENTS.md § 9.

Co hledat

Vzor

Proč je to chyba

Literální barva

#[0-9a-f]{3,8}

Mimo blok tokenů a mimo #fff na accentu. Barva patří do tokenu.

Literální velikost písma

font-size: číslo

Velikost je role — --text-* nebo --icon-*.

Literální mezera či rozměr

padding / gap / width: Npx

Mezery z --spacing-*, rozměry z --size-* a --container-*.

Ruční čas nebo křivka

Nms · cubic-bezier

Z --dur-*, --ease-*, --t-*; zpoždění z calc(var(--stagger) * N).

Ruční průhlednost

rgba( · opacity: .N

Z --color-panel*, --tint*, --dim*.

Monospace mimo funkci

mono

Web a prezentace ho nemají vůbec; dokument jen ve stylu „Kód / výpis".

Glyf místo ikony

✓ × → +, emoji

Ikony jsou Phosphor v --icon-* velikosti.

Nedefinovaný token

var(…) bez definice

Tichá chyba — prvek se vykreslí bez stylu.

Neanonymizovaný snímek

@ · jména · čísla dokladů

Anonymizace je součást vložení, ne pozdější úklid.

Očima, ne grepem: inventář

Je každá použitá komponenta z inventáře profilu? Vlastní varianta existující komponenty je chyba, i když dodrží všechna ostatní pravidla.

Očima, ne grepem: rozpor

Když měníš systém, nesmí stará formulace zůstat vedle nové. Projdi pět míst a u každého napiš, jestli se mění, nebo proč ne.

Soubory

Strojová podoba systému pro AI agenty. Agent čte AGENTS.md a k tomu jeden profil — katalogy negrepuje celé.