26
Brand System / Direction 04

BRUTALIST Kinetic DIRECTION

Oversized type. Grid-breaking layouts. Controlled chaos. Where fashion-meets-tech and corporate convention goes to die. This is the Complexio that stops people mid-scroll.

Complexio Brand System 2026
BoldConfidentUnexpectedMemorableDisruptiveKineticBrutalistComplexio BoldConfidentUnexpectedMemorableDisruptiveKineticBrutalistComplexio
In brutalist design, typographic contrast is the design. One font isn't a brand system. Two fonts in tension? That's energy.
Manrope Only
TRANSFORMING ENTERPRISE OPERATIONS
Clean. Functional. Professional. But also: expected. Every SaaS company looks like this. It's the safe choice. It communicates competence but not confidence. It works, but it doesn't stop anyone.
Manrope + Playfair Display
TRANSFORMING Enterprise Operations
Now there's tension. Energy. The geometric sans clashes productively with the high-contrast serif. It's what makes magazine covers magnetic and fashion brands unforgettable. Same words. Completely different presence.

Why This Direction Demands Two Fonts

Brutalist Kinetic lives on visual tension. It breaks grids, oversizes elements, creates controlled chaos. But chaos without contrast is just mess. The interplay between Manrope's geometric precision and Playfair Display's ornate high-contrast strokes creates structured disruption — every layout has a push-pull dynamic that keeps eyes moving. This is the exact principle behind the most iconic magazine covers and luxury fashion branding of the last decade.

The tension is the design.
Geometric sans + High-contrast serif = Visual energy

The Backbone vs. The Wow

Think of it this way: Manrope is the skeleton. It provides the clean, modern backbone that makes Complexio feel like a tech company — navigation, buttons, body text, labels, data. Everything structural. Playfair Display is the muscle — the massive italic hero statements, the dramatic pull quotes, the oversized numbers that make people stop. Together they're the difference between a corporate website and a brand that turns heads in a boardroom.

Manrope — The Backbone
Button
Nav Link
Body text, labels, metadata, interface elements, form fields, captions...
Playfair — The Wow
The hero moment.
97%

The Drama Font

  • Hero headlines (especially italic)
  • Dramatic callouts and pull quotes
  • Oversized statistics and numbers
  • Section titles where impact matters
  • Editorial-style feature text
  • Brand statements that need weight

The Backbone Font

  • Navigation and menus
  • Buttons and calls to action
  • Body text and paragraphs
  • Labels, tags, and metadata
  • Form elements and UI text
  • Everything structural and functional

This Direction Especially Benefits From Dual Typography

Of all four directions, Brutalist Kinetic is the one where dual typography isn't just nice to have — it's essential. The entire aesthetic is built on contrast, collision, and unexpected juxtaposition. A single font, no matter how good, creates uniformity. And uniformity is the antithesis of brutalist design. Playfair + Manrope gives every page the internal tension it needs to feel alive, bold, and unmistakably Complexio.

Complexio Red
Primary Brand Color
In the brutalist direction, color is used with maximum impact. The primary red is deployed boldly — full-bleed backgrounds, thick stripes, dramatic accents. The monochrome palette provides the stark contrast that makes the red hit harder.
Black #0A0A0A
Off Black #1A1A1A
Dark Gray #2A2A2A
Mid Gray #666666
Light Gray #E0E0E0
Off White #F2F0ED
White #FFFFFF
Primary Red #FA4A34
Deep Red #D93D2A
Red Tint 15% opacity

Usage Principle

In brutalist design, restraint makes impact. Use the full monochrome range as the foundation. Deploy red with intention — thick ribbons, button fills, accent bars, hover states. When red appears, it should feel deliberate and powerful, never decorative. The ratio: 70% monochrome, 20% red accents, 10% white space.

Playfair Display
Display XL
96px / 900
Disruption
Display LG Italic
72px / 700i
Enterprise Scale
Heading 1
48px / 600i
Intelligent Automation
Heading 2
36px / 600
Beyond the Ordinary
Pull Quote
28px / 400i
The future belongs to those who automate with purpose.
Stat Number
88px / 900
97%
Manrope
Display Sans
72px / 800
COMPLEXIO
Heading Sans
36px / 800
Platform Overview
Subheading
20px / 700
AI-powered document processing at scale
Body
16px / 400
Complexio transforms how enterprises handle complex documentation. Our AI automation platform processes, analyzes, and acts on unstructured data with unprecedented accuracy.
Small / Caption
13px / 600
Processing over 2 million documents monthly across global enterprises
Label
11px / 800
Shipping • Insurance • Energy
Navigation
Buttons
Statistics
97%
Accuracy Rate
2M+
Documents Monthly
40x
Faster Processing
Feature Cards
01
Extraction
Intelligent Document Processing
AI-powered extraction from any document format. Bills of lading, insurance claims, energy contracts.
02
Automation
End-to-End Workflows
From ingestion to action. Automated routing, validation, and downstream integration without manual intervention.
03
Intelligence
Predictive Analytics
Pattern recognition across millions of documents. Surface insights before they become problems.
We don't just process documents. We understand them.
Complexio Brand Voice
Hero Section Mockup
AI Automation Platform
THE FUTURE OF Enterprise Intelligence IS HERE
Request Demo Watch Video
Ribbons cut, cross, and disrupt the layout. They're physical, bold, and unapologetic.
Diagonal Slash
NEW

Breaking the Grid

Corner ribbons create urgency and draw the eye to key content.

Corner Ribbon
COMPLEXIO
Gradient Bands
Woven Grid
01

Cut, Don't Decorate

Ribbons should feel like they're slicing through the layout. They interrupt. They demand attention. They're never subtle or decorative — they're structural.

02

Red Is The Blade

Primary ribbons use #fa4a34. Secondary ribbons use black or white at reduced opacity. The red ribbon is the sharpest visual tool in the system.

03

Physical Weight

Ribbons have thickness: minimum 40px. They should feel like physical objects — strips of material laid across the screen. Think fabric, not lines.

We speak with the confidence of a company that knows it's years ahead. Bold. Direct. Never boring. Never apologetic.

Bold, Not Loud

Confidence comes from substance. We state facts plainly and let the work speak. We don't need exclamation marks or hyperbole — the technology is impressive enough on its own.

Unexpected, Not Random

Every surprise serves a purpose. An unusual layout choice, an unexpected word — they all point back to the core message. Disruption with direction.

Intelligent, Not Academic

We understand complex systems deeply but explain them simply. Enterprise doesn't mean jargon-heavy. The smartest explanation is the clearest one.

Human, Not Corporate

Behind every automated process is a person whose day just got better. We acknowledge the human impact. Real language. Real results. No empty corporate speak.

Voice in Practice

Write this "97% accuracy. Zero manual intervention. Your team focuses on decisions, not data entry."
Not this "Our innovative AI-powered solution leverages cutting-edge technology to deliver best-in-class results for your digital transformation journey."
ShippingInsuranceEnergyLogisticsMaritimeClaimsComplianceEnterprise ShippingInsuranceEnergyLogisticsMaritimeClaimsComplianceEnterprise
One system. Three industries. Zero compromise.
S
Shipping & Maritime
Navigate Complexity at Scale
Bills of lading, customs declarations, port documentation. Thousands of documents per vessel, processed in minutes not days.
40x
Faster Document Processing
I
Insurance
Claims Without the Chaos
From first notice of loss to settlement. Automated extraction, validation, and routing that turns weeks into hours.
85%
Reduction in Processing Time
E
Energy
Power Through Complexity
Contracts, compliance documents, regulatory filings. Automated intelligence for an industry where precision is non-negotiable.
2M+
Documents Processed Monthly

THE BRAND IN Action

Each industry page follows the same brutalist grid system but adapts the visual weight and ribbon placement to reflect the sector's character. Shipping gets heavy horizontal bands (containers, stacking). Insurance gets diagonal slashes (risk, disruption). Energy gets bold vertical stripes (pipelines, infrastructure).

Header + Ribbon
Hero
Stats
CTA Block