Notes

Design System

Design system contain the building blocks of UI elements/atoms to build your product UI

It should allow extensions using functional CSS

Design system should define list of fonts

Design system should define list of possible spacing (so everything is spaced with the same style)

Design system is about constraint, you limit what you can do to avoid creating weird UI, and keep consistency

Linked from
  • Constraint are goodMost people think about constraint in a bad way I think constraint is good for many reasons Constraints gives you a limited set of options to perform or use. GraphQL is better…
  • CSSAvoid having too much CSS/styles in the product code Your Design System should use functional css to make it possible to extend it Your design system should have constraints to…
Links to
  • CSSAvoid having too much CSS/styles in the product code Your Design System should use functional css to make it possible to extend it Your design system should have constraints to…
Shares tags with
  • "Simple" PagesA call "simple" pages: landing pages, blog posts, simple websites. These "simple" pages have a high level complexity of CSS and animations, 2 skills that I'm not so good yet,…
  • CSS PracticeI've decided to practice converting some landing page and design to code This master will help me be a better css coder Smart Home System VPN landing page Final Version Links Luan…
  • Reading experienceWhen designing a blog post with text content you need to think about the line length and the correct css unit to handle it Good defaults 70ch 35-40em Links CSS Design References
  • Building from Scratch?why am I building my blog post from scratch? The idea is to learn all about the details to create great ux and dx I'd like to feel all the pain of writing everything in pure html…
  • Bundle analyzeMost modern apps can’t be built without dependencies, so we need to analyze the final bundle of our application to make sure we are not shipping unnecessary code We can also use…

Sign in with GitHub to reply.

Select any passage to quote it.

Comments