-p-130x130q80.avif)
.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."
Serasa's goal is to improve the financial health of the entire population. To do this, we need to reach people and show the different functionalities and opportunities offered by the company. For this reason, brand protection through the partnership with Branddi was another step to prevent customer diversion and to further protect consumers. It is a long-term project that has already brought surprising results in this first semester of partnership.
The partnership with Branddi is essential to boost our results, lower our costs and bring more security to the brand, which gives us peace of mind to develop our strategies. We performed better in our campaigns, protected our brand and our customers, and continued to grow and strengthen our online presence more and more. The entire Branddi team is super willing, communicative, strategic and careful in all negotiations, analyses, and opportunities since the beginning of the project. Regarding protection against fraud, in 1 week of operation, we have already had positive effects in relation to the number of calls with the service team on the subject
Working in partnership with Branddi and GHFly was an incredible experience for our team. Collaboration was critical to improving Ticket protection. With Branddi's efficient monitoring and GhFly's creative strategies, we obtained really positive results. Brand campaigns are now more effective than ever, reaching our target audience in a more targeted manner and protecting our image from aggressors. We're thrilled with the progress and look forward to the next results!
Receiving Branddi's reports on a daily basis was essential for us to visualize the use of our terms, something we couldn't see any other way. Our campaigns were already showing results with Media.Moonks Brasil and Branddi came to be the technology that enhanced our performance. This is because in addition to being a solution that guarantees a reduction in our costs, we are also able to reach our customers without deviations and protect the buying journey and our brand. We are very pleased and looking forward to the next results!
“Branddi was essential to assist us in controlling our brand. We were able to eliminate competitors that were inflating our costs and, at the same time, increase ROAS significantly. The consultancy brought clarity, efficiency, and real shielding to our campaigns”
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.
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.
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