PQMD Design System · Theme reference
Component library
Every token and component rendered by the theme itself. Hover, tab and click through it to check interaction states against the Pencil design system.
Typography
Gill Sans, self-hosted. Headings are Regular 400 in navy. Sizes from 20px up scale fluidly with the viewport.
Display — Partnership in action
display · 64px · line height 1.02
Hero / H1 — Partnership in action
hero · 52px · line height 1.06
Section title — Partnership in action
section · 48px · line height 1.08
Title / H2 — Partnership in action
title · 40px · line height 1.1
Heading / H3 — Partnership in action
heading · 26px · line height 1.15
Subheading / H4 — Partnership in action
subheading · 22px · line height 1.25
Lead — Partnership in action
lead · 20px · line height 1.5
Large — Partnership in action
large · 18px · line height 1.6
Body — Partnership in action
body · 16px · line height 1.6
Card text — Partnership in action
card · 15px · line height 1.6
Small — Partnership in action
small · 14px · line height 1.6
Label — Partnership in action
label · 13px · line height 1.3
Caption — Partnership in action
caption · 12px · line height 1.3
Weights
Light 300
Italic
Regular 400
Italic
Medium 500
Italic
Bold 700
Italic
Heavy 900
Italic
Eyebrow · label · +0.08em
Body text with an inline link, medium emphasis and italic emphasis.
Color
Palette from the Pencil variables. Hover shades are derived. Change a token in theme.json and every component follows.
Navy
navy · #3B5A6B
Navy hover
navy-hover · #2F4954
Deep navy
navy-deep · #27414E
Orange
orange · #F37321
Orange hover
orange-hover · #D8631A
Lime
lime · #BED73C
Lime hover
lime-hover · #A8C12F
Yellow
yellow · #FED004
Ink
ink · #333333
Text soft
text-soft · #4A4A4A
Muted
muted · #66727A
Border
border · #DDE3E5
Line
line · #EBEBEB
Surface
surface · #F5F7F4
Surface alt
surface-alt · #F8F8F8
White
white · #FFFFFF
Success
success · #2F855A
Error
error · #C53030
Error hover
error-hover · #9B2C2C
Info
info · #2563EB
Buttons
Rectangles with 6px radius. One primary per section. Hover, focus with Tab, and press to check each state.
Default: no icon
Optional: add the class has-arrow for the leading arrow icon
Disabled: add the class is-disabled
Inverse is for dark grounds
Labels and links
Badges are the only pills and are never links. Arrow links nudge on hover.
Underline link: paragraph style for dark grounds; set the paragraph text color to lime for the lime version
Breadcrumbs: core block, rendered from the current page
Section heading
Centered eyebrow, section title and supporting statement.
Section eyebrow
Clear, purposeful section title
Use a concise supporting statement to establish context for the content that follows.
Cards
Cards with a linked title are fully clickable and lift on hover. Static cards have no hover.
Connect In Person
Forums, convenings, and opportunities to connect with peers across the sector.
Donation Guidelines
Advancing quality, appropriate and responsible medical donations.
Live Webinar Series
Monthly sessions led by member experts on standards, logistics and impact measurement.
25+
years of cross-sector collaboration
$3B+
in medical donations guided by standards
40+
member organizations
Our mission
A short statement set on glass over a dark photo.
Our vision
Swap the icon in the Icon block settings; the PQMD collection holds them all.
Card / Metric and Card / Glass share one glass base; Glass adds an icon, a title and an Underline link
September 2026
Members reflect on this year’s annual forum
A recap of key sessions, panels and commitments from the gathering.
September 2026
Members reflect on this year’s annual forum
A recap of key sessions, panels and commitments from the gathering.
Logo grid: Logo tiles in a grid of 10rem columns, greyscale until hovered (Our Members directory)
In-Person
Month 2026 · City
Event title
One or two sentences about the event.
In-Person
Month 2026 · City
Event title
One or two sentences about the event.
In-Person
Month 2026 · City
Event title
One or two sentences about the event.
Card / Event: Card / Info with a Badge / Tint, the date as an eyebrow, title and text (Events Calendar)
Eyebrow
A call to action.
One or two sentences that say why the reader should act now.
Card / CTA: Medallion icon, eyebrow, H2, statement and two buttons; the CTA sections place it over a Cover
Our mission
PQMD is a global collaboration of organizations committed to improving access to quality medicines and supplies.
What we don’t do
PQMD does not arrange or broker donations. We set standards and share practice.
01
Milestone title 1999–2004
What happened in this period. Select the years in the title and use Highlight, text color Muted, to set them apart.
Card / Step: Row layout with a Step number paragraph, then a group with the title (years via Highlight, color Muted) and text
Board member name
Role, PQMD · Title, Organization
Advisory member name
Role, PQMD · Title, Organization
Member representative
Card / Person and Card / Portrait inside a People band: hover a Person card to color it and the band. Real lists use the People Query Loop (PQMD People plugin)
Section styles
Styles picked in the block sidebar. Slideshow: Group of Image blocks. Overlap: two Columns, the first over the second. Mood band: lime Group whose first Program card turns it yellow on hover; Mood band / Duo also turns it orange from the second card. Hero / Split: Cover for inner pages.
Overlap and Slideshow
The photo column overlaps this card by 6% of the row; the card makes room for it. Below 782px they stack.
Hover me: the band turns yellow
Plain Program cards: the band gives them padding, white text and large copy.
A second Program card
Plain Program cards: the band gives them padding, white text and large copy.
First card title.
Hovering this card turns the band yellow. Plain Program cards take the band’s padding, white text and large copy.
Second card title.
With the Duo style, hovering this card turns the band orange.
Mood band / Duo (pattern Mood band): hover the first card for yellow, the second for orange. Mood band / Pillars (Peer Networks): six pillar cards, each turns the band its color: lime, yellow, lime, rust, navy, indigo
Hero / Split: see the Who We Are page hero (video) and the Our Focus Areas hero (a Slideshow group after the H1); pattern Page hero with eyebrow adds a lime Eyebrow before the H1
Also in the Styles panel: Columns > Overlap / Reverse (second column over the first, Our History & Impact), Group > Pillar band (Home) and Pillar band / Reveal (Our Focus Areas), Cover > Photo zoom on hover, Icon > Medallion