Design reference
A small, consistent style guide.
Two fonts. Six colours. A clear hierarchy for every page.
This is a reference for maintaining the portfolio. The samples below use the same shared stylesheet as the website.
Headings.
H1 / Page title / 44–80px
Make the complex clear.
One per page: the homepage positioning or the title of a full story. Georgia, regular weight, 1.05 line spacing.
H2 / Main section / 32–48px
Judgement, then craft.
Use for each major section, including the three homepage case studies, photography, map, About, education and the contact footer. Georgia, regular weight, 1.1 line spacing.
H3 / Subsection / 24px
The decisions behind the work.
Use for a topic within a story, a certificate title or a card. H4 uses this same appearance when a subsection needs another structural level.
Supporting text.
Intro / 20px
I make complicated information understandable, useful and engaging.
A short opening summary. System sans-serif, 1.6 line spacing.
Body / 16px
Good digital work starts with understanding what people need. Keep reading text at this size across case studies, project descriptions and the About section. Use a new paragraph when the thought changes.
Caption and supporting detail / 14px
© OSCE/Jonathan Perfect · Original photograph ↗
Use for credits, dates, navigation, metadata and actions. Mobile navigation uses the 12px label size.
Label / 12px
01 / Digital leadership at UNHCR 2020–2025
Uppercase system sans-serif with restrained letter spacing. Labels introduce content; they do not replace section headings.
Colour.
#F5F1E8
var(--bg)
#1C302E
var(--ink)
#52615A
var(--muted)
#9B482E
var(--accent)
#E8E3D8
var(--panel)
#D7D0C4
var(--line)
Headings use dark green. Terracotta is for category labels, primary actions and selected states. Use cream behind the main content, the pale panel shade for the footer, and the rule shade for dividers. Photograph colours are not UI colours.
Links and actions.
Use one clear primary action per content block. Keep the action text specific to its destination. Keyboard focus must remain visible.
Keep it consistent.
- Use the same page-title, section-heading and subsection styles across the site.
- Keep the name as the intentional 32px wordmark exception.
- Use the shared colour variables and text roles rather than individual size overrides.
- Use 3:2 gallery thumbnails without extra zoom; show the original when enlarged.
- Use shared headers and contact footers, with CV and portfolio downloads.
Reuse this guide.
This style guide’s original text, design specifications and interface samples are © Jonathan Perfect and licensed under Creative Commons Attribution 4.0 International (CC BY 4.0). You may share and adapt them, including commercially, with credit to Jonathan Perfect, a link to the licence and an indication of any changes.
This licence applies only to the style guide. It does not cover the rest of the website, photographs, films, screenshots, portfolio documents, CV, personal branding or third-party material. All other content © Jonathan Perfect unless otherwise stated. All rights reserved.