Style Guide
Take a look inside the style of NicheOnline.net.
Beginning
Getting Started
The styleguide is a resource for designers, product managers, and developers, providing a common language around Yelp’s UI Patterns. We use it to maintain modular front-end code and visual consistency across the web app.
Emotion
Color Palette
Primary Colors
- niche-orange
- #f15a23
- niche-black
- #333
- blue
- #2948FF
Background Colors
- niche-orange
- #f15a23
- black
- #000
- blue
- #e6e6e6
Text Colors
- Headline Text
- #333
- Inverse Text
- #f15a23
- Topic Text
- #000
- Link Color
- #f15a23
- Normal Text
- #333
- Section Text
- #333 / #f15a23
Logic
Typography
Heading 1 - Section Title
Lead-In Paragraph: This is the default style for lead-in text on your site. When you write an article this will serve as the first paragraph.
Heading 2
Heading 3
Styled Image Left
Place your cursor at the start of the paragraph. Click on the Media button and choose your image. Once it appears in the text block, click on the image so it highlights, go to the Styles button in the text editor and choose either styled image left or styled image right.
Styled Image Right
Place your cursor at the start of the paragraph. Click on the Media button and choose your image. Once it appears in the text block, click on the image so it highlights, go to the Styles button in the text editor and choose styled image right.
Use a horizontal line (as shown above and below this paragraph) to break up text on a page. Write out your text, place your cursor in the desired location of the horizontal line and click on the horizontal line icon in the text editor (bottom row, second button in from the right).
FAQ lists are a great way to break up text within a page to make it more manageable for the reader. Click on the Add Content button and choose FAQs. Click Add New to start your FAQ list. Enter a title and use the free form description field for all of the information related to that title. That information can include descriptions or simply a link off to a page on the site that can provide the user with all of the information they need, which will avoid duplication of content on the site.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.