# Webflow Style Guide Corporation X is our top-notch corporate Webflow Template created for modern B2B companies. It was designed & developed by the amazing [Webflow Agency at BRIX Agency](https://brixagency.com/webflow-design-agency). ## Colors ### Accent color - Primary 1: #005DFF ### Secondary colors - Color 1: #FFC001 - Color 2: #003083 ### Neutral colors - Neutral 800: #001943 - Neutral 700: #2F4263 - Neutral 600: #5A6A83 - Neutral 500: #7A879E - Neutral 400: #B9C0CD - Neutral 300: #E8EBEF - Neutral 200: #F7F8FA - Neutral 100: #FFFFFF ### System colors - Blue 400: #086CD9 - Blue 300: #1D88FE - Blue 200: #8FC3FF - Blue 100: #EAF4FF - Green 400: #11845B - Green 300: #05C168 - Green 200: #7FDCA4 - Green 100: #DEF2E6 - Red 400: #DC2B2B - Red 300: #FF5A65 - Red 200: #FFBEC2 - Red 100: #FFEFF0 - Orange 400: #D5691B - Orange 300: #FF9E2C - Orange 200: #FFD19B - Orange 100: #FFF3E4 ## Typography ### Special headings #### Display 1 Onest Medium 120px / 1.042em # Donec etdolr odio pelle. #### Display 2 Onest Medium 74px / 1.189em # Donec et odio lom pellen tesqu diam. #### Display 3 Onest Medium 58px / 1.276em # Donec et odio pellen tesqu diam lorem. #### Display 4 Onest Medium 38px / 1.158em # Donec et odio pellentesqu diam lorem ipsum dolor consectur. ### Headings #### Heading H1 Onest Medium 54px / 1.222em # Donec et odio dolor pelle ntesqu. Donec et odio dolor pelle ntesqu. #### Heading H2 Onest Medium 38px / 1.316em ## Donec et odio pellen tesqu diam lorem ipsum dolor consectur Donec et odio pellen tesqu diam lorem ipsum dolor consectur #### Heading H3 Onest Medium 24px / 1.417em ### Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec. Donec et odio pellen tesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec. #### Heading H4 Onest Medium 22px / 1.273em #### Donec et odio pellentesqu diam lorem Donec et odio pellentesqu diam lorem #### Heading H5 Onest Medium 18px / 1.333em ##### Donec et odio pellentesqu diam lorem consectur drakong. Donec et odio pellentesqu diam lorem consectur drakong. #### Heading H6 Onest Medium 16px / 1.375em ###### Donec et odio pellentesqu diam lorem consectur drakong. Donec et odio pellentesqu diam lorem consectur drakong. ## Body ### Body Large Onest Regular 24px / 1.583em 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 cursu. ### Body Default Onest Regular 18px / 1.667em 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 cursu id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere. ### Body Small Onest Regular 14px / 1.714em 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 et. ## Text single ### 400 Onest Regular Onest Medium Onest Bold 24px / 1.083em Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur ### 300 Onest Regular Onest Medium Onest Bold 20px / 1.100em Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur ### 200 Onest Regular Onest Medium Onest Bold 18px / 1.111em Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur ### 100 Onest Regular Onest Medium Onest Bold 16px / 1.125em Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur ## Rich Text ### Text Bold Onest **Lorem ipsum dolor sit amet consectetur** ### Text Link Onest [Lorem ipsum dolor sit amet consectetur](https://brixtemplates.com/) ### Bullet List Onest - Lorem ipsum dolor sit amet consectetur - Posuere enim mi pharetra neque proin dic - Mauris aliquet faucibus iaculis dui vitae ullamco ### Numbered List Onest 1. Lorem ipsum dolor sit amet consectetur 2. Posuere enim mi pharetra neque proin dic 3. Mauris aliquet faucibus iaculis dui vitae ullamco ### Blockquote Onest 22px / 1.409em > “Lorem ipsum dolor sit amet, consectetur adipiscing elit nunc gravida purus urna, ipsum eu morbi in enim” ### Image & Caption Lorem ipsum dolor sit amet consectur ### Text Uppercase Onest Lorem ipsum dolor sit amet consectetur ### Text Strikethrough Onest Lorem ipsum dolor sit amet consectetur ### Text Underline Onest Lorem ipsum dolor sit amet consectetur ## Shadows ### General shadows - Shadow 01 - Shadow 02 - Shadow 03 - Shadow 04 - Shadow 05 - Shadow 06 ## Buttons ### Primary buttons [Small](https://www.complianser.ai/template-pages/style-guide#) Button Small [Default](https://www.complianser.ai/template-pages/style-guide#) Button Default [Large](https://www.complianser.ai/template-pages/style-guide#) Button Large ### Secondary buttons [Small](https://www.complianser.ai/template-pages/style-guide#) Button Small [Default](https://www.complianser.ai/template-pages/style-guide#) Button Default [Large](https://www.complianser.ai/template-pages/style-guide#) Button Large ## Inputs ### Input text Label Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. ### Text area Label Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. ### Checkboxes Placeholder Thank you! Your submission has been received! Oops! Something went wrong while submitting the form. ### Avatars ## Avatars circle ## Icons ### Square icons ## Rounded icons [](https://facebook.com/) [](https://twitter.com/) [](https://www.instagram.com/) [](https://www.linkedin.com/) [](http://youtube.com/) [](https://dribbble.com/) [](https://behance.net/) [](https://whatsapp.com/) [](https://www.tiktok.com/) ## Icon fonts ### Line icons rounded    ... (continues with icon data)