Style Guide Generator

I decided to build this interactive web design style guide generator as a way to better my skills with the DOM, HTML, CSS and Javascript.
The user can interact with the buttons to change the layout, font styles, colours and imagery.
Once you have finished reading this, just click on this paragraph and the text will change.

The Generator

Click on the buttons to reveal new fonts and colour palettes.
Each font will be displayed in it's various heading elements, font emphasises and some body text.
Each colour palette generated with display 4 colours.

Typography

Font 1: Display Font

Display fonts are usually more decorative or unusual than traditional serif or sans-serif fonts. They can be used to create a unique brand identity and can be a good choice for brands that want to stand out from the crowd, such as creative agencies or boutique brands.

H1: Heading

H2: Heading

H3: Heading

H4: Heading

H5: Heading
H6: Heading

Regular

Italic

Bold

Sorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Font 2: Serif Font

Serif Fonts: Serif fonts have small lines or flourishes at the end of each letter stroke. They are often associated with tradition, authority, and elegance. Serif fonts can be a good choice for brands that want to convey a sense of professionalism and sophistication, such as law firms, universities, or luxury fashion brands.

H1: Heading

H2: Heading

H3: Heading

H4: Heading

H5: Heading
H6: Heading

Regular

Italic

Bold

Sorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Font 3: Sans Serif Font

Sans-Serif Fonts: Sans-serif fonts do not have the small lines or flourishes at the end of each letter stroke. They are often associated with modernity, simplicity, and clarity. Sans-serif fonts can be a good choice for brands that want to convey a sense of innovation, simplicity, and clarity, such as tech companies or startups.

H1: Heading

H2: Heading

H3: Heading

H4: Heading

H5: Heading
H6: Heading

Regular

Italic

Bold

Sorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Colour Palettes

Colours

A brand's color palette typically consists of 4 colors: a primary color that represents the brand's core values, a secondary color that complements the primary color, an accent color that draws attention to important elements, and a neutral color that balances out the other colors. When selecting a color palette, it's important to consider how the colors work together as a cohesive unit and what emotions they might evoke in consumers. By carefully selecting a color palette that reflects the brand's personality and values, a brand can create a memorable and effective visual identity.