Typography

Typography can help create clear hierarchies, organize information, and guide users through a product or experience. Typography consists of basic text writing, including headings, body text, lists, and more.

Headings

Heading XL

This is Extra Large (XL) Heading

This is Large (L) Heading

Heading L

This is Medium (M) Heading

Heading M

This is Small (S) Heading

Heading S
This is Extra Small (XS) Heading
Heading XS
This is Extra Extra Small (XXS) Heading
Heading XXS

Body text

This is Large (L) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text L
Body Text M

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Body Text S

This is Small (S) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Text Components

Rich Text

This is Heading 1 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 2 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 3 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 4 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 5 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is Heading 6 inside of a Rich Text

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

This is a paragraph inside of a Rich text. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.

Paragraph

  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  • This is an unordered list item inside of a Rich Text
  1. This is an ordered list item inside of a Rich Text
  2. This is an ordered list item inside of a Rich Text
  3. This is an ordered list item inside of a Rich Text
This is a block quote. Authoritatively restore sticky innovation after performance based information. Uniquely engineer dynamic methods of empowerment through B2C niches. Assertively recaptiualize professional core competencies vis-a-vis empowered portals.
Tagline
Tagline
Text Wrapper
This is a Tagline

This is Large (L) Heading

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button text
Button text
Text Wrapper Centered
This is a Tagline

This is Large (L) Heading

This is Medium (M) body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Button text
Button text

Lists

Unordered list
  • This is an unordered list item
  • This is anunordered list item
  • This is anunordered list item
Ordered list
  1. This is an ordered list item
  2. This is an ordered list item
  3. This is an ordered list item
Unordered list with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
Horizontal list
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
  • check
    This is a list item with an icon
Typography

All SystemFlow resources

SystemFlow Full Version

Everything you need to ship websites faster than ever. Preview all components and sections in the full version of SystemFlow.

SystemFlow for Figma (Free version)

Get a free Figma version where you can use all components, icons and styles and some sections components.

SystemFlow University

Watch a complete guide for Full Version of our framework for Figma and Webflow. Learn how to use the docs, components, styles and more!

Components

Components are the reusable building blocks of SystemFlow. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

General

Typography
Button
Icons

Navigation

Link
Breadcrumbs
Dropdown
Nav Menu

Form

Input
Textarea
Form Toggles
Example Forms

Data Display

Avatar
Card
Collapse
Table
Tag
Tabs
Tooltip

Feedback

Alert
Modal
Toast

Sections

Use sections to build landing pages in a swift. SystemFlow Lite contains 2 out of 15 section categories available in the full version.

Hero Section
FAQ Section

Get access to all SystemFlow components in Full Version

Get SystemFlow