Engineering · Design Systems

Mobile-First Enterprise UI: Redesigning the DeryCode Website

We just completed a full redesign of the DeryCode website. The previous version had visual effects — animated light bars, floating orbs, a code editor hero — that looked impressive on desktop but hurt performance and readability on mobile. The new design strips everything back to a mobile-first enterprise system. Here's what we did and why.

The Starting Point

The old site was built desktop-first. It used gold and purple colors with elaborate animations — gradient shifts, aurora text effects, and a glassmorphism code panel in the hero. On desktop, it looked distinctive. On mobile, the animations caused jank, the text was hard to read, and the hero panel consumed most of the viewport without conveying useful information. More importantly, the design didn't communicate "enterprise technology company" — it communicated "creative portfolio."

Design Principles for the Redesign

• Mobile-first: Base CSS targets mobile screens. min-width media queries progressively enhance for tablet, desktop, and large displays. No more "shrink the desktop version for mobile."
• Enterprise palette: Deep navy background (#070B14), blue primary (#4F7CFF), cyan accent (#22D3EE). The same visual language used by enterprise technology companies globally.
• Typography: Inter for body text, Inter Tight for display headings. Two weights of the same family — consistent, legible, and fast-loading.
• Performance over decoration: Removed all CSS animations that don't serve function. The hero has a lightweight Canvas network visualization instead of multiple animated blobs.
• Touch targets: All interactive elements have a minimum 44-48px touch target, meeting WCAG guidelines for mobile accessibility.

The Mobile-First CSS Architecture

The key change: base styles target mobile, and media queries use min-width to scale up. This means the default CSS is already mobile-optimized. At 640px (tablet), grids go two-column. At 1024px (desktop), the full nav appears, the hero splits into a side-by-side layout, and grids expand to 3-4 columns. At 1440px+ and 1920px+, the container width and font sizes scale further.

This approach is opposite to the old method (desktop-first with max-width breakpoints to reduce for mobile). Mobile-first means the mobile experience is intentional and designed, not a degraded version of desktop.

Navigation Redesign

The old site had 11 navigation items — Home, About, Founder, FAQ, Services, Portfolio, Partners, Blog, Docs, Book a Call, Contact. That's too many for a desktop nav and impossible on mobile. The new nav has six items: Solutions, Industries, Technology, Projects, Company, Insights — plus a "Let's Talk" CTA button. On mobile, a hamburger opens a full-screen overlay with large touch targets.

The Hero

Instead of a glassmorphism code panel, the new hero uses a Canvas-based network visualization — interconnected nodes representing AI, Software, Blockchain, Data, Cloud, and Web3. On mobile, the visual stacks below the headline. On desktop, it sits side-by-side. The visualization is lightweight (a single Canvas element with a few dozen animated nodes) and communicates "connected systems" without text.

Design Tokens

Everything runs through CSS custom properties — colors, spacing, typography, radii, transitions. This makes it trivial to maintain consistency across the homepage and all 26 sub-pages. The same tokens are defined in two CSS files: style.css for the homepage and style.min.css for sub-pages, with identical variable names.

Results

The new site loads faster (fewer animations, smaller CSS), reads better on mobile (larger text, proper touch targets), and looks like what it is — an enterprise technology company. The total CSS for the homepage is under 1,000 lines, and the sub-page CSS is 257 lines. Every page passes the "would a CTO trust this company" test.