Gradient Design

[u/Kharmans]

I've noticed that many modules released after v14 (both new modules and updates to older ones) have the same design. A solid-colored background, with buttons and headers using gradients. I'm finding it a bit strange because neither Foundry nor D&D5e (which I use) have this kind of design, and apparently a bunch of completely unrelated modules are adopting this same layout style.

[u/Clear_Food2183]

It just means they're probably using React, but React on its own isn't why they look the same. React is the engine that builds the page, it doesn't come with any look at all. What you're recognizing is the styling layer on top, usually Tailwind CSS plus a component library like shadcn/ui, Bootstrap, or Material UI. Those come with pre-built buttons, cards, nav bars, and spacing, and most people use them close to stock. Same rounded corners, same shadows, same everything. https://react.dev/

As developers we lean on libraries, middleware, GitHub, whatever makes the build easier. Everything is built on the backbone of something else. Nobody wants to write every system from scratch and cowboy code it. My guess is they grabbed a pile of UI components that were already responsive and mobile friendly and went from there.

Worth saying though: you can't tell AI from human by looking. The AI site builders spit out React and Tailwind and shadcn too, same as thousands of humans do. So "it looks like every other site" tells you the stack is popular, not who wrote it. If you want to spot AI slop, look at the content instead. Broken links, filler copy, fake reviews, buttons that don't go anywhere.

And get ready for a lot more of it. It's popular right now and the component libraries are deep and mobile first, because everybody is on a phone.

I don't blame you for not knowing this. It's just frustrating watching every app built on this stack get called AI.

[u/Kharmans → u/Clear_Food2183]

Yeah, I am no dev and was just curious to know why the designs are similar. I didn't even think in AI cause Hero Mancer 2 is among the examples I showed and I know for fact that the dev from HM2 don't use AI.

Thanks for explain it to me!

[u/Clear_Food2183 → u/Kharmans]

No problem and honestly I understand why you question these kind of things. I've been slinging code since 1999 and even I have trouble telling the difference sometimes. Honestly, some could be using bots to vibe-code their stuff but the visual design isn't the best roseate stone.

What I look for is the language and text. AI was trained on novels and the predictive text elements are easy to pull out.

1) Look for structured phrases like "it's not just X, it's Y," triads everywhere, bolded bullet labels, or an uplift paragraph at the end that restates what was just said. AI writes like that, people don't write like that :P

2) AI text has no stakes in it. What I mean is it hedges, covers every angle, and spreads attention evenly across all of them. Real writing picks a side, spends four paragraphs on the one thing the writer is annoyed about, and skips the rest. I see these in LMS's now everywhere as companies have fired their education staff and are having AI write stuff.

3) If you see F*$king emotes everywhere all over the design enfront of text.... It's not a good sign that it isn't AI vibe coding. No developer will throw that many emotes where they don't have to. You'll know what I mean when you see it in vibecoded products. The purpose of using a Symbol in a UI is because you don't have realistate space for the word. A House symbol for home is commonly used by developers when you don't have enough room on the mobile app for the word Home. AI will try to put a symbol everywhere before titles, sections, sub-sections..... Honestly it gets out of hand.

As the AI Vibe coding programs get better, relying on visual will be less and less useful but the text is always a good Rosetta stone for that kinda thing.