--- title: "Website Style Guide" date: 2025-04-28 author: "Lex Sisney" --- # Website Style Guide ### Introduction – Style Guide & Component Library Welcome to the Website Style Guide and Component Library. This guide serves as the single source of truth for the design system behind our website. It defines the core visual elements — colors, typography, spacing, and reusable components — ensuring a consistent and cohesive experience across every page and project. By following these standards, we streamline collaboration, speed up development, and strengthen our brand identity across all touchpoints. ##### Logos Full Logo ![OP Logo White](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Logo-White.svg) ![OP Logo Color](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Logo-Color.svg) ![OP Logo Orange](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Logo-Orange.svg) ![OP Logo White](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Logo-White.svg) Logo Icon ![OP Icon White](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Icon-White.svg) ![OP Icon Color](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Icon-Color.svg) ![OP Icon Orange](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Icon-Orange.svg) ![OP Icon White](https://organizationalphysics.com/wp-content/uploads/2025/04/OP-Icon-White.svg) ##### Brand Palette Primary Colors ### OP – Tangerine #F48900 ### OP – Tangerine #F48900 ### OP – Yellow #F8C300 ### OP – Yellow #F8C300 ### OP – Slate #40474B ### OP – Slate #40474B ### OP – Text #343A40 ### OP – Text #343A40 ### OP – Snow #FCF5F3 ### OP – Snow #FCF5F3 Secondary Colors #F48900E0 #F48900E0 #F489004D #F489004D #F489000D #F489000D #FFFFFF #FFFFFF #282B2E #282B2E #BEC6CB #BEC6CB #40474B12 #40474B12 #000000 (Black) #000000 (Black) #00000082 #00000082 #0000005C #0000005C #D1D1D3 #D1D1D3 Accent Colors #EE0606 #EE0606 #00D412 #00D412 #FF5300 #FF5300 #006DF8 #006DF8 Gradients #F48900 to #F8C300 #F48900 to #F8C300 #343A40 to #F8C300 #343A40 to #F8C300 ##### Typography Default Headings # H1 – This is Heading 1 Tag Catamaran // Weight 900 // Size 54px // Line Height 60px ## H2 – This is Heading 2 Tag Catamaran // Weight 900 // Size 45px // Line Height 52px ### H3 – This is Heading 3 Tag Catamaran // Weight 900 // Size 35px // Line Height 42px #### H4 – This is Heading 4 Tag Catamaran // Weight 900 // Size 27px // Line Height 33px ##### H5 – This is Heading 5 Tag Catamaran // Weight 900 // Size 22px // Line Height 29px ###### H6 – This is Heading 6 Tag Catamaran // Weight 900 // Size 19px // Line Height 26px Styled Headings ## H2 Alt – This is Alternative Heading 2 Tag Catamaran // Weight 800 // Size 44px // Line Height 51px ### H3 Alt – This is Alternative Heading 3 Tag Catamaran // Weight 800 // Size 35px // Line Height 42px ##### H5 – Eyebrow Heading Catamaran // Weight 700 // Size 16px // Line Height 19px // Uppercase Body Text – Default This is a standard paragraph demonstrating the base body text style. It is designed for optimal readability across all devices and screen sizes. **This text is bold** to emphasize important information or highlight key points within content. *This text is italic* to indicate additional emphasis, alternative tone, or supporting ideas in the narrative. This is an example of a [hyperlink](#) inside a paragraph. Links are styled to be easily recognizable and accessible. Below is a sample unordered list showcasing list item styling: - First list item with standard spacing and bullet styling. - Second list item showing how lists are structured within body text. - Third list item maintaining consistent rhythm and indentation. Here’s an ordered list for showcasing steps or sequences: 1. First step with clear numbering. 2. Second step following proper spacing and alignment. 3. Third step continuing the structured flow. Body Text – Large 22px This is a standard paragraph demonstrating the base body text style. It is designed for optimal readability across all devices and screen sizes. **This text is bold** to emphasize important information or highlight key points within content. *This text is italic* to indicate additional emphasis, alternative tone, or supporting ideas in the narrative. This is an example of a [hyperlink](#) inside a paragraph. Links are styled to be easily recognizable and accessible. Below is a sample unordered list showcasing list item styling: - First list item with standard spacing and bullet styling. - Second list item showing how lists are structured within body text. - Third list item maintaining consistent rhythm and indentation. Here’s an ordered list for showcasing steps or sequences: 1. First step with clear numbering. 2. Second step following proper spacing and alignment. 3. Third step continuing the structured flow. Body Text – Small, Bold, 14px This is a standard paragraph demonstrating the base body text style. It is designed for optimal readability across all devices and screen sizes. **This text is bold** to emphasize important information or highlight key points within content. *This text is italic* to indicate additional emphasis, alternative tone, or supporting ideas in the narrative. This is an example of a [hyperlink](#) inside a paragraph. Links are styled to be easily recognizable and accessible. Below is a sample unordered list showcasing list item styling: - First list item with standard spacing and bullet styling. - Second list item showing how lists are structured within body text. - Third list item maintaining consistent rhythm and indentation. Here’s an ordered list for showcasing steps or sequences: 1. First step with clear numbering. 2. Second step following proper spacing and alignment. 3. Third step continuing the structured flow. ##### Buttons & Links [ Primary Button ](#) [ Secondary Button ](#) [ Alternate Button ](#) [ Alt Button 1 ](#) [ Alt Button 2 ](#) [ Alt Button 3 ](#) [ Small Button 1 ](#) [ Small Button 2 ](#) [ Small Button 3 ](#) ##### Spacing & Layout ##### Forms & Inputs ##### Navigation Elements ##### Reusable Components ##### Iconography & Graphics ##### Animations & Microinteractions ##### Best Practices