Moon Design System - Set of UI components built with Surface UI library

Hi everyone!

I’m thrilled to announce a huge thing. We have been developing Elixir Moon Design System for quite a while. We are finally ready to Open Source Moon DS written in Elixir language today.

Isn’t it outstanding?! We are presenting the Design System to the Elixir world. Our goal is to make Elixir Moon DS stunning and mature.

The main idea behind Moon Design System is to provide an easy-to-use tool for building beautiful front-ends fast. We have dedicated designers and developers in our team. Despite that, we are welcoming you guys to participate. If you’ve found a bug, or have an idea about how to improve our product and simplify your life as a developer, don’t hesitate to ping us either on Github or here.

Truly yours,
Moon Design System team


Congratulations and best wishes.
Components will stay in surface only or is there a plan to port to LiveView 0.18 compatible components?

Nice to see Mr Feynman as part as the team, but you forgot to mention who is the necromancer.


Good, good catch))) Text is more relevant

1 Like

I love to see Surface UI components :slight_smile:

Do your components have functionalities? Like sorting in tables and such.

What’s the reason you call it a “design system”?

1 Like

If you’re open to some criticism of the site (not the library, which I’m sure is great), I wonder if it’s a great endorsement for a UI/UX system.

You’ve got a card literally covering up some text about UX that requires the user find the horizontal scrollbar to uncover. Those colored cards seem to just be taking up too much space for the information they offer and get in the way of other elements.

The intro text could use some English polish as well:

Moon is Yolo Group product design system that helps us maintain the integrity of their user experience and optimize design and development resources.

The above has a confusing pair of pronouns without antecedents. Who is “us” referring to? Who is the “they” that “their” is referring to? I would suggest something like

Moon is the Yolo Group product design system that helps developers maintain the integrity of their user experience while optimizing design and development resources.

Or perhaps

The Yolo Group presents our Moon Design System to help developers improve the quality and consistency of the user experience while optimizing design and development resources.


Further to @stevensonmt 's feedback. On mobile, you shouldn’t really be able to scroll to the right half the page width to reveal blank space. Nor should you have a horizontally scrolling section that isn’t obvious it is a horizontally scrolling section.

The settings menu displays a row of random icons with no indication of what they do, except dark mode, with no border around the menus so it displays half over content. The settings button should probably have a white bg, not transparent.

Nice colours and shapes :+1:

1 Like

Great to see comprehensive component library for Elixir. Looks amazing.
I can’t use it though, cause it builds on surface, we only use LV. Are there plans to port to LV when it absorbs the relevant surface features?

We mainly use Surface, so Surface is our development tool and LiveView version, that is supported by Surface, will be supported by us.

Surface components can be used from LiveView:

I have created also task Add example how to use Surface components from from LiveView · Issue #360 · coingaming/moon · GitHub and will update documents, how to do this.


Moon started from Internal project that was opensourced. We have Tables, but not in Moon. Will be moved into Moon in few days.

The DatePicker component isn’t working in the demo, throws a Not Found error. Otherwise, how would one go about adding it to a Phoenix project? How’s the assets bundling done?

sfusato, thanks for pointing the bug out. We are working every day on developing Moon DS and fixing bugs. And now we’ve set your bug in our sprint.

The “Components >> Text input” on the demo site for “Date Time” has an issue. If you set the focus into the field, and start typing the “2” key, the resulting date/time value is

22.02.222222 22:22:22

The year part does not seem to react correctly.

Hi! That’s a good catch, thank you! Already made a ticket

interesting and thanks

Tailwind or Bulma?

We use Tailwind for styling all components and the website itself

But for colours, we use this named approach, called Dragon Ball Z. So, that’s why you may see bulma and gohan. We don’t use native Tailwind’s colours.

You may want to revisit your “barely visible gray on darker gray” approach for so much of the design.

I’m 20/20 vision and I struggle to read most of the text on this page


Same here. Some of these are actually active and clickable?


Hi @dmitriid! Thanks for your feedback. That totally makes sense. Will be fixed.

1 Like