A live catalogue of the visual elements used on Aergent.nl. Each specimen names the style, explains its role and renders the production treatment.
Reusable page compositions extracted from the live homepage—not screenshots, but rules for arranging proposition, explanation and proof.
Section / Atmospheric propositionUse for the opening thesis. One dominant proposition and explanation sit beside a compact status ledger; atmosphere supports the claim without becoming the content.
Two or three sentences define the work, the audience and the practical outcome.
Section / Friction signal railUse directly after a proposition to make the visitor recognise their current situation. Each cell contains one short observable symptom—never a feature or invented metric.
Section / Editorial thesis splitUse for a strategic statement that needs context but no interactive proof. A narrow annotation defines the lens; the wide field carries one headline and one readable explanation.
Supporting copy stays within a readable measure and explains the consequence in concrete language.
Section surfaces / Role-based colour optionsApply colour to the complete section field, not as scattered decoration. Keep the content structure consistent and choose the surface by its communication role.
--color-signalUse for one strategic interruption or high-priority proposition. Keep the surface rare so it retains force.
--color-accentUse for connected workflows, confirmed progress or a section that explains active operation.
--color-inkUse for control-room content, dense proof and propositions that need a calm, high-trust environment.
--color-paper-2Use for reading-heavy sections, delivery steps and supporting content between stronger color fields.
--color-phase-3 → --color-accent-strongUse for a transition, calculated result or closing section where activity resolves into a clear next step.
Section / Capability evidence matrixUse when several related outcomes need comparison. A shared section proposition leads into a 2×2 evidence matrix; every cell pairs a category, concrete outcome and operational visual.
Keep the section claim outside the cells so each card only has to prove one part of it.
Category-specific evidence and scope.
Category-specific evidence and scope.
Category-specific evidence and scope.
Category-specific evidence and scope.
Section / Input-to-outcome cockpitUse when the visitor can test a claim. Inputs occupy the quieter control side; the outcome side owns the visual hierarchy and explicitly labels illustrative or calculated data.
Illustrative output · values require real input
Section / Delivery runway + proofUse when sequence reduces buyer risk. Four ordered stages show how work progresses; a separate proof row answers commercial concerns without turning the steps into statistics.
Action and expected hand-off.
TimingAction and expected hand-off.
TimingAction and expected hand-off.
TimingAction and expected hand-off.
TimingSection / Technical decision closeUse once, near the end of the page. Restate the desired next step, add two or three confidence points and keep the action hierarchy explicit.
One useful expectation for what happens after contact.
Role-based colour. Teal means operation; acid means decide.
--color-inkPrimary dark operating surface and headline ink.
--color-paper-2Main reading canvas and quiet section background.
--color-paperRaised cards, reports and high-readability content.
--color-accentLive, selected, connected or progressing state.
--color-signalRare decisive signal for actions and priority.
--color-focusKeyboard focus and accessible active outlines.
Futura states the proposition. Roboto Mono reports the machinery.
Display / Hero thesisFutura PT Demi · 900 · tight tracking · used once for the page’s dominant proposition.
Headline / Section propositionFutura PT Demi · 900 · balanced wrap · introduces each major content field.
Title / Component nameFutura PT Demi · 700 · compact hierarchy for cards, controls and list items.
Body / Explanatory copyFutura PT Book · 400–500 · comfortable leading and a constrained reading measure.
Aergent builds software around the way a company already works, replacing repeated hand-offs with one inspectable operating flow.
Label / Machine telemetryRoboto Mono · 700 · uppercase · reports state, index, date, location or measurement.
STATUS / OPERATIONAL / AMS-NL-01
One decisive action, one supporting path and one quiet option.
Button / Decision AcidPrimary action. Acid is reserved for the next decisive step.
Button / Glass SupportSecondary route on a dark operating surface; visibly subordinate to the primary action.
Button / Quiet LinkLow-priority navigation that keeps the surrounding content dominant.
Compact metadata communicates location, state, sequence and evidence.
Eyebrow / Technical textA short factual label above a proposition.
// Operations intelligence
Eyebrow / Technical badgeThe bordered treatment separates metadata from a busy visual field.
// Amsterdam · The Hague //
Status / Live systemTeal is semantic: the system is connected, selected or progressing.
Index / Sequence markerMonospace numbering exposes order without competing with the title.
Operational proof sits beside the proposition instead of below it.
Card / Operational evidenceHomepage work card: signal rail, diagram, indexed category, title and concise proof.
The fragile file becomes a secure application with roles, history and no broken formulas.
Card / Process stepA numbered delivery stage combines action, explanation and timing on one structural rail.
One process, the clearest cost and the lowest risk.
Week 1–2Metric / Proof readoutLarge tabular evidence with a compact mono explanation.
Controls are dense, legible and explicit about active state.
Control / Instrument rangeA labelled range exposes its current value, bounds and keyboard focus.
Panel / Operational resultA raised navy surface combines one dominant outcome with supporting telemetry.
Signal strip / Manual-work flagsA dense horizontal index turns recurring friction into scannable evidence.
The final decision surface combines a strong proposition with restrained proof.
Panel / Technical conversionGradient operating surface, one clear proposition, proof points and two ordered actions.
A useful first assessment from the people who would design and build it.