Design System
The tokens, type scale, and components that keep every page of this site consistent. This reference page is intentionally non-editable.
Semantic tokens
--bg
Page background
--surface
Card / raised surface
--surface-2
Alternating section surface
--text
Primary text
--text-mid
Secondary / muted text
--brand
Active palette accent
--brand-deep
Accent, pressed / deep
--rule
Hairline borders
--rule-bright
Emphasised borders
--ring
Focus ring
Palettes
Type scale
Waste to worth
Zeolite catalysis
Gas-diffusion electrodes
A lead paragraph introduces a section with slightly larger, muted type that invites the reader in without competing with the heading.
Body copy carries the substance of the page at a comfortable measure and a 1.5 line-height baseline for sustained reading.
DOI 10.1038/s41560-025-01847-x
Building blocks
Buttons
Badges
Card
The base raised surface. Everything from figures to callouts sits on a card.
Publication
Synthesis of stabilized iron nanoparticles from Acid Mine Drainage and Rooibos tea
ACS Omega 7, 24423–24431
Timeline
Doctoral candidacy advanced
Passed the qualifying exam on membrane-electrode assembly durability.
Joined the Harris Laboratory
Began work on zeolite catalysts for glycerol etherification and ethanol upgrading.
Key–value
Ten rules that keep it coherent
Every colour is a CSS variable. Never hardcode a hex value outside the token system.
Size interactive controls with padding, not fixed height or width. The baseline is px-6 py-4.
One radius scale for every surface — inputs, buttons, cards, dialogs share the same geometry.
Use .shell for the 1320px container and .section for vertical rhythm. Do not reinvent spacing.
Wrap the top element of each section body in .reveal for the staggered scroll-in animation.
Escape at the boundary: esc_html, esc_url, esc_attr, or wp_kses_post for rich fields.
Icons come from iconify-icon (ph:* / academicons:*). Never use emoji in the UI.
Focus rings use --ring with a 2px offset. Never suppress outline without a custom replacement.
Both light and dark themes are first-class. Test hierarchy holds when the theme inverts.
Text meets WCAG AAA contrast in both themes. Placeholders stay legible but clearly empty.
One system, every page
Reuse these tokens and components and the site stays consistent by construction.