# ČOS Digital Library — Design System > A working design system for the **Digitální knihovna OOS / ČOS** — the new digital library of Czech Defence Standards (Český obranný standard) and related NATO documents (STANAG, STANREC, AP), operated by the **Odbor obranné standardizace (OOS)** at the **Úřad pro obrannou standardizaci, katalogizaci a státní ověřování jakosti (Úř OSK SOJ)**. > > **The library is not a new brand.** It is a domain-specific adaptation of the **Design systém gov.cz (DSGCZ)** + **Jednotný vizuální styl státní správy (JVS)** for a serious, accessible, metadata-heavy publication catalogue running on the **Publi** platform. --- ## What this is A folder of design tokens, brand assets, a CSS reset, a component kit and high-fidelity HTML mocks of the core library screens. Designers and engineering agents can: 1. read `colors_and_type.css` for the token contract, 2. pull SVG logos and icons from `assets/`, 3. open `ui_kits/cos-library/index.html` for an interactive mock of the public catalogue, 4. open `preview/*.html` to inspect individual token/component cards. Do **not** invent a separate visual identity. Adapt; do not replace. --- ## Sources These were the inputs for this system. The agent did not have authenticated access to all of them — store these links so a human can verify. | Source | URL / Path | |---|---| | Design brief (CZ) | `uploads/COS_DIGITAL_LIBRARY_DESIGN_BRIEF_FOR_AI.md` | | Detailed working doc (CZ) | `uploads/COS_DIGITAL_LIBRARY_DESIGN_SYSTEM_INPUTS.md` | | Design systém gov.cz | https://designsystem.gov.cz/ | | DSGCZ — Colors | https://designsystem.gov.cz/principy/barvy | | DSGCZ — Typography | https://designsystem.gov.cz/principy/typografie | | DSGCZ — Accessibility rules | https://designsystem.gov.cz/pravidla/pristupnost-webovych-stranek | | DSGCZ — Logo placement rules | https://designsystem.gov.cz/pravidla/pravidla-pro-umistovani-loga | | OOS — documents portal | https://oos.mo.gov.cz/dokumenty | | OOS — ČOS section | https://oos.mo.gov.cz/dokumenty/ceske-obranne-standardy | | OOS — STANAG | https://oos.mo.gov.cz/dokumenty/standardizacni-dohody-nato | | OOS — STANREC | https://oos.mo.gov.cz/dokumenty/standardizacni-doporuceni-nato | | OOS — AP | https://oos.mo.gov.cz/dokumenty/spojenecke-publikace | | Úř OSK SOJ — parent site | https://urosksoj.mo.gov.cz/ | | Publi — platform | https://publi.cz/ | | Publi — controlled distribution | https://publi.cz/firma | | Figma — gov.cz Templates 4.6.0β | provided as `.fig` (not browsable here — see Figma) | | Figma — gov.cz Materials 4.6.0 | provided as `.fig` (not browsable here — see Figma) | | Figma — gov.cz Icons 4.6.0 | provided as `.fig`, mounted as VFS during build (`/Bootstrap-Icons`, `/Complex-Icons`, `/Logos`) | **Caveats from this build:** - Of the three attached Figma files, only the *icons* file was browsable as a virtual filesystem. Color/type/component tokens were derived from the **public DSGCZ documentation** plus the JVS values found in the logo generator (`Gener-tor-log/Z-KLADN-GRAFICK-MANU-L`). - The Lev (lion) symbol of the JVS is bundled (`assets/logos/lev-jvs.svg`). The full DIA / OOS / Úř OSK SOJ lockups are **not** redistributed here — these must be supplied by the institution per JVS rules. Mocks use a wordmark composed of the Lev + a typeset product name, which is exactly how the JVS *Generátor log* tool builds product marks. - Bootstrap Icons (used by gov.cz) are loaded from CDN — see **Iconography**. --- ## Index — what's in this folder ``` README.md ← you are here SKILL.md ← portable skill manifest (Claude Code / Agent SKills compatible) colors_and_type.css ← tokens + base styles (import this everywhere) preview/ ← small HTML cards rendered into the Design System tab assets/ logos/ ← Lev JVS symbol + reference JSX from the Generátor log ui_kits/ cos-library/ index.html ← interactive prototype: catalogue → detail → request flow components/*.jsx ← React/JSX building blocks ``` --- ## CONTENT FUNDAMENTALS **Language.** The product is **Czech-first** (CZ), with an EN locale planned for NATO-document metadata that is bilingual by nature (e.g. STANAG titles). Interface chrome is CZ; data fields are bilingual where the source data is. **Voice.** Plain official Czech. Avoid colloquialisms. Avoid English loanwords where a clear Czech term exists. Do not address the user by name. Use "vy" (formal) — never "ty". **Tone.** Serious, calm, transparent. The reader is an engineer, a quality officer, an OOS approver, or a member of the public trying to confirm whether a document exists and how to obtain it. Tone is closer to a court document than to a SaaS app — but **never** bureaucratic-sounding when a plain word will do. **Specific examples.** | Don't | Do | |---|---| | "Ahoj 👋, najdi si standard!" | "Zadejte číslo nebo název dokumentu." | | "Cool, žádost odeslána!" | "Žádost byla odeslána. Stav uvidíte v sekci *Moje žádosti*." | | "Bohužel jsme nic nenašli :(" | "K hledanému výrazu nebyl nalezen žádný dokument. Zkuste odlišné označení nebo jiné typy dokumentů." | | "Tento dokument je tajný." | "Dokument je v režimu řízené distribuce. K přístupu je nutné podat žádost." | | "Klikni tady!" | "Otevřít detail dokumentu" | **Casing.** Sentence case for headings and buttons (Czech convention — "Otevřít detail", not "Otevřít Detail"). UPPERCASE only for eyebrow/section labels and the document-type chips (`ČOS`, `STANAG`, `STANREC`, `AP`). **Pronouns.** Use "vy/vás/vám" for the user. Use "OOS" or "Úř OSK SOJ" (full names on first mention, then abbreviation) when the institution speaks. Avoid "my" except in legal copy. **Emoji.** Never. The product is a state register. **Numbers and codes.** Use a **non-breaking space** between abbreviation and number (`ČOS 100001`, `STANAG 4370`). Codes use tabular numerals (`.doc-code`) so columns of standards align. **Dates.** Czech format `1. 1. 2026` for human display; ISO `2026-01-01` only in tooltips/export. **Microcopy patterns.** - *Empty state* — "Zatím zde nic není." + a single, specific next-step link. - *Submitted request* — "Žádost byla odeslána. OOS ji posoudí. O výsledku vás budeme informovat e-mailem na ." - *Controlled distribution explainer* — always one sentence that names *who* approves and *what reason* is required. Never just "vyžaduje schválení". - *Error 404 / nepřístupné* — distinguish **"dokument neexistuje"** from **"dokument není veřejně dostupný"**. Critical. --- ## VISUAL FOUNDATIONS **Direction.** *State, trustworthy, technically precise, calm.* Print-document discipline applied to a web app. No marketing rhetoric. No decorative military symbolism (camo, crosshairs, dramatic contrast) — explicitly out of scope. **Color.** - One primary blue (`--gov-color-primary-500 #2362a2`) carries every interactive element. The full DSGCZ blue scale is in `colors_and_type.css`. - JVS Modrá (`#00469B`) is reserved for the **logo block** — the Lev symbol and the product wordmark. It is never used for UI chrome inside the page body. - Page background is `--gov-color-neutral-50 (#f3f7fc)` — a slightly cool off-white. Surfaces are pure white. - Status colors (success/warning/error/info) follow gov.cz semantic scales. **Color never carries meaning alone** — every status chip is text + icon + tint. - Document-type chips (`ČOS`, `STANAG`, `STANREC`, `AP`) use muted tonal swatches (state-blue, graphite, plum, teal), each on its own pale tinted background — distinct but quiet. **Typography.** - Primary typeface: **Czechia Sans** (Tomáš Brousil / Suitcase Type Foundry) — the official typeface of the Jednotný vizuální styl státní správy. Self-hosted from `/fonts` in all five weights (Light 300, Regular 400, Medium 500, Semibold 600, Bold 700) plus matching italics. - **Czechia Sans is not freely available** — access is granted on request by the brand owners (JVS gestor / Suitcase Type Foundry). Production deployments must verify their licence before bundling. The fallback cascade below ensures the design degrades gracefully when the font is absent (e.g. external preview, third-party desktop app, embargoed build). - **Sans cascade** (`--font-sans`, `--font-display`): `'Czechia Sans'` → `'Roboto'` (Google Fonts) → `'Aptos'` (Microsoft system font, modern Windows / Office default) → `'Arial'` → `'Helvetica'` → `system-ui, -apple-system, sans-serif`. Roboto and JetBrains Mono are imported in `colors_and_type.css` so the cascade has a working web-font tier even on machines without Czechia Sans. - **Mono cascade** (`--font-mono`): `'Roboto Mono'` → `'JetBrains Mono'` (both Google Fonts) → `'Consolas'` → `ui-monospace, monospace`. Used for document codes and ID fields. *Not* a terminal aesthetic; just disciplined alignment. - **Caveat on weight 600.** Roboto has no Semibold (600); when the cascade falls through to Roboto the browser substitutes 700. Acceptable, but Semibold-vs-Bold contrast is lost in the fallback view — keep that in mind when previewing without Czechia Sans installed. - **Two visual variants** via OpenType stylistic sets (Czechia Sans only — fallbacks ignore these features): - **Text variant** — default for body, UI, captions, metadata. Humanist details: `i` and `I` with semi-serifs, `l` with a tail curl. Apply via `font-feature-settings: var(--otf-text)` (`dlig`, `kern`, `ordn`, `ss04`, `ss11`, `ss20`) — the `:root` defaults to this. - **Logotype variant** — for institutional names, brand wordmarks, large display headers. Cleaner geometric `i`/`I`/`l`. Apply via the `.czechia-logotype` utility class or `font-feature-settings: var(--otf-logotype)` (`dlig`, `kern`, `ordn` only). Already applied to `.lockup__name`, `.text-display`, and `h1`. - Scale anchors at 16 px body. Headings step 18 → 20 → 24 → 32 → 44. Tabular numerals for codes. - **Weight tiers by size.** Use **Bold (700)** only at **24 px and above** (Display, H1, H2). At **22 px and below** — including H3, H4, the brand wordmark / header logotype, table column headers, filter-group titles and metabox labels — step down to **Semibold (600)**. At those sizes Bold closes up the terminal dot on `i / í` against the stem and crowds Czech diacritics; Semibold keeps them legible. This is the inflection point of the entire type system — see `preview/type-headings.html` for the canonical reference. - Line-height generous: 1.5 for body, 1.6 for long-form metadata blocks. **Backgrounds.** Flat. No gradients in UI chrome. No grain. No textures. Hero of the homepage uses a single solid neutral-50 surface with one institutional photograph (provided by OOS) optionally bleeding behind a left-aligned title block; the photo is always desaturated and overlaid with a 60–70% solid scrim so the title meets WCAG AA on the darkest pixel. Imagery, when used, is cool/neutral, never warm — no orange skies, no flag waving. **Animation.** Minimal. 150–200 ms ease-out for hovers, focus, and state changes. No bounce. No spring. No celebration animations on success — a clear status message is enough. `prefers-reduced-motion: reduce` is respected globally. **Hover states.** Buttons darken by one step in the primary scale (500 → 600). Links shift to 700 and remain underlined. Cards lift to `--shadow-2` and gain a 1 px primary-300 outline; no scale transform. **Press / active states.** Buttons drop to primary-700 with no shadow. No shrink. No 3-D press effect. **Focus.** `--shadow-focus` — a 3 px outline at `rgba(35, 98, 162, 0.35)`, applied uniformly to every focusable element. Required by DSGCZ accessibility rules. **Borders.** 1 px, neutral-200 by default. Strong neutral-300 only when a divider needs to assert structure (table header, panel boundary). Tables use horizontal rules only — no vertical lines. **Shadows.** Three steps; all soft, all near-monochrome (`rgba(12, 24, 56, x)`). Cards default to `--shadow-1`. Floating menus get `--shadow-3`. Nothing in the system rises above `--shadow-3`. **Corner radii.** `--radius-md (6 px)` for buttons, inputs, cards. `--radius-sm (4 px)` for chips and tags. `--radius-pill` only for filter chips and category pills. Never decorative oversized rounding. **Cards.** White surface, 1 px neutral-200 border, 6 px radius, `--shadow-1`. Padding is 20–24 px. Title is `--fs-h3` Bold; metadata is a definition list (`
`) with `--fs-body-s`, secondary color. Document-type chip top-right. **Transparency and blur.** Never blur. No "glass" surfaces. Transparency is reserved for scrims on imagery and the disabled state (60% opacity). **Imagery vibe.** When real imagery is used: cool, neutral, slightly desaturated. Subjects are documents, hands on paperwork, architectural details of state buildings — never dramatic close-ups, never military hardware. The library is administrative, not operational. **Layout.** - 12-column grid, 1280 px max width, 24 px gutter. - Sticky top header (state header + main nav) — always visible. - Sidebar filters on `≥ lg` breakpoints; bottom sheet on mobile. - Footer is dark (`--gov-color-neutral-900`) — the only dark surface in the system. **Fixed elements.** Only the state header. Catalogue toolbar (sort + view switch) becomes sticky on long result lists but does **not** float over content — it docks under the header. **Tables.** First-class. Tables in this product are not last-resort layout — they are the catalogue. Sticky header row, zebra-stripe at 1.5 % primary tint, hover row at 4 % tint, never a checkered look. --- ## ICONOGRAPHY **Primary icon set: Bootstrap Icons** — confirmed by the gov.cz Figma file's `Bootstrap-Icons/` page (4 104 icons present). Used via CDN so we stay current and don't bundle 5 MB. ```html ``` **Style.** Bootstrap Icons outline variant by default. Filled variants only for indicators that need solidity (active filter chip, selected radio). 16–24 px standard sizes, set `font-size` and `color: currentColor`. **Complex / illustrative icons.** gov.cz ships a `Complex-Icons` set (293 icons — `Doc-Search`, `Empty-File`, `Big-Help`, `Error-404`, `Hand-Stop`, `Coins`, `Hourglass` …) for empty states, 4xx/5xx pages, onboarding moments. These are not directly bundled here (Figma vector reconstructions are noisy); when an empty state needs a hero illustration, request the official SVG from the gov.cz Figma `Complex-Icons` page rather than redrawing. **No emoji.** Anywhere. **No unicode glyphs as icons.** No `→`, no `▼`, no `·` for menu dots. Use `bi bi-arrow-right`, `bi bi-caret-down-fill`, `bi bi-three-dots`. **Logo / Lev symbol.** `assets/logos/lev-jvs.svg` — the JVS lion, in `currentColor` so it tints to context. JVS rules: - Lev sits on a square JVS-Modrá tile, radius 5 px (matches the favicon spec). - Tile is followed by the product name in Roboto, in the same colour as the tile background (or white if the tile is dark). - Minimum width is governed by the readable size of the wordmark, not the symbol — see Generátor log §3. **Where to find the full set of approved icons.** The attached gov.cz Icons Figma file (`Bootstrap-Icons`, `Complex-Icons`, `Logos`). The complex/colored sets are intentionally Czech-state-specific (driving licence, senate, regional elections) — not all will be relevant to this library. --- ## Index of preview cards The Design System tab shows registered cards in `preview/`. Every preview card carries a small sun/moon **theme toggle** in the top-right corner — click it to flip the card into dark mode. The toggle is wired by `_theme-toggle.js` and the dark token remap lives in `_dark.css`. State persists per-browser in `localStorage`. Groups: - **Brand** — Lev symbol, product wordmark, state header / footer lockups - **Colors** — DSGCZ primary, neutrals, semantic, ČOS document types, availability - **Type** — display & headings, body, code/mono for standards, full specimen - **Spacing** — radii, shadows, spacing scale - **Components** — full kit: - *Form* — buttons, inputs, search, select/combo, checkbox / radio, **switch & theme switch**, textarea - *Navigation* — breadcrumbs, pagination, segmented control (view switch) - *Feedback* — notices, toast, empty state, request-status timeline - *Data display* — chips (type / validity / availability / classification), code cell, table, metabox, related documents - *Filters* — filter group (sidebar), active filter pills, list toolbar - *Cards* — document card, cover card, my-library card, quick tile, CTA side panel ## UI kits - `ui_kits/cos-library/` — public catalogue + document detail + request flow. ## See also - `SKILL.md` — drop this folder into a Claude Code project to load it as a skill.