Built on AI, designed to engage.
Discover the first truly end-to-end learning platform.

Sana Labs
Digital design system

Background

We've been collaborating with Sana Labs since the very beginning, and we take immense pride and satisfaction in witnessing their remarkable evolution as a company. This particular project aimed to elevate their web presence, focusing on both design enhancements and streamlining the overall management for greater efficiency.

Challenge

Thanks to Stockholm Design Lab their current brand identity looks amazing and that of course includes the web design. Our challenge in this project was to preserve the legacy and contemporize the web design and the entire module system for the site. This of course included a migration to one of our favourite tools, Webflow.

Solution

We modernized the website, focusing not only on enhancing its visual appeal but also on improving user-friendliness. We did this by organizing the content better using Webflow and their CMS. We also created a module library and extensive style guides to make everything look and work well together.

Grid of Sana Labs learning platform UI modules: video lessons, live rooms, calendar and team retro cards

Web design, extensive web guidelines and module library created for Sana Labs.

Sana Labs desktop style guide sheet with typography, colour and component specifications

Sana Labs mobile style guide with type scale, colour tokens and component rules

Sana Labs layout grid overlay with rem spacing labels behind a card module

Mobile version of the Sana Labs responsive grid, with rem spacing markers around a content card

Scrolling typography marquee from the Sana Labs digital design system

Sana Labs web page template in greyscale wireframe, showing hero, card grid and form modules

Further Sana Labs page modules in light and dark variants, ending in the site footer

Sana Labs hero module on black with the headline Like magic above an assistant search field

Sana Labs website shown across desktop and mobile devices, from the digital design system.

Sana Labs website shown on mobile devices, from the digital design system.

We always use fluid responsive design. Meaning we use relative units. This allows the layout to adjust proportionally to the screen size.

Overview of full Sana Labs page designs side by side, covering platform, careers and onboarding pages

Laptop showing the Sana Labs Join us live event page with a dark session schedule

On May 31, Sana Labs gathered some of the world’s leading AI experts, executives, and researchers to explore our AI-infused future.

We helped them with some nice product animations.