Design System

The global styles for the Dynamic Maids webflow template.

Fundamentals

Brand

Use live type for your logo, or replace the text boxes with an image. Be sure to include both the full colour and reversed versions of your logo. Change your logo inside the symbol and it will automagically update everywhere else it appears (Like the top left of this style guide!).

Horizontal logo

logo-primary

Alt Logo

logo-reversed

Small Logo

logo-small

Colors

Color scale uses a similar structure to Material Design . Every color is called by name, has a 100 tint value and a scale of lighter tints. I've also included their darker shades of 110 that cover AA accessibility.

is--color-primary

Annoncement bar, Background,

is--color-primary-080

Hover

is--color-primary-040

Background, shadows

is--color-primary-060

seperating background

is--color-primary-010

#f7f6f2

is--color-secondary

#cf6653

is--color-secondary-090

#edba8e

is--color-secondary-030

#F1DDCD

is--color-secondary-010

#F4ECE6

is--color-tertiary

Links, Backrgound, Hover States, icons

is--color-tertiary-080

#EDDCD2

is--color-error

AA accessible Copy
Icons
Buttons background. and borders

is--color-warning-080

Hover State

is--color-error-060

bacgrounds

is--color-success

AA accessible Copy
Icons
Buttons background. and borders

is--color-success-080

Hover State

is-color-success-060

bacgrounds

is-color-warning

AA accessible Copy
Icons
Buttons background. and borders

is--color-warning-080

is--color-warning-060

color-Neutral-100

Body Copy

color-Neutral-080

#353434

color-Neutral-060

Subtle copy
Inactive form field copy
Hover
Disabled Copy

color-Black

Limited use.
Some headings
Keylines

color-White

Limited use
Backgrounds
Reversed Copy

Surfaces

Surfaces are used to emulate real-world depth at various levels of elevation where a light source is casting a shadow from the surface onto the layer below it. The higher the elevation value, the more diffused the shadow becomes and we have 8 levels to choose from.

surface-L1

surface-L2

surface-L3

surface-L4

surface-L5

surfaceL-6

surface-L7

surface-L8

Typography Dark

Our type-scale adheres to a 4-8pt scale, starting with small body text and heading right up to a large heading class called Title. Heading styles use Obviously Book and Regular and paragraphs use Benton Sans Regular, both of which are Adobe fonts from subscription.

Headings

N100

Huge h1 L

Huge h1 C

Huge Hero h1 R

t1: Left, Center and Right. 56/64 on Desktop and 40/48 on mobile.

h1 L

h1 C

h1 R

h1: Left, Center and Right. 48/60 on Desktop and 32/40 on mobile.

h2 L

h2 C

h2 R

h2: Left, Center and Right. 32/40 on Desktop and 24/32 on mobile.

h3 L

h3 C

h3 R

h3: Left, Center and Right. 24/32 on Desktop and 20/28 on mobile.

h4 L

h4 C

h4 R

h4: Left, Center and Right. 16/24 on Desktop and mobile.

R100

Huge H1 L

Huge H1 C

Huge H1 R

#ff5252

H1 L

h1 C

h1 R

h2 L

h2 C

h2 R

h3 L

h3 C

h3 R

h4 L

h4 C

h4 R

B100

Huge H1 L

Huge H1 C

Huge H1 R

#536dfe

h1 L

h1 C

h1 R

h2 L

h2 C

h2 R

h3 L

h3 C

h3 R

h4 L

h4 C

h4 R

Paragraph

p L

p C

p R

p: Left, Center and Right. 16/24.

#444444

p L

p C

p R

pN60: Left, Center and Right. 16/24.

#888888

p L

p C

p R

pR100: Left, Center and Right. 16/24.

#ff5252

p L

p C

p R

pSmall: Left, Center and Right. 14/18.

#444444

p L

p C

p R

pSmallN60: Left, Center and Right. 14/18.

#888888

p L

p C

p R

pSmallR100: Left, Center and Right. 14/18.

#ff5252

Links

a L a L a L

a: Left, Center and Right. 16/24.

#536dfe

a L a L a L

aSmall: Left, Center and Right. 14/18.

#536dfe

Lists

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Unordered and ordered lists

#444444

Typography Light

White text values.

Headings

Huge H1 L

Huge H1 C

Huge H1 R

t1: Left, Center and Right. 56/64 on Desktop and 40/48 on mobile.

#FFFFFF

h1 L

h1 C

h1 R

h1: Left, Center and Right. 40/48 on Desktop and 32/40 on mobile.

#FFFFFF

h2 L

h2 C

h2 R

h2: Left, Center and Right. 32/40 on Desktop and 24/32 on mobile.

#FFFFFF

h3 L

h3 C

h3 R

h3: Left, Center and Right. 24/32 on Desktop and 20/28 on mobile.

#FFFFFF

h4 L

h4 C

h4 R

h4: Left, Center and Right. 16/24 on Desktop and mobile.

#FFFFFF

Paragraph

p L

p C

p R

p: Left, Center and Right. 16/24.

#FFFFFF

p L

p C

p R

pSmall: Left, Center and Right. 14/18.

#FFFFFF

Lists

List item 1
List item 2
List item 3

List item 1
List item 2
List item 3

Unordered and ordered lists

#FFFFFF

Iconography

A starter set of SVG icons in 16 and 24px sizes.

16px

24px

Images

Starting with four image aspect ratios of landscape, portrait, square and avatar. These images have been placed inside parent DIVs that keep their aspect ratios when the page is resized. There's also a banner version that uses a background image that's been set to "Cover".

Landscape banner

image-landscape-banner with a background image set to "Cover" in 100% wrapper

Portrait

image-portrait

Square

image-square

Avatar

image-avatar in 86x86px wrapper "is--small"

Components

Buttons

The Primary button style is filled with rounded corners and the Secondary style uses an outline. On hover, we use 95% brightness, a drop shadow and animation to give them a little personality.

Large

btn-primary

btn--white

btn--secondary

btn--secondary-white

Small

Label

button-primary btn-sm

Label

btn--white btn--sm

Label

btn-secondary btn--sm

Label

btn--secondary-white btn--sm

Forms

We take Webflow's default styles and style them with Dezin's global styles.

Thank you! Your message has been received!

Oops! Something went wrong. Please fill in the required fields and try again.

Videos

Webflow comes with two main video embed objects. One that just displays the video via a url and another Youtube one that lets you adjust playback and privacy controls.

Video embed

Basic video embed. Just replace the video url and you're good to go.

Tabs

We take Webflow's clean, simple tabs and style them with the global styles.

Tab set

Tab 1 content

Tab 2 content

Tab 3 content