Webflow Style Guide

Saasplex X is our ultimate SaaS Webflow Template & UI Kit designed to help your SaaS startup launch a cutting-edge website as easy as 1, 2, 3. It was designed & developed by the team of Webflow Designers & Developers at BRIX Agency.

Colors

Primary Colors

Primary 1
#4457FF

Secondary Colors

Secondary 1
#596AFF
Secondary 2
#3F4A59
Secondary 3
#3486d9
Secondary 4
#E1E4FF

Neutral Colors

Black1
#333333
Black2
#979797
Neutral 600
#7A7D9C
Neutral 500
#B1B3CB
Neutral 400
#D9DBE9
Gray2
#F2F2F2
Gray1
#F8F8F8
White
#FFFFFF

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 46px/1.276em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 40px/1.400em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 28px/1.500em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.455em
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 - 14px/1.800em

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.

Paragraph Default - 18px/1.667em

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.

Paragraph Large - 24px/1.583em

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
“Eget lorem dolor sed viverra ipsum nunc aliquet bibendum felis donec et odio pellentesque diam volutpat commodo sed egestas.”
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
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.
Numbered List
Odio facilisis mauris sit amet massa vitae tortor.
Figure and Figure Caption

Icons

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large

Cards

Card Default

Lorem ipsum dolor sit amet consectetur adipiscing elit interdum ullamcorper sed pharetra senectus.

Typography
HTML Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Heading Classes

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

앞서가는 기업들의 선택

Other HTML Tags

All Paragraph (HTML Tag)A 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
Block Quote
  • No bullet list

  • No bullet list

  • No bullet list

  • No bullet list

  1. No bullet list

  2. No bullet list

  3. No bullet list

Text Sizes

A 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.

A 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.

A 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.

A 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.

A 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
This is some text inside of a div block.
text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light
Text Styles
text-style-italic
text-style-strikethrough
text-style-allcaps
text-style-nowrap
text-style-quote
text-style-2lines
text-style-3lines
text-style-muted
Text Colours
text-color-black
text-color-black
text-color-white
Text Alignment
text-align-left
text-align-center
text-align-right
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

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

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
What’s a Rich Text element?

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!

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.

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
What’s a Rich Text element?

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!

  • List item
  • List item
  • List item
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.

Link Text

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
What’s a Rich Text element?

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!

  1. List item
  2. List item
  3. List item
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.

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?

What’s a Rich Text element?
What’s a Rich Text element?

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!

  1. List item
  2. List item
  3. List item
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.

쿼타북에 입력된 정보를 투자자에게 공유할 수 있는 기능입니다.

투자자를 초대하시게 되면 해당 투자자는 쿼타북에서 본인이 투자한 내역을 확인할 수 있게 됩니다.

각 투자자에 대한 열람 권한도 세밀하게 설정할 수 있어, 원하는 정보만 손쉽게 공유할 수 있습니다.

쿼타북에 투자자 및 스톡옵션 보유자를 등록할 시 개인, 기관, 펀드로 등록이 가능한데요.

이때 기관/펀드 투자자 전원을 초대해주시면 쿼타북을 50% 할인된 가격으로 이용하실 수 있습니다.

  • 초대 메시지를 보내시기만 해도 할인가 적용이 가능합니다.
  • 초대 수락 여부는 할인에 영향을 미치지 않습니다.
  • 각 기관/펀드 별로 여러 담당자가 있는 경우 한 담당자만 초대되어있으면 됩니다.
  • [이해관계자 관리] - [주주 및 이해관계자]에서 기관투자자 선택 후 ‘주주 초대하기'를 선택해 초대 메일을 발송합니다.
  • 투자자는 아래와 같은 메일을 받아보게 됩니다.
  • 투자자는 스타트업이 권한을 부여한 정보에 대해서만 접근 가능합니다.

Colors
PRIMARY
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
Secondary
.s1
.s2
.s3
.s4
NATURAL
.n1
.n2
.n3
.n4
.n5
.n6
.s7
BACKGROUND COLOR
.n1
.n2
.n3
.n4
.n5
.n6
.s7
UI Elements
Form Elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Icons

.icon-xxsmall

.icon-xsmall

.icon-small

.icon-medium

.icon-large

.icon-xlarge

.icon-1x1-xxsmall

.icon-1x1-xsmall

.icon-1x1-small

.icon-1x1-medium

.icon-1x1-large

.icon-1x1-xlarge

Images

Image Aspect Ratio 1:1

Image Aspect Ratio 4:3

Image Aspect Ratio 3:2

Image Aspect Ratio 16:9

Spacing
Margin Direction
.margin-top
.margin-bottom
.margin-left
.margin-right
.margin-horizontal
.margin-vertical
Margin Size
.margin-0
.margin-tiny
.margin-xxsmall
.margin-xsmall
.margin-small
.margin-medium
.margin-large
.margin-xlarge
.margin-xxlarge
.margin-huge
.margin-xhuge
.margin-xxhuge
.margin-custom1
.margin-custom2
.margin-custom3
Padding Direction
.padding-top
.padding-bottom
.padding-left
.padding-right
.padding-horizontal
.padding-vertical
Padding Size
.padding-0
.padding-tiny
.padding-xxsmall
.padding-xsmall
.padding-small
.padding-medium
.padding-large
.padding-xlarge
.padding-xxlarge
.padding-huge
.padding-xhuge
.padding-xxhuge
.padding-custom1
.padding-custom2
.padding-custom3
Layout
Container
.container-large
.container-medium
.container-small
Max-widths
.max-width-full
.max-width-full-tablet
.max-width-full-mobile-landscape
max-width-full-mobile-portrait
.max-width-xxsmall
.max-width-xsmall
.max-width-small
.max-width-medium
.max-width-large
.max-width-xlarge
.max-width-xxlarge
Other Classes
Responsiveness
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-mobile-landscape - hide starting from mobile landscape resolution
.hide-mobile-portrait - hide starting from mobile portrait resolution
.show - display on all devices
.show-tablet - display starting from tablet resolution
.show-mobile-landscape - display starting from mobile landscape resolution
.show-mobile-portrait - display starting from mobile portrait resolution
Utility
.z-index-1 - bring an element closer on the z-index, sets z-index to 1
.z-index-2 - bring an element closer on the z-index, sets z-index to 2
.align-center - sets margin left and right to auto, centers an element inside its parent div
.spacing-clean - sets all spacing to 0, including margins and padding
.div-square - creates and maintains a 1:1 dimension of a div. CSS magic
.layer - sets absolute position with 0% on all sides - add this class to a div to make it expand the entire size of the parent element, and make sure the parent div has 'position: relative'
.clickable-off - sets pointer-events to none, prevents all click and hover interaction with an element
.clickable-on - sets pointer-events to auto, enables all click and hover interaction with an element
.overflow-hidden - sets overflow to hidden
.overflow-scroll - sets overflow to scroll
.overflow-auto - sets overflow to auto