Style Guide

Introdução

Esta página de guia de estilo contém estilos e componentes utilizados em todo o site. Você pode alterar qualquer estilo nesta página e ele será atualizado em todo o site.

Este guia de estilo é baseado nas diretrizes da Finsweet chamada Client-First.

Classes estruturais

Estrutura central definida e flexível que podemos usar em todas ou na maioria das páginas.
page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group

Tags HTML Título

Classes de título quando o estilo de tipografia corresponde à tag HTML padrão.

Sample text helps you understand how real text may look.

H1

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

H2

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

H3

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

H4
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H5
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
H6

Estilos de título

Classes de título quando o estilo de tipografia não correspondem à tag HTML padrão.

Sample text helps you understand how real text may look.

heading-style-h1

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

heading-style-h2

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h3

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

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

Outras tags HTML

Classes de texto quando o estilo de tipografia corresponde à tag HTML padrão.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All paragraphs
All Links
All links
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All quotes
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Ordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists

Estilos de texto

Classes de texto quando o estilo de tipografia não corresponde à tag HTML padrão.

Tamanho

Sample text is being used as a placeholder for real text that is normally present.

text-size-large

Sample text is being used as a placeholder for real text that is normally present.

text-size-medium

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-regular

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-tiny

Estilo

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Peso

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

Alinhamento

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Botões

Sistema de combo class de botões
diwe-button
Button Text
diwe-button
is-small
Button Text
diwe-button
is-large
Button Text
diwe-button
is-outiline
Button Text
diwe-button
is-text
Button Text
diwe-button
is-icon
Button Text
diwe-button
is-terceary
Button Text

Cores

Gerencie cores recorrentes de textos e de fundo.

Paleta de cores

#222266
#5625f2
#292afe
#ee405d
#23c1ff
#1f1f23
#3f3f44
#686868
#95959b
#bebec6
#bebec6
#e6e6ed
#ededf4
#e9f0fa

Cores de fundo

background-color-intelligence
background-color-innovation
background-color-experience
background-color-support-blue
background-color-support-red
background-color-gray-700
background-color-gray-600
background-color-gray-500
background-color-gray-400
background-color-gray-300
background-color-gray-200
background-color-gray-100
background-color-gray-50

Cores de texto

text-color-intelligence
Hello world
text-color-innovation
Hello world
text-color-experience
Hello world
text-color-support-blue
Hello world
text-color-support-red
Hello world
text-color-gray-700
Hello World
text-color-gray-600
Hello world
text-color-gray-500
Hello world
text-color-primary-400
Hello world
text-color-primary-300
Hello world
text-color-primary-200
Hello world
text-color-primary-100
Hello world
text-color-gray-50
Hello world

Largura máxima

Use a propriedade CSS max-width para limitar o conteúdo interno de uma seção em uma largura máxima.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Espaçamento interno - Padding

Sistema de espaçamento com classes utilitárias. Utilize a combinação de classes de [direção do preenchimento] + [tamanho do preenchimento].
O padding é um do estilo de preenchimento dentro dos limites do conteúdo.

Classes de direção

padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right

Classes de tamanho

padding-0
padding-tiny
padding-xxsmall
Here we have the 0.25 rem padding
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
Here we have the 8 rem padding
padding-xxhuge

Espaçamento externo - Margem

Sistema de espaçamento com classes utilitárias. Utilize a combinação de classes de [direção da margem] + [tamanho da margem].
A margem é um do estilo de preenchimento fora dos limites do conteúdo.

Classes de direção

margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right

Classes de tamanho

margin-0
margin-tiny
margin-xxsmall
Here we have the 0.25 rem margin
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
Here we have the 8 rem margin
margin-xxhuge

Ícones

Unifique os tamanhos dos ícones. As classes icon-height definem a altura dos ícones. As classes icon-1x1 define a altura e a largura dos ícones.
icon-height-small
icon-height-medium
icon-height-large
icon-1x1-small
icon-1x1-medium
icon-1x1-large

Classes utilitárias convenientes

Classes utilitárias que gostamos de usar na maioria dos nossos projetos para construir mais rapidamente.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex

Componentes

Unifique blocos de design em todo o projeto.
This is some text inside of a div block
This is some text inside of a div block.

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

Leia o post completo
Card Blog
Seção com formulário
Newsletter

Elementos Webflow - Formulários

Formulários
Dropdown
Opção 1
Seu contato foi enviado com sucesso! :)
Em breve nossa equipe entrará em contato!
Oops! Ocorreu um erro, tente novamente.
form_component
Dropdown
Opção 1
Seu contato foi enviado com sucesso! :)
Em breve nossa equipe entrará em contato!
Oops! Ocorreu um erro, tente novamente.
form_component

Elementos Webflow - A serem organizados

Elementos nativos do Webflow com classes Client-First aplicadas.

Rich text

Classes com texto formatado criadas para suportar o conteúdo das coleções (CMS) como blog, cases, etc.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
post-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
post-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-regular-rich-text-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-small-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-medium-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-size-regular-dark-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-size-small-dark-richtext-content

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
design-system-text-size-medium-dark-richtext-content

Formulário

01
Value Building
01
This is some text inside of a div block.
CRM DATA
CRM Strategy
CRM Experience
Hello world 1
Hello world 2
Hello world 3
tab-menu_content
tab-link_content
nav-link_content_text
Section 1
Section 2
Hello world 1
Hello world 2
tab-menu
tab-link
tab-content
design-system-text-medium-richtext-content

Impulsione os resultados e o potencial do seu negócio agora.

Dropdown
Opção 1
Seu contato foi enviado com sucesso! :)
Em breve nossa equipe entrará em contato!
Oops! Ocorreu um erro, tente novamente.

Agende uma reunião
e acelere os seus resultados

Fale com nossos especialistas e descubra como nossas soluções
podem levar o seu negócio para o próximo nível.