[ COMPONENT PATTERN LIBRARY ]

Design System Specification

A comprehensive reference of design tokens, layout grids, components, framed artworks, captions, typography, and interactive visual elements used across the website.

[ 01 ]

Color Tokens

--c-bg-canvas
#FCFCFC (Primary Canvas)

--c-bg-room
#F4F4F0 (Gallery Room Tint)

--c-text-deep
#222222 (Deep Charcoal Ink)

--c-accent-blue
#1A365D (Institutional Anchor)

--c-accent-red
#C53030 (Wax Seal Red Accent)

--c-border
#E2E2E2 (Structural Line)

--c-text-muted
#888888 (Archival Metadata)

[ 02 ]

Typography & Static Markers

EXHIBITION HEADINGS (--font-exhibition)

Heading 1 Accent Color

Heading Level 2 Title

Heading Level 3 Subtitle

PLAQUE SERIF BODY COPY (--font-plaque)

Sample paragraph showcasing the plaque serif font style used for introduction text, key research thesis statements, and quotes across the site.

WAYFINDING LABELS & PILLS (.meta-label & .meta-pill)

[ CHRONOLOGY ] Category Pill Active Status

STATIC MARKER HIGHLIGHTERS (.highlight-raw & .highlight-raw-inline)

Standard text containing a hand-drawn SVG marker highlight for lead emphasis and a compact inline marker highlighter for citations.

[ 03 ]

Buttons & Typographic Links

Primary Button (.btn) SAMPLE ACTION

Transparent Secondary Button SECONDARY ACTION

Email / URL Link Button (.btn.btn-url) user@example.com

Directory Link (.directory-link) Sample Link

Scroll Nudge (.scroll-nudge) EXPLORE

[ 04 ]

Directory Catalog Grid (.directory-grid)

Category Label

Sample Directory Title

Placeholder summary description detailing the content cataloged within this directory section.

Explore Directory

Category Label

Second Directory Title

Placeholder summary description explaining the scope and resources cataloged in this directory item.

Explore Directory

[ 05 ]

Focus & Interests Cards Grid (.interests-grid)

Sample Interest Area

Placeholder summary text detailing research themes, governance frameworks, and international policy analysis.

Second Interest Area

Placeholder text explaining public administration, institutional reform, and organizational governance.

Third Interest Area

Placeholder summary text covering security strategy, digital infrastructure resilience, and evaluation models.

[ 06 ]

Focus Area Navigation Cards (.focus-nav-grid)

Sample Focus Area 1 Sample Focus Area 2 Sample Focus Area 3

[ 07 ]

Framed Artwork, Caption & Credit (.artwork-frame)

Fig 1.1 — Sample Diagram Title and Technical Architecture Caption Source: Sample Institutional Archive Reference Credit

[ 08 ]

Museum Tour Timeline Axis (.spread-grid & .tour-axis)

[ CHRONOLOGY ]

Timeline Section

2024 — PRESENT

Primary Engagement Title

Placeholder description detailing institutional advisory work, project leadership, and achievements.

2021 — 2024

Previous Engagement Title

Placeholder description detailing institutional policy advisory and research contributions.

[ 09 ]

Interactive Pulsing Target Points (.cv-target-point)

Pulsing Target Indicator

Used on interactive document pages to draw visual focus to QR code scanning zones and link targets.

[ 10 ]

Dynamic Highlighted Text (.has-seq)

The site automatically handles multi-line wraps gracefully. Observe how complex institutional frameworks, policy evaluations, and global statecraft analysis dynamically groups physical lines for a perfect sequential sweep!

Advance Your Institutional Strategy

Access exclusive policy blueprints and framework analysis for your organization.

REQUEST BRIEFING VIEW PUBLICATIONS

[ 12 ]

TOC Rail / Sticky Index (.toc-rail)

02. Core Frameworks

Placeholder content demonstrating how the table of contents rail sits alongside the main content area. In production, the rail remains sticky as the user scrolls.

More placeholder text to fill out the content area and demonstrate layout proportions.

[ 13 ]

Form Elements

Full Name

Institutional Affiliation

Research Interest

Digital Public Infrastructure Governance Reform

Message

I consent to receiving academic correspondence.

[ 14 ]

Content Cards (.content-card)

Research OCTOBER 2024

The Architecture of Digital Public Infrastructure

An examination of how foundational digital identity and payment systems reshape state capacity.

READ PAPER

Essay AUGUST 2024

Institutional Reform in the 21st Century

Analyzing the friction between legacy bureaucratic structures and modern agile governance models.

READ ESSAY

[ 15 ]

Trust & Credibility Blocks

Partner Logos (.credibility-logos)

Affiliation List (.affiliation-list)

2023–24

Keynote Speaker, Global Governance Summit

Geneva, Switzerland. Delivered opening remarks on digital infrastructure resilience.
2021–23

Visiting Fellow, Institute of Statecraft

London, UK. Lead researcher on the intersection of technology and public administration.

[ 17 ]