Webflow Style Guide

Freelancer X is a Webflow Ecommerce Template created for Designers looking to have a minimalist, yet professional portfolio website. It was designed & developed by the BRIX Templates team.

Link

Colors

Neutral Colors

Neutral 800

#1D1D1D

Neutral 700

#3A3A3A

Neutral 600

#4A4A4A

Neutral 500

#636363

Neutral 400

#909090

Neutral 300

#C9C9C9

Neutral 200

#E3E3E3

Neutral 100

#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 60px/1.083em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 38px/1.289em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 26px/1.308em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.273em

Heading H5 - Aa Bb Cc Dd

Heading 5 - 18px/1.333em

Heading H6 - Aa Bb Cc Dd

Heading 6 - 16px/1.375em

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.

Paragraph Small - 15px/1.600em

Paragraph Default - 16px/1.688em

Paragraph Large - 24px/1.583em

Link - Lorem ipsum dolor sit amet

Links

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text

“Vehicula ipsum a arcu cursus vitae. Nec nam aliquam sem et tortor consequat id. Et magnis dis parturient montes nascetur ridiculus mus. In nibh mauris.”

Block Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing.

Bullet List

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing.

Numbered List

Mattis rhoncus urna neque viverra justo.

Figure and Figure Caption

Links

Link

Link Primary - Default

Cards

Card default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Zero-G Cutlery

Master's Thesis Project
Imperial College London / Royal College of Art

Date

May 2021

Project Type

Design Research

Product Design

Design Thinking

Press

Reuters

Redesigning The Spoon For Space Dining

[Aug 2021]

Text Link

This is some text inside of a div block.

Heading

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.