Design Token Taxonomy
gavin.wales · Complete Colour & Icon Audit · v2 · April 2026
Contents
1. Site Brand Palette
2. Career Phase Colours
3. Research Project Roles
4. Project Status
5. Connection Badge Roles
6. University Relationship Types (Map Pins)
7. Institution Brand Colours
8. Project Brand Colours
9. Bibliography Categories
10. SDG Palette
11. Citation Metric Badges
12. Research Funders
13. Publicity / Media Types
14. Peer Review
15. Publication & Open Access Status
16. Illustrated Menu Icons (Pencil-Drawn)
17. Footer Links — Brand Hover Colours
18. Core Research Themes
19. Geographic Scope
§1
Site Brand Palette
Core brand colours used across all pages.
Purple Family
Site Purple (Primary)
#392570
Headings, accents, borders
Purple Light
#4a3290
Hover states, gradients
Purple Dark
#2a1a54
Green Family
Site Green (Secondary)
#2f6150
Diamonds, tags, toggles
Green Light
#3d7a65
Green Dark
#234a3d
Neutrals
Page Background
#f8f7fa
Card / Pill Background
#f4f3f6
Card Border
#e5e3ea
Input Border
#d0ccd8
Badge Border (Default)
#cacaca
§2
Career Phase Colours
Legend colours from the Academic Timeline chart. These distinguish career phases and are used as the diamond colour on each timeline row.
Academic Employment
#DB4553
Visiting Position
#4A468A
Postgraduate Research
#F4B826
Postgraduate Study
#DD7F2B
Undergraduate Study
#E15F8A
Professional Study
#42A495
§3
Research Project Roles
Legend from the Research Projects timeline. Ordered by seniority, top to bottom. Colours use Material Design 700 weight in a spectral rainbow from purple (most senior) to red (broadest collaboration).
Font Awesome Pro required. The investigator icons use
fa-user-magnifying-glass across solid/regular/light weights. Update .dot-pi / .dot-ci / .dot-rci / .dot-rf / .dot-ra in the site CSS to match these new values.Principal Investigator (PI)
#7B1FA2
Purple 700 · fa-solid fa-user-magnifying-glass
Co-Investigator (Co-I)
#303F9F
Indigo 700 · fa-regular fa-user-magnifying-glass
Researcher Co-Investigator
#1976D2
Blue 700 · fa-light fa-user-magnifying-glass
Research Fellow
#00796B
Teal 700
Research Associate
#388E3C
Green 700
Researcher
#FFA000
Amber 700
Collaborator
#D32F2F
Red 700 · icon confirmed by Gavin
§4
Project Status
Status indicators for research projects.
Active
#2f6150
Completed
#888888
Pending
#d4a03a
§5
Connection Badge Roles19
Roles describing Gavin's relationship with a given university. Icons already assigned in connection-badges-highkey.html. All currently use site green.
Study
Undergraduate Graduate
#2f6150
Postgraduate Graduate
#2f6150
Doctoral Graduate
#2f6150
Appointment
Academic Staff
#2f6150
Honorary Fellow
#2f6150
Visiting Fellow
#2f6150
Visiting Researcher
#2f6150
Teaching & Examination
Lecturer
#2f6150
Visiting Lecturer
#2f6150
Doctoral Supervisor
#2f6150
External PhD Examiner
#2f6150
External Programme Examiner
#2f6150
Research & Collaboration
Research Partner
#2f6150
Grant Partner
#2f6150
Co-author
#2f6150
Engagement & Outreach
Invited Speaker
#2f6150
Conference Organiser
#2f6150
Public Engagement
#2f6150
Media Partner
#2f6150
§6
University Relationship Types — Map Pin Colours
Colours for Google Maps "Scholar Cap in Circle" pins on the International Research map. Each relationship type has a distinct colour. These are the categorical colours for the map, distinct from individual institution brand colours in §7.
Universities I Have Studied At
#880E4F
Universities I Have Worked At
#673BB7
Universities I Have Given Visiting Lectures At
#E65100
Universities I Have Done External Examinations For
#795548
Universities I Have Had Research Collaborations With
#097138
Universities I Have Visited
#FFEA00
§7
Institution Brand Colours9
Bar colours from the Academic Timeline chart. Each is derived from the institution's brand identity and serves as the primary colour token for that university across the site.
University of Birmingham
#FCC200
Gold — UoB brand
Cardiff University
#BF0D3E
Red — Cardiff brand
University of Cambridge
#8EE8D8
Stanford University
#175E54
Wrexham University
#42A495
Formerly Glyndŵr
Keele University
#00A859
Loughborough University
#6C3082
University of East London
#10CFC9
Open University
#060645
§8
Project Brand Colours12
Bar colours from the Research Projects timeline chart. Each project has a unique colour and an assigned role (shown in notes).
RESCU-M²
#3b956b
Research Fellow
UKICE
#1d2d78
Research Fellow
RECREATE
#c66e6d
Co-Investigator
HARMONY
#025a41
Research Fellow
SCREAM
#032e3d
Research Fellow
ATETA
#f2d730
Research Fellow
LCA Electric Defence Vehicles
#999999
Principal Investigator
TReFCo
#c1d54b
Co-Investigator
Met4Tech
#3490b2
Researcher Co-I
ReLIB
#ed1f28
Co-Investigator
EPSRC IAA Developing Leaders
#32cea9
Principal Investigator
WEST
#eeb254
Research Associate
§9
Bibliography Categories19
Publication categories in the Bibliography app. Each has a suggested icon; colour uses site purple unless otherwise noted.
Journal Papers
#392570
117 items
Reference Works
#392570
31 items
White Papers & Reports
#392570
Translated Works
#392570
Book Chapters & Sections
#392570
Periodicals & Magazines
#392570
Authored Books
#392570
Co-Authored Books
#392570
Conference Papers
#392570
Policy Commission Reports
#392570
Technology Roadmaps
#392570
Case Studies
#392570
Popular Writing
#392570
eBooks
#392570
eReference Works
#392570
Illustrated Books
#392570
Patent Applications
#392570
Working Papers
#392570
Theses
#392570
§10
SDG Palette17
Official UN Sustainable Development Goal colours. Do not modify.
SDG 1 — No Poverty
#e5243b
SDG 2 — Zero Hunger
#dda63a
SDG 3 — Good Health
#4c9f38
SDG 4 — Quality Education
#c5192d
SDG 5 — Gender Equality
#ff3a21
SDG 6 — Clean Water
#26bde2
SDG 7 — Affordable Energy
#fcc30b
SDG 8 — Decent Work
#a21942
SDG 9 — Industry & Innovation
#fd6925
SDG 10 — Reduced Inequalities
#dd1367
SDG 11 — Sustainable Cities
#fd9d24
SDG 12 — Responsible Consumption
#bf8b2e
SDG 13 — Climate Action
#3f7e44
SDG 14 — Life Below Water
#0a97d9
SDG 15 — Life on Land
#56c02b
SDG 16 — Peace & Justice
#00689d
SDG 17 — Partnerships
#19486a
§11
Citation Metric Badges
Third-party brand colours for citation badge borders.
Altmetric
#ff6d00
Dimensions
#1565c0
PlumX
#6a1b9a
Scite.ai (recoloured)
#2f6150
Google Scholar
#4285f4
§12
Research Funders7
Funding bodies from the Universities app. Suggested brand colours derived from each funder's logo and visual identity. Use these as the primary colour token when referencing each funder across the site.
Note: UKRI rebranded in 2019. EPSRC and ESRC now sit under the UKRI umbrella brand. The council-specific colours below are extracted from their current logo marks. Verify against the logos stored in your Zoo funder items.
EPSRC
#2E358B
Indigo blue from UKRI/EPSRC mark
ESRC
#D4275E
Magenta-pink from UKRI/ESRC mark
The Faraday Institution
#1B3A5C
Dark navy from TFI logo
DER-IC
#00A651
Green from DER-IC brand
UKRI
#2D2E5E
Dark navy from UKRI wordmark
Danish Ministry of Higher Education
#C8102E
Danish flag red / ministry crest
European Commission
#003399
EU Reflex Blue — official brand
§13
Publicity / Media Types12
Categories from the Publicity app (308 items).
Newspaper Articles
#392570
Magazines & Periodicals
#392570
Online News
#392570
Blogs
#392570
Radio
#392570
Television
#392570
Podcasts
#392570
Press Releases
#392570
Institutional
#392570
Brochures
#392570
Published Letters
#392570
Cymraeg (Welsh Language)
#392570
§14
Peer Review
Types and roles from peer-review items (58 items).
Review Type
Publication Peer Review
#392570
Grant Peer Review
#2f6150
Review Role
Reviewer
#392570
Editor
#392570
In schema, unused
Chair
#392570
In schema, unused
Member
#392570
In schema, unused
Organiser
#392570
In schema, unused
§15
OA logo
Closed logo
Hybrid logo
Publication & Open Access Status
Publication Status
Published
#2f6150
In Press
#d4a03a
Suggested
Under Review
#888888
Suggested
Retracted
#c62828
Suggested
Open Access Status
Gold Open Access
#f3b31e
OA logoGreen Open Access
#2f6150
Bronze Open Access
#cd7f32
Closed Access
#666666
Closed logoDiamond Open Access
#392570
Free to read & publish
Hybrid Open Access
#F68212
Hybrid logo
§16
Illustrated Menu Icons (Pencil-Drawn)55
Hand-crafted pencil-drawn icons used in dropdown menus. All stored in
/media/yootheme/cache/. Grey-on-white pencil sketch style. When embedding on gavin.wales, use root-relative paths (e.g. /media/yootheme/cache/3f/NewsArchiveIcon-3f8060d5.png).Icon hierarchy: Large contexts (dropdown menus, tiles) → these illustrated PNGs. Small contexts (badges, pills, metadata) → Font Awesome icons from §5, §9, §13.
News & Blog
News Archive
/media/yootheme/cache/3f/NewsArchiveIcon-3f8060d5.png
Billboard
/media/yootheme/cache/30/BillboardIcon-302e9577.png
Academia
Academic Timeline
/media/yootheme/cache/c9/AcademicTimeline-c9468b76.png
Research
Research Interests
/media/yootheme/cache/d3/ResearchInterests-d3048fe0.png
Research Projects
/media/yootheme/cache/41/ResearchProjects-41d366cd.png
Research Funding
/media/yootheme/cache/9d/ResearchFundingIcon-9d5c8cd6.png
Research Group
/media/yootheme/cache/1c/ResearchGroupIcon-1c7772dc.png
Research Collaborations
/media/yootheme/cache/b0/ResearchCollaborationIcon-b05dd56a.png
International Research
/media/yootheme/cache/03/InternationalResearch-037af259.png
Research Impact
/media/yootheme/cache/26/ResearchImpact-2630eaca.png
Policy Impact
/media/yootheme/cache/38/ResearchPolicyImpact-38da498f.png
Journal Special Issues
/media/yootheme/cache/2e/JournalSpecialIssue-2e573c82.png
Technology Roadmaps
/media/yootheme/cache/75/RoadmapIcon-75dcf324.png
Peer Review
/media/yootheme/cache/af/PeerReviewIcon-af93a395.png
Conference Papers
/media/yootheme/cache/62/ConferencePapers-623fe339.png
Teaching
Teaching Resources
TeachingResources.png
Reading Lists
ReadingLists.png
eLearning
eLearning.png
Books & Bibliography
Authored Books
Authored.png
Co-Authored Books
CoAuthored.png
Book Sections & Chapters
Contributions.png
Illustrated Books
Illustrated.png
eBooks
ebook.png
Reference Works
Reference.png
eReference Works
eReference.png
Translated Works
Translated.png
Libraries Holding My Books
LibraryIcon.png
Popular Writing
PopularWriting.png
STEM
STEM Engagement
STEMEngagement.png
STEM Video Content
STEMVideoContent.png
STEM Resources
STEMResources.png
Consultancy
Engineering
Engineering.png
Management
Management.png
International
Globe Icon.png
Curriculum Vitæ
Employment
BriefcaseIcon.png
Education
AcademicIcon.png
Prizes & Awards
AwardIcon.png
Publicity / Media
Newspaper Articles / Journalists
Newspapers.png
Magazines & Periodicals
Magazines.png
Online News
Online.png
Blogs
Blog.png
Radio
Radio.png
Television
Television.png
Press Releases
PressRelease.png
Institutional
Institutional.png
Brochures
Brochures.png
Endorsements
Academic References
AcademicIcon.png (variant)
Employment References
BriefcaseIcon.png (variant)
LinkedIn Endorsements
LinkedIn hand-drawn logo.png
Book Reviews
BookReviewIcon.png
Customer Reviews
CustomerIcon.png
Policy
Policy Engagement
Policy.png
Policy Reports
PolicyDocument.png
Evidence Submissions
PolicyEvidence.png
Missing — Need Commissioning
Podcasts
No illustrated icon yet
Published Letters
No illustrated icon yet
Cymraeg (Welsh Language)
No illustrated icon yet
White Papers & Reports
No illustrated icon yet
Policy Commission Reports
No illustrated icon yet
Patent Applications
No illustrated icon yet
Working Papers
No illustrated icon yet
Theses
No illustrated icon yet
Case Studies
No illustrated icon yet
§17
Footer Links — Brand Hover Colours24
Icons in the footer currently display as grey/white diamond-framed UIkit buttons. On hover, each could transition to the platform's official brand colour for a polished, recognisable effect. These are the hex codes for that hover state.
Follow Me — Social Media
Facebook
#1877F2
Flickr
#0063DC
Blue dot (also has pink #FF0084)
GitHub
#0FBF3E
Green (contrast for dark bg)
Instagram
#E4405F
Gradient primary (magenta-pink)
Scribd
#1A7BBA
TikTok
#EE1D52
Pink-red (also has cyan #69C9D0)
Twitter
#1DA1F2
Legacy blue (X rebrand is #000)
LinkedIn
#0A66C2
Pinterest
#BD081C
YouTube
#FF0000
Academic Links
Academia.edu
#3D75E4
Button blue from website
Figshare
#00AFDC
Official Figshare cyan
Google Scholar
#4285F4
Google Blue
ImpactStory
#EC6500
Orange from logo
ResearchGate
#00CCBB
Teal green
Semantic Scholar
#1857B6
Blue from AI2 logo
SSRN
#154881
Dark blue from Elsevier/SSRN
Staff Profile (UoB)
#FCC200
Uses UoB gold from §7
The Conversation
#D8352A
Red from TC logo
Digital Identifiers
ISNI
#003D6B
Dark blue from ISNI wordmark
ORCiD
#A6CE39
Official ORCID green
ResearcherID / Web of Science
#FFA500
ResearcherID orange
Scopus
#E9711C
Elsevier orange
VIAF
#2B4E72
Steel blue from OCLC/VIAF
Implementation note: The footer icons currently use diamond-shaped
.uk-icon-button elements with a green border (#2D6250) that changes to purple (#38256E) on hover. To apply brand-coloured hover states, add a data attribute or class per platform and target it with CSS. See the accompanying gavin-footer-hovers.css file for the ready-to-paste implementation.
§18
Core Research Themes23
Research topics from the /research/research-interests page. Each theme has an assigned colour chosen by association — energy themes are warm, environmental themes are green, materials are cool metallics, business/policy are formal blues and burgundies.
Automotive Industry
#455A64
Blue Grey — steel / automotive
Business Models
#1565C0
Blue — corporate / strategy
Circular Economy
#2E7D32
Green — cycles / renewal
City-Regions
#6D4C41
Brown — built environment
Climate Change
#D84315
Deep Orange — warming
Critical Materials
#6A1B9A
Purple — rare / precious
Decarbonisation
#00838F
Cyan — clean transition
Electric Vehicles
#0277BD
Light Blue — electric
Energy
#F9A825
Yellow — energy / light
Energy Storage
#558B2F
Olive Green — stored power
Lithium Ion Batteries
#C62828
Red — battery chemistry
Net Zero
#00695C
Teal — target / ambition
Policy
#880E4F
Burgundy — government
Rare Earth Elements
#BF360C
Deep Orange — minerals / earth
Recycling
#388E3C
Green — universal recycling
Solar Energy
#FF8F00
Amber — sunlight
Supply Chain
#37474F
Dark Blue Grey — logistics
Sustainability
#1B5E20
Dark Green — nature / growth
Techno-Economic Assessment
#546E7A
Blue Grey — analytical
Technology Metals
#78909C
Light Blue Grey — metallic
Technology Roadmaps
#283593
Indigo — planning / future
Transitions
#E65100
Orange — change / movement
Wind Power
#039BE5
Sky Blue — wind / air
§19
Geographic Scope
Colours and icons for classifying research, impact, or engagement by geographic reach.
International
#2E7D32
Green — the world
National
#003399
Union Jack blue
Regional
#C62828
Red — region / territory
Local
#F9A825
Gold — community / place