Styleguide
This page contains all styles to make it easier to edit the style of the whole site.
Typefaces
The "Body(All Pages)" font size should always be 1vw for the responsive technique to work.
Add the main font to the Body (All Pages) tag and the display/titles font to the headings.
The font size of elements is set using EMs and has to be applied to specific elements or text blocks.
Add the main font to the Body (All Pages) tag and the display/titles font to the headings.
The font size of elements is set using EMs and has to be applied to specific elements or text blocks.
Aa
Garnett
Body
Colours
To change the colours globally, select one of the colours, open the background colour panel, then click the pencil icon (Edit swatch).
Then change the hex or hsla values for the new colour and save. Make sure you're changing the code, not the name.
Then change the hex or hsla values for the new colour and save. Make sure you're changing the code, not the name.
Scendar Purple
#180065
900
#2C009F
800
#4000DC
700
#5E38F7
600
#927DFF
400
#AE9FFF
300
#C9BEFF
200
#E6DEFF
100
Greyscale
#130B32
Scendar Dark
#59556B
Midnight Tint
#C2C2C0
Grey A
#D4D4D2
Grey B
#F9F9F9
Grey C
#FCFCFC
Grey D
#FFFFFF
White
Text
Styling Titles
All text should be inside a div called "title-wrapper" or "text-wrapper".
Colours, spacing, and alignment changes should come from combo classes
on the title-wrapper or parent.
Only add combo classes to the text itself if you want to change typeface, font-weight, size, line-height.
You can also create new "wrappers" for more specific content (e.g.: hero-title)
All text should be inside a div called "title-wrapper" or "text-wrapper".
Colours, spacing, and alignment changes should come from combo classes
on the title-wrapper or parent.
Only add combo classes to the text itself if you want to change typeface, font-weight, size, line-height.
You can also create new "wrappers" for more specific content (e.g.: hero-title)
Usage of title- classes
These classes are used to override the default heading styles.
This is useful when you want to maintain the hierarchy without changing your design's style.
(e.g: if you want to skip a level, from H2 to H4, use an H2 and an H3
and then give your H3 the class "title-4")
These classes are used to override the default heading styles.
This is useful when you want to maintain the hierarchy without changing your design's style.
(e.g: if you want to skip a level, from H2 to H4, use an H2 and an H3
and then give your H3 the class "title-4")
Title 1 (72px)
Title 2 (52px)
Title 3 (40px)
Title 4 (32px)
Title 5 (24px)
Title 6 (22px)
Text 1 (18px)
Text 2 (15px)
Caption (12px)
Default Headings (no classes)
These are the default styles applied to "All H1 headings" that have no class and can be different from the titles. Make sure line-heights are unitless (using "-" at he end)
Heading 1 (72px)
Heading 2 (52px)
Heading 3 (40px)
Heading 4 (32px)
Heading 5 (24px)
Heading 6 (22px)
Rich text element
Elements inside the Case Studies rich text element
Intro to the Client
Your business and tax affairs can get complex at time, decisions and actions need to be taken to steer you in the right direction.
With a team of experts in numerous fields and not just accounting and tax (although we’ve got that by the spades), with a focus on wholistic business and investments we can help streamline your business processes through scalable cloud technology and give great tax planning and structural advice.
Streamline your business processes through scalable cloud technology
The challenge
Your business and tax affairs can get complex at time, decisions and actions need to be taken to steer you in the right direction.
With a team of experts in numerous fields and not just accounting and tax (although we’ve got that by the spades), with a focus on wholistic business and investments we can help streamline your business processes through scalable cloud technology and give great tax planning and structural advice.
Buttons
Buttons should always be a link block with a class of button and text inside it.
Webflow default buttons do not allow you to add icons into them.
Buttons with unusual hover effects have been made into symbols for easier editing.
Buttons should also be inside a div with the class "cta" to control their spacing.
Tip: if you add the icon using the embed element, open the code, find fill/stroke colour in the "path" and set the colour to "currentColor".
This way the svg will inherit the colour of the text.
Webflow default buttons do not allow you to add icons into them.
Buttons with unusual hover effects have been made into symbols for easier editing.
Buttons should also be inside a div with the class "cta" to control their spacing.
Tip: if you add the icon using the embed element, open the code, find fill/stroke colour in the "path" and set the colour to "currentColor".
This way the svg will inherit the colour of the text.
Forms
Styles used for the form.
Note that we are not using Webflow forms;
we are styling the elements in Webflow and then adding classes to the HTML of the Salesforce forms.
Note that we are not using Webflow forms;
we are styling the elements in Webflow and then adding classes to the HTML of the Salesforce forms.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Utility classes
Use this classes to quickly alter styling.
Add more by duplicating one of the elements below. Then remove the class and add your own
Add more by duplicating one of the elements below. Then remove the class and add your own
text-white
text-purple900
text-purple800
text-purple700
text-purple600
text-purple400
text-purple300
text-purple200
text-purple100
text-bold
text-medium
text-regular
no-margin
no-padding
hide-tablet : I hide in tablet and down👀
hide-mobile : I hide in mobile landscape and down 👀
hide-mobile-portrait : I hide in mobile portrait only 👀
cc-hidden: hides element
Spacers
Use these on empty divs to control spacing.
Add more by duplicating one of the elements below. Then remove the class and add your own
Add more by duplicating one of the elements below. Then remove the class and add your own
20px
24px
50px
54px
Containers
AKA layout grids. Anything smaller than the main container has to be a combo class of the original container