Style Reference

Qusay Hussein Legacy Project — Visual Style Guide

A reference for the colors, fonts, type scale, and components used across qusayhussein.org. Documents what currently exists on the live site so all future modules stay consistent.

Colors

Color Palette

Indigo #12094a Headings, dark backgrounds, primary buttons
Ivory (background) #F9F6F1 Primary page background
White #FFFFFF Card backgrounds, form fields
Warm Tan #EAE4D8 Book section background
Gold Tint #F5EDD8 Stats band, cartoon teaser, voice section
Ink Body #3b2810 Body text on light backgrounds
Gold / Muted Brown #5a3800 Eyebrow labels, credentials, muted text
Gold Border #C8A86B Borders, dividers, badge fills, accents
Plum (gradient start) #5E3A7A Contact page gradient, italic name accent
Deep Violet (gradient end) #2A0147 Contact page gradient endpoint
MSF Red — pending review #CC0000 Used in pills panel for MSF content. Borrows MSF's own brand color — under discussion whether to keep or replace with indigo/gold only.
UT Orange — pending review #BF5700 Used in pills panel for UT content. Borrows UT Austin's own brand color — under discussion whether to keep or replace with indigo/gold only.

Typography

Fonts & Type Scale

Cormorant Garamond
700 / Serif
Display headings
Dr. Qusay Salih Hussein Al-Mamari
Cormorant Garamond
700 Italic
Name accent
Al-Mamari
Cormorant Garamond
600 / Serif
Section headings
A Legacy That Continues
Source Sans 3
600 / Uppercase
Eyebrow labels
Digital Legacy Archive
Source Sans 3
500 / Regular
Credentials line
Ph.D. · MSSW · Scholar · Humanitarian · Author
Source Sans 3
400 / Body
21px standard
Standard body copy used throughout narrative and card descriptions.
Source Sans 3
400 / Body
18px minimum
CDP minimum text size — never go below this anywhere on the site.

Components

Buttons, Pills & Badges

Legacy Project
Survivor Refugee Scholar & UT Austin Humanitarian & MSF

Accessibility Standards

CDP Requirements

Element Standard
Body text minimum size18px (1rem)
Standard body text size21px (1.15rem)
Touch target minimum52px height
Focus ring3px solid gold (#C8A86B)
Color contrast floorWCAG AA (4.5:1) — AAA preferred (7:1+)
Indigo on Ivory contrast17.1:1 (AAA)
Ink Body on Ivory contrast10.2:1 (AAA)
Gold/Muted on Ivory contrast7.4:1 (AAA)
Ivory text on Indigo background17.1:1 (AAA)

Site Structure

Page Map & Links

Every internal page and external reference link used across the site's modules. Status column should be verified in WordPress before relying on any link — some pages may still be in draft.

PageURLNav Location
Home/Identity bar link, Home (first item)
About/about/Top-level
My Story — Cartoon/cartoon/About → dropdown
Videos/youtube/About → dropdown
Tribute/tribute/Top-level
Publications & Media/publications-and-media/Top-level + dropdown parent
Biography/biography/Publications & Media → dropdown
Gallery/gallery/Publications & Media → dropdown
Awards & Recognition/awards-and-recognition/Publications & Media → dropdown
His Poetry/his-poetry/Publications & Media → dropdown
Contact/contact/Top-level (button style)

External Institutional Links

SourceURL
MSF — In Memoriamdoctorswithoutborders.org/latest/memoriam-dr-qusay-hussein-al-mamari
MSF — Board Profiledoctorswithoutborders.org/who-we-are/us-office/people/qusay-hussein-mssw-phd
MSF — His Story Featuredoctorswithoutborders.org/latest/my-new-life-story-qusay-hussein
UT Austin — Posthumous Tributesocialwork.utexas.edu/dr-qusay-hussein-posthumously-honored-as-2025-outstanding-young-texas-ex/
UT Austin — Texas Ex Award Announcementsocialwork.utexas.edu/three-time-texas-social-work-graduate-dr-qusay-hussein-named-2025-outstanding-young-texas-ex/
UT Austin — Humanitarian Advocacyglobal.utexas.edu/news/social-work-award-honors-graduates-humanitarian-advocacy

Book & Media Links

SourceURL
Barnes & Noblebarnesandnoble.com/w/can-you-open-my-eyes-qusay-salih-hussein-al-mamari/1146996046
YouTube Channelyoutube.com/@qusayhussein1164
MSF Documentary — Open My Eyesyoutube.com/watch?v=8t07V5aCcME
Facebook Archivefacebook.com/qossay.q
Instagram Archiveinstagram.com/qusay_hussein9
LinkedInlinkedin.com/in/qusay-hussein-479610137
X / Twitter Archivex.com/qusayhussein9

Design Credit

SourceURL
Cara Harpole — UX Design Warrioruxdesignwarrior.com