Design system
Spacing & layout
Distances are in millimetres — templates are designed for A4 print, not screen pixels. Pick from these presets to stay on-system.
Page geometry
| Certified | Electronic | |
|---|---|---|
| Format | A4 (210 × 297 mm) | A4 |
| Top margin | 16 mm | 12 mm |
| Side margins | 22 mm | 16 mm |
| Bottom margin | 12 mm | 10 mm |
| Total pages | 1 (hard cap) | 1 (hard cap) |
Vertical rhythm
| Gap | Distance |
|---|---|
| Header → title block | 6 – 8 mm |
| Title → preamble | 4 – 7 mm |
| Preamble → first section | 4 – 5 mm |
| Between sections | 4 – 5 mm |
| Section title → section body | 1.5 – 2 mm |
| Data-grid row padding (each side) | 0.7 – 1.4 mm |
| Certification para → signature row | 9 – 10 mm |
| Signature row → verify strip | flex fill (mt-auto) |
| Verify strip → page bottom | 0 mm (flush) |
Horizontal rhythm
| Element | Width |
|---|---|
| Coat of arms (ceremonial masthead) | 50 – 60 mm |
| Coat of arms (horizontal masthead) | 32 – 40 mm |
| Single data-grid label column | 38 – 45 mm |
| Two-column data-grid label column | 28 – 32 mm |
| Signature line | 60 – 70 mm |
| Seal-area placeholder | 40 × 40 mm (dashed) |
| QR — electronic envelope | 30 × 30 mm |
| QR — certified verify strip | 22 × 22 mm |
| Verify-strip Form stamp column | 36 – 38 mm |
Rules & dividers
| Use | Thickness |
|---|---|
| Main divider under masthead | 0.7 – 0.8 pt · black |
| Hairline between data rows | 0.25 pt · zinc-300 |
| Envelope panel border | 0.8 pt – 2 pt · black |
| Section title underline | 0.4 pt · black |
| Signature line | 0.6 pt · black |
| Seal-area placeholder | 0.3 pt · dashed zinc-500 |
Why mm and pt rather than rem and px? The templates render to A4 paper through Puppeteer's PDF engine. Print-style units round-trip cleanly to the page and respect physical layout constraints. Screen units would render at different sizes on different DPI displays.