Secrets of Building Design Systems Right

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ The first 200 of you will get 20% off Brilliant’s annual premium subscription.
This video was sponsored by Brilliant
👉 Upcoming NextJS course: pronextjs.dev
👉 Code : github.com/jherr/van-turbo-repo
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
1:24 Monorepo Setup
2:25 Vanilla Extract Setup
4:48 NextJS Integration
7:31 Pre-Application Styles
11:58 Qwik Implementation
14:26 SolidJS Implementation
15:23 Vue Implementation
16:32 Other Alternatives

[@jherr]

To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/JackHerrington/ . The first 200 of you will get 20% off Brilliant’s annual premium subscription.

[@LearnFrontendNow]

Always love me a little vanilla extract, great job as always Jack. Quite enjoyed this one! 😘👌

[@lord_kh4n]

Good to see some Vanilla Extract video! I used mantine and in the upcoming alpha v7 version, it also uses VE as it's core. Vanilla Extract is a really great tool

[@coreybyrum]

This is awesome! You have a new subscriber! It’d be cool to see a video with a shared component library and not just shared styles, while still using this mono repo approach

[@Nonsense116]

Great stuff! We are facing this exact problem at work

[@Frontend_Ed]

Vanilla Extract + Token Studio for Figma = the way to build a type-safe design system with design to build consistency guaranteed 🙌 I've found this combo to be hugely productive, so worth the initial setup effort

[@xerossx]

Love this content! Thank you! You are the best

[@HiMyNameWaffy]

Jack your content is priceless ❤

[@aster_jyk]

For anyone wondering: The main benefit of using this over Tailwind is that you have more control over your design system and you have full type safety. It lets you do really cool things with your style logic, but obviously Tailwind is better for getting up and running faster if you don't care about doing fancy stuff, or don't have complex style logic.

[@CentMSN]

Can't wait to buy the course You mentioned 😃 By the way, it seems You forgot to include the link in the description.

[@circusAnimal_]

Nice to see Arthur Weasley teaching muggles some computer magic

[@irfanmohammad7269]

Nice to hear that about your next js course. is it paid or free course

[@MaPhongBa129]

Hi sir, what theme of zsh that you used ? Thank :D

[@leoffleal]

Will try and see how I can toy with It. Wondering what that generates when It builds. Will It generate CSS for each of the applications specific to each application (repeating the Design System styles for each application) or does It generate a deployable "styles bundle"... I take if you change some values in the design system's tokens, you would have to re-build all applications? Also wondering if It's feasible to create a federated package that lives separately from all the apps that can be hot-swaped to an updated version that gets reflected on all deployed applications using this design system (I know It could break stuff if you change layout tokens, but for small token changes like branding colours, It can be really useful or even adding new themes to a white-label solution).

[@farzadmf]

This seems really nice; I'm just wondering how it handles deploying the application(s) somewhere, are there any extra things we need to take care of?

[@vincentnthomas1]

No because it integrates with the compiler so it becomes css at build time

[@christopheanfry2425]

Thanks for this nice video. One question regarding Nextjs pro will it be with typescript and how to use it with nextjs? Thanks

[@jherr]

It’s typescript and it’s a course.

[@christopheanfry2425]

@@jherr amazing thanks for your reply

[@ogunleyeoluwafemi7243]

@@jherr great video as always rather than using vanilla extract is there a way to use tailwind I’ll like to get your response on that and maybe a video also but loooking forward to the course I really hope it’s something affordable 🙏🏾🙏🏾🙏🏾

[@gwenfrix6476]

@jherr Nice video :) One question though, how can we easily override certains properties of the style ?

[@jherr]

You can use `style` in each application to have application specific styling overrides.

[@gwenfrix6476]

@@jherr Thank you :)

[@VKD007]

Cool concept but ist there a simple way to do it ( old school way haha ). I recently built a dynamic DS with Storybook, Design Tokens with module SCSS and theme switching based upon CSS vars. No context for Theming.

[@ness-ee]

We’re just starting using Figma tokens… they look badass

[@maxime.blanquart]

It could be really cool to exports JSX Components directly from the package/design-system… and not classes. Sprinkles, recipes etc. Do the rest.

[@roncanfil]

Excellent video! Why is Angular not an option for this setup?

[@jherr]

Angular is kind of a hassle to set up, honestly. IMHO.

[@roncanfil]

@@jherrbut it's doable, right? Kinda like "a hassle to setup at first, but then it runs smoothly?"

[@jherr]

@@roncanfil Definitely doable, Angular in a monorepo is fine. NX is particularly good for that.

[@WellSaint001]

let's redo this with panda panda panda

[@user-ik7rp8qz5g]

I dont understand - why do we need js library to define shared styles? This can be done by using raw css files without additional overhead. And further improved by using css modules for components and preprocessor for entire style system. What is benefit of this library that preprocessor + modules do not have?

[@andreilucasgoncalves1416]

That package to manage css seems a worst idea than just use normal CSS or CSS modules It is like you want to generate CSS in a for loop, but don't know how to use SASS I had this issue with one of my coworkers who for some reason says that generating CSS using Javascript is a good idea, I made the same thing using SCSS and Tailwind, but he still not convinced And with tailwind you can generate CSS using typescript and the vscode extension can show it

[@jherr]

There are multiple ways to do this. This is just one.

[@andreilucasgoncalves1416]

​@@jherrI like that you showed that way to us, but it is not one way that I would recommend to anyone Unless it shows some benefit, because right now it seems to only increase complexity and build step bad performance

[@jherr]

@@andreilucasgoncalves1416 Fair enough. Thank you for offering a different approach.

[@user-fr2fm3ri3w]

@@andreilucasgoncalves1416scss wtf bro this isn’t 2013

[@andreilucasgoncalves1416]

@@user-fr2fm3ri3w It still works fine and it is very stable, you can try these new projects, but if it has a bug you are f

[@xxXAsuraXxx]

what if React is using css in js?

[@boogiman007]

just when you think modern web development can't get anymore complicated...

[@seannewell397]

This is easier than jss imho. It would allow someone to extract the design system from an app or component library, is that was a useful thing for someone 🤷 A use case I've run into is applying design system styles to a previously independently branded app, we just duplicated the css rather than extracted it 🤪

[@Norfeldt]

Agree 🤣 reusable code can be highly overrated 😅

[@aster_jyk]

Its like this because HTML CSS JS was not designed with high programmatic interactivity in mind

[@Canon22211]

You can just use css-modules with generation of their types. To be safe when you are importing it.

[@daveybrown1160]

Do you have a guide or demo repo? Or is it *that* easy?

[@austincodes]

Tailwind

[@noquarter9700]

Burger

[@morhaham6609]

I don’t go back to naming things…thank you but i stay with tailwind

[@CroModder]

Having a shared stylesheet is not even close to having a real Design System. This is more of a tutorial how to use VE on multiple frameworks/libs.

[@danko95bgd]

Or just use lit

[@ImMystou]

Why didn't you use PandaCSS instead of VE ? More performant, began to being more and more used by the community and fixes some problems that VE had. But great video otherwise, good job 👍 !

[@andreilucasgoncalves1416]

Because as he said VE compiles to a css file, and as I see PandaCSS is CSS-in-js Compile to a CSS is better for production and avoid FOUC Just wondering which type of problems that VE has that PandaCSS solves?

[@jherr]

Panda-CSS does work, I just found the setup more difficult than with VE. That being said, that setup is a one time cost. So if Panda suits your model then that works too.

[@ImMystou]

@@jherr Yes I assume that you used VE because of that 😄 (and that it showcasing VE was not the priority). Have a nice day/evening 😉

[@jherr]

@@ImMystou Thanks! Yeah, I did a Panda video just last month. Gotta change it up. :)

[@oscarljimenez5717]

​​@@andreilucasgoncalves1416PandaCSS was tried first in VE, the problem that VE have is that if you intend to do something advanced with Sprinkles API (example try to recreate ChakraUI type of css as component attributes) you will be hit with almost 1mb or more of CSS (one of the creators of PandaCSS build a package of VE called Box-Extractor to fix this in VE, but it doesn't support all bundlers, only Vite), usually because VE don't purge unused CSS, they give you the ability to only define the CSS you wanna use, so you need to be careful. PandaCSS like VE also generate CSS Modules, so I don't know what you're talking about. Usually PandaCSS solve the Sprinkles API to be better, and the start fase and more perfomant because it purge unused CSS, in VE could be tedious to define everything, you need to define what are the allowed properties on flex css property for example, and be careful to not grow too much CSS file. Usually PandaCSS is faster in development, but VE have some more advanced cases, and maybe more useful when you skip the part of define everything and build everything from scratch.

[@SatoshiCommentorto]

But in reality they should all just be using Svelte an Daisy UI and stick to the core web fundamentals.