--- title: Styleguide | Butler & Duke image: https://www.butlerandduke.com/hubfs/raw_assets/public/butler-duke/images/social-share.jpg --- [Skip to content](https://www.butlerandduke.com/styleguide#main-content) [Home](https://www.butlerandduke.com/) - [Projects](https://www.butlerandduke.com/all-developments) - [About](https://www.butlerandduke.com/about) - [Services](https://www.butlerandduke.com/our-services) - [Editorial](https://www.butlerandduke.com/projects-and-developments) - [Contact](https://www.butlerandduke.com/contact) - [enquiries@butlerandduke.com](mailto:) - [+44 (0)1865 238395](tel:) - Visit us on Instagram Visit us on LinkedIn Menu ![Butler & Duke Logo](https://www.butlerandduke.com/hubfs/raw_assets/public/butler-duke/images/logo.png) ## Styleguide - [Styleguide](https://www.butlerandduke.com/styleguide) - [Modules](https://www.butlerandduke.com/modules) ## Sections - [Colours](https://www.butlerandduke.com/styleguide#colours) - [Typography](https://www.butlerandduke.com/styleguide#typography) - [Buttons](https://www.butlerandduke.com/styleguide#buttons) - [Forms](https://www.butlerandduke.com/styleguide#forms) - [Modals](https://www.butlerandduke.com/styleguide#modals) - [Space](https://www.butlerandduke.com/styleguide#space) - [Grid](https://www.butlerandduke.com/styleguide#grid) - [CMS Content](https://www.butlerandduke.com/styleguide#cms-content) Menu # Styleguide # Colours Primary Secondary (caramel) Tertiary (blue) Grey Dark Grey Grey Light (off-white) Grey X-Light White Text Links Validation Error Validation Success # Typography # H0 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 110% | Letter spacing: -2px # H1 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 110% | Letter spacing: -2px ## H2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 110% | Letter spacing: Normal ### H3 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 110%| Letter spacing: Normal #### H4 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 120% | Letter spacing: Normal ##### H5 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 120% | Letter spacing: Normal ###### H6 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Sometimes Times Semi Bold (500) | Line height: 130% | Letter spacing: Normal ###### Eyebrow Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Font: Altform Regular (400) | Line height: 130% | Letter spacing: Normal Content Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Font: Altform Regular (400) | Line height: 150% | Letter spacing: Normal Content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Font: Altform Regular (400) | Line height: 150% | Letter spacing: Normal Content Small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Font: Altform Regular (400) | Line height: 150% | Letter spacing: Normal Content Extra Small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Font: Altform Regular (400) | Line height: 150% | Letter spacing: Normal # Buttons Regular button Regular icon button arrow\_right\_alt arrow\_left\_alt Regular left icon button Small button Text button Text icon button arrow\_right\_alt Light button Light icon button arrow\_right\_alt # Form This is a form Input field Textarea field Select field Select field Option Radio field Radio 1 Radio 2 Checkbox field Checkbox 1 Checkbox 2 # Space 2XS XS S M L XL 2XL 3XL 4XL 5XL # Grid # CMS Content (Rich Text) # H1 Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. ## H2 Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. ### H3 Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. #### H4 Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. ##### H5 Heading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. > This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit purus ex, eget molestie quam rutrum vitae. In egestas faucibus magna, vel malesuada mi tempor a. - This is a list item in an unordered list - An unordered list is a list in which the sequence of items is not important - This is a list item in an unordered list - An unordered list is a list in which the sequence of items is not important - This is a list item in an unordered list - An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An ordered list is a list in where the sequence of items is important - This is a list item in an unordered list - An unordered list is a list in which the sequence of items is not important - This is a list item in an unordered list - An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An unordered list is a list in which the sequence of items is not important 1. This is a list item in an ordered list 2. An unordered list is a list in which the sequence of items is not important **Bold text** *Italic text* Anchor link This text contains subscript text. This text contains superscript text. ``` This is preformatted text ``` | **Column 1** | **Column 2** | **Column 3** | | --- | --- | --- | | Lorem ipsum dolor sit amet | Lorem ipsum | Lorem ipsum dolor sit | | Lorem ipsum | Lorem ipsum dolor sit | Lorem ipsum dolor sit amet, consectetur adipiscing elit | | Lorem ipsum dolor sit amet | Lorem ipsum | Lorem ipsum dolor sit | [![Syndicut](https://www.butlerandduke.com/hubfs/raw_assets/public/butler-duke/images/syndicut-logo.svg)](http://www.syndicut.com) [Home](https://www.butlerandduke.com/) - Office - Unit 1, Ware Road, Stanford in the Vale Business Park - Contact - [enquiries@butlerandduke.com](mailto:enquiries@butlerandduke.com) - [+44 (0)1865 238395](tel:+441865238395) - Follow Us - - [Visit us on Instagram](https://www.instagram.com/butlerandduke/) - [Visit us on LinkedIn](https://www.linkedin.com/company/butler-duke) ![FD+Master+builders](https://www.butlerandduke.com/hs-fs/hubfs/Imported%20sitepage%20images/FD+Master+builders.jpg?noresize&width=150&height=90&name=FD+Master+builders.jpg) - [Terms and Conditions](https://www.butlerandduke.com/terms-and-conditions) - [Privacy & cookie policy](https://www.butlerandduke.com/privacy-cookie-policy) Website Designed and Developed by [Syndicut](http://www.syndicut.com/)