# Style Guide Based on Client-First V2 [Client-First Docs](https://www.finsweet.com/client-first/docs/intro) ## Colors ### Color Palette - **green/800**: Cocoon green/800 #2A2E15 - **green/700**: Cocoon green/700 #3B4020 - **green/600**: Cocoon green/600 #505530 - **green/500**: Cocoon green/500 #696D48 - **green/400**: Cocoon Green/400 #878C66 - **green/300**: Cocoon green/300 #A5A885 - **green/150**: Cocoon green/150 #D7D9C4 - **neutral900**: Neutral/900 #231A08 - **neutral500**: Neutral/500 #71695F - **neutral100**: Neutral/100 #E7E5E1 - **neutral50**: Neutral/50 #A5A885 - **neutral25**: Neutral/25 #505530 - **white**: White #FFFFFF - **purple200**: Purple/200 #D9B4E8 - **yellow150**: Yellow/150 #FFCE84 - **green350**: G #95AF5D - **orange200**: Orange/200 #FFAB91 ### Background Color - background-color-neutral900 - background-color-neutral500 - background-color-neutral50 - background-color-neutral25 - background-color-white ### Text Color - text-color-white - text-color-dark - text-color-black - text-color-green600 ## Typography ### HTML Headings Tags #### All H1 Headings # Heading 1 #### All H2 Headings ## Heading 2 #### All H3 Headings ### Heading 3 #### All H4 Headings ####### Heading 4 #### All H5 Headings ##### Heading 5 #### All H6 Headings ###### Heading 6 ### Heading Classes #### heading-style-h1 ## Heading-style-h1 #### heading-style-h2 ## Heading-style-h2 #### heading-style-h3 ## Heading-style-h3 ### Other HTML Tags #### All Paragraphs Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. #### All Links [All Links](/content/admin/style-guide#/index.html) #### All Block Quotes > Block Quote ### All Unordered Lists - No bullet list - No bullet list ### All Ordered Lists 1. No bullet list 2. No bullet list 3. No bullet list ### Text Sizes #### text-size-xlarge #### text-size-large #### text-size-medium #### text-size-regular #### text-size-small #### text-size-tiny ### Text Weights #### text-weight-xbold test-weight-xbold (800) #### text-weight-bold test-weight-bold (700) #### text-weight-semibold test-weight-semibold (600) ### Text Styles #### text-style-italic test-style-italic #### text-style-strikethrough test-style-strikethrough #### text-style-allcaps test-style-allcaps ### Text Alignment #### text-align-left test-align-left #### text-align-center test-align-center #### text-align-right test-align-right ## Rich Text # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 > “Lorem ipsum dolor sit amet, consectetur enod adipisc elit, sed do eiusmod tempor incididunt ut labore et dolo magna aliqua. Tortor donoran condimentum.” The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. [This is a link inside of a rich text](https://relume.io/) - List item - List item - List item 1. List item 2. List item 3. List item Caption goes here ### Effects #### Cards Global card class, useful for controlling global responsive card padding - card - contact-card ### Box Shadows Shadows allow you to add depth and realism to designs by positioning elements on a z-axis. - shadow-xxsmall - shadow-xsmall - shadow-small - shadow-medium - shadow-large - shadow-xlarge - shadow-xxlarge ### Border Radius Border Radiuses to use globally for easy management - radius-xxlarge - radius-xlarge - radius-large - radius-medium - radius-small - radius-xsmall ### Aspect Ratios Global aspect ratio classes to maintain across breakpoints. Note -these styles are handled by custom CSS inside the Global Styles component at the top of any page in the navigation panel. - aspect-16-9 - aspect-3-2 - aspect-1-1 ### UI Elements #### Buttons - button - is-xxlarge - [Get a demo](/content/admin/style-guide#/index.html) - button - is-xlarge - [Get a demo](/content/admin/style-guide#/index.html) - button - [Get a demo](/content/admin/style-guide#/index.html) - button - is-medium - [Get a demo](/content/admin/style-guide#/index.html) - button - is-small - [Get a demo](/content/admin/style-guide#/index.html) - button - is-xsmall - [Get a demo](/content/admin/style-guide#/index.html) - button - is-secondary - [Get a demo](/content/admin/style-guide#/index.html) - button - is-tertiary - [Get a demo](/content/admin/style-guide#/index.html) - button - is-link - [Get a demo](/content/admin/style-guide#/index.html) To use on a dark background, simple use the add-on class is-alternate - button - is-alternate - [Get a demo](/content/admin/style-guide#/index.html) - button - is-link - is-alternate - [Get a demo](/content/admin/style-guide#/index.html) ### Form Elements #### field-label #### form-input - .field-label - form-input - is-text-area - .field-label - form-input - is-select-input - .field-labelSelect one...First ChoiceSecond ChoiceThird Choice - form-checkbox - Checkbox - form-radio - Radio - button - button - form-inline - button - is-secondary - form-inline - form-input - form-inline - form-input - form-inline - form-input - form-inline - is-small Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. ### HubSpot Form Elements Some Form Elements - hs-form - form-columns-1 - form-columns-2 - hs-form is main form class. - form-columns-1 is class of wrapper with 1 column for inputs. - form-columns-2 is class of wrapper with 2 columns for inputs. - input and label - hs-input - Form label - Field Description / Help text - hs-field-desc - Form label - This is help text for the field - Field error message - hs-error-msgs inputs-list - hs-error-msg - Form label - Error message label - hs-error-msgs inputs-list is an HTML list element. - hs-error-msg is a text span inside HTML List Item element. ### Text area Input - hs-input hs-fieldtype-textarea - Form label - hs-fieldtype-textarea is added as combo class. ### Checkboxes - hs-form-booleancheckbox - hs-form-booleancheckbox-display - inputs-list - hs-input - Nature - Politics - Technology Note: HubSpot uses basic HTML checkboxes, Webflow checkboxes work differently than the default HTML checkboxes, hence in order to style HubSpot checkboxes you need custom CSS. - Checkbox 3 you can use Webflow checkbox to style and then copy CSS from it. ### Radio Buttons - inputs-list - hs-form-radio - hs-form-radio-display - inputs-list - hs-input - Yes - No Success message - submitted-message This is form success message ### RecaptCHA - hs-recaptcha ### Submit button - hs_submit - hs-button Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. ### Icons (Image) #### icon-height-xxsmall #### icon-height-xsmall #### icon-height-small #### icon-height-medium #### icon-height-large #### icon-height-xlarge #### icon-height-custom1 ### Icons (HTML Embed) HTML embed icons enable you to control icon color on hover. #### icon-embed-xxsmall #### icon-embed-xsmall #### icon-embed-small #### icon-embed-medium #### icon-embed-large #### icon-embed-xlarge #### icon-embed-custom1 ### Structure Classes Defined and flexible core structure we can use on all or most pages. - page-wrapper - main-wrapper - container-small - container-medium - container-large - padding-global - padding-section-small - padding-section-medium - padding-section-large - button-group - section-content - large-left - large-right - content-group - gap-large - gap-small ### Max Widths Use the max-width CSS property to contain inner content to a maximum width. - max-width-full - max-width-full-tablet - max-width-full-mobile-landscape - max-width-full-mobile-portrait - max-width-xxlarge - max-width-xlarge - max-width-large - max-width-medium - max-width-small - max-width-xsmall - max-width-xxsmall ### Paddings #### 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 ### Margins #### 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 ### Spacers Unified spacer system for the project. - spacer-tiny - spacer-xxsmall - spacer-xsmall - spacer-small - spacer-medium - spacer-large - spacer-xlarge - spacer-xxlarge - spacer-huge - spacer-xhuge - spacer-xxhuge ### Utility Classes Useful utility classes we like to use in most of our projects to build faster. - hide - hide-tablet - hide-mobile-portrait - hide-mobile-landscape - overflow-visible - overflow-hidden - pointer-events-on - pointer-events-off - layer - div-square - spacing-clean - align-center - z-index-1 - z-index-2 - display-inlineflex - margin-top-auto