Visual Style Guide

  1. Colors
  2. Typography
  3. Buttons
  4. Lists
  5. Links
  6. Breadcrumbs
  7. Table
  8. Quote
  9. Pagination
  10. Tabs

Also See

  1. Framework Component Library
  2. Component Wrappers
  3. Framework Design Libray
  4. Image Options

#1 Colors

  • Primary
  • Secondary
  • Tertiary
  • Accent #1
  • Accent #2
  • Accent #3
  • White
  • Gray
  • Black

#2 Typography

Fonts

Regular

San Serif font:

Headings

Heading Level 1:

Heading Level 2:

Heading Level 3:

Heading Level 4:

Heading Level 5:
Heading Level 6:

Paragraph Text Sizing

Small

Lorem ipsum dolor sit amet.

Base

Lorem ipsum dolor sit amet.

Large

Lorem ipsum dolor sit amet.

#3 Buttons

Default

Default Button

Secondary Button




#4 Lists

Default lists

Unordered List

  • Lorem ipsum dolor sit amet.
  • Dicta optio cumque dolore hic ea facilis
  • Minus, possimus, veniam, incidunt eligendi
  • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  • Dicta optio cumque dolore hic ea facilis
  • Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  • Dicta optio cumque dolore hic ea facilis

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  4. Lorem ipsum dolor sit amet
  5. Dicta optio cumque dolore hic ea facilis
  6. Minus, possimus, veniam, incidunt eligendi
  7. Lorem ipsum dolor sit amet
  8. Dicta optio cumque dolore hic ea facilis
  9. Minus, possimus, veniam, incidunt eligendi
  10. Lorem ipsum dolor sit amet
  11. Dicta optio cumque dolore hic ea facilis
  1. Lorem ipsum dolor sit amet.
    1. Lorem ipsum dolor sit amet.
    2. Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.
  1. Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
    • Lorem ipsum dolor sit amet.
  2. Lorem ipsum dolor sit amet.

Definition List

Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.
Term
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, totam, voluptas, harum itaque placeat consequuntur eligendi eius illum facilis architecto nobis aliquid. Consequuntur voluptatum eaque repellendus soluta cupiditate distinctio quam.

Default lists of links

Unordered List

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Lorem ipsum dolor sit amet
  2. Dicta optio cumque dolore hic ea facilis
  3. Minus, possimus, veniam, incidunt eligendi
  1. Layout basics
  2. Basics layouts
  3. Layout patterns
  1. Layout basics
  2. Basics layouts
  3. Layout patterns

#5 Links

Primary

Use our tool
Use our tool
Use our tool
Use our tool

Secondary

Use our tool

Lorem ipsum dolor sit amet, consectetur adipisicing elit. use our tool Fugiat, quam alias voluptatem tempora minus dolor facere cumque necessitatibus placeat velit aliquid ab dolore beatae. Neque ipsam in a illum repellendus?

#6 Breadcrumbs

#7 Table

ElementAvailabilityDescriptionDescription
srcAll browsersGives the address (URL) of the video.Gives the address (URL) of the video.
posterAll browsersGives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.Gives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
ElementAvailabilityDescription
srcAll browsersGives the address (URL) of the video.
posterAll browsersGives the address (URL) of an image file that the browser can show as soon as the video element loads, before playback begins.
ElementAvailability
srcRules applied for any browser width over the value defined in the query.
posterRules applied for any browser width over the value defined in the query.

#8 Quote

This is my QuoteAnd this is my Citation

#9 Pagination

  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7

#10 Tabs

  1. Tab 2
  2. Tab 3
  3. Tab 4
  4. Tab 5
  5. Tab 6
  6. Tab 7

#11 Forms

Example block-level help text here.