Organisation & Distribution Registry — design artifacts

Subjekty — screen drafts and design handoff. What this folder is for: an implementing agent should be able to build these screens without opening Figma. Every screen is here twice — as a PNG to look at and as a standalone HTML file carrying the real numbers (paddings, sizes, colours), so a value can be read instead of guessed.

Screens

Screen	Picture	Markup	Figma	Route
Subjekty — overview	seznam-subjektu.png	html/seznam-subjektu.html	1392:25123	/client/subjekty
Subject detail	detail-subjektu.png	html/detail-subjektu.html	1392:25361	/client/subjekty/:id
Supply points of a subject (gauge overview, subscriber filter preselected)	meridla-filtr-odberatel.png	html/meridla-filtr-odberatel.html	583:9751	/gauges?subscriber=:id&hasSupplyPoint=true
Add subject	pridat-subjekt.png	html/pridat-subjekt.html	—	dialog on the overview
Column settings	nastavit-sloupce.png	html/nastavit-sloupce.html	—	dialog on the overview
Export	export-subjektu.png	html/export-subjektu.html	—	dialog on the overview
Deletion blocked by references	smazani-blokovane.png	html/smazani-blokovane.html	—	dialog on the detail
Subject picker in the building form	vyber-subjektu.png	html/vyber-subjektu.html	583:9486	/buildings/:id/edit

Figma file key FzVyDJ7cvq1lSTIpL7jSwK (e-manažer UI); a node opens at https://www.figma.com/design/FzVyDJ7cvq1lSTIpL7jSwK/e-mana%C5%BEer-UI?node-id=<node>. The living version of these drafts is the Subjekty design canvas, page v5.

How to read the drafts

• The HTML is a drawing, not the implementation. Every element is a plain div with inline styles, so the numbers are exact but the markup is not what ships. Build with the product's own components (below) and take only the values from here.
• Content is sample data (Město Polná, Technické služby Polná). Wording of labels, column headings, empty states and hints IS the specification — copy it verbatim into the locale files.
• Where a draft and this feature's index.md disagree, index.md wins. The draft is a picture of one moment; the acceptance criteria are the contract.
• The drafts are desktop-only at 1440 px. Narrower widths follow the product's existing list and form behaviour; nothing here overrides it.

Components to build with (EM3 frontend)

In the draft	Use
Page title, count, header actions	components/data/list-page-header (ListPageHeader, ListHeaderAddLink, ListHeaderExportLink)
Table, group rows, row link	components/data/data-table (DataTable, DataTableGroup, rowHref)
Filter chips in the toolbar	components/data/filter-chip (FilterChip), search components/data/filter-bar (ExpandingSearchControl)
Column settings dialog	Table View Settings standard, table key organisations (lands with that branch)
Role badges, level and status badges	@em3/shared-components Badge — Untitled UI badge, type color, size md (sm in the picker)
Subject picker	OrganisationCombobox (already on staging)
Form fields, selects, buttons, dialogs	@em3/shared-components
Icons	lucide-react, as the gauge and building lists use them

Colours and type come from shared-components/theme.css (accent #f05a24, accent-strong #c2410c, ink #0f172a, line #cbd5e1, line-soft #e2e8f0, canvas #f8fafc, Inter). The drafts inline those values; use the tokens, not the hex codes.

Role badge colours

Role	Badge colour
Vlastní subjekt klienta	orange
Vlastník	blue
Správce	indigo
Přenesená správa	purple
Odběratel	success

Measurements worth copying

• Content column 1216 px wide, centred, 112 px page gutters at 1440 px.
• Page header: white band, 1 px line-soft divider under it, content starts 32 px below.
• Table: header row 40 px on canvas, body rows 64 px, 1 px line-soft between rows, card radius 12 px.
• Gauge overview column widths (from Figma 583:9751, 8 px gaps): 265, 134, 123, 88, 134, 110, 78, 130, 90.
• Form fields 36 px high, radius 8 px, label 14 px/500 above the field, 24 px row gap, 16 px column gap.
• Buttons 36 px high, radius 8 px; primary is brand-solid, secondary white with a line border.
• Dialogs: 640 px (add subject), 560 px (export, deletion), 480 px (columns); 24 px padding, footer divided by a 1 px line.

Regenerating

The PNGs and the HTML are exported from the design canvas (page v5). When the canvas changes, re-export both so this folder keeps matching what the analyst sees.