Streamline type styles

[kristinashu]

Goals:

• Improve the existing styles so they match the designs
• Reduce the number of styles so the site will look cleaner for users and will be easier for us to maintain and follow when making site updates

Steps:

In Sketch, @taisdesouzalessa has made some handy comments on how the type styles aren't quite right.

• [x] Add all styles to spreadsheet
• [x] Taís to give R+ to the recommendations
• [x] Share with devs to implement

[kristinashu]

Any suggestions on how we could see where exactly a type style is being used? Would be great to identify if a style is only used in one spot.

cc @gvn

[kristinashu]

I'm putting this into a spreadsheet instead of Redpen https://docs.google.com/spreadsheets/d/1Z1oScv_5NfhGGkFg6nH-_16dKWSyPcNhrKdA5E_QwIk/edit?usp=sharing

[taisdesouzalessa]

@gvn for now the flow we are using to see where the styles are being used is:

1. See the name of the class of the type style. (e.g.: "h1-white")
2. Go to our local version of the site (both Kristina and I have a cloned version of the site in our machines)
3. Using Sublime, we search in all docs for instances of the clas
4. Then we see the pages in which the class is being used (index, 404, about) and so on

UPDATE: if we search for the class name without the "." it seems it is more effective

Not sure this is the most effective flow so if you have any other suggestion on how to quickly see all instances of a determined style that exist on the site, please let us know :)

[kristinashu]

I'm finding it hard to tell where it's being used. This is an example search result:

[kristinashu]

I've filled out the spreadsheet and I think we can actually get rid of a bunch of styles!

@taisdesouzalessa @gvn can you please review and double check everything? https://docs.google.com/spreadsheets/d/1Z1oScv_5NfhGGkFg6nH-_16dKWSyPcNhrKdA5E_QwIk/edit#gid=0

[kristinashu]

This is done! It's amazing! I'm so happy about it! Thank you so much @mmmavis and @taisdesouzalessa!