Colors
Primary
var(--clr-light-purple)
var(--clr-light-purple-two)
var(--clr-dark-purple)
var(--clr-cream)
Secondary
var(--clr-light-red)
var(--clr-dark-red)
var(--clr-light-green)
var(--clr-dark-green)
var(--clr-yellow)
var(--clr-orange)
var(--clr-blue)
Neutral
var(--clr-black)
var(--clr-tundora)
var(--clr-gray)
var(--clr-silver)
var(--clr-alto)
var(--clr-light-gray)
var(--clr-white)
Typography
Body Font - 1.6rem - 16px
var(--font-size-default)
Font "Inner Tight"
Lorem ipsum odor amet, consectetuer adipiscing elit. Nulla tellus dignissim nascetur lectus nostra. Viverra ultrices aenean senectus himenaeos rhoncus enim. Suscipit ullamcorper maximus ipsum conubia augue senectus fusce. Finibus egestas ex lacus sociosqu dignissim ad. Consectetur phasellus parturient suspendisse; himenaeos quam vehicula.
Vel sit bibendum sociosqu vitae sem. Commodo facilisi praesent aenean habitasse bibendum tempus consequat. Integer litora consequat aptent ligula venenatis interdum. Eleifend facilisis risus porta conubia amet. Habitasse fusce nostra tincidunt dolor et maecenas torquent at morbi. Mattis lorem vitae laoreet accumsan, aliquet vel nisl. Dui velit morbi id ullamcorper nullam.
Heading 1 - Font: "Rebond Grotesque"
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Links
We need to modify link code to allow for secondary, tertiary and quaternary styled links as per the styleguide, perhaps underline, underline italic, underline italic bold? Currently it seems that links on a line alone become buttons, we may need to change this behaviour.
Or perhaps it would be easier to manage with a custom link element?
Buttons
We will need to update the button component to add options for small medium or large button sizes as per the styleguide.
