HSBC Prototype/Editorial System
Editorial Language System · Internal reference

The visual vocabulary that defines every future publication.

Every asset here is a canonical, single-source implementation. If an editorial illustration, publication object, or motif is used in more than one place, it belongs in this system. Chapters, decks, and presentations should only compose from these parts.

Import from@/compositions/editorial/system
01

Foundations

The tokens every asset inherits. Stroke, radius, motion, colour, type.

Stroke
STROKE.hair0.5px
STROKE.rule1.0px
STROKE.emphasis1.5px
Radius
RADIUS.none0px
RADIUS.soft2px
RADIUS.card4px
Motion
  • duration.fast500ms
  • duration.base700ms
  • duration.slow900ms
  • duration.slower1200ms
  • ease.revealcubic-bezier
Framing primitives
EditorialFrame
Enclosed editorial surface.
<EditorialFrame />
<Hairline /> · <Rule />
02

Wireframes

The storytelling ladder — one canonical wireframe per editorial level.

Level 01
Chart
{ WireChart }
Level 02
Story
{ WireStory }
Level 03
Section
{ WireSection }
Level 04
Full Report
{ WireReport }
03

Publication Objects

Cover artefacts, taxonomy planes, and brand marks used across the system.

ReportCover
HSBC
2025
HSBC Innovation Banking · Annual
Venture Healthcare
Venture Healthcare
Cover · 2025
{ ReportCover }
ReportCoverStack
{ ReportCoverStack }
HsbcMark
HSBC
{ HsbcMark }
TaxonomyPlane · Composite
HSBC
Innovation Banking
Venture Healthcare
Report
Annual · 2025Vol. 12
publication
Section 02p. 06–19
Chapter
Market
overview
Funding, deal activity, and sector momentum across the year.
section
Layout · Chart + Rail12 col · 8 row
Header
Chart
Rail
Footer · source
layout
Quarterly funding · $B2023 – 2025
Q1 '23Q4 '23Q4 '24Q4 '25
2025 2024
visualization
Activity trend
Funding recovered in the back half of the year, led by later-stage rounds.
“Capital returned to the sector on quieter, more selective terms.”
— Sector lead
narrative
HSBC
Market overview · Overall funding
Quarterly venture funding recovered through 2025.
Later-stage rounds drove the second-half rebound; early-stage activity stayed subdued.
202320242025
Rail
HSBC Innovation Banking · 2025
p.06
composite
{ TaxonomyPlane }
04

Motifs

Reusable editorial scenes shared across chapters, decks, and presentations.

SkeletonSpread
{ SkeletonSpread }
PrototypeStill
Story Studio · Overall funding · 202500:12 / 00:24
Market overview
Venture healthcare funding, by quarter.
202320242025
Rail
Scene 03 / 07
{ PrototypeStill }
05

Illustrations

Original editorial illustrations organised by narrative theme.

Venture Healthcare
Market-level illustrations for capital flow, funding recovery, and investment landscapes.
Capital Flow
Venture Healthcare
{ CapitalFlow }
Capital Flow
small
Capital Flow
medium
Capital Flow
large
Intent · Opening figure for funding-flow, market-recovery, and capital-momentum narratives.
Investment Landscape
Venture Healthcare
{ InvestmentLandscape }
Investment Landscape
small
Investment Landscape
medium
Investment Landscape
large
Intent · Sector-level ecosystem view for company landscapes, cluster maps, and market composition.
Computational Biology
Contemporary scientific illustrations for molecular systems and data-driven discovery.
Molecular Network
Computational Biology
{ MolecularNetwork }
Molecular Network
small
Molecular Network
medium
Molecular Network
large
Intent · Protein-interaction motif for computational biology, target discovery, and network science.
Data to Discovery
Computational Biology
{ DataToDiscovery }
Data to Discovery
small
Data to Discovery
medium
Data to Discovery
large
Intent · Pipeline illustration for research programs moving from raw biology to computational discovery.
Biopharma Infrastructure
Architectural depictions of biomanufacturing and laboratory automation systems.
Biomanufacturing System
Biopharma Infrastructure
{ BiomanufacturingSystem }
Biomanufacturing System
small
Biomanufacturing System
medium
Biomanufacturing System
large
Intent · Process schematic for biomanufacturing capacity, GMP infrastructure, and production programs.
Laboratory Automation
Biopharma Infrastructure
{ LaboratoryAutomation }
Laboratory Automation
small
Laboratory Automation
medium
Laboratory Automation
large
Intent · Automation motif for high-throughput workflows, robotic laboratories, and sample handling.