Fluent Design System for the web

An eloquent design system for a complex world

Now’s the time for bold, scalable, universal design. This is a transformation. A step into the future of sensory experiences. The world is at our fingertips – join Microsoft in building a design evolution.

A rapid evolution is underway in user interfaces. The spectrum of dimensionality expands from zero to four. We speak, type, ink, touch, and gaze. We’re engaged and immersed. We’re surrounded by devices, interactions, and experiences. To translate across dimensions and contexts, we need to solve for a sensory digital world, and be fluent in our designs.

More coming soon

I wondered whether it would be possible to bring Microsoft's Fluent Design System to the web, this is my progress to date. This is very much a work in progress! I plan to add more Fluent inspired designs/implementations soon.

Right now this only really works on Windows 10 and after a resize will require a refresh.

I have a long list of known issues with this already and will be adding this to GitHub to share the code and allow others to help contribute to it :)

This is built upon work by Fabio Sasso