Developing Esper.io’s Dark‑Mode Website in Record Time

Recent research shows that dark‑mode interfaces are no longer a niche trend. An April 2024 Algoworks report noted that about 60% of users prefer dark‑mode designs on their devices and that dark mode improves the visual appeal and overall user experience. 

Dark‑mode interfaces can reduce eye strain, especially in low‑light conditions, by decreasing blue‑light emission and glare. They also help extend battery life on OLED/AMOLED screens because only lit pixels consume power; Google found that Android phones running dark mode can achieve up to 60 % longer battery life. 

In dim environments, dark backgrounds enhance readability and create strong contrast while lending products a sleek, sophisticated aesthetic that reinforces brand identity. Providing users with a choice between light and dark themes increases satisfaction and conveys innovation.

Planning and Research

When Esper decided to redesign its website in 2025, we knew dark mode was more than a cosmetic change — it had to embody our brand while remaining accessible. Before writing a line of code, we surveyed dark‑mode best practices and accessibility guidelines:

• Accessibility & contrast The Web Content Accessibility Guidelines (WCAG 2.2) require text to maintain a minimum contrast ratio of 4.5:1 against its background, with larger text permitted to drop to 3:1. Adequate light‑dark contrast helps people with low vision or color‑blindness read content. We decided every color pairing would meet or exceed these thresholds.
• Color palette Algoworks' guide recommends using a subdued palette with muted background tones and carefully chosen accent colors, and ensuring high contrast between text and its background. Accent colors should draw attention without overwhelming users.
• Typography and imagery To improve legibility in dark mode, lighter text tones (light grey or off‑white), larger font sizes and slightly heavier weights are suggested. Images should be darkened or provided in separate dark‑themed versions, and icons should use lighter colors to remain visible. UI elements like buttons, forms, and navigation should have distinct colors and borders so that interactive controls remain obvious.

Building the Dark Theme in Webflow

1. Establishing a design system

We started by extracting Esper’s brand colors and mapping them to semantic roles (background, primary accent, secondary accent, text, headings, link, border). Using Webflow’s Global Swatches, we created a color system where each variable could be changed globally. Following the tutorial on CSS variables, we defined light‑theme variables in the :root scope and dark‑theme variables in a [data‑theme="dark"] block. 

For example:

:root {
  --bg-color: #ffffff;
  --font-color: #1a1a1a;
  --primary-color: #00a6ff; /* Esper blue */
  --secondary-color: #14c289; /* Esper green */
}
[data-theme="dark"] {
  --bg-color: #0a0b12;
  --font-color: #f5f5fa;
  --primary-color: #6ea8fe;
  --secondary-color: #3cd39e;
}

Each Webflow component — headings, paragraphs, buttons, cards — referenced these variables through the var() function. Changing the variables automatically propagated the new palette across the site. We ensured that text/background pairings met the WCAG contrast ratios using an online contrast checker and by manually calculating the luminance values.

To make the variables truly useful, we referenced them in our custom CSS. For example, the body, heading and link colors were defined using the var() function so that they change automatically when the root variables change. The DEV Community tutorial shows how to reference variables in CSS:

body {
    background-color: var(--bg-color);
    color: var(--font-color);
    /* other styles */
}
h1 {
    color: var(--secondary-color);
    /* other styles */
}
a {
    color: var(--primary-color);
}

We added this snippet inside a <style> element using Webflow’s custom code settings so that our classes automatically picked up the correct colors for both light and dark themes.

2. Updating typography and UI elements

We increased base font sizes and used slightly heavier weights to improve legibility in the dark palette. Headings used Esper’s proprietary typeface at a larger size, while body text stayed at 16 px. All text colors referenced --font-color or lighter variants (e.g., --subtext-color: rgba(245,245,250,0.7)).

Buttons and links were given vibrant accent colors to draw attention. For example, primary calls‑to‑action such as “Explore MDM Platform” used the --primary-color for the button background on dark mode, with white text and subtle hover shadows. Secondary buttons used the --secondary-color or an outlined style with the color-coded border for high contrast. Form fields and inputs employed semi‑transparent backgrounds with visible outlines so they remained legible.

3. Managing images and icons

One of the trickiest parts of a dark‑mode redesign is imagery. Bright photos or illustrations that looked great on a white background often clashed with dark backgrounds. We processed hero images and product diagrams in XD and Figma, reducing brightness and adding subtle gradients so they blended seamlessly with dark backgrounds. Where feasible, we exported separate dark‑themed assets and loaded them conditionally using Webflow’s conditional visibility. Icons were replaced with light‑colored SVGs, ensuring they contrasted against dark surfaces.

4. Image File Formats

To further optimize visual performance, we adopted the modern AVIFF image format. AVIFF offers superior compression and quality retention compared to traditional formats like JPEG and PNG, especially for complex gradients and semi-transparent overlays often used in dark mode visuals. By serving images in AVIFF, we achieved faster load times, better visual fidelity, and improved overall performance across devices.

5. Rapid implementation strategy

The compressed timeline meant we could not rebuild every page from scratch. Instead, we:

1. Audited existing Webflow classes: We listed all classes that defined colors and text styles and converted them to use CSS variables.
2. Automated global updates: Using Webflow, we swapped hard‑coded colors with variable references. Because CSS variables cascade, the majority of pages updated instantly.
3. Created a design token sheet: We documented every color, spacing unit, and font size for light and dark modes, enabling designers and developers to work in parallel.
4. Iterated on key pages: We focused on high‑traffic pages such as the homepage and product overview first, testing them across devices and browsers. Feedback loops allowed us to adjust contrast, images and micro‑interactions quickly.
5. Used prefers‑color‑scheme and localStorage: Combining CSS media queries with a JavaScript toggle eliminated heavy theme‑switching frameworks, enabling us to deliver the dark theme in a matter of days rather than weeks.
6. Built CMS Collections for dynamic pages: To avoid duplicating layouts for blog posts, product pages, and customer stories, we created Webflow CMS collections with templates that automatically pulled in content. Once a collection page referenced our dark‑mode variables, every new entry inherited the correct styles. This method kept the site scalable and ensured consistency across dynamically generated pages.
7. Used Components for reusable elements: Webflow’s Components allowed us to encapsulate repeated elements such as headers, footers, call‑to‑action sections and feature cards. By converting these items into components, we could update their styling or structure once and have the changes propagate across every instance. This accelerated development and reduced the risk of inconsistent styling.

AI Visibility

To make better content discoverability and compatibility with AI-powered tools, we included a custom llms.txt file at the root of our site. Similar to robots.txt for search engines, llms.txt is designed to guide large language models (LLMs) like GPTs on how to interpret and surface site content. By defining clear access rules and context-enhancing signals within this file, we aimed to improve the accuracy and visibility of our site content when referenced by generative AI systems. This proactive step ensures our dark-mode-optimized visuals and structured content are more easily understood and represented in AI-driven interfaces.

Outcomes

User feedback has been overwhelmingly positive. Visitors appreciate the reduced eye strain, improved readability, and the option to switch themes. Our analytics showed increased average session duration and lower bounce rates on mobile devices, suggesting that dark mode made browsing more comfortable. Internally, the design system we created for the dark mode has made it easier to maintain consistency across new pages and campaigns. Because the color variables are centralized, future iterations or seasonal themes can be rolled out quickly by modifying a handful of values.

Lessons Learned

1. Invest in a token‑based design system Defining colors and typography as variables saved significant time and reduced errors. It also makes theme switching trivial.
2. Follow accessibility guidelines Ensuring at least a 4.5:1 contrast ratio for normal text and 3:1 for large text protects users with low vision and meets WCAG requirements. Always test with real users and contrast checkers.
3. Dark mode is not just inverting colors Muted backgrounds, careful accent colors, adjusted typography, and dark‑optimized images are essential for a polished result.
4. Plan for performance Dark backgrounds can reveal oversaturated images or messy layouts. Audit and optimize images and components early in the redesign.

The transformation of Esper.io to a dark-mode experience exemplifies user-centric design and efficient engineering. By adhering to accessibility standards and leveraging modern CSS, we successfully delivered a sophisticated, high-contrast interface. This project underscores our dedication to high-quality device management solutions and demonstrates that a comprehensive thematic overhaul can be swiftly achieved with a robust design system and clear process, ultimately enhancing user satisfaction and reinforcing brand identity.