finsweet.com
Open in
urlscan Pro
2a06:98c1:3120::3
Public Scan
Submitted URL: http://finsweet.com/client-first/docs
Effective URL: https://finsweet.com/client-first/docs
Submission: On January 28 via automatic, source links-suspicious — Scanned from NL
Effective URL: https://finsweet.com/client-first/docs
Submission: On January 28 via automatic, source links-suspicious — Scanned from NL
Form analysis 2 forms found in the DOM
Name: email-form — GET
<form id="email-form" name="email-form" data-name="Email Form" method="get" class="docs_page_form" data-wf-page-id="65735ae231ce6f85dc671411" data-wf-element-id="5a1c9c4a-c21d-0ff3-b6f9-02bd2b934683" aria-label="Email Form">
<div class="docs_page_section">
<div class="docs_page_title">Getting started</div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/quick-guide" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Quick guide</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox" name="checkbox" data-name="Checkbox" style="opacity:0;position:absolute;z-index:-1"><span class="hide w-form-label"
for="checkbox">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/learning-path" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Learning path</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-27" name="checkbox-27" data-name="Checkbox 27" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-27">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/intro" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Intro</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-4" name="checkbox-4" data-name="Checkbox 4" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-4">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/big-docs" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Big docs</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-3" name="checkbox-3" data-name="Checkbox 3" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-3">Checkbox</span>
</label></div>
</div>
<div class="docs_page_section">
<div class="docs_page_title">concepts</div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/classes-strategy-1" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Classes strategy 1</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-5" name="checkbox-5" data-name="Checkbox 5" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-5">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/core-structure-strategy" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Core Structure strategy</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-6" name="checkbox-6" data-name="Checkbox 6" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-6">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/sizes-and-rem" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Sizes and rem</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-7" name="checkbox-7" data-name="Checkbox 7" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-7">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/typography-strategy" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Typography strategy</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-8" name="checkbox-8" data-name="Checkbox 8" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-8">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/spacing-strategy" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Spacing strategy</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-9" name="checkbox-9" data-name="Checkbox 9" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-9">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/utility-class-systems" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Utility class systems</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-10" name="checkbox-10" data-name="Checkbox 10" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-10">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/classes-strategy-2" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Classes strategy 2</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-11" name="checkbox-11" data-name="Checkbox 11" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-11">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/folders" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Folders</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-12" name="checkbox-12" data-name="Checkbox 12" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-12">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/folders-strategy" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Folders strategy</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-13" name="checkbox-13" data-name="Checkbox 13" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-13">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/variables" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Variables</div><div class="nav_docs_item-tag is-nav"><div>New</div></div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-13" name="checkbox-13" data-name="Checkbox 13" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-13">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/interactions-naming" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Interactions naming</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-13" name="checkbox-13" data-name="Checkbox 13" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-13">Checkbox</span>
</label></div>
</div>
<div class="docs_page_section">
<div class="docs_page_title">Usability</div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/fluid-responsive" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Fluid Responsive</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-14" name="checkbox-14" data-name="Checkbox 14" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-14">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/semantic-html-tags" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Semantic HTML tags</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-15" name="checkbox-15" data-name="Checkbox 15" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-15">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/accessibility" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Accessibility</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-16" name="checkbox-16" data-name="Checkbox 16" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-16">Checkbox</span>
</label></div>
</div>
<div class="docs_page_section">
<div class="docs_page_title">SupPORting content</div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/global-styles-embed" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Global Styles embed</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-17" name="checkbox-17" data-name="Checkbox 17" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-17">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/css-specificity" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">CSS Specificity</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-18" name="checkbox-18" data-name="Checkbox 18" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-18">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/convert-past-projects" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Convert past projects</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-21" name="checkbox-21" data-name="Checkbox 21" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-21">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/sales-strategy" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Sales strategy</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-22" name="checkbox-22" data-name="Checkbox 22" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-22">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/productivity-client-first" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Client-First productivity</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-23" name="checkbox-23" data-name="Checkbox 23" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-23">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/productivity-webflow" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Webflow productivity</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-23" name="checkbox-23" data-name="Checkbox 23" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-23">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/beginners" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Beginners in Webflow</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-24" name="checkbox-24" data-name="Checkbox 24" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-24">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/webflow-resources" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Webflow resources</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-24" name="checkbox-24" data-name="Checkbox 24" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-24">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/v1-to-v2" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">V1 to V2 guide</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-2" name="checkbox-2" data-name="Checkbox 2" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-2">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/changelog" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Changelog</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-26" name="checkbox-26" data-name="Checkbox 26" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-26">Checkbox</span>
</label></div>
</div>
<div class="docs_page_section">
<div class="docs_page_title">Get involved</div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/board-of-directors" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Board of Directors</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-26" name="checkbox-26" data-name="Checkbox 26" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-26">Checkbox</span>
</label></div>
<div class="docs_page_wrapper"><a fs-element="sidemenu-link" href="https://finsweet.com/client-first/docs/become-a-translator" class="docs_page_link w-inline-block"><div class="docs_page_icon w-embed"><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" preserveAspectRatio="xMidYMid meet" aria-hidden="true" role="img">
<g clip-path="url(#clip0_1812_10478)">
<path d="M3 3V21H21V3H3ZM14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_1812_10478">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg></div><div class="docs_page_text">Become a Translator</div></a><label class="w-checkbox docs_nav_checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom docs_nav_checkbox"></div><input type="checkbox" id="checkbox-26" name="checkbox-26" data-name="Checkbox 26" style="opacity:0;position:absolute;z-index:-1"><span
class="hide w-form-label" for="checkbox-26">Checkbox</span>
</label></div>
</div>
</form>Name: wf-form-tracker — GET
<form id="wf-form-tracker" name="wf-form-tracker" data-name="tracker" method="get" class="nav_docs_list-form" data-wf-page-id="65735ae231ce6f85dc671411" data-wf-element-id="5dfe1eed-fb95-4acb-6fba-cf3a95d280a4" aria-label="tracker">
<div class="nav_docs_list-section">
<div class="nav_docs_item-heading">
<h2 class="heading-style-h4 text-color-blue">Getting Started</h2>
</div>
<a href="https://finsweet.com/client-first/docs/quick-guide" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Quick guide</div><div class="nav_docs_item-tag is-new">new</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">The most important topics of Client-First.</div></a><a href="https://finsweet.com/client-first/docs/intro" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Intro</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Intro to Client-First with an overview of the essential principles.</div></a><a href="https://finsweet.com/client-first/docs/big-docs" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Big docs</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Why we have extensive documentation.</div></a>
</div>
<div class="nav_docs_list-section">
<div class="nav_docs_item-heading">
<h3 class="heading-style-h4 text-color-blue">Concepts</h3>
</div>
<a href="https://finsweet.com/client-first/docs/classes-strategy-1" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Classes strategy 1</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Strategy for how we identify, use, and manage classes inside Webflow as a platform.</div></a><a href="https://finsweet.com/client-first/docs/core-structure-strategy" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Core structure strategy</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Establish a unified, well-defined, and flexible structure that we can use for all pages across Client-First websites. </div></a><a href="https://finsweet.com/client-first/docs/sizes-and-rem" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Sizes and rems</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Explanation of REM units, 4pt system, and how we approach measurements in Client-First.</div></a><a href="https://finsweet.com/client-first/docs/typography-strategy" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Typography strategy</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Build and maintain a unified typography style system across the project.</div></a><a href="https://finsweet.com/client-first/docs/spacing-strategy" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Spacing strategy</div><div class="nav_docs_item-tag">updated</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Make intelligent spacing decisions inside Client-First.</div></a><a href="https://finsweet.com/client-first/docs/utility-class-systems" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Utility class systems</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Review the utility class systems included with the official Client-First project cloneable.</div></a><a href="https://finsweet.com/client-first/docs/classes-strategy-2" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Classes strategy 2</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Theory of best workflow practices for classes in Webflow Designer.</div></a><a href="https://finsweet.com/client-first/docs/folders" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Folders</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Finsweet introduces a folder system add-on for Client-First. Organize our project's classes with Folders.</div></a><a href="https://finsweet.com/client-first/docs/folders-strategy" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Folders strategy</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Next steps with Client-First Folders. Explore deeper use cases and strategies around Folders.</div></a><a href="https://finsweet.com/client-first/docs/variables" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Variables</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"><div class="nav_docs_item-tag is-new">new</div></div><div class="nav_docs_item-description">Color variables in Webflow and how Client-First uses them — Strategies, naming conventions, and practical usage tips.<br></div></a><a href="https://finsweet.com/client-first/docs/interactions-naming" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Interactions naming</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">A naming convention for Webflow Interactions.<br></div></a>
</div>
<div class="nav_docs_list-section">
<div class="nav_docs_item-heading">
<h3 class="heading-style-h4 text-color-blue">Usability</h3>
</div>
<a href="https://finsweet.com/client-first/docs/fluid-responsive" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Fluid responsive</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Add fluid responsive to any Client-First projects using a visual fluid scaling tool.</div></a><a href="https://finsweet.com/client-first/docs/semantic-html-tags" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Semantic HTML tags</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Learn how to use and best establish semantic HTML tags inside Webflow.</div></a><a href="https://finsweet.com/client-first/docs/accessibility" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Accessibility</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Follow best accessibility practices in Webflow.</div></a>
</div>
<div class="nav_docs_list-section">
<div class="nav_docs_item-heading">
<h2 class="heading-style-h4 text-color-blue">Supporting Content</h2>
</div>
<a href="https://finsweet.com/client-first/docs/global-styles-embed" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Global Styles embed</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Understand the custom CSS in the Client-First cloneable project.</div></a><a href="https://finsweet.com/client-first/docs/css-specificity" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">CSS specificity</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Learn the concept of CSS Specificity and how it relates to using Client-First's spacing system in Webflow.</div></a><a href="https://finsweet.com/client-first/docs/convert-past-projects" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Convert past projects</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Understand the decision to convert an old project to Client-First.</div></a><a href="https://finsweet.com/client-first/docs/sales-strategy" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Sales strategy</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Learn how we can leverage Client-First to win more projects and keep our clients happy.</div></a><a href="https://finsweet.com/client-first/docs/productivity-client-first" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Client-First productivity series</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Client-First workflow enhancement productivity video series.</div></a><a id="w-node-a59411a1-3fca-2ccc-317e-832f64b5cd63-95d280a2" href="https://finsweet.com/client-first/docs/productivity-webflow" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Webflow productivity series</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Webflow workflow enhancement productivity video series.</div></a><a href="https://finsweet.com/client-first/docs/beginners" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Webflow beginners</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Content for people who just started learning Webflow.</div></a><a href="https://finsweet.com/client-first/docs/v1-to-v2" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">V1 to V2 guide</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">List of the essential updates in V2.</div></a><a href="https://finsweet.com/client-first/docs/changelog" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Changelog</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Key updates in from Client-First launch to today.</div></a>
</div>
<div class="nav_docs_list-section">
<div class="nav_docs_item-heading">
<h2 class="heading-style-h4 text-color-blue">Get involved</h2>
</div>
<a href="https://finsweet.com/client-first/docs/board-of-directors" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Board of Directors</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Client-First for the community and by the community.<br></div></a><a href="https://finsweet.com/client-first/docs/become-a-translator" class="nav_docs_item w-inline-block"><div class="nav_docs_item-header"><div class="nav_docs_item-title">Become a Translator</div><img src="https://assets-global.website-files.com/65735ae231ce6f85dc671354/65735ae231ce6f85dc67168b_tick-icon-black.svg" loading="lazy" fs-element="checked" alt="" class="docs_checked-icon"></div><div class="nav_docs_item-description">Help thousands of Webflow users better understand Client-First in their native language by becoming a Client-First translator.<br></div></a>
</div>
</form>Text Content
by Docs Quick Guide START HERE The most important topics of Client-First. Learning Path SCHEDULE A 7-day schedule to learn Client-First Getting Started Intro Big docs Concepts Classes strategy 1 Core Structure strategy Sizes and rem Typography strategy Spacing strategy UPDATED Utility class systems Classes strategy 2 Folders Folders strategy Interactions naming Variables Usability Fluid responsive Semantic HTML tags Accessibility Supporting Content Global Styles embed CSS specificity Convert past projects Sales strategy Client-First productivity Webflow productivity Beginners in Webflow Webflow resources Changelog Get Involved Board of Directors Become a Translator Resources Languages LEARN CLIENT-FIRST IN OTHER LANGUAGES French LIVE Taglog LIVE Polish LIVE Vietnamese LIVE German LIVE Arabic LIVE Turkish LIVE Japanese LIVE Danish LIVE Bengali LIVE Bulgarian COMING SOON Spanish COMING SOON Portuguese COMING SOON Hungarian COMING SOON Greek COMING SOON Macedonian COMING SOON Dutch COMING SOON Russian COMING SOON Croatian COMING SOON Ukrainian COMING SOON Become a Client-First Translator Get the Cloneable Log in with CLIENT-FIRST FOR WEBFLOW 0% Getting started Quick guide Checkbox Learning path Checkbox Intro Checkbox Big docs Checkbox concepts Classes strategy 1 Checkbox Core Structure strategy Checkbox Sizes and rem Checkbox Typography strategy Checkbox Spacing strategy Checkbox Utility class systems Checkbox Classes strategy 2 Checkbox Folders Checkbox Folders strategy Checkbox Variables New Checkbox Interactions naming Checkbox Usability Fluid Responsive Checkbox Semantic HTML tags Checkbox Accessibility Checkbox SupPORting content Global Styles embed Checkbox CSS Specificity Checkbox Convert past projects Checkbox Sales strategy Checkbox Client-First productivity Checkbox Webflow productivity Checkbox Beginners in Webflow Checkbox Webflow resources Checkbox V1 to V2 guide Checkbox Changelog Checkbox Get involved Board of Directors Checkbox Become a Translator Checkbox Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. Dictionary Close nav WELCOME TO CLIENT-FIRST min GETTING STARTED Quick guide new The most important topics of Client-First. Intro Intro to Client-First with an overview of the essential principles. Big docs Why we have extensive documentation. CONCEPTS Classes strategy 1 Strategy for how we identify, use, and manage classes inside Webflow as a platform. Core structure strategy Establish a unified, well-defined, and flexible structure that we can use for all pages across Client-First websites. Sizes and rems Explanation of REM units, 4pt system, and how we approach measurements in Client-First. Typography strategy Build and maintain a unified typography style system across the project. Spacing strategy updated Make intelligent spacing decisions inside Client-First. Utility class systems Review the utility class systems included with the official Client-First project cloneable. Classes strategy 2 Theory of best workflow practices for classes in Webflow Designer. Folders Finsweet introduces a folder system add-on for Client-First. Organize our project's classes with Folders. Folders strategy Next steps with Client-First Folders. Explore deeper use cases and strategies around Folders. Variables new Color variables in Webflow and how Client-First uses them — Strategies, naming conventions, and practical usage tips. Interactions naming A naming convention for Webflow Interactions. USABILITY Fluid responsive Add fluid responsive to any Client-First projects using a visual fluid scaling tool. Semantic HTML tags Learn how to use and best establish semantic HTML tags inside Webflow. Accessibility Follow best accessibility practices in Webflow. SUPPORTING CONTENT Global Styles embed Understand the custom CSS in the Client-First cloneable project. CSS specificity Learn the concept of CSS Specificity and how it relates to using Client-First's spacing system in Webflow. Convert past projects Understand the decision to convert an old project to Client-First. Sales strategy Learn how we can leverage Client-First to win more projects and keep our clients happy. Client-First productivity series Client-First workflow enhancement productivity video series. Webflow productivity series Webflow workflow enhancement productivity video series. Webflow beginners Content for people who just started learning Webflow. V1 to V2 guide List of the essential updates in V2. Changelog Key updates in from Client-First launch to today. GET INVOLVED Board of Directors Client-First for the community and by the community. Become a Translator Help thousands of Webflow users better understand Client-First in their native language by becoming a Client-First translator. Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. LEARN CLIENT-FIRST IN OTHER LANGUAGES French LIVE Taglog LIVE Polish LIVE Vietnamese LIVE German LIVE Arabic LIVE Turkish LIVE Japanese LIVE Danish LIVE Bengali LIVE Bulgarian COMING SOON Spanish COMING SOON Portuguese COMING SOON Hungarian COMING SOON Greek COMING SOON Macedonian COMING SOON Dutch COMING SOON Russian COMING SOON Croatian COMING SOON Ukrainian COMING SOON Become a Client-First Translator Next LEARNING PATH A 7-day schedule to learn Client-first