The single source for all Content Hub styling, built on the official @contenthub/design-system (--vfk-* tokens, .vfk-* components). Three groups: Foundations (colour, type, logo, atoms), Hub components (the portal and landing-page interface), and Output components (the building blocks for every generated deliverable: document, explainers, PowerPoints, e-learning). Sample values are drawn from the A100 dossier.
0 content forms0 werkvormen
Foundations
Colour, type, logo & atoms
The tokens every Content Hub surface is built on: the warm paper palette, the brand fonts from the published theme, the logo, and the shared atoms (buttons, pills, dots, icon chips). Everything in the Hub and Output groups below is composed from these.
F1Colour palette
Brand
Fire
#33415c
Fire light
#4a5d7e
Fire dark
#242e42
Fire soft
#eef1f6
Chart mark
#4a5d7e
Secondary · brand book p.23
Bondie blue
#11728d
Green Spring
#8ea088
Dun
#d2bd9f
Surfaces & ink
Paper
#f7f5f1
Card
#ffffff
Border
#e7e4de
Border vault
#e3d3d8
Ink
#2a1a20
Ink 2
#7c7072
Muted
#8a7e80
Status
OK / green
#10b981
Warn / amber
#f59e0b
OK soft
#e7f6ef
Warn soft
#fdf0dd
F2Fonts
Heading and body fonts follow the published brand theme.
Never use another typeface. This is the Content Hub Corporate Toolkit rule and applies to every surface: portal, hub and generated output.
PRIMARY FONT · HEADERS
Montserrat
SECONDARY FONT · BODY
Roboto
Hierarchy
Montserrat
Montserrat
Roboto
Header
Sub Header
Body text is set in Roboto. Low pressure process safety controls heat and fire at just 8 bar, using only potable water, and dedicated sensor types protect every area of a data center.
Weights
Montserrat · headers
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Roboto · body
Light 300
Regular 400
Medium 500
Bold 700
Type scale
Display · Montserrat 800 · 48pxFull Unit Service Kit
Heading 1 · Montserrat 700 · 32pxThe unit in numbers
The logo always keeps its burgundy parallelogram. Do not recolour, stretch, or place it on low-contrast backgrounds.
F4Buttondesign system
F5Pill · StatusDot · IconChipdesign system
94 pagesLiveNeeds attentionQueuedVerbatim
okwarnlive (pulse)idle
F6Iconography · Phosphor
Icon set
Phosphor icons are the only permitted icon system, delivered as an inline SVG sprite (no icon CDN, no emoji). 0 icons available; use any of them with <svg><use href="#ph-name"/></svg>.
Hub components
Portal & hub interface
The chrome of the tools and the hub, including the landing page: the header and navigation, source cards, telemetry, the Content Vault card, product tiles, data tables and modals. Every page of the portal is assembled from these.
This cannot be undone. The file and its metadata will be permanently removed from the bucket.
Output components
Deliverable building blocks
Everything that goes into generated output: Word export, Interactive Explainers, PowerPoints, Field References and e-learning. Covers, stats, charts, tables, callouts, procedures and timelines (all design-system components), plus text forms, interactive werkvormen, media and layouts. When the Generate wizard builds a deliverable, it draws from here.
Flagship deliverable
Word export · document
The client-facing Word manual the Generate wizard produces (the “Download document” export). Approved by Content Hub (Christophe and Mia Beck) from the WILO FF Pump Skid mock-up: solid burgundy section bands with white uppercase titles, Montserrat headings plus Roboto body (the Brand Book fonts), burgundy table headers, tinted callouts and a plain source line. Internal review scaffolding (provenance chips, Knowledge Gaps, “Request from Hans”) stays in the on-screen Document View, never in the client document.
D1CoverWord export
DESIGN, INSTALLATION, OPERATION AND MAINTENANCE MANUAL (document)
primary VALVE
A100
LOW PRESSURE process safety
Logo plus tagline top-left, grey manual-type top-right, burgundy title, gradient hero band. Mirrors the original Content Hub document cover.
D2SectionBandWord export
09 COMMISSIONING
Solid burgundy band, light-pink number, white uppercase title in Montserrat. The look Christophe and Mia approved; one per section.
Tinted callout with colour-coded left border (warning · info · danger · note), plus a plain source line under each block. No provenance chip in the client version.
Category A
Text & narrative
Openers and prose forms: the shapes that carry a section title, a statement, definitions and questions.
A1SectionCoverdesign system
07
Components & Parts
Full Unit Service Kit
FIRE-KILLTM Model C-Units. Full Service Kits
The FIRE KILLTM Model C Full Unit Service Kit is a bundled series of gasket and O-ring created to ease the installation and servicing of Model C Control Units.
A100SDS · Full kitVerbatim
Source: SDS (Full kit, 2018) Cover / title p.1
A2Big statement
Operating principle
A primary unit keeps the pipework dry until two independent signals agree, so a single fault never floods the protected room.
A3Pull quote / verbatim
Installation · Warning
The complete piping system upstream the unit including the pilot chamber shall be filled with water prior to starting any pump.
document section 5, Warnings, p.16 · verbatim
A4Key takeaways
Summary
What to remember
16 bar maximum working pressure; factory tested at 24 bar.
Body in stainless steel AISI 316L, gaskets in EPDM.
Activation is manual or electrical (24 VDC, NC or impulse).
Full unit maintenance every 4 years; functionality test annually.
A5Definition
Terminology
primary
A system in which the sprinkler pipework is held dry and is only filled with water after a separate detection event, reducing the risk of accidental discharge in sensitive areas such as data centres.
A6Accordion / FAQinteractive
Support
Frequently asked
If the upstream piping and pilot chamber are not filled with water first, air hammer can be introduced into the system, which can invalidate the functionality of the unit. (document section 5, p.16)
Every 4 years the Unit Plate Gasket, Unit Piston O-ring, Unit Piston Gasket and Unit Spring are replaced. A functionality test is carried out annually. (document section 6.1, p.22)
The maximum working pressure is 16 bar. The unit is factory tested at 24 bar. (Datasheet, Specification table, p.1)
Category B
Numbers & charts
When the content is quantitative, these forms make the figures land: headline tiles, bar and column charts, share donuts, meters and side-by-side comparisons.
Illustrative comparison from the product portfolio. Confirm per current datasheets before publishing.
Category D
Process & time
Procedures and schedules: horizontal steppers, vertical steps, schedule timelines and do/don't pairs.
D1ProcedureStepperdesign system
Installation
Preliminary inspection (§5.1)
1
Visual inspection of package integrity
2
Inspection of product specifications
3
Correct storage until installation
Source: document §5.1 Preliminary inspection p.17
D2Vertical numbered steps
Commissioning
Filling the system
1
Fill upstream piping
Fill the complete piping system upstream the unit, including the pilot chamber, with water before starting any pump.
2
Start the pump
Only start the pump once the pilot chamber is confirmed full, to avoid air hammer in the system.
3
Verify pressures
Confirm the working pressure at the inlet and primary outlet gauges before handover.
Source: document section 5, Warnings, p.16
D3ScheduleTimelinedesign system
Inspection & Maintenance
Maintenance schedule (§6.1)
Year 0
1
2
3
4
Annually
Functionality Testing
Full functionality test of system; the solenoid unit shall be activated.
2 years
Basic Unit Maintenance
Replace Piston O-ring and unit spring.
4 years
Full Unit Maintenance
Replace Unit Plate Gasket, Piston O-ring, Piston Gasket and Unit Spring.
Source: document §6.1 Maintenance schedule p.22
D4Do / Don't
Best practice
Starting the pump
Do
Fill the pilot chamber and upstream piping with water first.
Confirm gauge pressures before handover.
Don't
Start a pump against a dry pilot chamber, air hammer can invalidate the unit.
Close the unit while the pump is still running.
Source: document section 5, Warnings, p.16
D5Step plan (vertical)reused card
Commissioning
A guided step plan
Commissioning
A100 · 4 steps
1
Fill upstream piping
Fill the pilot chamber with water first
2
Start the pump
Only once the chamber is confirmed full
3
Verify pressures
Inlet and primary outlet gauges
4
Sign off & record
Complete the commissioning record
Progress1 of 4 done
Reuses the VaultCard visual as an output step plan. Source: document §5 commissioning.
Category E
Emphasis & callouts
Five tones for the moments that need to stand out: warning, danger, information, success and note.
E1Calloutdesign system
Installation
Callout
Warning
The piping system upstream the unit, including the pilot chamber, shall be filled with water prior to starting any pump.
Info
Pressure gauges are located at the unit inlet and the primary unit outlet.
Extended tonesbeyond the two system variants
Danger
The pump shall be stopped prior to closing the unit, as this can cause hydraulic shock into the system and invalidate the functionality of the unit.
Confirmed
Any damaged components found on arrival shall be returned to the manufacturer before installation.
Note
A Model CEL Unit Wrench is required to change the Unit Plate Gasket on larger sizes. See section 11.
Source: document sections 5 and 6, pp.16-22
Category F
Werkvormen · interactive learning
The activities that turn knowledge into practice. Each one is fully working: try them. All questions use real A100 facts. Add a new werkvorm by copying a block; the handlers wire up automatically.
F1Multiple choiceinteractive
QWhat is the maximum working pressure of the A100 control unit?
Pick one answer.
F2Multiple selectinteractive
QWhich parts are replaced during a Full Unit Maintenance (every 4 years)?
Select all that apply, then check.
F3True / Falseinteractive
QThe piping upstream of the unit must be filled with water before starting any pump.
F4Sleepvraag · drag & dropinteractive
QDrag each value onto the specification it belongs to.
Drag a chip into a slot. You can drag it back out.
AISI 316L
16 bar
24 VDC
EPDM
Max working pressure
Body material
Electrical activation
Gasket material
F5Hotspotvraaginteractive
QFind the parts on the unit. Click each marker.
Click a marker to reveal the part.
0 of 4 found
F6Invulvraag · fill in the blankinteractive
QComplete the sentence.
The unit body is made of stainless steel AISI , and the unit is factory tested at bar.
F7Sorteervraag · orderinteractive
QPut the preliminary inspection steps in the right order.
Use the arrows to reorder, then check.
::Inspection of product specifications
::Visual inspection of package integrity
::Correct storage until installation
F8Koppelvraag · matchinginteractive
QMatch each source document to what it covers.
Click a document on the left, then its match on the right.
Document
Covers
F9Flip cardsinteractive
QFlip each card to reveal the fact.
Working pressure
Tap to reveal
Maximum 16 bar working pressure. Factory tested at 24 bar.
Material
Tap to reveal
Body in stainless steel AISI 316L. Gaskets in EPDM.
Full maintenance
Tap to reveal
Every 4 years: replace plate gasket, piston O-ring, piston gasket and spring.
Category G
E-learning forms · Datacenters module
The richer, module-style forms taken from the Datacenters Awareness e-learning: a learning-objectives opener, image banners, media columns, icon cards, "did you know" prompts, big comparison numbers, insight panels, a lettered quiz and a progress-tracking accordion. Rendered in the shared library brand language.
G1Learning-objectives hero
Module 1 · Awareness
Understanding the product and its role in fire protection
Discover why low pressure process safety technology is transforming fire protection in data centers, and what makes it fundamentally different from conventional suppression.
Understand the product's core function
Recognise why this technology exists
Identify key performance goals
Learn how it differs from conventional systems
G2Image banner
Chapter 2
What is a data center?
G3Two-column with media
The environment
A critical digital infrastructure
A data center houses IT equipment used to collect, process and store data. Thousands of servers and cables create massive power density and a significant risk of overheating, making fire protection a mission-critical priority.
Content Hub in action
G4Icon cards
Core function
How process safety works
Detect & respond
Detects developing fire conditions and activates suppression via primary control units.
Interact with heat
Tiny droplets absorb heat energy through rapid evaporation, an enormous surface area for maximum cooling.
Reduce intensity
Rapidly lowers fire intensity and temperature. Effective at air velocities up to 8 m/s.
Limit spread
Zone-based activation confines the fire to its origin, minimising water exposure elsewhere.
G5Did you know
Did you know?
A single process safety droplet can absorb 2,260 kJ/kg when it evaporates, over 500 times more energy than simply heating the same water by 1°C. This is why mist is so effective with so little water.
G6Comparison stat strip
Low pressure process safety vs alternatives
The numbers that matter
90%
Up to 90% less water than traditional sprinkler systems.
70%
Reduced CO2 emissions vs conventional fire protection.
Fire protection is evolving from extinguishing fires to controlling fire impact. In data centers the goal is not just to stop the flame, but to preserve the infrastructure, protect people and ensure business continuity.
G8Quote block
“
The suppression method can be as important as the fire itself. Choosing the wrong technology may cause more damage than the fire it was designed to fight.
G9Summary checklist
Module recap
What you learned
Low pressure process safety controls heat and fire at just 8 bar, using only potable water.
It uses 60-90% less water than conventional sprinklers, protecting servers from water damage.
Dedicated sensor types protect server halls, sub floors, battery rooms and offices.
The system is FM 5560, NFPA 750 and EN 14972 compliant.
G10E-learning quiz · letteredinteractive
?Quick check: why is modern fire suppression evaluated beyond just extinguishing flames?
G11Accordion, progress-trackedinteractive
ExploreAreas within a data center
Click each area to learn why it needs dedicated fire protection. Opened items get a check.
Rows of server racks generate significant heat and electrical load. process safety protects above and below raised floors with minimal water damage. The B200 pendent sensor protects above raised floors; the B200 upright sensor protects below.
Dense cable routing below raised floors creates hidden fire risks. Low pressure process safety reaches these concealed spaces while minimising exposure to sensitive cabling, tested at air velocities up to 8 m/s.
Li-ion batteries introduce unique fire risks including thermal runaway. The system is FM approved for Li-ion battery protection; the B200 sensor is designed for these environments.
Category H
Media · images & video
Ways to place imagery and video in a deliverable: a single figure, the same image in several placements, a gallery, a full-bleed hero, a before/after slider, a video player and an ambient looping video. Images and clips below are placeholders from free sources (Unsplash, placehold.co, W3C / test-videos sample clips); swap them for approved Content Hub assets in production.
H1Figure with caption
Server hall protection
A single figure
Figure 1Server hall protected by low pressure process safety. Placeholder image.
Image: Unsplash (placeholder). Replace with an approved Content Hub photo.
H2Image placements, variants
One image, many placements
Placement variants
Full width
Inset, beside text
An inset image sits beside the prose, useful when the figure supports the text rather than leading it. Caption and source can sit underneath.
Framed
Circular / spot
A circular crop suits a component detail, an author portrait, or a spot illustration inside running text.
Thumbnail row
H3Image gallery
Gallery
Image grid
H4Full-bleed image hero
Data center fire protection
Suppression that protects the room, not just stops the flame
H5Before / after sliderinteractive
Compare
Before & after
BeforeAfter
Drag the handle. Demo uses one placeholder image with a filter for the "before" side.
H6Video playerinteractive
Watch
Video player
VideoFull-scale fire test walkthrough. Placeholder clip with a poster image; controls, scrubbing and fullscreen are native.
H7Ambient looping video
In action
A muted, looping clip beside the text
An ambient video autoplays muted and loops, adding motion without sound. Ideal as a supporting visual next to a short explanation, exactly as used in the Datacenters module.
Content Hub in action
H8Captioned media hero (video-ready)
Video
Where it protects
Mission-critical data centre suites
A full-width image or video with a gradient caption band and an optional live-media badge (Video / Ambient loop). It opens or punctuates a section in the generated Field Reference, Interactive Explainer and PowerPoint. When a video asset is available the same slot renders an inline player or a muted, looping ambient clip.
Category I
More layouts
Extra building blocks: tabbed content, an icon feature list, trend statistics and a testimonial.
I1Tabsinteractive
By area
Tabbed content
Rows of server racks generate significant heat. The B200 pendent sensor protects above raised floors, while the B200 upright sensor protects below, with minimal water damage.
Dense cable routing below raised floors creates hidden fire risks. Low pressure process safety reaches concealed spaces effectively, tested at air velocities up to 8 m/s.
Li-ion batteries introduce unique risks including thermal runaway. The system is FM approved for Li-ion protection; the B200 sensor is designed for these environments.
I2Feature list with icons
Why process safety
Key advantages
Minimal water
60 to 90% less water than conventional sprinklers, protecting servers from water damage.
Clean and safe
Only potable water, no chemicals or pressurised gas cylinders, safe for people and the environment.
Approved
Compliant with FM 5560, NFPA 750 and EN 14972, tested and certified.
I3Trend statistics
Impact
Versus conventional systems
90%
Water used
less water
70%
CO2 emissions
reduced
8 m/s
Air velocity tested
performance
I4Testimonial
process safety gave us data-center-grade protection without the water damage risk of traditional sprinklers. The system paid for itself the first time it mattered.
Placeholder name
Facilities lead, sample data center
Illustrative testimonial and avatar (placeholder). Replace with an approved customer quote.
Didactics
Didactic framework for learning output
The locked-in learning-design choices behind every e-learning module, explainer and field reference. Grounded in 23 research-backed principles (Mayer's Multimedia Learning, Merrill's First Principles, Cognitive Load Theory, ARCS, and quiz-design evidence). When the Generate wizard builds interactive output, these rules decide how much goes on a screen, how often a learner interacts, and how questions and feedback are written. Rendered live from didactic-data.js, the same framework the learning modules use.
Didactics
Screen rules at a glance
The practical, testable rules every generated learning screen is checked against.
Context Hub
