We use a customized version of Bulma for all of our styling
Bulma: Free, open source, & modern CSS framework based on Flexbox
https://bulma.io/documentation/customize/variables/
All styling goes inside of the mystyles.scss folder
Anything can be added to the custom styles section at the bottom of the doc HOWEVER, please look for something in Bulma that handles what you want to do, and if not then look in our other classes. If it is not in either of those then you can add a custom class.
Also, you don't necessarily have to use sass in order to style. Take a look at style.css to add little things as well.
Make sure to scope your in-component css if it's not needed by other classes!
<style scoped>CSS here</style>
Right now we use the free serif font Charter, I chose a serif font because it allows you to use both italics and bold for differentiating text, this in turn helped me chose Charter as it is one of the best free serif fonts available and was created specifically to be readable on all types of devices/screens which is perfect for a PWA.
^^ Charter ended up having incredible overhang in order for us to support it, so we decided to go
In terms of font pairings a good mono-spaced font could be fira mono linked here: https://fonts.google.com/specimen/Fira+Mono
Also contemplating going with the sans-serif font fira sans as the main font as well unsure but will experiment could look really well paired with fira mono, linked here: https://fonts.google.com/specimen/Fira+Sans
Want to try and use small caps with a blue or green circle proceeding it, instead of bold / italics for links as this is less visually dramatic
— Contact EJ for style related questions