Styleguide
Components in the CAPA design system, ported from the solution-suite brochure.
Accent policy
Violet is the accent. Teal is an opt-in secondary for
moments that genuinely need a second colour — applied with
data-accent="teal" on a container. The brochure's three-stream colour coding is
deliberately not carried across; at web scale it reads as decoration rather than meaning.
Type scale
Display
Heading 1
Heading 2
Heading 3
Lead paragraph — used under headlines.
Body copy at the default measure, which caps at 68ch for readability.
Descriptor — italic, muted, used under section heads.
Muted text.
Stat tiles
Secure by Design
Built-in
Security and an accurate site record built in at design.
Risk & Compliance
~50%
Reduction in annual compliance cost.
Security Operations
6 → 1
Six SOC products replaced by one platform.
Pain cards
Failure mode 1
Short description of what breaks.
Failure mode 2
Short description of what breaks.
Failure mode 3
Short description of what breaks.
Failure mode 4
Short description of what breaks.
Maths strip
400
controls
×
10
products
=
2,000+
reviews