Style Guide

A style guide, or style manual, is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. The implementation of a style guide

Style Guide

1. Color 2. Typography 3. Buttons

Colors

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Purple

#8b47ed

Red

#e34b65

Green

#62e39c

Blue

#474bc5

Grey

#f5f5f5

Dim Grey

#646464

Misty Rose

#ffe4d4

Pale Goldenrod

#ffe4d4

Honeydew

#e7fff3

White

#ffffff

Black

#1d1d1d

Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Heading 1 - Bold, 72px, 110%, -2px

Gold Standard Customer Relationships

Heading 2 - Semi Bold, 56px, 110%,

Gold Standard Customer Relationships

Heading 3 - Medium, 40px, 110%,

Gold Standard Customer Relationships

Heading 4 - Medium, 32px, 110%,

Gold Standard Customer Relationships

Heading 5 - Medium, 24 px, 110%,

Gold Standard Customer Relationships

Heading 6 - Medium, 20px, 110%,

Gold Standard Customer Relationships

Body Text - Regular, 20px, 140%,

Gold Standard Customer Relationships

Body Text - Regular, 18px, 150%,

Gold Standard Customer Relationships

Body Text - Regular, 16 px, 140%,

Gold Standard Customer Relationships

Buttons

These are all the buttons that are used in this project. Editing them will reflect the changes on all the other buttons of the project too.

Get Started Get Started Get Started Get Started Get Started Get Started

Let's Connect

Wripple is changing the way digital work gets done, for the better. If you want to learn more about how our platform can help, we want to talk!