First off, we start with the TNEW platform as-is and leave the default stylesheet in place. This maintains the foundational underpinnings throughout the platform and avoids causing unintentional changes that break the design.
We then create our own custom stylesheet and link to it after the default TNEW stylesheet. We serve this at the bottom of the base template to ensure all our styles are applied on top of any styles that TNEW may inject inside the markup.
In our custom stylesheet we start by declaring the same variables (colour, spacing scale, fonts, type sizes, form element styles, etc) as in the main site. We then use these variables and apply the same CSS reset as in the main website, applying rudimentary styles to native HTML elements. The aim here is to give TNEW a light “undercoat” of the client’s brand.