Business Information

Business information can be set via the business information settings page (linked below). Please use this page to update all the relevant information, as it can then be called dynamically throughout the entire site, making it easy to update items with a single click.

Business Information Settings Page (you need to be logged in to access this page)

Current Business Information Settings:

Social Media Accounts Active: Facebook, Instagram, LinkedIn, X, TikTok, Bluesky, YouTube

Facebook URL: https://replacethis.com/
Instagram URL: https://replacethis.com/
LinkedIn URL: https://replacethis.com/
X URL: https://replacethis.com/
TikTok URL: https://replacethis.com/

Company Email: email@company.com

Company Phone Number (Text): (123) 456-7890
Company Phone Number (Link): +441234567890

Business Address:

An Address
London SW1A 1AA,
United Kingdom

Footer About Text:

This is some footer about text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum luctus tellus, ut varius sem tempor ut. Curabitur eleifend tellus risus, a porttitor arcu vehicula id.

Typography

Headings

(H1) Lorem ipsum dolor sit amet | var(--h1)

(H2) Lorem ipsum dolor sit amet | var(--h2)

(H3) Lorem ipsum dolor sit amet | var(--h3)

(H4) Lorem ipsum dolor sit amet | var(--h4)

(H5) Lorem ipsum dolor sit amet | var(--h5)

(H6) Lorem ipsum dolor sit amet | var(--h6)

Body

(Text XXL) Lorem ipsum dolor sit amet | var(--text-xxl)

(Text SL) Lorem ipsum dolor sit amet | var(--text-xl)

(Text L) Lorem ipsum dolor sit amet | var(--text-l)

(Text M) Lorem ipsum dolor sit amet | var(--text-m)

(Text S) Lorem ipsum dolor sit amet | var(--text-s)

(Text XS) Lorem ipsum dolor sit amet | var(--text-xs)

Spacing

Standard Spacing

Grey boxes displaying space value as both height and width for demonstrative purposes

var(--space-xxl)

var(--space-xl)

var(--space-l)

var(--space-m)

var(--space-s)

var(--space-xs)

Section Spacing

Grey boxes displaying space value as both height and width for demonstrative purposes

var(--section-space-xxl)

var(--section-space-xl)

var(--section-space-l)

var(--section-space-m)

var(--section-space-s)

var(--section-space-xs)

Buttons

Global button styles can be changed by clicking on a button and selecting the button style, and whether it is rounded (Circle) or outlined (Outline).
No manual styling should be required.

Primary Buttons

PrimaryPrimary CirclePrimary OutlinePrimary Circle Outline

Secondary Buttons

SecondarySecondary CircleSecondary OutlineSecondary Circle Outline

Light Buttons

LightLight CircleLight OutlineLight Circle Outline

Dark Buttons

DarkDark CircleDark OutlineDark Circle Outline

Colours

Colours should only be referenced using a var. The colour palette can be managed via ACSS in the colour palette section (as you update colours in ACSS, they will automatically change below, and throughout the entire website). Please note that only the main shade for each colour, e.g. var(--primary), is a HEX code - all other shades are HSL. Please use the link below to convert from HEX to HSL as required:

https://htmlcolors.com/hex-to-hsl

Primary

Primary is the colour on the website most commonly used for colour blocks like backgrounds etc. It may also be the brand primary colour.

Not all primary shades may be used on this site.

var(--primary)

var(--primary-ultra-light)

var(--primary-light)

var(--primary-semi-light)

var(--primary-semi-dark)

var(--primary-dark)

var(--primary-ultra-dark)

var(--primary-hover)

Primary Transparencies

Transparencies are handled by vars. By default, the main, light, dark, and ultra dark colours have transparencies available. If you want to display the primary colour at 50% transparency, you would use var(--primary-trans-50), or if you wanted to display the primary-dark colour at 80% transparency, you would use var(--primary-dark-trans-80). It is important to always use these variables, as it means all instances of every colour can be managed through ACSS.

Not all primary transparencies may be used on this site.

Secondary

Secondary is the colour on the website used second most for colour blocks like backgrounds etc. It may also be the brand secondary colour. The secondary colour may also be the same as the accent colour - if this is the case, please set BOTH the secondary and accent colours the same (this future-proofs the separation of colours within the colour scheme, and makes it easier to change the secondary or accent colour independently of each other).

Not all secondary shades may be used on this site.

var(--secondary)

var(--secondary-ultra-light)

var(--secondary-light)

var(--secondary-semi-light)

var(--secondary-semi-dark)

var(--secondary-dark)

var(--secondary-ultra-dark)

var(--secondary-hover)

Secondary Transparencies

Transparencies are handled by vars. By default, the main, light, dark, and ultra dark colours have transparencies available. If you want to display the secondary colour at 50% transparency, you would use var(--secondary-trans-50), or if you wanted to display the primary-dark colour at 80% transparency, you would use var(--secondary-dark-trans-80). It is important to always use these variables, as it means all instances of every colour can be managed through ACSS.

Not all secondary transparencies may be used on this site.

Tertiary

Tertiary is the third most commonly used colour on the website, not including accent. It many sites it won't be used.

Not all tertiary shades may be used on this site, while the tertiary colour itself may be disabled, depending on the colour palette.

var(--tertiary)

var(--tertiary-ultra-light)

var(--tertiary-light)

var(--tertiary-semi-light)

var(--tertiary-semi-dark)

var(--tertiary-dark)

var(--tertiary-ultra-dark)

var(--tertiary-hover)

Tertiary Transparencies

Transparencies are handled by vars. By default, the main, light, dark, and ultra dark colours have transparencies available. If you want to display the tertiary colour at 50% transparency, you would use var(--tertiary-trans-50), or if you wanted to display the primary-dark colour at 80% transparency, you would use var(--tertiary-dark-trans-80). It is important to always use these variables, as it means all instances of every colour can be managed through ACSS.

Not all transparencies may be used on this site.

Accent

Accent is the colour used to make items stand out from other items on the page, such as headlines, links, or special buttons. Accent should never be used for section backgrounds, but mainly for special buttons or text.

Not all accent shades may be used on this site.

var(--accent)

var(--accent-ultra-light)

var(--accent-light)

var(--accent-semi-light)

var(--accent-semi-dark)

var(--accent-dark)

var(--accent-ultra-dark)

var(--accent-hover)

Accent Transparencies

Transparencies are handled by vars. By default, the main, light, dark, and ultra dark colours have transparencies available. If you want to display the accent colour at 50% transparency, you would use var(--accent-trans-50), or if you wanted to display the primary-dark colour at 80% transparency, you would use var(--accent-dark-trans-80). It is important to always use these variables, as it means all instances of every colour can be managed through ACSS.

Not all accent transparencies may be used on this site.

Base

Base is the default paragraph text colour. It can be a good idea to set var(--base-ultra-light) to be the colour you want for light text on a dark background, and var(--base-ultra-dark) to be the default heading colour if you want it to be a little darker than the standard paragraph font (if you want to use black or white, use var(--black) or var(--white) instead). Realistically, you are unlikely to need any of the other shades, nor are you likey to use Base Transparencies, and these may be deactived.

Not all base shades may be used on this site.

Although the Base palette is typically shades of grey, please do not use it for greys. Instead use the Neutral palette.

var(--base)

var(--base-ultra-light)

var(--base-light)

var(--base-semi-light)

var(--base-semi-dark)

var(--base-dark)

var(--base-ultra-dark)

var(--base-hover)

Accent Transparencies

Base transparencies are rarely used. Please use the Neutral palette transparencies instead.

Neutral

Neutral should be used for all shades between black and white. (If you want actual black or white you can use var(--black) or var(--white) instead).

Not all neutral shades may be used on this site.

var(--neutral)

var(--neutral-ultra-light)

var(--neutral-light)

var(--neutral-semi-light)

var(--neutral-semi-dark)

var(--neutral-dark)

var(--neutral-ultra-dark)

var(--neutral-hover)

Neutral Transparencies

Transparencies are handled by vars. By default, the main, light, dark, and ultra dark colours have transparencies available. If you want to display the neutral colour at 50% transparency, you would use var(--neutral-trans-50), or if you wanted to display the primary-dark colour at 80% transparency, you would use var(--neutral-dark-trans-80). It is important to always use these variables, as it means all instances of every colour can be managed through ACSS.