Styleguide
Fonts
We are streaming Google fonts in four different weights. I was going to have the fonts locally, but it became complex with all the weights.
Poppins Regular
Poppins Medium
Poppins Semibold
Poppins Bold
Font scale
Fluid using clamp property, so no media queries needed. Used for most text and headings.
The scale isn't perfect. It doesn't necessarily always scale down in proportion. The design files had many cases where a heading was the same size in multiple places in desktop, but mobile was multiple different sizes. So I indicate below what sizes they break down to.
text fluid 10
Desktop: 68px - Mobile: 28px
text fluid 9
Desktop: 52px - Mobile: 28px
text fluid 8
Desktop: 52px - Mobile: 22px
text fluid 7
Desktop: 42px - Mobile: 22px
text fluid 6
Desktop: 30px - Mobile: 22px
text fluid 5
Desktop: 22px - Mobile: 20px
text fluid 4
Desktop: 22px - Mobile: 18px
text fluid 3
Desktop: 22px - Mobile: 16px
text fluid 2
Desktop: 20px - Mobile: 18px
text fluid 1
Desktop: 20px - Mobile: 16px
text fluid 0
Desktop: 18px - Mobile: 16px
Default h1
Default h2
Default h3
Default h4
Default h5
Default h6
Colours
You can apply 'bg-[colour-number]' to change background, or use 'text-[colour-number]' to change text.
white
(.bg-white)
black
(.bg-black)
navy
(.bg-navy)
slate
(.bg-slate)
lilac
(.bg-lilac)
turquoise
(.bg-turquoise)
aqua
(.bg-aqua)
aqua-2
(.bg-aqua-2)
aqua-3
(.bg-aqua-3)
pink
(.bg-pink)
pink-2
(.bg-pink-2)
pink-3
(.bg-pink-3)
oat
(.bg-oat)
oat-2
(.bg-oat-2)
oat-3
(.bg-oat-3)
Buttons
Come in four flavours: Navy (default), Aqua, Oat, Lilac.
There are also small variants (less padding) and there are two shadow variants. One with a shadow showing by default, one with a shadow showing on hover
Icons
These are done using a background colour. The icon itself is applied as a mask in an inline style. This enables us to change colours and hover states and not need a spritesheet that the user can't update themselves. Now all they need to do is point to a stored image in the CMS and it will Work.
They have size, colour and hover colour options:
data-colour="white, lilac, aqua, turquoise" (default colour is navy)
data-hover="white, lilac, aqua" (default hover colour is navy)
data-size="xs, sm, lg" (default medium)
Extra small size
Small size
Normal size
Medium size (will scale down slightly on tablet/mobile)
Large size (will scale down a lot on tablet/mobile)
Hovers
Applying data-hover="" will add hover state, but sometimes you want the parent item to hover and make the icon change. This can be done by using data-icon-hover-parent. Examples below.
All Icons
Reference for all icons in designs. Just update the inline style with the URL for the icons in CMS.
Category/chat icons
Product icons
Social UI icons
For UI icons I reference the icons in the CSS as encoded SVG's, as they aren't user editable
UI icons
Product Cards
These also use the icon components inside them.
Topic Cards
Three variants which use utility classes for headings and icons