Dezin Design System

Dezin Design System for Webflow is a free and clone-able site from Christopher Deane that allows you to kick start the development process of your Webflow projects.

If you’d like to support this project then sign up to Webflow using my affiliate link.

Clone Dezin Dezin homepage

Fundamentals

Brand

The Dezin logo is created with geometric shapes that represent the building block nature of design systems. It uses our Primary Color Red 100, 4 Secondary Colors and a few extra tints to create depth in each letter. You can swap it out for your own and adjust the values of the .logoPrimary class to change it's size.

Horizontal logo

logo-primary

Logo mark

logo-primary-mark

Colors

Dezins color scale uses a similar structure to Material Design and AtlasKit. 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.

color-R110

#FF3333

color-R100

#FF5252

color-R80

#FF7575

color-R60

#FF9797

color-R40

#FFBABA

color-R10

#FFEDED

color-B110

#4B63E6

color-B100

#536DFE

color-B80

#758AFE

color-B60

#98A7FE

color-B40

#BAC5FF

color-B10

#EDF0FE

color-LB110

#0099E6

color-LB100

#40C4FF

color-LB80

#66D0FF

color-LB60

#8CDCFF

color-LB40

#B3E7FF

color-Y10

#FEFBEA

color-G110

#00A653

color-G100

#00E676

color-G80

#33EB91

color-G60

#66F0AD

color-B40

#99F5C8

color-G10

#E5FCF1

color-O110

#CC7A00

color-O100

#FF9800

color-O80

#FFAD33

color-O60

#FFC166

color-O40

#FFD699

color-O10

#FFF4E5

color-Y110

#B8860B

color-Y100

#fdd835

color-Y80

#FDE05D

color-Y60

#FEE886

color-Y40

#FEEFAE

color-Y10

#FEFBEA

color-N100

#222222

color-N80

#444444

color-N60

#888888

color-N20

#EBEBEB

color-N10

#F6F6F6

color-Black

#000000

color-White

#FFFFFF

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 Montserrat Bold and paragraphs use Source Sans Pro Regular, both of which are free Google fonts. Override these with your own type face choices.

Headings

N100

t1 L

t1 C

t1 R

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

#222222

h1 L

h1 C

h1 R

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

#222222

h2 L

h2 C

h2 R

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

#222222

h3 L

h3 C

h3 R

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

#222222

h4 L

h4 C

h4 R

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

#222222

R100

t1 L

t1 C

t1 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

t1 L

t1 C

t1 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

t1 L

t1 C

t1 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

Landscape

image-landscape in 100% wrapper

Portrait

image-portrait in css grid column 1

Square

image-square in css grid column 2

Avatar

image-avatar in 40px wrapper

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-secondary

btn--white

btn--outline-dark

btn--outline-dark

Medium

Label

btn-primary btn--med

Label

btn-secondary btn--med

Label

btn--white btn--med

Label

btn--outline-dark btn--med

Label

btn--outline-dark btn--med

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.

Video youtube

Youtube video player.

Tabs

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

Tab set

Tab 1 content

Tab 2 content

Tab 3 content