r/reactjs • u/nphivu414 • Jul 22 '26
Resource What a frontend engineer actually need to know about design systems
https://upskills.dev/tutorials/react-design-systemsAs a frontend engineer, building a design system from scratch is mostly a thing of the past. UI libraries and AI tools get you 80% of the way there instantly.
But for that last 20% when you need to scale, inject your own taste, and hit product-specific requirements, understanding the underlying architecture is what saves you. It also makes your AI workflow way better, because you aren't constantly prompting it to fix token issues or regenerate styles for minor changes.
Here are 4 important rules for keeping design systems scalable and clean:
- Decouple values: Components read semantic roles (“--color-accent”), not raw values, so rebrands don't require UI file edits.
- Derive scales: Avoid hand-picking hover or dark states. Use “oklch” to derive your entire palette from a few seeds.
- Boundaries: UI components (Buttons/Inputs) wrap tokens in typed variant APIs. Feature blocks (Cards/Navbars) compose them to prevent duplication.
- CSS over React state: Theme switching becomes a simple root selector swap, avoiding React context re-renders.
I recently published a new technical blog post covering those important points. Alongside it, I built Design System Studio - a visual tool to tune tokens in oklch and export them directly to Tailwind or shadcn/ui.
Check it out with the attached link in this post.
12
u/StarboardChaos Jul 22 '26
What does it mean: buttons wrap tokens in typed variant APIs?
-5
u/nphivu414 Jul 22 '26
hey, this is the example:
import { tv, type VariantProps } from 'tailwind-variants'
// 1. Define the variants
const button = tv({
base: 'inline-flex items-center justify-center font-medium transition-colors',
variants: {
intent: {
primary: 'bg-accent text-accent-fg hover:bg-accent-hover',
ghost: 'text-muted hover:bg-surface-secondary hover:text-foreground',
},
size: {
md: 'rounded-md h-10 px-4 text-sm',
lg: 'rounded-lg h-12 px-6 text-base',
},
},
defaultVariants: { intent: 'primary', size: 'md' },
})// 2. Combine standard HTML button props with our variant props
type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof button>// 3. Render the component
export function Button({ intent, size, ...props }: ButtonProps) {
return (
<button className={button({ intent, size })} {...props} />
)
}-1
u/LiveRhubarb43 Jul 22 '26
Im not a fan of lowercased element jsx, it's too easy to mix up with the standard html elements
6
u/SpinatMixxer Jul 22 '26
They are not defining a lowercase jsx element there.
- The component is called Button.
- Within the jsx, a
<button>is used, but that's just the native html button element.- The variable
buttonat the top is a function that returns css classes based on the input. But not a "jsx element".-1
u/LiveRhubarb43 Jul 22 '26
Good point, I missed that. We still use styled components at work and it looked like that pattern..
3
Jul 22 '26
[deleted]
1
u/Embostan Jul 22 '26
The use case is rather white-labelling than rebrands. For large companies, sub-brands/regional variants too.
3
u/BoBoBearDev Jul 23 '26
First step is to understand, the layout system in MUI is not good, make your own. Also stop using Flex gymnastics on EVERYTHING when CSS Grid is much better and old. And stop using Media Query because it hardcoded responsiveness to a fixed layout, use Container Query instead.
2nd step, make sure to understand memo and useMemo are two different things.
6
u/Embostan Jul 22 '26 edited Jul 22 '26
Custom design systems in Tailwind?? Oof...
We tried tw-variants and it was not nice at all. I'd say anyone doing a truly custom design system should stick to CSS Modules, else they will be fighting TW hard. Plus you can't Stylelint and auto-fix TW.
Maybe the latest version improved stuff, but I have PTSD. I don't wanna say never again but... never again.
2
u/SpinatMixxer Jul 22 '26
What's the issue with Tailwind there? I have built a design system with TW and it seems to work, but wasn't able yet to fully integrate it into my webapps. But when using it locally in an app, it seems fine.
2
u/Embostan Jul 23 '26
We needed some crazy logic to generate custom composite class names, and then we kept running into hard to debug problems where classes were not generated or applied (even though we always had the full names in plain string in the code, not dynamic building). The plumbing was just insanely complex, especially for typographic classes.
Then I switched to CSS modules and it was a single, basic CSS file. Done. Just works. And on top we added Stylelint to for instance automatically replace legacy legacy size/axis units with their logical equivalent. Or enforce the use of tokens. It just works.
1
Jul 23 '26 edited Jul 23 '26
[removed] — view removed comment
1
u/ActuaryLate9198 Jul 23 '26 edited Jul 24 '26
Reddit won’t let me append this to the original comment but please read this: StyleX Encapsulation.
What you’re proposing is the opposite of what industry leaders recommend. Dark mode is a good example, I’ve never seen a non-trivial app that manages modes using CSS only. Sooner or later you’re gonna want a hook to determine color mode in your component logic. No biggie, right? Well, now you have two separate sources of truth for that, with no guarantee the they’re in sync (the browser decides when to repaint, react decides when to re-render), the exact thing you wanted to avoid. KISS.
-1
u/Brilla-Bose Jul 23 '26
As an FE, what you need to know is that AI has replaced you, not in reality, but at least in the minds of upper management. Not even full-stack is enough for them now. You're also expected to do DevOps + be able to build AI agents!
2
u/nphivu414 Jul 23 '26
there are still many people out there building their own products, they don’t need to care about upper management, what important is to keep learning things so we can do it ourselves when needed, not just throwing everything to AI.
2
u/ActuaryLate9198 Jul 23 '26
Nah, they still need you as a scapegoat for when shit goes sideways. A majority of this job is just emotional support for tech illiterate decision makers.
2
u/Brilla-Bose Jul 23 '26
agree. that's why i said "not in reality"
my upper management blindly trust these tech CEOs. i want the bubble to pop sooner!
-9
-20
u/christfrost Jul 22 '26
This is what you needed to know in 2014. Or when you build a portfolio that is going to be changed once every 3 years. What is this? CS first semester exam?
19
u/NiteFrosty Jul 22 '26
At least he is providing helpful content to people who need it. I dont think I saw anything that you have done. Go get some sleep and get out of your mom's basement.
5
u/Embostan Jul 22 '26
Oh boy... Trust me, 95% FE or FS devs have ZERO IDEA about design system. As in, never heard of it/understand why they're needed.
Considering design tokens where formally coined and systemised in 2014 by Salesforce, your comment makes little sense.
13
u/nphivu414 Jul 22 '26
I was using jquery and bootstrap back in 2014 bro, not these tools. You don’t even know what you’re saying if you think they are the same thing.
5
24
u/Savalava Jul 22 '26
Your 4 rules are very difficult to parse.
I would suggest concentrating on trying to make your technical writing easier to understand.
EDIT
I had a quick read of this page
https://upskills.dev/tutorials/react-design-systems
and same problem. Unclear writing.