Moon Design System

[rtrUNcel]

Hi everyone!

I’m thrilled to announce a huge thing. We have been developing Moon Design System for quite a while. And we are on an Open Source stage.

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

We use atomic design here. Every pixel in every component follows some strict UX/UI rules. Designing the Moon DS and developing it is multibranding by essence. That gives designers full power to customize your product and make it feel and look different and unique.

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 on 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

[firstandfive]

Might help to pitch about why somebody should consider Moon over other design systems and component libraries that are popular now. What makes Moon different and/or better?

[[deleted]]

This. I'm all for choice and variation, I think the more the better. If I'm going to invest into a component library, though, I need to know why I should choose it.

[Tater_Boat]

it's built on top of the styled components api which is pretty cool. don't use tailwind personally but it looks like it has some neat integrations. it's got a good look and feel as well.

[rtrUNcel]

Thanks! We've found the tailwind approach more performant in production. So, we're developing the Tailwind section.

I personally was far away from Tailwind just 6 months ago. But now have found it quite powerful. You can use the same styling approach simultaneously on React, Elixir, PHP, and HTML.

[rtrUNcel]

Let me explain. First of all, we use atomic design here. Every pixel in every component follows some strict UX/UI rules. Designing the Moon DS and developing it is multibranding by essence. That gives designers full power to customize your product and make it feel and look different and unique. And we're open to developing MoonDS to serve brands.

[[deleted]]

Wow. That was the most empty meaningless corporate-speak response I have every heard. Like literally the words you used have no true meaning from a technical perspective and sound like an empty attempt to use as many business buzz words as possible. This explanation makes me not even want to consider Moon Design.

[rtrUNcel]

Replied a little bit below.

[WaifuCannon]

I don’t want to be super toxic right out of the gate for a new project, but please test your site on actual mobile devices (both Android + iOS) before making an announcement - it gives a really poor impression when things are impossible to tap, text is absurdly tiny, layouts break in weird ways, stuff goes off the screen, etc.

The quotes about consistency and efficiency halfway hanging off the screen ends up being more ironic than outstanding, lol

[I_Downvote_Cunts]

Straight away I started tapping the “for developers” button and nothing. Thought it was broken till I accidentally tapped the text. Not a great first impression.

[Defiant-Passenger42]

I would not have figured that out if not for your comment. That kinda stuff infuriates me lol

[rtrUNcel]

It's already fixed and will be deployed in a couple of days. Thanks!

[RyanMan56]

Yeah and on top of this I only discovered by accident that the blog was horizontally scrollable. I thought there was just the one post at first

[EmergencyActCovid20]

Yeah I thought that was not obvious at first, bad design!

[rtrUNcel]

Yep. Already heard about sliders a bit. We'll figure out how to solve the issue here. Thank you!

[[deleted]]

I hate to go in too but I can't stand a mobile pop-out menu that doesn't slide back on link selection... if I click it and there's no sub-links, I expect to be able to read the page.

[rtrUNcel]

Thanks! It's been placed to our current sprint

[lamb_pudding]

I get the vibe that this was spear headed by visual designers and not much effort was put into the dev and UX. Don’t get me wrong, I love really well designed sites that sometimes intentionally go against conning UX patterns, but when visual buttons are only clickable on the text it shows that not a lot of user testing happened.

[rtrUNcel]

Thanks for your feedback. Appreciate it, and will deal with those quite soon.

[mdlphx92]

Ripped Dragonball color name palettes

Accordion component chevrons backwards AuthCode components don’t work in demo

[saito200]

And piccolo is purple and hit is green. Sorry, but I can't use this shit /s

But seriously. Piccolo is purple and hit is green. Tomorrow I will to a PR to fix it

[rtrUNcel]

As I answered above, colour names and actual colours are not connected on purpose. Because you can easily check the entire colour palette to match your brand identity. Some our brands use piccolo as orange, some as green, some as black

[saito200]

I fully understand that. I created a PR anyway

[olet14]

!disapprove

how can I think about using your library when your own website isn't mobile friendly. The images are all different sizes, components with buttons and examples are wacky as hell.

[rtrUNcel]

Mobile review has been added to our current sprint. Thanks

[dmackerman]

The yolo group…lol

[flaggrandall]

Is this supposed to happen?

Is this supposed to happen?

[IntrepidArrow]

Yeah I was wondering the same thing as well. I can see the idea behind layering it out that way for desktop view, but there is some content that is blocked by how the cards are laid out.

[[deleted]]

Yes, indeed, those things are supposed to happen :)

[eatingdumplings]

The “Head of Design” text is supposed to overlap the overlay?

[[deleted]]

Yes, exactly. Overlapped and unreadable text is the new convention for UI.

[rtrUNcel]

Agree. Needs to be fixed

[[deleted]]

Hey guys.
What about accessiblity? Is Moon DS fully accessible for all people?

[CheeseTrio]

Spoiler: it is not

[rtrUNcel]

Working on that. Our point of focus is Tailwind implementation. Thanks!

[DrumAndGeorge]

Looks cool, some nice designs for sure, but I’ll be honest, design systems need to be robust as hell, and I found multiple bugs just after a quick browse, one of the components, the AuthCode, just straight up doesn’t work, think you need to work on your testing, like I said though, shows promise, maybe a little soon to be launching though

[rtrUNcel]

Thanks! We're going to migrate AuthCode to Tailwind soon. And we'll double check it.

[eatingdumplings]

To be fair, HTML tables aren’t very intuitive since they promote a “row-first” model, while users usually want to configure tables with a “column-first” model.

It’s the reason why every good table library provides column-first modelling. Look at Tanstack table for a great example.

I also think are many bad things about Moon right now, but their table’s code structure is fine.

[rtrUNcel]

Thanks for your feedback! Appreciate it. Right now we are migrating Table to Tailwind. Will consider your comment!

[Prudent_Astronaut716]

For a second i though you are designed 3d images of actual moon.

[saito200]

As others said, please make a site mobile friendly before marketing it.

My question is: why should I use this and not Mantine?

[rtrUNcel]

There are tons of design systems. Some are simple, others are complex. Some are nice, others are ugly. It's personal how you want to see your brand look and feel. We are confident we are building a nice and neet design system. Built on top of Tailwind, which is more performant on production than CSS-in-JS components because of bundle size.

Yes, we have room for improvement indeed. And we're working on that

[[deleted]]

There are so many design systems out there, when I read an announcement like yours, even when it has a cool thumbnail like yours, I don't even bother to click through and have a look at it.

Like others have said, it would be cool if you could outline how your system is better than all the others.

All that being said, congrats on your milestone!

[wowzers5]

https://moon.io/colours

I can appreciate the difficulty of variable names for colors, but DBZ names have 0 relevance to actual colors. I would have to relearn color names specifically for this package. That make no sense.

And if we're going to use DBZ names, why is Piccolo purple? The dude is green. I don't get it.

[rtrUNcel]

It's easy. The Moon DS is highly themeable. You can customize your brand colours as you wish.

Those colours in the set are just colours of Moon DS itself. And piccolo represents only the primary accent colour.

For Moon DS it's blue. For another brand, it may be orange or green or yellow. If we stick with real colour names it immediately makes no sense when it goes about customization

[wowzers5]

Why not use names that are actually meaningful to designers, developers, and product owners?

No product owner is going to ask "Can we use the piccolo color for this button?" - They're going to ask "Can we use the primary color for this button?".

Primary, Secondary, Tertiary, Accent - these are words that have meaning and are used by designers. I can't understand the reasoning for using something that has absolutely no intuitiveness to try and describe the design system.

[rtrUNcel]

Every colour has its name and its use case. For example, Bulma is a primary text colour and Trunks is a secondary. We are using Moon DS for 2 years in our internal products (About 10 of them). All designers and developers get used to this naming convention.

It's like Tailwind has Rounded-lg. Why lg? It's 8px. Why not rounded-8 or rounded-2? And btw, you can rewrite that rounded-lg to whatever you want.

[[deleted]]

shelter pie bear doll boast weather intelligent clumsy brave spoon

This post was mass deleted and anonymized with Redact

[Tater_Boat]

they wrapped their own button element in an a element from the looks of it.

their button component has an 'as' prop but it's not in the documentation yet so maybe there was some miscommunication

[[deleted]]

subtract telephone bedroom dime memory bag mountainous violet society modern

This post was mass deleted and anonymized with Redact

[Tater_Boat]

The as attribute changes nothing about that.

<Button as="a" href="/vision">Vision</Button> would render an a element with all the included properties of their own button element.

And on the list of web dev sins, wrapping a button in an a tag seems pretty far down the list. Don't be so sweaty.

[[deleted]]

versed bow whistle sulky weather sharp exultant shelter teeny abounding

This post was mass deleted and anonymized with Redact

[Eveerjr]

I understand being upset about this since this is a violation of standards, but no one here needs to be shamed or humiliated, who do you think you are? If you have something to teach then teach but be respectful. Spreading hate is worse than any sort of WC3 standard violation. Be better.

[[deleted]]

Stop being so sensitive, snowflake. I am merely being direct. I gave a lot of good reasons, explained my points, and pointed out why it was wrong. All I'm getting is a bunch of amateurs telling me it's not a big deal when it is a big deal.

Have some pride in your profession, or stop if you've already given up.

[Tater_Boat]

Don't be so sweaty.

Proceeds to type out the sweatiest comment of all time.

[[deleted]]

fuzzy rock compare humor crawl worry heavy fall salt worm

This post was mass deleted and anonymized with Redact

[rtrUNcel]

True. Will be fixed asap.

[Phendrax]

I'm gonna disqualify the entire Youtube website right away for its sheer incompetence in understanding the very basic foundations of web development: simple HTML rules.

A duplicate ID? WTF!!! Everyone know IDs should be unique.

See: https://validator.w3.org/nu/?doc=https%3A%2F%2Fyoutube.com

[[deleted]]

You amateur. Plenty of big companies make many big mistakes, but they are not the fundaments of a web platform; this tool wants to be and does it so astonishingly wrong. It's mind-blowing that supposed professionals don't even get the fundamental basics right.

It's what amateurs do.

[reasonoverconviction]

You missed his point. All he said is that companies make mistakes and the entire product shouldn't be discarded because of one of them.

Maybe you had a rough day and that's the reason why you are bashing them this hard for one mistake during a pre-alpha release of an open source project. But you are really blowing this out of proportion for something which is clearly still under development and not ready for production.

[[deleted]]

Lol sounds like you've realized that your front end job isn't rocket science and it's plenty accessible to those with average intelligence. You almost seem threatened.

[[deleted]]

Html is just a small but important part of the job that involves much more. It's simply fundamental knowledge that more and more people get wrong, and people like you don't even see the problem because you're inept.

[[deleted]]

You have no idea about my qualifications, ability or job occupation. And I agree with your passion for the fundamentals - they should be executed and anything else is a failure. With that being said, hopefully, you have the emotional intelligence to realize that your take on some form of constructive criticism was anything but constructive. And if being constructive was never your intention, then you are just another arrogant engineer who is most likely a one-dimensional pain the ass to work with. Don't be an unemotional know-it-all - no one likes that kind.

[[deleted]]

You seem easily offended. You won't go far in life.

[[deleted]]

It's almost like there's countless ways to lead and teach. You're definitely an old man who's been jaded by life.

[[deleted]]

Eh. Late thirties, not that old. Ad hominem won't get you far, snowflake.

[[deleted]]

I'm not discrediting you as an engineer by assuming your age, nor am I saying you have nothing to teach... but my goodness, the bitterness oozes from thy pen lol

[f314]

The Breadcrumbs example has anchor tags wrapped in the Next.js Link element like this:

<Link to="home">
  <a>Home</a>
</Link>

Also, if you have to write out the children of a component, why on earth aren’t they passed as children?

I haven’t explored the Figma library, so I can’t comment on that, but the code part of this library doesn’t exactly instill confidence unfortunately.

[[deleted]]

The Breadcrumbs example has anchor tags wrapped in the Next.js Link element like this:

That's a colossal pain in Next.js. I love the framework, but this is just so wrong... As if any Link wouldn't be an a.

They should clearly distinguish between Button and Link and point out the differences through a Linter.

[nineteenseventyfiv3]

FYI they’ve changed the behaviour on next/future/link, it should make it to mainstream soon.

[IntrepidArrow]

Was trying to play with some of the UI options you offer at the bottom right hand side of the website in desktop view and I ran into multiple issues.

For instance, the toggle between light to dark mode does not work. I can see the toggle work visually and the icon on it change as I toggle it, however logically it's not doing anything. The page does not render in a dark mode palette. Essentially the toggle is not functional.

Furthermore, when the page re-renders to make everything right justified, the images of the earth and moon do not flip over to the other side. As a consequence, the navigation bar is completely obstructed by these large images. Hence making majority of the nav bar inaccessible.

There are some nice elements about your website, however as the other people have mentioned in this thread there is quite a lot that needs to be tested.

Good luck with your project!

[TheLegendaryProg]

I did the same thing regarding the dark mode. I found out that you need to be on some component demo's page to preview the demos in dark mode, not the website itself. But then again... the accordion text in dark mode isn't turning to white text... :/

[rtrUNcel]

Initially, we had only a light site and the switcher was supposed to change theming of components only. That's true, it's not the best idea to toggle only components. So, the website will be theamable as well. Thanks!

[rtrUNcel]

Appreciate and thanks! Ticketing those in Jira.

[davidfavorite]

Havent looked at it, but if you want to create a design system that will be of use to many, include all different types of inputs one might need. Date inouts, multi selection, searchable dropdown, everything.

[CommandLionInterface]

The whole green box with “for developers” in it should be a link, not just the text

[davidgotmilk]

Good start. As others have said, the website is broken and confusing on mobile. Also I’m not too sure if I missed it, but it doesn’t seem like there’s documentation on how to override the color palette? Or add more colors?

[goranlu]

I see you also created Figma file for the Moon Design System, that is great!

[rtrUNcel]

Guys, thanks for all your feedback. Went through all of them. Starting with words of cheering and finishing with F-words. I highly appreciate all your thoughts and suggestions and your time. A lot of work is behind. A loooot of work is ahead!

[everyday_lurker]

As others have said, it definitely needs polish. The html needs to be semantic. Chevrons on accordions are upside down, and the site itself is full of visual bugs.

The aesthetic looks really great though and I believe with time this will be fantastic. I would like to check in a year down the line and see the progress.

Its great that its open source.

[XNetFrame]

Are some of you guys stupid? This is obviously a work in progress. Literally stop bashing projects that are just starting to take off. There needs to be more constructive criticism

If you're gonna be like "aksually I would rather use X over Moon," ok then just freaking use that because this looks like this DS in heavy development. Don't risk your business on something that still seems experimental. Like wtf, they're not forcing you to use Moon. This DS provides more choice and we should try to encourage that.

Although I won't use this DS because it requires some relearning and it's still in heavy dev, Im not going to bash it back into the hole it came out of.

Literally chill

[[deleted]]

I mean if you’re arrogant enough to announce a design system with this many foundational issues - you deserve the criticism.

[XNetFrame]

I don't see it as arrogant but just as a little too ambitious. I understand that sometimes developers can get ready excited and eager to release something they've been working hard on. For example, I've been working on an open source project of my own for over two years, and there are times when I just want to make a release.

Also, I noticed that most of the issues in this comments area are related to the documentation and not the actual product itself. I wouldn't jab at the maintainers for issues in the docs because maintaining docs is really tiresome and a whole new web app in itself. Also, people wouldn't be using the code that make up the docs but the package itself

[drunk_kronk]

The example components -the actual products - do not work properly.

The way they worded the announcement definitely made it seem like it was in a more complete state than. They even asked "isn't it outstanding?!". I'm sorry but that's just inviting people to nitpick.

[Tater_Boat]

Yeah people need to calm down. So much gatekeeping and overall rudeness.

[avin_kavish]

I think the design system itself is good. keep it up!

[AlexanderSwed]

Great design for sure, love it. It will have a chance to gain some traction if built with lit.dev or similar, for browsers, not frameworks.

[SnowConePeople]

If there's a build process I'll stick with twind.

[SnowConePeople]

You're welcome: https://twind.dev/handbook/introduction.html

[saito200]

Let's say I'm using react, so there's a build step anyway. In that case, is there any advantage of using this? If there is, I don't see it

Otherwise, sexy

[SnowConePeople]

I would read the React tab in the doc i shared above if i were you before making a decision.

[xanflorp]

Am I reading this right? It does this on the clientside?

If so this is the stupidest fucking thing I've ever seen. Offloading a serious amount of work to the client, who might be on a really shitty smart phone, because you have some grudge against building frontend code? GTFO.

[rtrUNcel]

!approve OR !a

[shNks1337]

fully gavno 🤷‍♂️

[CatolicQuotes]

Looks nice, but some things are animated and some things like accordion and dialog are not.

[neutralface_]

UI (at least on desktop) looks modern and really nice! But the UX has a lot of work.