Designing the UI system behind Visionar.ai
A brand and web UI for a Berlin AI strategy consultancy, built to read as a confident strategic guide instead of another cold tech interface.
Not another AI consultancy
Visionar.ai sells AI strategy to executives, so the UI had to carry that weight. We dropped the generic “techie” tropes and designed AI as a guide standing beside the room, never a replacement for the people in it.
Three decisions that shaped the strategy
We used AI to throw ideas at the wall fast, but every call on what stuck was ours.
A wireframe orb anchors the hero: rings, a crosshair, a pulsing core. It stands in for vision and oversight without drawing a literal eye.
The layout moves sideways, not down, so the site feels like a pitch deck instead of another scrolling landing page.
The orb: eyes of the visionary
The hero runs on an animated eye motif we called the “Eyes of Visionary,” standing in for the consultancy watching over a client’s strategy. We didn’t draw an actual eye. It’s a wireframe orb: concentric rings, a crosshair pair, a pulsing core, closer to precision instrumentation than a literal eyeball.
An AI consultancy’s hero visual had to feel like it was watching and guiding, not surveilling. Tying its tilt to the cursor and its rotation to scroll progress keeps it alive and responsive rather than decorative, so the mark reads as attentive rather than static.
Green ground, green dark, one lime
We tried three directions first and killed all of them. Orange read too classic. Blue and white looked like an insurance company. Black and white with neon gradients felt dated, like something from five years ago. What stuck was a deep forest green base with charcoal and neutral containers, plus one high-contrast lime accent, considered instead of loud.
The original file weighed two palettes. Option A carried five values including Forest Green #2D5016 alongside an acid neon; the file’s own annotation reads “two signatures compete.” Option B dropped the green, on the reasoning that “one signature does the heavy lifting.”
Building the site replaced the teal with #0F3D2E and softened the neon to #A3E635. Green-on-green is quieter, more European, less startup-neon, and it reads as considered rather than loud, which is the entire positioning. Contrast improved too: 10.7:1 on the ground against the teal’s 8.1.
This is the palette. The Figma’s teal and acid are historical.
Lime on ink, or ink on lime: the primary button, the active rail beat, an italic clause on a dark beat.
Lime as geometry: the 8px eyebrow dot, the 2px progress bar, an underline, a stat number.
Ink for every heading, icon stroke and dark beat.
Muted grey for chrome only: eyebrows, corner ticks, roles, dividers.
Warm off-white for the ground; --surface only for inset cards.
Lime text on the light ground: 1.3:1 contrast, invisible.
Lime as a section background. It stops reading as a signature.
Muted grey for anything a reader must read.
Pure white. The ground is warm; #FFFFFF reads as a bug.
Gradients. There are none. Depth comes from noise and the two dark beats.
Teal #114B5F or acid #BEFF00, that is the retired palette.
A serif that leans, a sans that squares
Serif headlines: an elegant serif carries every headline, for tradition and credibility.
Sans body: a narrow sans carries everything a reader scans, for speed and clarity.
Mono structure: a third, mono voice labels navigation and micro-tags, so structure stays legible at a glance.
Always “we”: copy says “we,” never “Visionar.ai,” so the brand reads as a person in the room, not a company describing itself.
Roman, then italic: headlines state the subject in roman type, then land the turn in italic.
Numbered offers: every service gets a Syne Mono number instead of a section label.
Plain quantities: offers get quantified in plain terms, like “3 disciplines” or “1 day to your first roadmap.”
Say no: when AI doesn’t fit a client’s problem, the copy says so directly.
One per page. Fluid, capped by character measure rather than pixels, and set tight so two lines read as one mass.
Section headings are roman with the closing clause in italic. On a dark beat that italic clause turns lime. The split is structural, not decorative: it is how every heading in the system lands.
We bring AI into how your team works, day to day, whether that’s the newest frontier models or established European tools.
Colour is --body, never pure black.
Never a full sentence. Uppercase, letter-spaced, always preceded by its mark.
Inter is a deliberate fourth voice, declared as --nav. Its neutrality is the point: wayfinding recedes so the serif and Syne carry the character.
@import '@fontsource/instrument-serif/400.css'; /* + 400-italic */ @import '@fontsource/syne/400.css'; /* + 500 600 700 800 */ @import '@fontsource/syne-mono/400.css'; @import '@fontsource/inter/400.css'; /* + 500 */
Ten font files, zero third-party requests. The source comment reads “GDPR-safe, no requests to Google.” A business selling European data sovereignty cannot phone Mountain View for its typeface: never add a Google Fonts link.
Six parts, exactly as they ship
Clean modular cards, high-contrast dark callouts, pill-shaped tags, and dual-state CTA buttons: a small, disciplined component library built to hold up across every beat of the site.
The site is a horizontal story
The orb travels with the reader across the story. Five beats unfold sideways instead of scrolling down, so the site moves like a pitch deck rather than a landing page.
The system, as it ships
Built with lightweight fonts and a modular web-slice architecture for fast page loads. Explore the shipped site below.
Accessible from the start
Default visibility: content is visible by default. Hidden start-states only apply under body.is-animated, once JavaScript confirms it will animate.
No-JS support: visitors without JavaScript enabled see all content directly.
Reduced motion: under prefers-reduced-motion, all animations turn off, reveals are forced to visible, and parallax effects are cleared.
Orb and smoothing adjustments: the orb freezes at a static tilt that reflects scroll discretely, while the smoothing lerp is set to 1.
WCAG AAA contrast: text colors across the shared components were darkened until every pairing cleared AAA’s 7:1 contrast ratio, not just AA’s 4.5:1.
What this project reinforced
AI is a fast way to explore options. It is also how three different attempts land on the same generic layout. We threw those out and rebuilt by hand, with a human making every final call.
One ground, one ink, one chrome grey, one signature lime. Four colors, held tight, read as more confident than a wider, louder palette would have.
A small modular system, wordmark, buttons, tags, cards, shipped as lightweight web slices, kept the build fast without cutting corners on craft.