Style Guide V.1

This page will be where you centralize and update all your styles to align with your brand identity. Any changes you do here will effect your entire theme. Avoid making changes directly on other pages to prevent design inconsistencies.

Typography

Sample text size of Heading 01

Default Size of Heading 1

Sample text size of Heading 02

Default Size of Heading 2

Sample text size of Heading 03

Default Size of Heading 3

Sample text size of Heading 04

Default Size of Heading 4

Sample text size of Heading 05

Default Size of Heading 5

Sample text size of Heading 06

Default Size of Heading 6

Heading Style

Heading Style H1

Text Styling as H1

Heading Style H2

Text Styling as H2

Heading Style H3

Text Styling as H3

Heading Style H4

Text Styling as H4

Heading Style H5

Text Styling as H5

Heading Style H6

Text Styling as H6

Body Text

All Paragraph 16

16px

Small Body Text 15

15px

XS Body Text 14

14px

XXS Body Text 13

13px

Mono Text 15

15px

XS Mono Text 14

14px

XXS Mono Text

13px

XXXS Mono Text

12px

All Link

Text as Link

Rich Text

All Paragraph

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.

‍

Bold text

‍

Emphasis

‍

^Superscript

_Subscript

‍

Ordered list

‍

Item 1
Item 2
Item 3

‍

Unordered list

‍

Item A
Item B
Item C

‍

Block quote

‍

1Sample Code Block

‍

Default Image

Color Scheme

Neutral Colors

White

#ffffff

Grey-600

#c7c7c7

Grey-500

#8d8d8d

Grey-400

#585858

Grey-300

#272727

Grey-200

#1b1b1b

Grey-100

#151515

Accent Colors

Accent-01

#e47831

Accent-02

#a2f865

Accent-03

#36cdff

Accent-04

#ff88be

Accent-05

#b5947e

Accent-06

#c599ff

State Colors

Success State

#ace286

Error State

#df4a63

UI Kits

Button & Elements

Get Started

Main Button

Get Started

Secondary Button

Purchase

Text Link

View Docs

Animated Text Link

Overline_

Careers_

Hero Overline

Explore Playground

Try our interactive hub

CTA Panel

Need Help?

New to Webflow? No worries! Get started with Webflow University's 101 Course. If you have any questions, please do not hesitate to contact us.

const next = await fetch("https://api.example.com/end-section");

Black and white grid pattern with black dots at the intersections, forming a repeating checkered design.

BUY NOW

CUSTOMIZE