A bold digital stage for cutting-edge dev talent

UX Design

Industry:

Custom software development & IT services

Timeline:

2 weeks

Impact:

+45% faster development kickoff time after our XD hand-off

Live website

Tablet and phone mock-ups displaying Kalkyl’s dark mode UX across breakpoints

Introduction

A sharp software agency branding and web design project doesn’t always start from zero. Kalkyl, a new dev arm spun out of KUBE Studio, already had its brand mark and colour rules nailed. What they lacked was a dark-mode website layout that felt as slick as their code. They asked Studio Ubique for one thing only: a full UX / UI design package in Adobe XD, complete with custom tech illustrations and motion notes the KUBE devs could turn into Svelte components. Five-week countdown, no scope creep allowed.

The pinch points we had to fix

Blank canvas, ticking repo – Devs had begun scaffolding pages while design was still vapour.
Needle-thin brief – “Dark, techy, premium, go.” Brand identity was locked; our task was to give it legs.
Code-first culture – Any fanciness had to compile clean. Heavy PNG gradients or 3 MB Lotties? Hard pass.

Mobile dashboard and tech-stack wheel illustrated with bespoke custom tech illustrations

The 4 moves that kept everyone in lane

Narrative first, wireframe second – Two-hour workshop → one-sentence promise for the hero:
“We build lean, maintainable software that survives the hype cycle.”
Relume → Adobe XD wireframes – Block-based sitemap that devs could already mirror in markup.
Dark-mode UI with lightweight SVG art – Charcoal (#0F1015) base, lime-neon accent (#A4FF78), pure-CSS gradients.
Developer-ready hand-off – XD design-spec links, an SVG sprite sheet, animation cue cards (duration, easing, max 40 KB).

What “developer-friendly UX UI” looks like in practice

Asset: Colour & spacing tokens

How we packaged it: XD style guide + .scss variables
Why devs cared: Paste-and-go into Svelte project

Asset: Icons & illustrations

How we packaged it: Single SVG sprite (8 KB)
Why devs cared: One HTTP request, retina-proof

Asset: Motion ideas

How we packaged it: Text doc + GIF demo, no code
Why devs cared: Devs choose GSAP or CSS—zero rework

Asset: Fonts

How we packaged it: System stack + Inter headers
Why devs cared: No FOUT, Core-Web-Vitals-safe

Result? 45% faster development kick-off compared with KUBE’s previous green-field builds.

“Your business advantage” cards rendered in a sleek, modular dark mode UX aesthetic

Cybersecurity and open-source benefit cards showcasing neon-edge custom tech illustrations

Testimonial slider and booking calendar built for a smooth Adobe XD hand-off to developers

Roadmap - 5 weeks, pixel-only scope

Week 1: Discovery & sitemap: Mood-board, user stories
Week 2: Wireframes: XD low-fi prototype
Week 3: Dark-mode UI pass: Home + Work pages hi-fi
Week 4: Illustration & motion kit: SVG set, animation notes
Week 5: Final polish & hand-off: XD spec link, assets ZIP

No brand revisions, no dev detours—just clean files on the Friday hand-off call.

Early wins (even before launch)

Zero layout blockers when dev imported assets, every component behaved as specced.
Three fewer design-to-dev back-and-forth cycles versus KUBE’s baseline.
Core design approved in one round, brand team happy, dev team coding by Monday.

Recent projects list in slim mobile frames, emphasising reusable components of the dark mode UX

Conversion-focused contact form styled to match the site’s software agency branding and web design tone

Add-on: the illustration system we crafted

Kalkyl didn’t want off-the-shelf icons; they asked for a mini “graphic design kit” that would scale across pitch decks, blog headers and, later, their SaaS dashboards. Here’s how we baked it into the UX package:

Concept first – each custom tech illustration riffs on the brand’s “calculate, refine, deploy” mantra. Think circuit-board skylines, modular node graphs and a tongue-in-cheek robot casting a green glow.
Vector all the way – we drew everything in Adobe Illustrator, exported as tidy SVGs (< 12 KB each) so devs could inline them or animate paths with CSS.
Reusable colour tokens – line strokes inherit the same charcoal / lime palette as the UI; one variable swap = instant theme shift.
Motion-ready layers – each illustration comes with grouped IDs (background, mid, accent) plus a cue card: “fade-in 300 ms, ease-in-out, max 40 KB.” Engineers plug in GSAP or keyframes, no redlining required.

These graphics aren’t filler; they reinforce Kalkyl’s premium software brand identity while adding near-zero weight to the page. Fold this slice into the design-process section and the case study now tells the full story of our UX + graphic design hand-off.

Lessons you can steal today

Lock the story before you push pixels. A single headline guides every design choice.
Tokenise colours in your design file. Devs paste vars, not hex codes.
Ship motion as intent, not code. Lightweight GIFs + timing specs let engineers pick their own poison.
Dark mode first saves time. Light theme becomes a free skin once contrast is solved.

Cybersecurity shield icon rendered as a luminous custom tech illustration

Security-alert pop-up on a smartphone crafted for a sleek dark mode UX

Menu bar and dropdown UI components visualised for a smooth Adobe XD hand-off to devs

FAQs

Q.1 What did you deliver for Kalkyl

A complete dark-mode UX/UI package in Adobe XD, including wireframes, hi-fi screens, SVG illustration set, motion cue cards, spacing and colour tokens, and a developer-ready hand-off.

Q.2 Why dark mode for this brand

The brief was “dark, techy, premium.” Dark mode fit the brand mark and palette, reduced visual noise, and let neon accents guide focus without heavy assets.

Q.3 How was the hand-off developer-friendly

XD spec links, SCSS tokens, a single SVG sprite (~8 KB), and motion notes with timing and size caps. Engineers could drop assets straight into Svelte with no rework.

Q.4 What about performance and Core Web Vitals

Pure CSS gradients, SVG art only, system font stack with Inter headers, and size limits on animation. No bulky PNGs or multi-MB Lotties.

Q.5 How long did the design scope run

A rapid, design-only engagement from discovery to XD hand-off, delivered on schedule with compressed sprints and no scope creep.

Q.6 Can the illustration system be reused

Yes. Vector SVGs with tokenised colours and layered IDs make them themeable and motion-ready for decks, blog headers, and product UIs.

Your next step

Need UX / UI that your in-house devs can drop straight into the repo? Book a quick 30-min video call, no pressure, plain language. We’ll show you exactly how to package design so your coders start 45 % faster, too.

Back to overview