Phase 0 · Design System
The Institutional Architect system — tokens, components, motion, and responsive behavior for Onectus 2.0.
The blueprintof trust.
/ A — Brand Foundation
The blueprint of trust.
Tokens, type, and structure that make Onectus read as an institutional engineering firm — not a marketplace or a startup.
Color palette
Ink
#0B1220Primary dark surface & text
Midnight
#131C2BSecondary dark surface
Paper
#F7F5EFPrimary light surface (~65–70%)
White
#FFFFFFCard & elevated surfaces
Stone
#E8E5DEStructural hairlines & borders
Slate
#667085Muted & secondary text
Cobalt
#2457E6Purposeful interactive emphasis
Copper
#C86B3CSignature accent — used sparingly
Surface distribution
Copper appears only as a signature hairline, node, or status dot — never as a surface.
Logo system — authentic mark
The supplied original lockup (deep ink) is the source of truth. Dark surfaces use a filter-derived white treatment; monochrome ink and white variants cover one-color reproduction. Geometry is never altered.
Typography scale
Engineering capability
Institutional technology
Complex platforms, delivered with rigour.
Specialist engineers for high-impact capabilities.
Specialist engineering talent, complex software delivery, and strategic technology partnerships.
We staff and deliver against difficult problems — the kind that require senior judgement, not just headcount.
Engineering · Software · Ventures
Inter Tight (sans) carries the corporate voice; Fraunces (display serif) is reserved for editorial headlines. Both cover English, German, and Dutch character sets.
Spacing rhythm — 8px base
Bilateral grid — 12 columns
Responsive breakpoints
Radii
Elevation
Iconography — lucide, 1.6 stroke
Imagery & illustration principles
Structural
High-fidelity 3D renderings & macro photography. Single-source gallery lighting, hard shadows.
Pristine
Orderly, engineered subjects — silicon, architecture, raw materials. No smiling stock people.
Disciplined
Palette-locked. Cobalt and copper as accents only. No generic tech-blue gradients.
/ B — Reusable Components
Built from the same blueprint.
Shared tokens drive every state — hover, focus, disabled, loading — so the production site stays consistent.
Buttons
Navigation, dropdown & language selector
Cards — defined by hairlines, not boxes
Dedicated teams
Embedded engineering teams that operate as part of your organisation.
Read more →Platform delivery
Design, build, and modernize sophisticated software platforms.
Read more →Venture partnership
Engineering for equity, funding, or combinations of both.
Read more →Badges
Tabs
Accordion
Inputs, select, textarea & form
Modal
Notifications
Your request was received.
A field needs your attention.
Engagement confirmed.
Loading states
/ C — Marketing Components
Assembled for a serious company.
The building blocks of the production homepage — each one composable and localization-ready.
Hero — asymmetric editorial
An international engineering company for serious software work.
We build engineering teams. And technology companies.
Service presentation — pillar trio
Teams
Specialist staff augmentation and dedicated teams for strategic engineering priorities.
Explore →Build
Design, delivery, and modernization of sophisticated platforms — plus our own ventures.
Explore →Invest
Selective investment through capital, engineering involvement, and equity participation.
Explore →Case-study preview — dossier
Atolls
A complex software engineering programme across architecture, delivery, and modernization.
Service
Platform delivery
Scope
Architecture + build
Process / timeline
Discover
Map problem & constraints.
Architect
Design the system.
Deliver
Working software in cadence.
Partner
Stay for scale & ventures.
Credibility module
Operating model
Talent + delivery + venture
Geographies
International, remote-first
Engagement
Dedicated teams & projects
Standards
Senior engineering judgement
Testimonial layout
“Onectus brought the senior judgement a difficult platform rebuild actually required — not just headcount.”
Technology lead
Enterprise client · placeholder
Corporate CTA
Build what comes next.
Talent, delivery, and judgement — for enterprises and ambitious founders.
Editorial / blog preview
Why high-impact engineering calls for senior judgement
ReadModernizing a platform without a rewrite
ReadEngineering for equity, done seriously
Read/ D — Motion Lab
Motion that informs, never decorates.
Every animation below is live and replayable. All respect prefers-reduced-motion and favour GPU-friendly transform/opacity.
01 · Hero entrance choreography
We buildengineering teams.And technology companies.
Staggered mask reveal — headline, copy, CTA.
02 · Scroll-triggered reveals
Scroll the page — these stagger in as they enter the viewport.
03 · Architectural motion graphics
Blueprint lines draw on enter; nodes resolve last.
04 · Premium hover interactions
Platform delivery
Buttons lift; cards reveal a copper hairline.
05 · Section transition — light/dark
A dampened, replayable wipe — never an infinite loop.
06 · Case-study image transition
Atolls
Software · Delivery
07 · Micro-interactions
/ E — Responsive Showcase
One system, every surface.
The hero and core components adapt from desktop to mobile without losing the institutional composure.
Hero across breakpoints
EN · DE · NL/ 01
Engineering capability for what comes next.
Talent
Software
Ventures
EN · DE · NL/ 01
Engineering capability for what comes next.
Talent
Software
Ventures
EN · DE · NL/ 01
Engineering capability for what comes next.
Talent
Software
Ventures
/ 01
Engineering capability for what comes next.
Talent
Software
Ventures
Localization readiness
English
Engineering capability for what comes next.
Longer German strings are accommodated — no fixed widths truncate translated copy.
Deutsch
Engineering-Kompetenz für das, was als Nächstes kommt.
Longer German strings are accommodated — no fixed widths truncate translated copy.
Nederlands
Engineering-capaciteit voor wat er daarna komt.
Longer German strings are accommodated — no fixed widths truncate translated copy.
Touch & accessibility
Touch-first
Pillars expand on tap for touch devices; hover-only states degrade gracefully. Minimum 44px hit targets.
Accessible by default
Keyboard-focusable controls with visible cobalt focus rings; WCAG AA contrast on all text; motion respects reduced-motion preferences.