# Jonathan Perfect — mini style guide

The visual reference is style-guide.html. All live examples use design-system.css, the site’s shared application of type; theme.css holds the palette and size tokens. Layout and image rules remain in styles.css and editorial.css. The comparison-v2 directory is an archived baseline.

## Headings and text

| Role | Element | Desktop maximum | Mobile minimum | Use |
|---|---|---|---|---|
| Page title | H1 | 80px | 44px | One main title per page |
| Main section | H2 | 48px | 32px | UNHCR, Ukraine, field stories, photography, map, About, education, footer |
| Subsection | H3; H4 for a nested subsection | 24px | 24px | Story subtopics, cards, certificates, individual photo-story frames |
| Introduction | Paragraph with lede class | 20px | 20px | Short opening summary |
| Body | Paragraph, list | 16px | 16px | Reading text |
| Small text | Caption, navigation, supporting metadata | 14px | 14px | Credits, dates, actions; navigation becomes 12px on mobile |
| Label | kicker / eyebrow | 12px | 12px | Numbered case labels and category tags; uppercase |
| Wordmark | Brand link | 32px | 32px | Name only; intentional identity exception |

H1–H4 use Georgia with Times New Roman/serif fallback. Body, labels, controls and captions use system-ui with sans-serif fallback. Headings use regular weight; name is bold; controls and key caption titles use semibold. Do not introduce new sizes for individual components. Heading level describes structure, not visual importance alone. A new story subsection is H3 under a major H2. A caption is not a heading unless it contains a substantive titled subsection.

## Palette

Cream background #F5F1E8; dark green ink #1C302E; muted green-grey #52615A; terracotta accent #9B482E; panel #E8E3D8; rule #D7D0C4. Use the matching CSS variables, never new hex values in component files. Overlay shades use the ink colour with transparency. Colour inside photographs/screenshots belongs to the source image and is not part of the UI palette.

Dark green is the heading colour. Terracotta marks categories, selected states and primary actions. Captions and supporting text use muted green-grey. Rules and borders use the rule colour; pale panels use the panel colour. Button text uses cream.

## Editorial and layout rules

Major headings end with a full stop where they are standalone editorial phrases. Keep exact degree and course names as supplied. Gallery thumbnails are 3:2 landscape with object-fit:cover and no additional zoom. Position crops around the subject; full originals open in the lightbox. Header and contact footer are shared across site pages. Footer links to the HTML CV and portfolio editions; PDF downloads are available on those pages. The accessibility link reads “Implementing WCAG 2.2 AA accessibility.” Keep source credits and distinguish communications/change enablement from technical system implementation.


## Reuse and licence

© Jonathan Perfect. This style guide’s original text, design specifications and interface samples are licensed under Creative Commons Attribution 4.0 International (CC BY 4.0): https://creativecommons.org/licenses/by/4.0/ . You may share and adapt them, including commercially, with credit to Jonathan Perfect, a licence link and an indication of changes.

This licence applies to the style guide only. The rest of the website, photographs, films, screenshots, portfolio documents, CV, personal branding and third-party material are excluded. All other content © Jonathan Perfect unless otherwise stated. All rights reserved.


## Editing this system

Shared colour, font, type-size and common layout tokens are in `theme.css`. `design-system.css` applies the hierarchy; `styles.css` and `editorial.css` supply layout. See [MAINTENANCE.md](MAINTENANCE.md) for file responsibilities, script order and manual-edit checks.

## V4 controls

Original button, filter and navigation sizing is retained. The native place selector has a minimum height of 44px. Long action text wraps. Keep decorative dividers subtle, but use visible borders and focus outlines for essential controls.