For every child, a fair chance

A Quarto starter aligned with the UNICEF Brand Book 4.0

UNICEF Quarto Demo

A publication-first website starter

This sample homepage shows how the UNICEF Quarto design variant can shape a light, readable, and strongly branded website for reports, storytelling, guidance, and advocacy content.

What This Demo Includes

Publication rhythm

Large, calm headings, generous line spacing, and narrow reading measures suited to reports, briefs, and story pages.

Quarto navigation

A top navbar, docked sidebar, search, reader mode, back-to-top navigation, and page navigation across content.

Structured content

Callouts, tables, code blocks, and footer areas styled to feel like part of the same UNICEF editorial system.

Design Principles

  • Keep the site light-first and content-led.
  • Use UNICEF Blue as the strongest brand signal, not as decoration on every element.
  • Favor readability over novelty.
  • Let photography lead major landing and campaign moments, while analytical pages stay quieter.
  • Preserve a credible, global-public-interest tone.

Sample Metrics

190+ countries and territories referenced by the brand narrative

1 dominant brand color used to anchor recognition

5 sample pages included in this starter site

for every child,

This starter is designed to support storytelling, policy communication, research publication, and structured reporting without losing the tone of the UNICEF brand.

Entry Points

Stories and Reports

A Quarto listing page that automatically pulls in post metadata, categories, dates, and reading-time support from the posts/ folder.

Storytelling Post

A long-form sample post demonstrating TOC behavior, callouts, tables, code blocks, and narrative pacing.

Data and Figures Post

A second sample post showing figure captions, chart placeholders, and report-style analytical structure.

UNICEF.org

An external reference point for live UNICEF publishing patterns and current institutional communication.

NoteImplementation note

This starter intentionally uses a Quarto-native structure. The most important styling is carried by custom.scss, while navigation and document behavior are controlled in _quarto.yml.

Back to top