DFFRNT - Style Guide

Headings

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h2

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h3

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h4

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

heading-style-h5
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
heading-style-h6
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-large

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

text-size-base

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

text-size-small

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

text-size-xsmall

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Text Styles

text-style-allCaps

text-style-allcaps

text-style-link
text-style-link

Text Weights

text-weight-xbold

text-weight-xbold

text-weight-bold

text-weight-bold

text-weight-semibold

text-weight-semibold

text-weight-medium

text-weight-medium

text-weight-normal

text-weight-normal

text-weight-light

text-weight-light

Text Alignments

text-align-left

text-align-left

text-align-center

text-align-center

text-align-right

text-align-right

Text Special Class

text-overline-large

text-overline-large

text-overline-base

text-overline-base

text-overline-small

text-overline-small

Rich Text

This overrides webflow's default rich text styles.

text-color-dark

rich-text-rich
text-size-large
text-color-dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

rich-text-rich
text-size-base
text-color-dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

rich-text-rich
text-size-small
text-color-dark

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

text-color-light

rich-text-rich
text-size-large
text-color-light

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

rich-text-rich
text-size-base
text-color-light

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

rich-text-rich
text-size-small
text-color-light

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Colors

Manage recurring text and background colors.

Text Colors

text-color-dark

text-color-dark

text-color-light

text-color-light

text-color-lime

text-color-lime

text-color-red

text-color-red

text-color-purple

text-color-purple

Background Colors

background-color-white
background-color-grey
background-color-navy
background-color-midnight

Buttons

Button combo class system. (should consider simplifying button components)

Button
Button Text
button-primary-light
Button Text
button-primary-dark
Button Text
button-secondary-dark
Button Text
button-secondary-dark
Button Text
button-back-on-dark
Go back to services
button-back-on-light
Go back to services
button-back-on-image
Go back to services
button-form-on-light
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
button-form-on-dark
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Components

Pill

pill
This is some text inside of a div block.

Form

form_block
Explain how this works
Thank you! Your submission has been received!
Download Resource
Oops! Something went wrong while submitting the form.
form_newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
See All
Research
Design
Executive & Management
Research
002
UX Research Methods

Combine Rich Insights With Data-Driven Validation For Informed Decisions.

Research
004
User Interviews & Focus Groups

Learn Techniques To Gather Meaningful Insights Directly From Your Users.

Research
005
Contextual Research Methods

Explore External Factors Shaping User Behavior And Market Opportunities.

Research
003
Creating Effective Surveys

Master The Art Of Designing Surveys That Capture Actionable User Feedback.

Research
001
User Research – Your Strategic Superpower

Unlock The Potential Of User Insights To Drive Impactful Design.

Executive & Management
001
Executive Playbook: Innovating Products & Services for the Digital Age

A practical course for leaders to drive innovation, embrace new technologies, and create customer‑focused solutions.

Design
002
Advanced Prototyping with Figma

Create Dynamic, Interactive Prototypes That Bring Designs To Life.

Design
001
Figma 101

Get Started With Figma And Build A Strong Foundation For Collaborative Design.

Executive & Management
009
Strategic UX Roadmapping and Prioritization

Align UX Initiatives with Business Goals Through Clear, Impactful Roadmaps

Executive & Management
008
Scaling UX Across Enterprises

Build and Implement User Experience Practices at Scale to Drive Consistency and Innovation

Executive & Management
007
Data-Driven UX Strategy and Decision Making

Leverage Data Insights to Create User-Centered Strategies That Drive Business Success

Executive & Management
006
Building a UX Maturity Model for Organizations

Elevate Your Organization’s UX Capabilities to Deliver Consistent and Measurable Value

Executive & Management
005
Integrating UX Strategy into Business Goals

Align User Experience Design with Business Objectives to Drive Growth and Customer Satisfaction

Executive & Management
004
Design Thinking for Executive Leadership

Harness Human-Centered Design to Drive Innovation and Solve Complex Business Challenges

Executive & Management
003
Strategic Foresight and Innovation Management

Anticipate Future Trends and Build Resilient Innovation Strategies for Long-Term Success

Executive & Management
002
Leading Innovation in a Digital Age

Empower Your Leadership to Navigate and Drive Innovation in a Rapidly Evolving Digital World