← Back to UI screens

Also for WordPress: MGD Pediatrics Folio, the same layout as an installable block theme.

Pediatrics website (folio) template — web, editorial style
Theme

Pediatrics website (folio) template — web, editorial style

Pediatrics website, Folio layout website template for a website, designed for Wrenfold Children's Clinic, a fictional pediatrics business. Shows a full home page for a family pediatric clinic: magazine layout: centred masthead, large type, numbered contents, ruled lists, no cards. Editorial style: warm paper tones, Instrument Serif headlines with Inter body text and tabular figures, square corners. A complete, responsive one-page HTML template (every section, light and dark) with a DESIGN.md of light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md
Pattern
Pediatrics website
Device
Web
Style
Editorial
Product (fictional)
Wrenfold Children's Clinic
Category
Pediatrics

Spec

Colours (light)
background #fffaf6 · surface #fbeee2 · text #22160b · muted #706052 · primary #bb4e43 · accent #007d89
Colours (dark)
background #1a1109 · surface #281d13 · text #f2ebe6 · muted #bdaea1 · primary #fd9487 · accent #40c2d1
Fonts
Instrument Serif (headings), Inter (body), JetBrains Mono (code) · Google Fonts, under their own licences
Sections
services, process, team, FAQ, visit, footer
Light and dark
Both included; follows the system setting
Responsive
One HTML file, layout changes at 1024px, 960px and 760px; no horizontal scroll at 320px
Best for
A family paediatric practice that wants a magazine-like look led by type.
Not ideal for
A practice that wants a compact layout with very little text.
pediatrics-websitewebpediatricswebsite-templatelanding-pageresponsivefaqnavigation-headerfooter
AI

Build this with your AI

Fonts: Instrument Serif + Inter (Google Fonts)

Writing about this template?

More pediatrics website templates

Pediatrics website home page — web, minimal (Wrenfold Children's Clinic)
web · minimal
Pediatrics website, Ledger layout — web, minimal (Wrenfold Children's Clinic)
web · Ledger · minimal
Pediatrics website home page — web, editorial (Wrenfold Children's Clinic)
web · editorial
Pediatrics website home page — web, brutalist (Wrenfold Children's Clinic)
web · brutalist
Pediatrics website home page — web, luxury (Wrenfold Children's Clinic)
web · luxury
Pediatrics website home page — web, playful (Wrenfold Children's Clinic)
web · playful
Pediatrics website, Bento layout — web, playful (Wrenfold Children's Clinic)
web · Bento · playful
Pediatrics website home page — web, corporate (Wrenfold Children's Clinic)
web · corporate
Pediatrics website, Atlas layout — web, corporate (Wrenfold Children's Clinic)
web · Atlas · corporate
Pediatrics website home page — web, retro (Wrenfold Children's Clinic)
web · retro
Pediatrics website, Band layout — web, retro (Wrenfold Children's Clinic)
web · Band · retro
Pediatrics website home page — web, monochrome (Wrenfold Children's Clinic)
web · monochrome
Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.

Save to board