Zenfi Design System

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

#28CF9C

color-G100

#32DAA7

color-G80

#40EDB8

color-G60

#76F9D1

color-B40

#A7F9E0

color-G10

#E2FFF6

color-B110

#0096FC

color-B100

#25B1FE

color-B80

#54E7F8

color-B60

#B9F8FF

color-B40

#EBFDFE

color-B10

#F5FFFF

color-P110

#4B05C1

color-P100

#5B0BE1

color-P80

#7625FF

color-P60

#A570FF

color-P40

#D7BFFF

color-P10

#F6F0FF

color-R110

#FF3333

color-R100

#FF5252

color-R80

#FF7575

color-R60

#FF9797

color-R40

#FFBABA

color-R10

#FFEDED

color-Y110

#B8860B

color-Y100

#fdd835

color-Y80

#FDE05D

color-Y60

#FEE886

color-Y40

#FEEFAE

color-Y10

#FEFBEA

‍

color-N110

#2E3A59

color-N100

#737C93

color-N80

#8F9BB3

color-N60

#E4E9F2

color-N40

#EDF1F7

color-N10

#F7F9FC

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

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