Devflow Style Guide

Version 1.0 • Client-First V2
Typography
HTML Headings Tags
HTML tags define default Heading styles.
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Other HTML Tags
HTML tags define default text styles.
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links
All Links
All Block Quotes
Block Quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • No bullet list

  • No bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Heading Classes
Heading classes when typography style doesn't match the default HTML tag.
heading-style-h1
Font size: 56px / 3.5rem | Line height: 120% | Mobile: 40px / 2.5rem | Line height: 120%

Heading-style-h1

heading-style-h2
Font size: 48px / 3rem | Line height: 120% | Mobile: 36px / 2.25rem | Line height: 120%

Heading-style-h2

heading-style-h3
Font size: 40px / 2.5rem | Line height: 120% | Mobile: 32px / 2rem | Line height: 120%

Heading-style-h3

heading-style-h4
Font size: 32px / 2rem | Line height: 130% | Mobile: 24px / 1.5rem | Line height: 140%

Heading-style-h4

heading-style-h5
Font size: 24px / 1.5rem | Line height: 140% | Mobile: 20px / 1.25rem | Line height: 140%

Heading-style-h5

heading-style-h6
Font size: 20px / 1.25rem | Line height: 140% | Mobile: 18px / 1.125rem | Line height: 140%

Heading-style-h6

Text Sizes
Text sizes classes when typography size doesn't match the default HTML tag.
text-size-large
Font size: 20px / 1.25rem | Line height: 150% | Mobile: 18px / 1.125rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-medium
Font size: 18px / 1.125rem | Line height: 150% | Mobile: 16px / 1rem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-regular
Font size: 16px / 1rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-small
Font size: 14px / 0.875rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

text-size-tiny
Font size: 12px / 0.75rem | Line height: 150%

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Weights
Text weight classes when typography weight doesn't match the default HTML tag.
text-weight-xbold
text-weight-xbold (800)
text-weight-bold
text-weight-bold (700)
text-weight-semibold
text-weight-semibold (600)
text-weight-medium
text-weight-medium (500)
text-weight-normal
text-weight-normal (400)
text-weight-light
text-weight-light (300)
Text Styles
Text style classes when typography style doesn't match the default HTML tag.
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-3lines
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
text-style-muted
text-style-muted
Text Alignment
Text alignment classes when typography alignment doesn't match the default HTML tag.
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich Text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here
Colors
Color Palette
Neutral
neutral25
neutral50
neutral100
neutral200
neutral300
neutral400
neutral500
neutral600
neutral700
neutral800
neutral900
Primary
primary25
primary50
primary100
primary200
primary300
primary400
primary500
primary600
primary700
primary800
primary900
Secondary
secondary25
secondary50
secondary100
secondary200
secondary300
secondary400
secondary500
secondary600
secondary700
secondary800
secondary900
Error
error25
error50
error100
error200
error300
error400
error500
error600
error700
error800
error900
Warning
warning25
warning50
warning100
warning200
warning300
warning400
warning500
warning600
warning700
warning800
warning900
Success
success25
success50
success100
success200
success300
success400
success500
success600
success700
success800
success900
Tertiary / Others
tertiary100
tertiary200
tertiary300
tertiary400
tertiary500
tertiary600
Background Color
Manage recurring background colors.
bg-color-neutral25
bg-color-neutral50
bg-color-primary900
bg-color-primary300
bg-color-primary400
bg-color-primary700
bg-color-secondary600
bg-color-secondary300
bg-color-tertiary100
Text Color
Manage recurring text colors.
text-color-neutral25
text-color-neutral25
text-color-neutral50
text-color-neutral50
text-color-neutral100
text-color-neutral100
text-color-neutral200
text-color-neutral200
text-color-neutral300
text-color-neutral300
text-color-neutral400
text-color-neutral400
text-color-neutral500
text-color-neutral500
text-color-neutral600
text-color-neutral600
text-color-neutral700
text-color-neutral700
text-color-neutral800
text-color-neutral800
text-color-neutral900
text-color-neutral900
text-color-primary25
text-color-primary25
text-color-primary50
text-color-primary50
text-color-primary100
text-color-primary100
text-color-primary200
text-color-primary200
text-color-primary300
text-color-primary300
text-color-primary400
text-color-primary400
text-color-primary500
text-color-primary500
text-color-primary600
text-color-primary600
text-color-primary700
text-color-primary700
text-color-primary800
text-color-primary800
text-color-primary900
text-color-primary900
text-color-primary25
text-color-secondary25
text-color-primary50
text-color-secondary50
text-color-primary100
text-color-secondary100
text-color-primary200
text-color-secondary200
text-color-primary300
text-color-secondary300
text-color-primary400
text-color-secondary400
text-color-primary500
text-color-secondary500
text-color-primary600
text-color-secondary600
text-color-primary700
text-color-secondary700
text-color-primary800
text-color-secondary800
text-color-primary900
text-color-secondary900
text-color-tertiary100
text-color-tertiary100
text-color-tertiary200
text-color-tertiary200
text-color-tertiary300
text-color-tertiary300
text-color-tertiary400
text-color-tertiary400
text-color-tertiary500
text-color-tertiary500
text-color-tertiary600
text-color-tertiary600
Effects
Box Shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
shadow-xsmall
shadow-small
shadow-medium
shadow-large
shadow-xlarge
shadow-xxlarge
UI Elements
Buttons
button
See full class structure
button
button_small
See full class structure
button
is-small
button-secondary
See full class structure
button
is-secondary
button-secondary_small
See full class structure
button
is-secondary
is-small
button-link
See full class structure
button
is-link
button-link_small
See full class structure
button
is-link
is-small
To use on a dark background, simple use the add-on class
is-alternate
button_alternate
See full class structure
button
is-alternate
button_small-alternate
See full class structure
button
is-small
is-alternate
button-secondary_alternate
See full class structure
button
is-secondary
is-alternate
button-secondary_small-alternate
See full class structure
button
is-secondary
is-small
is-alternate
button-secondary_link-alternate
See full class structure
button
is-link
is-alternate
Button
button-secondary_link-small-alternate
See full class structure
button
is-link
is-small
is-alternate
Button
Buttons With Icons
button_icon
See full class structure
button
is-icon
button_small-icon
See full class structure
button
is-small
is-icon
button-secondary_icon
See full class structure
button
is-secondary
is-icon
button-secondary_small-icon
See full class structure
button
is-secondary
is-small
is-icon
button-link_icon
See full class structure
button
is-link
is-icon
button-link_small-icon
See full class structure
button
is-link
is-small
is-icon
Badges
badge-large
See full class structure
badge
is-large
Label
badge
See full class structure
badge
Label
badge-small
See full class structure
badge
is-small
Label
badge-secondary_large
See full class structure
badge
is-secondary
is-large
Label
badge-secondary
See full class structure
badge
is-secondary
Label
badge-secondary_small
See full class structure
badge
is-secondary
is-small
Label
badge_large-icon
See full class structure
badge
is-large
is-icon
Label
badge_icon
See full class structure
badge
is-icon
Label
badge_small-icon
See full class structure
badge
is-small
is-icon
Label
badge-secondary_large-icon
See full class structure
badge
is-secondary
is-large
is-icon
Label
badge-secondary_icon
See full class structure
badge
is-secondary
is-icon
Label
badge-secondary_small-icon
See full class structure
badge
is-secondary
is-small
is-icon
Label
Form Elements
form-input
See full class structure
form-input
form-text-area
See full class structure
form-input
is-text-area
form-select
See full class structure
form-input
is-select-input
form-checkbox
form-radio
submit-button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons (Image)
icon-height-xxsmall
icon-height-xsmall
icon-height-small
icon-height-medium
icon-height-large
icon-height-xlarge
icon-height-custom1
icon-1x1-xxsmall
icon-1x1-xsmall
icon-1x1-small
icon-1x1-medium
icon-1x1-large
icon-1x1-xlarge
icon-1x1-custom1
Structure Classes
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
button-group
is-center
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-portrait
max-width-full-landscape
max-width-xxlarge
Max W: 1280px / 80rem
max-width-xlarge
Max W: 1024px / 64rem
max-width-large
Max W: 768px / 48rem
max-width-medium
Max W: 560px / 35rem
max-width-small
Max W: 480px / 30rem
max-width-xsmall
Max W: 400px / 25rem
max-width-xsmall
Max W: 320px / 20rem
Paddings
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
Padding: 4px / 0.25rem
padding-xxsmall
Padding: 8px / 0.5rem
padding-xsmall
Padding: 16px / 1rem
padding-small
Padding: 24px / 1.5rem
padding-medium
Padding: 32px / 2rem
padding-large
Padding: 48px / 3rem
padding-xlarge
Padding: 64px / 4rem
padding-xxlarge
Padding: 80px / 5rem
padding-huge
Padding: 96px / 6rem
padding-xhuge
Padding: 112px / 7rem
padding-xxhuge
Padding: 160px / 10rem
padding-custom1
Padding: 0px / 0rem
padding-custom2
Padding: 0px / 0rem
padding-custom3
Padding: 0px / 0rem
Margins
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
Padding: 4px / 0.25rem
margin-xxsmall
Padding: 8px / 0.5rem
margin-xsmall
Padding: 16px / 1rem
margin-small
Padding: 24px / 1.5rem
margin-medium
Padding: 32px / 2rem
margin-large
Padding: 48px / 3rem
margin-xlarge
Padding: 64px / 4rem
margin-xxlarge
Padding: 80px / 5rem
margin-huge
Padding: 96px / 6rem
margin-xhuge
Padding: 112px / 7rem
margin-xxhuge
Padding: 160px / 10rem
margin-custom1
Padding: 0px / 0rem
margin-custom2
Padding: 0px / 0rem
margin-custom3
Padding: 0px / 0rem
Utility Classes
Useful utility classes we like to use in most of our projects to build faster.
spacing-clean
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
show-tablet
show-mobile-landscape
show-mobile-portrait
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
align-center
z-index-1
z-index-2
display-inlineflex
margin-top-auto