Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Colors

Color paletted includes 13 named colors: primary, secondary, 4 states and 7 supporting. Hover, active and focus states are modified the saturation and lightness of their color.

Primary & Secondary
Blue (Primary) #007be0
Black (Secondary) #1B1C1D
States
Red (Error) #E95849
Orange (Warning) #E88631
Green (Success) #169d6c
Teal (Info) #2BADD4
Others
Yellow #FBBD08
Olive #B5CC18
Violet #6435C9
Purple #5A72F9
Pink #E03997
Brown #A5673F
Grey #767676
Styles

There are 2 styles mostly used in our apps: flat and raised state.

Flat
Flat is a style that give the illusion of drop shadows, gradients or textures
Raised
Raised has a z-depth that determines how far raised to the page
States

Some components have hover state. We can activate this state by adding the class selection.

Hover (selection)
Hover this to see how the class selection works
Active
Active state changes color of border from grey to blue
Typography

Helvetica and Arial are still two of the most popular typeface designs around. The primary difference between Arial and Helvetica is multiple weights. Helvetica has light, normal, medium and bold, while Arial's are normal and bold.

1. Helvetica & Arial

Helvetica Light

Helvetica Normal / Arial Normal

Helvetica Medium

Helvetica Bold / Arial Bold

2. Styles

Use boldto bold text. Use upperto convert text from lower case to upper case

Text

Bold Text

Uppercase Text

3. Headings

Headers may be oriented to give the hierarchy of a section in the context of the page. Page headings are sized using remand are not affected by surrounding content size.

Heading One

Heading One

Heading One

Heading Two

Heading Two

Heading Two

Heading Three

Heading Three

Heading Three

Heading Four

Heading Four

Heading Four

Heading Five
Heading Five
Heading Five
Paragraph

Helvetica and Arial are still two of the most popular typeface designs around. The primary difference between Arial and Helvetica is multiple weights. Helvetica has light, normal, medium and bold, while Arial's are normal and bold.

Default

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Help

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Info

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Sample

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold text.

The following snippet of text is rendered as italicized text.

An abbreviation of the word attribute is attr.

Google Photos lets you search by emoji

Don’t let the calendar confuse you, this one is no joking matter: Google has brought emoji search to Photos on the Web, Android and iOS.

All you need to do is paste in the appropriate emoji and it’ll return the matching results – a gift for anyone who is just all too busy (or lazy) to type, say, ‘sunrise’ into the search bar.

© 2017 B3Networks.