Tool sprawl
Several apps hold parts of the same process.
BRAND PLAYGROUND / BROWSER SPECIMENCalm systems.
Calm systems.
Clear progress.
A working environment for testing the BMG Digital identity across type, interface, process and content.
01LEAD
02CRM
03AI
04OFFERTE
One clear connection. One meaningful AI step. No extra tools.
DECISION RULE
Readability > consistency > character > decoration
L1
LANDING / PROBLEM
Recognition before persuasion.
A landing page should first show that it understands the buyer's operational friction.
LAYOUT / EDITORIAL PROBLEMOne large statement creates recognition before the page starts selling.
Manual handovers
Teams copy, check and chase work that should flow.
No operational memory
Important context disappears between systems.
L2
LANDING / CAPABILITIES
Scope with hierarchy.
Capabilities need a dominant system-building card so the page does not look like a generic agency menu.
Custom systems
Dominant card for the core capability: turning messy workflows into usable software.
Automations
Connect tools and remove repeat work.
AI agents
Use AI where judgement or context matters.
Websites
Build conversion paths that connect to operations.
Integrations
Make data move between CRM, inbox, dashboards and apps.
L3
LANDING / USE CASES
Concrete use beats abstract service.
Use cases translate the offer into situations the buyer can recognize inside their own company.
Lead intake
Route new requests, enrich context and prepare follow-up.
CRM hygiene
Keep records updated without forcing the team into admin mode.
Quote prep
Turn intake answers into structured proposal input.
Support triage
Classify messages and escalate what needs a human.
Document search
Make internal knowledge easier to query and reuse.
Ops dashboard
Show process status without chasing people for updates.
L4
LANDING / PROCESS
Method reduces risk.
For AI agents and custom software, the buyer needs to see how decisions will be made before they trust the build.
Discover
Find the process worth improving first.
Structure
Define flow, ownership, data and decision points.
Build
Ship the smallest reliable system that changes the work.
Improve
Measure, simplify and extend after real usage.
L5
CONVERSION / FIRST STEP
A smaller yes before the project.
A focused first-step offer lowers the barrier after the visitor understands the value.
LAYOUT / FIRST STEP OFFER
A narrow centered offer focuses attention after the page has built context.
- Use when the visitor is interested but not ready for a large project.
- Promise a small diagnostic step, not a full transformation.
- Keep the CTA singular and low-friction.
L6
CONVERSION / FAQ
Handle objections before asking again.
FAQ rows work best after the offer and before the final call to action.
Why place FAQ this late?
Because it answers objections after the visitor understands the offer.
Should it be an accordion?
Not yet. Static rows are simpler, faster and easier to scan in the first version.
What objections belong here?
Data, cost, timeline, existing tools, AI safety, maintenance and ownership.
How many questions?
Four to six is enough for a focused landing page.
01
FOUNDATIONS / COLOR
Four colors. Clear roles.
Graphite carries the system. Petrol separates it. Off White keeps it readable. Yellow points to what matters.
color.graphite
Graphite
#303841color.petrol
Deep Petrol
#2E4750color.signal
Signal Yellow
#F6C90Ecolor.offwhite
Off White
#F7F7F7USAGE / SIGNAL
One primary point of emphasis per component group.
02
FOUNDATIONS / TYPOGRAPHY
Decisive above. Readable below.
Space Grotesk creates compact display moments. Manrope handles the work. IBM Plex Mono frames technical detail.
Build what the process needs.
Space Grotesk / BoldBetter systems create room to grow.
Space Grotesk / BoldWe automate where it helps and build software where existing tools stop fitting the work. Every decision starts with the business problem.
Manrope / RegularLEAD -> CRM -> AI -> OFFERTE
IBM Plex Mono / Medium03
FOUNDATIONS / STRUCTURE
An eight-pixel rhythm.
Spacing, columns and visible boundaries give the system its technical character without making it feel cold.
SPACING SCALE / 01-08
01
4px02
8px03
12px04
16px05
24px06
32px07
48px08
64pxAsymmetry comes from column spans, not random offsets.
SURFACE / EDGE
R / 0R / 8
No glass. No gradient. No decorative shadow.
04
COMPONENTS / INTERACTION
Actions with a hierarchy.
One loud action, one quieter alternative and text when a button would add unnecessary weight.
05
COMPONENTS / PROOF + EDITORIAL
Precision meets warmth.
Screenshots prove the work. Editorial sketches make the system human. Neither is decoration.
INBOXCRMQUALIFYPROPOSAL
MANUAL STEPS12 -> 4
One workflow. Fewer handovers.
EDITORIAL SKETCH / PLACEHOLDER
Future hand-drawn graphite artwork
Geen AI om AI te gebruiken. Alleen als het iets oplost.
06
COMPONENTS / PROCESS
Explain the system in five seconds.
Short labels, orthogonal connections and one highlighted step make complex work easy to scan.
01LEAD
02CRM
03AI
04OFFERTE
One clear connection. One meaningful AI step. No extra tools.
DIAGRAM RULES
- Three to six operational nodes.
- One meaningful signal highlight.
- Precise geometry, never hand drawn.
07
APPLICATIONS / SOCIAL
One system. Six formats.
Every format changes the focal element while preserving typography, structure, spacing and restraint.
08
SYSTEM / GUARDRAILS
Character without noise.
The brand is controlled brutalism: structural and direct, but always calm enough to trust.
- Use large, compact headlines.
- Show structure with borders.
- Explain value with evidence.
- Leave enough negative space.
- Gradients and glass surfaces.
- Generic AI imagery.
- Dense SaaS card repetition.
- Decoration without purpose.
L7
CONVERSION / FINAL CTA
Close the page argument.
The final CTA should summarize the next step rather than introduce new information.
LAYOUT / CLOSING CTAEnd with one clear next step, not another list of services.