The Brief
Akaar Technologies was founded by Visvesvaryya Neelakantan — ex-Director at Walmart Global Tech, ex-CTO at Head Digital Works, with 25+ years of Fortune 500 leadership across companies like Infosys, Wipro, and HCL. The company provides premium B2B tech consulting for MSMEs and startups: product development (Build-Operate-Transfer model), digital transformation, strategic consulting, and fractional CTO services. The website needed to communicate executive credibility and premium positioning without being stodgy or corporate-generic. The name "Akaar" means form or shape in Sanskrit — and the design had to embody that concept through geometric precision, architectural structure, and visual intelligence. More than a brochure site, this needed to be a content platform. Blog posts establishing thought leadership, job listings attracting talent, and case studies demonstrating delivery capability — all managed through a CMS that gives the founder complete content autonomy without developer dependency. The design language had to walk a razor-thin line: premium enough for Fortune 500 decision-makers evaluating a consulting partner, approachable enough for MSME founders exploring their first technology engagement.
The Challenge
Translating 25 years of executive credibility into visual design is harder than it sounds. The easy path is corporate minimalism — dark backgrounds, sans-serif type, stock photos of handshakes in conference rooms. But that communicates "we look like every other consulting firm," not "we are led by someone who directed technology at Walmart Global." The design needed to feel earned, not purchased. It needed the gravitas of deep experience expressed through precision and restraint, not through borrowed authority. The second challenge was content independence. The founder needed to publish blog posts, manage job listings, and update case studies without touching code or waiting for a developer. This demanded a CMS integration that was powerful enough for structured content (jobs with application fields, case studies with metrics, blog posts with SEO metadata) but simple enough for a non-technical operator. Keystatic was the answer — a git-based CMS that produces Markdoc content and integrates directly with the Next.js build pipeline. The third challenge was the geometric illustration system. Heavy image assets would bloat page weight and create maintenance burden. We needed a visual language that could be generated from code — SVG patterns, CSS animations, and React components that produce the geometric precision the "Akaar" brand demands without a single raster image dependency. Finally, the contact system needed to serve dual purposes: general business inquiries with reCAPTCHA v3 protection, and job applications with drag-and-drop file upload and URL parameter pre-filling from the careers page.
Translating executive credibility into visual design without corporate clichés
Keystatic CMS integration for three content collections with founder-operated publishing
Code-generated geometric illustration system replacing heavy image assets
reCAPTCHA-protected contact with dual-purpose form (inquiries + job applications)
The Approach
The design process started with a deep study of the founder's career trajectory and the aesthetic sensibilities of the organizations he led. The Infosys campus architecture — clean lines, geometric precision, institutional confidence — became a key reference point. We distilled this into a design system we called "Structured Elegance": sharp defined edges (no pill-shaped buttons, no soft corners), architectural shadow hierarchies, and a color palette inspired by midnight precision and brass accents. The technical architecture was built on Next.js 16 with Keystatic CMS, giving the founder a git-based editorial workflow for all content management.
"Structured Elegance" Design System
The design system is built around sharp, defined edges — border-radius capped at 4px across all components, never pills or circles. DM Sans provides the typographic foundation: geometric, clean, and highly legible. The color palette uses a Midnight/Brass combination: deep navy (#0a1628) for authority, ocean blue (#2563eb) for trust, and antique brass (#c8956c) for warmth and premium positioning. The shadow system has four tiers — subtle, medium, pronounced, and dramatic — each using the same color-tinted approach for consistency. Every visual decision reinforces the same message: precision, competence, and measured confidence.
Keystatic CMS Integration
Three content collections — blog posts, job listings, and case studies — are managed through Keystatic with Markdoc content format. Each collection has custom field schemas: posts include SEO metadata, featured images, and category tags; jobs include department, location, employment type, and application instructions; case studies include client name, industry, metrics, and technology tags. The Keystatic admin UI runs alongside the Next.js development server, giving the founder a WYSIWYG-like editing experience that commits directly to the git repository. Content is rendered at build time through the Markdoc pipeline with custom components for callouts, code blocks, and inline metrics.
Geometric Illustration System
Instead of stock photography or heavy illustration assets, we built a library of code-generated geometric visuals. DotGrid renders configurable dot matrix patterns with animation. FloatingShapes produces animated geometric forms (triangles, hexagons, circles) with physics-based movement. NodeNetwork draws interconnected node graphs that evoke technology and systems thinking. GeometricIcon generates iconography from parametric geometry. GradientOrb creates ambient light effects. All components are pure React with CSS/SVG output — zero image dependencies, infinitely scalable, and trivially customizable through props.
Service Architecture Pages
Four service pages — Product Development (Build-Operate-Transfer model), Digital Transformation, Strategic Consulting, and Fractional CTO — each follow a consistent structure: hero with geometric illustration, problem statement, approach description, deliverables grid, and CTA. The Product Development page explains the BOT model where Akaar builds and operates a technical team that eventually transfers to the client. The Fractional CTO page targets startups needing executive technology leadership without a full-time hire. Each page uses structured content components that maintain visual consistency while allowing service-specific messaging.
Contact System with File Upload
The contact form serves two flows: general business inquiries and job applications. reCAPTCHA v3 runs invisibly on form submission, scoring the interaction without CAPTCHA challenges. For job applications, a drag-and-drop file upload accepts resumes (PDF, DOC) with client-side validation for file type and size. The careers page pre-fills URL parameters (position, department) when linking to the contact form, creating a seamless application flow. Form submissions are routed through Resend for email delivery with structured templates that differentiate inquiry types.
Technical Deep Dive
Akaar Technologies' website is an exercise in structured precision — every technical choice reinforces the "Structured Elegance" design philosophy. The architecture combines Next.js 16 with Keystatic CMS for content management, Tailwind CSS v4 for utility-first styling, and a custom component library built on Radix UI primitives. The result is a site that loads fast, renders beautifully, and gives the founder complete content independence.
Keystatic + Markdoc Pipeline
The CMS layer manages three content collections with distinct schemas. Blog posts support title, slug, summary, body (Markdoc), author, published date, featured image, category, and SEO metadata (og:title, og:description, og:image). Job listings include position title, department, location, employment type, salary range (optional), description (Markdoc), requirements, and application deadline. Case studies capture client name, industry, challenge description, solution summary, results metrics, and technology tags. Keystatic generates Markdoc files in the repository, which are processed at build time through a custom pipeline that renders rich content with embedded components — callout boxes, metric cards, and syntax-highlighted code blocks.
Design Token Architecture
The color system uses an OKLch-inspired approach with five primary hues: Midnight (#0a1628), Deep Sea (#0f2847), Ocean (#2563eb), Brass (#c8956c), and Sage (#64748b). Each hue has 10 shade variants generated through consistent lightness scaling. The shadow system uses four tiers with color-tinted shadows (not pure black) for a warmer, more refined depth effect. Border radius is globally constrained to 4px — buttons, cards, inputs, and containers all share this sharp geometric language. Typography uses DM Sans at five scale points with consistent line-height ratios. These tokens are implemented as Tailwind CSS v4 theme extensions, ensuring design consistency across every component.
Geometric Illustration Components
The illustration system consists of five React components that generate visuals from code. DotGrid renders a configurable matrix of animated dots with staggered fade-in and subtle parallax movement. NodeNetwork draws SVG nodes with connecting lines that animate on scroll, creating a dynamic systems diagram effect. FloatingShapes produces CSS-animated geometric forms with configurable count, size range, and animation parameters. GradientOrb generates radial gradient spheres with ambient animation for background depth. GeometricIcon produces parametric icons from geometric primitives. All components accept theme-aware color props and respect the reduced-motion media query for accessibility.
shadcn/ui Customization
Interactive components are built on Radix UI primitives through shadcn/ui, restyled to match the Structured Elegance design system. Buttons have four variants (default, outline, ghost, link) all using the 4px radius and DM Sans typography. Cards have four variants (default, bordered, elevated, interactive) with consistent shadow application. Form elements — inputs, textareas, selects, checkboxes — share the geometric border treatment with focus rings using the Ocean accent color. The Dialog component uses a centered modal with the pronounced shadow tier. Navigation dropdowns use Radix's accessible menu primitives with custom positioning and animation.
Responsive Navigation
The navigation uses a 72px fixed header with scroll-aware state changes — the header gains a backdrop blur and subtle border when the user scrolls past the hero section. Desktop navigation uses 40px spacing between items with Radix dropdown menus for service sub-pages. Mobile navigation opens a full-screen overlay with staggered entrance animations via Framer Motion. The navigation state is managed through a custom hook that handles scroll position tracking, mobile menu toggle, and active route highlighting. The header supports both light and dark page contexts, adjusting its color scheme based on the current section's background.
Key Features
Keystatic Headless CMS
Three content collections (blog, jobs, case studies) with custom schemas, Markdoc content rendering, and a git-based editorial workflow. The founder publishes and manages all content independently through Keystatic's admin interface.
Geometric Illustration System
Five code-generated React components (DotGrid, FloatingShapes, NodeNetwork, GradientOrb, GeometricIcon) that produce the visual language of the brand without any raster image dependencies. Infinitely scalable, theme-aware, and motion-reduced accessible.
Structured Elegance Design
A comprehensive design system built around geometric precision: 4px radius scale, DM Sans typography, Midnight/Brass color palette, four-tier shadow system, and consistent spacing rhythm. Every component reinforces executive credibility through visual restraint.
Careers with File Upload
Job listings managed through Keystatic CMS with a seamless application flow. Careers page links pre-fill contact form parameters. Drag-and-drop file upload accepts resumes with client-side validation. Applications route through Resend with structured email templates.
Blog with Markdoc
Rich blog content rendered through a Markdoc pipeline with custom components for callouts, code blocks, and metric cards. SEO metadata, Open Graph tags, and structured data are generated from Keystatic schema fields at build time.
reCAPTCHA-Protected Contact
Invisible reCAPTCHA v3 scoring on form submission — no CAPTCHA challenges, no friction. The contact form serves both general inquiries and job applications with routing logic based on form context and URL parameters.
The Results
Akaar Technologies' website launched as a premium corporate presence that communicates 25 years of Fortune 500 leadership through design precision, not corporate clichés. The Structured Elegance design system — 4px radius scale, DM Sans typography, Midnight/Brass palette — creates visual authority that matches the founder's executive background. Three Keystatic CMS collections give the founder complete content autonomy: blog posts for thought leadership, job listings for talent acquisition, and case studies for delivery credibility. The geometric illustration system eliminated raster image dependencies entirely, producing the visual richness the brand demands through five code-generated React components. Five service pages (Product Development, Digital Transformation, Consulting, Fractional CTO, and a company overview) present structured content with consistent visual hierarchy. The reCAPTCHA-protected contact system serves dual purposes with seamless routing between business inquiries and job applications. The site achieves sub-2-second page loads with WCAG AA accessibility compliance — premium positioning that performs.