Typography
Roboto for body text with Poppins for titles / display, both from Google's font library. All based on clean greys (that will probably be slightly shifted toward blue once final colors are set), whatever the final pick it will all pass WCAG AA level on all sizes / background color combinations.
Body
Roboto primarily in #666666 with #222222 highlights, using all styles Regular for typical body text, Bold for highlights, and Italic for quotes. Roboto is also used for kicker titles.
fs-1
fs-2
fs-3
fs-4
fs-5
fs-6
Display
Poppins primarily in #222222 with color gradient highlights, primarily in Semibold (600) weight.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Examples
Optional Kicker
Title that spans across two rows
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Unordered List
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit, sed do eiolor
- Sit amet temporem ipsum dolor sit amet
- Onsectetur adipiscing elit
- Sed do eiolor sit amet tempor.
Ordered List
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit, sed do eiolor
- Sit amet temporem ipsum dolor sit amet
- Onsectetur adipiscing elit
- Sed do eiolor sit amet tempor.
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem particularly important highlight, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum italic can be used for small highlights adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed primary link is easily visible amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Buttons
Not covering inverted variants just yet because not all colors are final, will expand as needed, this will be an evolving thing throughout the project as we see how the pages interact across.
Primary
Main CTA button with a subtle green gradient over it, I don't anticipate us using XS anywhere on the marketing website, perhaps just for cookie propmts and such.
Secondary
Secondary CTA button that has no fill so needs to be nicely balanced with the background, uses an inverted scheme when on dark sections.
Highlight Link
Whenever we want to put emphasis on the action that either doesn't fit as a secondary action on the page or helps balance it out vs primary (using the “ or Highlight” pattern).
Slider Control
Sliders should always be swipeable (both touch and mouse) but often will have specific controls associated. On mobile we may omit specific controls but must have an indicator and use visual cues that there is more content available on swipe.
If the content is left aligned we should position controls to the right, if it's centrally aligned then split the controls to both sides and show an indicator.
Badges
When we merge into a unified design system with marketing and app side, we'll have more variation with badges being used as a notification element as well (and part of buttons), for the site alone I only aniticipate using these for sales and specific highlights.
Badge Highlight Highlight Highlight Highlight
Badge with icon Highlight Highlight Highlight Highlight
Badge large Highlight Highlight Highlight Highlight
Ratings
Used primarily for customer reviews and currently only envisioned for display purposes, no interaction or live ratings intented for the website in this iteration.
Tooltips
Tooltip sizing follows the text and is separated by a space. We have two main ones, question and info. Question-circle is used when we need to answer “What is this?”, “What does this mean?” (typically pricing plans or something less apparent), and info-circle is used for additional context to someting (typically input labels).
Modal
Modal behaves in a very similar way as now, let's just animate it popping up, not popping down. The overlay is 30% transparency of a dark blue and it makes the background blur to increase focus on the modal.
Optional Kicker
Title that spans across two rows or one more
Subtitle here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
4.6/5
from 12,000+ reviews
A+
“Best Hosting Company”
4.6/5
Editor's Choice
June 2022
Optional Kicker
Title that spans across two rows or one more
Subtitle here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
- FREE domain registration, website buider, SSL certification, and one-on-one training on all plans
- 24/7 award-winning support over phone, email, and chat in four languages (you can even fax us!)
- Easy-to-use HostPapa Dashboard and cPanel control panel helps you manage your tools in one place
Centered title that spans across two rows
Subtitle here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit, sed do eiolor
- Sit amet temporem ipsum dolor sit amet
- Onsectetur adipiscing elit
- Sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit, sed do eiolor
- Sit amet temporem ipsum dolor sit amet
- Onsectetur adipiscing elit
- Sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor
- Consectetur adipiscing
- Elit sed do eiolor
- Porem ipsum dolor
- Onsee tetur adip
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Feature Spotlight
Sit amet, consem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt.
Optional Kicker
Title that spans across two rows or one more
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
- Lorem ipsum dolor
- Consectetur adipiscing
- Elit sed do eiolor
- Porem ipsum dolor
- Onsee tetur adip
Tab Two
Tab Three
Tab Four
Tab Five
Tab Six
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Specific Feature Name
Sed ut perspi ciatis unde omni
Unde omnis iste nasper
Voluptatem accus omnis ist
Omnis iste natus error sit
Lorem ipsum dolor sit amet
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two rows
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Can Contain Link
Spotlight can easily span across two rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Single row example
Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Spotlight can easily span across two rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Can Contain Link
Spotlight can easily span across two rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two rows
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Can Contain Link
Spotlight can easily span across two rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Single row example
Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two rows
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Can Contain Link
Spotlight can easily span across two rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Single row example
Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Single row example
Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Single row example
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two rows
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Lorem ipsum CTA
Single row example
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Lorem ipsum CTA
Spotlight can easily span across two rows
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Lorem ipsum CTA
Easily span across tw
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Lorem ipsum CTA
Can easily span acr
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Lorem ipsum CTA
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two three rows
Sed ut perspiciatis unde om nis iste natus error sit volu ptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two three rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.
Can Contain Link
Spotlight can easily span across two three rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Single row example
Omnis iste natus error sit voluptatem accusantium dolo remque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two three rows
Sed ut perspiciatis unde om nis iste natus error sit volu ptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two three rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
Can Contain Link
Spotlight can easily span across two three rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two three rows
Sed ut perspiciatis unde om nis iste natus error sit volu ptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two three rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
Can Contain Link
Spotlight can easily span across two three rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Spotlight can easily span across two three rows
Sed ut perspiciatis unde om nis iste natus error sit volu ptatem accusa ntium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab.
Spotlight can easily span across two three rows
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
Can Contain Link
Spotlight can easily span across two three rows
Voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.
Optional Kicker
Lorem Ipsum Dolor
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusa ntium doloremque.
Product spotlight one
Sed ut perspiciatis unde om nis iste natus error sit volu ptatem accusa ntium doloremque laudantium, totam rem apeatus er.
Product spotlight one
Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque.
Frequently Asked Questions
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
.accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow.Frequently Asked Questions
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Still have questions?
Our awesome team is always around to help.
.accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow..accordion-body, though the transition does limit overflow.Optional Kicker
Main CTA Headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiolor sit amet tempor.
Duis aute irure dolor in repreh enderit in voluptate velit.
Duis aute irure dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pacupidatat non proident, sunt inriatur.
Duis aute irure dolor
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pacupidatat non proident, sunt inriatur.
