--- title: Style Guide --- [![Magnolia Patio and Pool Logo](https://lp.magnoliapatios.com/hs-fs/hubfs/Horizontal-White-BG-.png?width=370&height=108&name=Horizontal-White-BG-.png "Magnolia Patio and Pool Logo")](https://coveredpatiosmagnoliatx.com/) [Contact us](https://coveredpatiosmagnoliatx.com/contact-us/) # STYLE GUIDE This is a great template to reference as you start customizing the templates to your brand identity. [View Design System](https://lp.magnoliapatios.com/style-guide#section-3) [Meet the Team](https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLIVBrlc%2FADzkqjVxc5kbaKrIOJ7jksQOJMYpg3W2%2FViBNfvVIa99F7JPBPALzP%2FZOLHWFCKYmPooWQiiRSbJ9p2jOsq%2B91WOCROoDwxikz%2Fi%2FMRswOeclQIYY%2Bc%2BTe28g0DGnFlUalRKG0UFle1uStq1s15%2FxrBVVkDaxp2SLERjKAdO9%2FuIfHJMCiiUy6Aqg%3D%3D&portalId=45437125) [View our Portfolio](https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLJ1fY5rgkmnTr%2Fq6ZfEVIUEO9wQ6P2E3v%2Fj6v%2BkmS6%2Bwl2yxM1seYs%2Be7gaoyxPN6OO%2Bix40KJjxwVDu2WdHnjU0jOChNEkWFFk7FWbTLHKTYPi40N3sROd6KhkdYGnjtPIYmbkgWK842%2FBhhM%2FlaAzaYi3kavpGKcWAO%2FoK0bOkJbPovWMWnpOd5H0IEtGSg%3D%3D&portalId=45437125) [Schedule a Free Consultation](https://cta-service-cms2.hubspot.com/web-interactives/public/v1/track/click?encryptedPayload=AVxigLLpSLMh09NVIdJBqb48ul257t4hOOp4xtpzCSR1mdaIUW1wkSPjzbuFKKlSVoITrAd5%2FlJAAEAXDg4gNag0rxyA2LPuKIPb2QIsBAqIQvtZx0a4%2BzM%2FYyfj0EfQXh46dxb7TvE8gVxZu7jvWpkuIVwFrjeOUamOWtZHiiPYAqsuhM6EqFXhEPgHj%2FlQ9n4AcMtg&portalId=45437125) ### Typography Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Buttons Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Input/Forms Lorem ipsum dolor sit amet, consectetur adipiscing elit. ## TYPOGRAPHY Fonts, sizes, colors, and all that good stuff. A great resource for keeping your type sizing looking tight is to reference Type Scale. The highlighted divisions you would see down below, represent the bottom margin each of them have. ### Headings # Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 ### Paragraph Fonts, sizes, colors, and all that good stuff. A great resource for keeping your type sizing looking tight is to reference Type Scale. The highlighted divisions you would see down below, represent the bottom margin each of them have. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ### Blockquotes > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus euismod purus eu, vulputate urna etiam pretium diam congue. Tortor rutrum nunc eget viverra. Nascetur facilisis volutpat id velit proin rhoncus non cras erat. Integer sodales nec ac quis pellentesque aliquam. > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus euismod purus eu, vulputate urna etiam pretium diam congue. Tortor rutrum nunc eget viverra. Nascetur facilisis volutpat id velit proin rhoncus non cras erat. Integer sodales nec ac quis pellentesque aliquam. > > - Lorem ipsum dolor sit amet, consectetur adipiscing elit. ## BUTTONS You can set up various buttons style to help visually communicate primary, secondary, and tertiary actions you want a visitor to take. ### Solid #### Primary [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) #### Secondary [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) #### Tertiary [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) ### Outline [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Big](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Medium](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) [Button Small](https://lp.magnoliapatios.com/style-guide#section-2) ### Simple [Button text](https://lp.magnoliapatios.com/style-guide#section-2) [Button text](https://lp.magnoliapatios.com/style-guide#section-2) ## FORMS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Risus amet egestas suspendisse tempus blandit id ultricies nisi sagittis. Tempor, purus sed gravida accumsan quis. Dolor, porta ipsum non sit ipsum consectetur. Pulvinar odio viverra aliquam viverra dui. Elementum pellentesque etiam justo mollis blandit. First Name\* Last Name\* Email\* Phone number\* Company Name\* Please Select Departament\* Select a option Option 1 Please Select Job Level\* Select a option Option 1 Select you hobbies\* Swimming Basquetball Football Send us a message\* [![Magnolia Patio and Pool Logo](https://lp.magnoliapatios.com/hubfs/Horizontal-White-BG-.png "Magnolia Patio and Pool Logo")](https://coveredpatiosmagnoliatx.com/) Magnolia Patio and Pool is a family-owned and operated business. David and his wife Wendy have built lasting relationships in the community with their clients, by displaying unmatched work ethic and exceptional customer service. [Follow us on Facebook](https://www.facebook.com/magnoliapatiocovers/) [Follow us on Instagram](https://www.instagram.com/magnoliapatiocovers) [Follow us on Linkedin](http://www.linkedin.com/pub/david-mills/16/121/503) [Follow us on Pinterest](https://www.pinterest.com/MagnoliaPatioCovers/) [Send us a message](https://www.houzz.com/pro/magnoliapatiocovers/magnolia-patio-covers) Copyright © 2026 Magnolia Patio and Pool. All Rights Reserved.