--- title: Style Guide --- # Style Guide Every element the theme settings control, on one page. Open Theme settings beside this preview and change anything: the specimens below are the real components, so they repaint as you edit. Heading font Wix Madefor Display Body font Wix Madefor Text Content width 1240px Card radius 12px Default button size regular On this page [1Colours](https://www.flexoraatheme.com/style-guide#colours) [2Fonts](https://www.flexoraatheme.com/style-guide#fonts) [3Headings](https://www.flexoraatheme.com/style-guide#headings) [4Buttons](https://www.flexoraatheme.com/style-guide#buttons) [5Navigation](https://www.flexoraatheme.com/style-guide#chrome) [6Container & spacing](https://www.flexoraatheme.com/style-guide#spacing) [7Light & dark](https://www.flexoraatheme.com/style-guide#schemes) [8Forms](https://www.flexoraatheme.com/style-guide#forms) Section 1 ## Colours The six brand slots. Everything else in the theme points at these, so changing one here cascades across the site rather than needing an edit per module. Theme settings › Colors Primary #e2472b Secondary #111110 Tertiary #6b6a66 Dark #111110 Light #f5f4f0 White transparent #FFFFFF · 8% Section 2 ## Fonts Two families carry the whole theme. Primary sets every heading, Secondary sets body copy and button labels. Each row below is set entirely in the font it names. Theme settings › Fonts Wix Madefor Display Role **Primary** Used for **Headings** Source **GOOGLE** The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. 0123456789 Class **.font-primary** Wix Madefor Text Role **Secondary** Used for **Body and buttons** Source **GOOGLE** The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. 0123456789 Class **.font-secondary** Section 3 ## Headings Each row is a real heading element, not a copy styled to look like one, with every value from its own field group printed beside it. Heading colour is not in this group: the colour subfield is hidden on the field, so it comes from the colour scheme instead. See section 7. Theme settings › Typography # Heading level 1 Element h1 / .h1 Font Wix Madefor Display Weight 700 Size 44px desktop · 38px tablet · 32px mobile Case none Letter spacing 0.03px Line height 1.1 ## Heading level 2 Element h2 / .h2 Font Wix Madefor Display Weight 700 Size 38px desktop · 32px tablet · 28px mobile Case none Letter spacing 0.03px Line height 1.15 ### Heading level 3 Element h3 / .h3 Font Wix Madefor Display Weight 700 Size 32px desktop · 26px tablet · 24px mobile Case none Letter spacing 0.03px Line height 1.2 #### Heading level 4 Element h4 / .h4 Font Wix Madefor Display Weight 700 Size 24px desktop · 22px tablet · 22px mobile Case none Letter spacing 0.03px Line height 1.3 ##### Heading level 5 Element h5 / .h5 Font Wix Madefor Display Weight 700 Size 22px desktop · 20px tablet · 20px mobile Case none Letter spacing 0.03px Line height 1.35 ###### Heading level 6 Element h6 / .h6 Font Wix Madefor Display Weight 700 Size 18px desktop · 18px tablet · 18px mobile Case none Letter spacing 0.03px Line height 1.4 Body, links and the two extra styles Body copy. The quick brown fox jumps over the lazy dog, and keeps jumping until the line wraps so the line height and measure are both visible. Element body / p Font Wix Madefor Text Weight Size 18px desktop · 17px tablet · 16px mobile Letter spacing 0px Line height 1.5 An [inline text link](https://www.flexoraatheme.com/style-guide#headings) inside a paragraph, which is where the link styles are really seen. Font Wix Madefor Text Weight 500 Size 16px desktop · 16px tablet · 16px mobile Underline off Letter spacing 0px Line height 1.7 Typo 1. A secondary text style for captions, meta lines and small print. Class .typo-1 Font Wix Madefor Text Weight regular Size 22px desktop · 18px mobile Typo 2. A secondary text style for captions, meta lines and small print. Class .typo-2 Font Wix Madefor Text Weight Size 16px desktop · 16px mobile Space under a heading **16px** Space under a paragraph **16px** Section 4 ## Buttons Eight presets, three sizes each. The grid is shown twice, once on a light surface and once on a dark one, because White and White outline are invisible on white and a buyer who only sees them there will think they are broken. Theme settings › Buttons light surface small regular large Primary.btn-1 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Secondary.btn-2 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Primary outline.btn-3 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Secondary outline.btn-4 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Gradient.btn-5 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) White.btn-6 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) White outline.btn-8 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Simple link.btn-7 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) dark surface small regular large Primary.btn-1 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Secondary.btn-2 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Primary outline.btn-3 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Secondary outline.btn-4 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Gradient.btn-5 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) White.btn-6 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) White outline.btn-8 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) Simple link.btn-7 [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) [Button](https://www.flexoraatheme.com/style-guide#buttons) With an icon [Leading icon](https://www.flexoraatheme.com/style-guide#buttons) [Trailing icon](https://www.flexoraatheme.com/style-guide#buttons) Size values Size small Font size 14px Padding 10 / 22 / 10 / 22px Size regular Font size 16px Padding 14 / 31 / 14 / 31px Size large Font size 18px Padding 18 / 40 / 18 / 40px Site default size: **regular**. Outline presets subtract their border width from the padding above, so an outline button and a solid one at the same size end up the same height. Section 5 ## Navigation Both navigation types, one after the other, whichever one the theme is set to. Each has its first panel held open, which is the one thing you cannot check on a live page without holding a hover, and the nav row above it keeps its resting colours so both states read at once. The moon in the corner of each frame flips that frame to dark, and leaves the rest of the page alone. Theme settings › Website header Theme settings › Website footer Simple menu Simple menu, with the language switcher, the search trigger and the first submenu held open Dark Light [![flexoraa](https://www.flexoraatheme.com/hubfs/flexoraa-logo/flexoraa-logo.svg "flexoraa")](https://www.flexoraatheme.com/?hsLang=en) Megamenu Megamenu, with the first panel held open: link columns, a badge, the featured card and the footer bar Dark Light [![flexoraa](https://www.flexoraatheme.com/hubfs/flexoraa-logo/flexoraa-logo.svg "flexoraa")](https://www.flexoraatheme.com/?hsLang=en) - Product ### Build - Modules Fifty sections on one design system. - Templates New Every page type, ready to publish. ### Manage - Theme settings Colour, type and spacing in one place. - Style guide The page you are reading. ### Featured card The panel's promoted slot: an image, a heading, a description and a button. [Open the card](https://www.flexoraatheme.com/style-guide#chrome) The footer bar runs across the bottom of the panel. [Footer link](https://www.flexoraatheme.com/style-guide#chrome) - Solutions - For agencies - For SaaS - For ecommerce - Pricing - Docs Footer The footer is not drawn here. Unlike the header, it is built and styled entirely in its own module, so there is no theme level setting for this page to preview: open **footer\_classic** in the page editor and every column, link and colour is in front of you. Theme settings only chooses which of the footers runs by default. Theme settings › Website footer The mobile drawer is not framed either: it covers the whole screen by design, so there is nothing to put a frame around. Narrow the preview to see it. The language switcher only appears on a portal with more than one language, which is HubSpot's own rule and not a theme setting. Section 6 ## Container and spacing Two of these are drawn inside a browser frame at true size, because a width and a gap only mean something against the edge of a screen. Everything inside the frames is the real value from your settings, not an illustration of one. Theme settings › Container & spacing Container width yoursite.com 1240px maximum content width Everything on a page sits inside this. Sections paint edge to edge, their content stops here. Gutter each side **.left-m / .right-m · 20px** Same on every screen **1240px** Section spacing, as every module ships it yoursite.com Section above .top-xl · 100px Section content .bottom-xl · 100px Section below This is what a module looks like out of the box: **.top-xl** and **.bottom-xl**, with **.left-m** and **.right-m** either side. Checked across the module set, 34 of 38 ship exactly this pairing and all 38 share the side value. Change it per section in the module's own Spacing settings, or change what XL means for the whole site here. The rest of the vertical scale .top-s Desktop **40px** Tablet **30px** Mobile **20px** .top-m Desktop **60px** Tablet **45px** Mobile **30px** .top-l Desktop **80px** Tablet **60px** Mobile **40px** .top-xl *default* Desktop **100px** Tablet **75px** Mobile **50px** .top-2xl Desktop **120px** Tablet **90px** Mobile **60px** .top-3xl Desktop **140px** Tablet **105px** Mobile **70px** .top-4xl Desktop **160px** Tablet **120px** Mobile **80px** Horizontal scale .left-m *default* Desktop **20px** Tablet **20px** Mobile **20px** .left-l Desktop **40px** Tablet **40px** Mobile **40px** .left-xl Desktop **60px** Tablet **60px** Mobile **60px** Sections 7 and 8 ## Light and dark The same eleven things in both schemes, side by side. Dark mode is a separate set of values rather than a filter over the light one, which is only obvious when the two sit next to each other. Every module on the site picks one of these two schemes per section. Theme settings › Light color scheme Theme settings › Dark color scheme light scheme .scheme-light · #f5f4f0 Card #### Card title A card on the light scheme, with the icon, title, description and button a real module would put inside it. [Card button](https://www.flexoraatheme.com/style-guide#schemes) #### Bordered card The same card with the border variant on, so the card border colour is visible against the card surface. Text Subtitle #### Heading colour Body text colour, the value most of the reading on the site is set in. Muted text, for dates, captions and anything secondary. Error text, used by form validation. Links [A link at rest](https://www.flexoraatheme.com/style-guide#schemes) and the hover colour, shown side by side because a hover state cannot be printed any other way. Borders and lines Border colour, used on cards, inputs and panels. Divider line, a separate value from the border. Icons Accent Accent background with on-accent text on top of it. Every role in this scheme Surface #f5f4f0 Card surface #ebe9e3 Heading #111110 Body text #6b6a66 Muted #6b6a66 Subtitle #6b6a66 Error #e2472b Link #111110 Link hover #e2472b Border #111110 Line #e2472b Icon #111110 Icon background #ebe9e3 Bullet #e2472b Accent #e2472b On accent #ffffff dark scheme .scheme-dark · #111110 Card #### Card title A card on the dark scheme, with the icon, title, description and button a real module would put inside it. [Card button](https://www.flexoraatheme.com/style-guide#schemes) #### Bordered card The same card with the border variant on, so the card border colour is visible against the card surface. Text Subtitle #### Heading colour Body text colour, the value most of the reading on the site is set in. Muted text, for dates, captions and anything secondary. Error text, used by form validation. Links [A link at rest](https://www.flexoraatheme.com/style-guide#schemes) and the hover colour, shown side by side because a hover state cannot be printed any other way. Borders and lines Border colour, used on cards, inputs and panels. Divider line, a separate value from the border. Icons Accent Accent background with on-accent text on top of it. Every role in this scheme Surface #111110 Card surface #1b1b19 Heading #f5f4f0 Body text #a3a29c Muted #a3a29c Subtitle #a3a29c Error #ff5a3c Link #f5f4f0 Link hover #ff5a3c Border #f5f4f0 Line #ff5a3c Icon #f5f4f0 Icon background #1b1b19 Bullet #ff5a3c Accent #ff5a3c On accent #111110 Section 9 ## Forms All three form styles, side by side. These are written with HubSpot's own form markup and class names, so the theme's form stylesheet paints them exactly as it paints a live form, without needing a form embedded on the page first. Pick the style you want in Theme settings and every form on the site follows. Theme settings › Form Form style 1 Full name Work email Help text sits under the field, at its own size and colour. Company size 1 to 10 11 to 50 51 or more Phone - Please enter a valid phone number. Message What are you interested in? - A theme licence - Custom module work How did you hear about us? - HubSpot marketplace - A colleague Consent text sits at its own size, under the fields, and usually runs to two lines so the line height matters. Form style 2 Full name Work email Help text sits under the field, at its own size and colour. Company size 1 to 10 11 to 50 51 or more Phone - Please enter a valid phone number. Message What are you interested in? - A theme licence - Custom module work How did you hear about us? - HubSpot marketplace - A colleague Consent text sits at its own size, under the fields, and usually runs to two lines so the line height matters. Form style 3 Full name Work email Help text sits under the field, at its own size and colour. Company size 1 to 10 11 to 50 51 or more Phone - Please enter a valid phone number. Message What are you interested in? - A theme licence - Custom module work How did you hear about us? - HubSpot marketplace - A colleague Consent text sits at its own size, under the fields, and usually runs to two lines so the line height matters. Style 2 is drawn on a dark panel here, since that is the ground it is designed for. The fields are inert on this page by design: it is a specimen, not a form that collects anything.