.avif)
-p-130x130q80.avif)
Olá, eu sou a Marta!
Como posso ajudar?
Client-First — Version 2.1
Style Guide
Client-First é um conjunto de diretrizes e estratégias criadas para ajudar na criação Webflow.
HTML Heading Tags
As tags HTML definem os estilos de título padrão.
H1
Sample text helps you understand how real text may look. Sample text is being used as a placeholder.
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.
H3
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.
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.
H5
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.
H6
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 Styles
Heading classes, quando o estilo de tipografia não corresponde à tag HTML padrão.
heading-style-h1
Sample text helps you understand how real text may look.
heading-style-h2
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
heading-style-h3
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-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.
heading-style-h5
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-h6
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-xlarge
Sample text helps you understand how real text may look.
heading-large
Sample text is being used as a placeholder. Sample text helps you understand how real text may look.
heading-medium
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-small
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-xsmall
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.
Text Classes
Text classes quando o estilo de tipografia não corresponde à tag HTML padrão.
Text Sizes
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 on your website.
text-size-regular
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-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
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 Styles
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-1line
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-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.
Text Weights
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
Text Alignments
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Text wrap
text-wrap-balance
text-wrap: balance
text-wrap-pretty
text-wrap: pretty
Buttons
Sistema de combo class para botões.
button
Button Textbutton
is-small
button
is-large
button
is-secondary
button
is-text
button
is-icon
Blinde sua marca
button
is-link
is-icon
Button Text
Colors
Gerencie as cores em textos recorrente e cores de fundo.
Text Colors
text-color-black
text-color-black
text-color-grey
text-color-grey
text-color-white
text-color-white
Background Colors
background-color-black
background-color-grey
background-color-white
Structure Classes
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
Paddings
Sistema de espaçamento de utilitários - padding classes. [padding-direction] + [padding-size].
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
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
Margins
Sistema de espaçamento de utilidades - classes de margem. [margin-direction] + [margin-size].
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
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
Spacers
Sistema espaçador unificado para o projeto.
spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge
spacer-huge
spacer-xhuge
spacer-xxhuge
Max widths
Use a propriedade CSS max-width para conter o conteúdo interno 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
Useful utility systems
Classes utilitárias que gostamos de usar na maioria de nossos projetos para construir mais rápido.
hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-off
layer
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
Webflow elements
Elementos nativos do Webflow com classes Client-First aplicadas.
form_component
Exemplo de um componente de formulário usando pastas
text-rich-text
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 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.
- 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.
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 that is normally present.
Icons
Unifique os tamanhos dos ícones. icon-height define a altura dos ícones. 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
Interact base
Interações de entrada para componentes via classes
a-up-0.1
0.1 sec
a-up-0.2
0.2 sec
a-up-0.3
0.3 sec
a-up-0.4
0.4 sec
a-down-0.1
0.1 sec
a-down-0.2
0.2 sec
a-down-0.3
0.3 sec
a-down-0.4
0.4 sec
a-left-0.1
0.1 sec
a-left-0.2
0.2 sec
a-left-0.3
0.3 sec
a-left-0.4
0.4 sec
a-right-0.1
0.1 sec
a-right-0.2
0.2 sec
a-right-0.3
0.3 sec
a-right-0.4
0.4 sec
a-scale_in-0.1
0.1 sec
a-scale_in-0.2
0.2 sec
a-scale_in-0.3
0.3 sec
a-scale_in-0.4
0.4 sec
Components
Guia de componentes criados para consistência e replicação ao longo de todo o projeto.
Navbar
Modelo de componente padrão
Cases section
Modelo de componente padrão
"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."
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique."
O objetivo de Serasa é melhorar a saúde financeira de toda a população. Para isso, precisamos chegar até as pessoas e mostrar as diferentes funcionalidades e oportunidades oferecidas pela empresa. Por isso, a proteção de marca através da parceria com a Branddi foi mais um passo para evitarmos o desvio dos clientes e protegermos ainda mais os consumidores. É um trabalho a longo prazo que já vem trazendo resultados surpreendentes neste primeiro semestre de parceria.
A parceria com a Branddi é essencial para impulsionar nossos resultados, diminuir nossos custos e trazer mais segurança para a marca, o que nos dá tranquilidade para desenvolvermos nossas estratégias. Obtivemos um melhor desempenho em nossas campanhas, protegemos nossa marca e nossos clientes, e seguimos crescendo e fortalecendo nossa presença online cada vez mais. Todo o time Branddi é super disposto, comunicativo, estratégico e cuidadoso em todas as negociações, análises e oportunidades desde o início do projeto.Em relação à proteção contra fraudes, em 1 semana de operação já tivemos reflexos positivos em relação ao número de chamados com o time de atendimento sobre o tema
Trabalhar em parceria com a Branddi e a GhFly foi uma experiência incrível para a nossa equipe. A colaboração foi fundamental para melhorar a proteção da Ticket. Com o monitoramento eficiente da Branddi e as estratégias criativas da GhFly, obtivemos resultados realmente positivos. As campanhas da marca agora estão mais eficazes do que nunca, alcançando nosso público-alvo de forma mais direcionada e protegendo nossa imagem de agressores. Estamos entusiasmados com o progresso e ansiosos para os próximos resultados!
Receber os relatórios da Branddi diariamente foi essencial para visualizarmos o uso de nossos termos, algo que não poderíamos ver de outra forma. As nossas campanhas já estavam apresentando resultados com a Media.Moonks Brasil e a Branddi veio para ser a tecnologia que potencializou a nossa performance. Isso porque além de ser uma solução que garante a redução nos nossos custos, também estamos conseguindo chegar até os nossos clientes sem desvios e proteger a jornada de compra e a nossa marca. Estamos muito satisfeitos e ansiosos com os próximos resultados!
The partnership with Branddi is essential to boost our results, reduce our costs, and bring more security to the brand, giving us peace of mind to develop our strategies. We achieved better performance in our campaigns, protected our brand and customers, and continue to grow and strengthen our online presence. The entire Branddi team is highly engaged, communicative, strategic, and attentive in all negotiations, analyses, and opportunities since the beginning of the project.
The partnership with Branddi was crucial in boosting our campaigns, protecting our brand, and expanding our visibility in the market. The entire team is proactive, strategic, and committed to results, ensuring efficiency at every stage of the project.
Footer
Modelo de componente padrão
Pronto para blindar sua marca?
Não deixe seus clientes caírem nas garras de concorrentes, golpistas e aproveitadores.
Live chat WhatsApp
Modal de form para WhatsApp
.avif){kind=avatar}
Obrigado por enviar seus dados!
Caso não seja redirecionado você pode clicar no botão e ir direto para o WhastApp.
Caso não seja redirecionado você pode clicar no botão e ir direto para o WhastApp.
Falar pelo WhatsApp
Ops! Algo deu errado, tente outra vez!
© Developed by Studio Colab