Closed j-ferber closed 3 months ago
InReach gave us some of the custom colors they use on their website here:
https://www.canva.com/design/DAFUSppq54o/nSGowZdNepyChJMPLhvuAg/view?utm_content=DAFUSppq54o&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink
In this link below, scroll down to Adding additional colors:
https://tailwindcss.com/docs/customizing-colors
On slides 14 and 15 of the canva, you can find their primary and secondary colors. Add them to the Tailwind config using the hex values under a suitable name. These names can be found on their Figma files here: https://www.figma.com/file/gl8ppgnhpSq1Dr7Daohk55/Design-System-(2023)?type=design&node-id=234-8266&mode=design&t=3cQdtDZ5bTur0Uol-0
When naming, use the word "InReach-{colorname}" to make sure the colors are not confused (example shown below).
In our case, we do not need the values 50-900 like the example, so it is okay to just have the format:
module.exports = { theme: { extend: { colors: { "InReach-Dark-Grey": "#65676B", ...rest of the colors } }, }, }
InReach gave us some of the custom colors they use on their website here:
https://www.canva.com/design/DAFUSppq54o/nSGowZdNepyChJMPLhvuAg/view?utm_content=DAFUSppq54o&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink
In this link below, scroll down to Adding additional colors:
https://tailwindcss.com/docs/customizing-colors
On slides 14 and 15 of the canva, you can find their primary and secondary colors. Add them to the Tailwind config using the hex values under a suitable name. These names can be found on their Figma files here: https://www.figma.com/file/gl8ppgnhpSq1Dr7Daohk55/Design-System-(2023)?type=design&node-id=234-8266&mode=design&t=3cQdtDZ5bTur0Uol-0
When naming, use the word "InReach-{colorname}" to make sure the colors are not confused (example shown below).
In our case, we do not need the values 50-900 like the example, so it is okay to just have the format: