---
name: cos-digital-library-design
description: Use this skill to generate well-branded interfaces and assets for the Digitální knihovna OOS / ČOS — the Czech state digital library for Defence Standards and NATO documents — either for production or throwaway prototypes/mocks. Contains design tokens, JVS brand assets, Bootstrap icon usage, and a React UI kit covering the public catalogue, document detail and the controlled-distribution request flow.
user-invocable: true
---

Read the `README.md` file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

## What's here

- **`README.md`** — full context: company, brand, sources, content fundamentals, visual foundations, iconography.
- **`colors_and_type.css`** — the token contract. Import this everywhere; do not redefine colors or type locally.
- **`preview/`** — small HTML cards for individual tokens and components. Useful as references / Storybook-style specimens.
- **`ui_kits/cos-library/`** — an interactive React+JSX prototype (catalogue, detail, request form, my library). Components in `components.jsx` and `pages.jsx` are the canonical pattern library — copy them into new mocks rather than re-deriving from screenshots.
- **`assets/logos/lev-jvs.svg`** — the JVS Lion symbol, in `currentColor`.

## Critical brand rules (read these before designing)

1. **No new brand.** Adapt gov.cz Design System + JVS. Never invent a separate visual identity for this library.
2. **One blue.** `--gov-color-primary-500 (#2362a2)` for every interactive element. `--jvs-modra (#00469B)` is reserved for the logo tile.
3. **Type cascade is fixed.** `Czechia Sans` (local web font, JVS official — access on request) → `Roboto` (Google Fonts) → `Aptos` (system) → `Arial` → `Helvetica` → generic. Mono: `Roboto Mono` → `JetBrains Mono` (Google Fonts) → `Consolas` → generic. Use `var(--font-sans)` / `var(--font-mono)` / `var(--font-display)` — never hand-pick. See `colors_and_type.css` and `notes/decisions.md` for the full cascade and rationale.
4. **No emoji. Ever.** This is a state register, not a SaaS app.
5. **Color is never the only carrier of meaning.** Every status indicator pairs text + icon + tint.
6. **Czech-first copy.** Formal "vy". Sentence case. Non-breaking space between code abbreviation and number (`ČOS 100001`).
7. **Tables are first-class.** The catalogue *is* a table; respect it.
8. **Accessibility floor: WCAG 2.1 AA.** The 3px focus ring is mandatory and applied via `colors_and_type.css`.

## Common asks and how to handle them

- *"Mock a new screen for the library."* — Start from `ui_kits/cos-library/pages.jsx`. Use the existing chips, doc-card and notice components. Reuse the header/footer.
- *"Build a brand slide."* — Use the Lev tile + product wordmark pattern from `preview/brand-wordmark.html`. Keep it on white or JVS-blue; no decorative backgrounds.
- *"Design a new component."* — Justify it against gov.cz DSGCZ first. Only build a domain extension if the library genuinely needs it (e.g. request-status timeline). Document it in `README.md`.