Home
It's good if the information for a UI design system comes from UI designers.
Take a look at our styleguide on Zero Height for some of the work done. Sections like colours and typography relate to the website UI.
To build a relationship with our designers, get invited to projects like this one on Adobe XD and generally just speak to the designers about the design system.
(The sass file with the typography is located in src/assets/custom/css/_sass/_typography.scss, for colours src/assets/custom/css/_sass/_colors.scss, and for spacing src/assets/custom/css/_sass/_lateral-spacing.scss.)
- in person
- on Slack (#design-requests channel)
- via Trello (Design Requests board) or
- through whatever tools we're using at the time.
If we are using the same source of truth (withever one the designers are using) for how the UI should look then we can apply the Boy Scout Rule to take little steps closer towards a consistent design system.
At the time of writing we have many, many separate media queries all using different breakpoint spread around our SCSS and CSS files. This is because of reasons and history.
With this pull request #1723 we have the option to start using a consistent set of breakpoints:
- small – upto 767px
- medium – 768px to 1023px
- large – 1024px to 1199px
- extra-large – above 1200px
If in doubt about replacing an existing breakpoint with one of these, speak to the designers.
If supplied with a new design and unsure which breakpoints to use, speak to the designers.