Style Guide

This is the set of standards for writing, formatting and designing of elements for my online web portfolio. This style guide sets conventions for everything used within the site.

Colors

Brand-1 ➜ Hex #733B58

Brand-2 ➜ Hex #B24268

Brand-3 ➜ Hex #E55454

Brand-4 ➜ Hex #E67A52

Brand-5 ➜ Hex #E5C150

Half-Dark ➜ Hex #A9A9A9

Dark ➜ Hex #333333

Item-Bg ➜ Hex #E2E2E2

Main-Bg ➜ Hex #FFFFFF

Section-Bg ➜ Hex #F7F7F9

Line-Field ➜ Hex #EDEDED

Outline ➜ Hex #CACACA

Rockwell-1 ➜ Hex #bb2332

Rockwell-2 ➜ Hex #f68a33

Program-1 ➜ Hex #1273ec

Program-2 ➜ Hex #002755

Discovery-1 ➜ Hex #69be28

Discovery-2 ➜ Hex #405249

Viewbook-1 ➜ Hex #881d1d

Viewbook-2 ➜ Hex #490303

Typography

Heading 1 ➜ Font: Rubik - Weight: 600/Semi Bold

The quick brown fox jumps over the lazy dog

Heading 2 ➜ Font: Rubik - Weight: 600/Semi Bold

The quick brown fox jumps over the lazy dog

Heading 3 ➜ Font: Rubik - Weight: 600/Semi Bold

The quick brown fiox jumps over the lazy dog

Heading 4 ➜ Font: Rubik - Weight: 600/Semi Bold

The quick brown fiox jumps over the lazy dog

Title ➜ Font: Source Sans Pro - Weight: 400/Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta lectus sed laoreet interdum. Sed sit amet erat ac lacus pulvinar aliquet. Aliquam erat volutpat. Donec tellus turpis, feugiat quis congue eget, lacinia nec nisi.

Body-1 ➜ Font: Source Sans Pro - Weight: 400/Normal

Pellentesque aliquam euismod libero in convallis. Suspendisse rutrum congue ex et tincidunt. Vivamus quis elit et arcu consectetur mattis. Pellentesque sodales justo non semper venenatis. In sed ullamcorper velit, a convallis ipsum. Ut sollicitudin at erat nec suscipit.

Body-2 ➜ Font: Source Sans Pro - Weight: 400/Normal

Aenean quis hendrerit erat. Aliquam erat volutpat. Suspendisse pretium posuere volutpat. Suspendisse at turpis sit amet libero dignissim consectetur. Praesent vel viverra ex.

Buttons

Primary Button 

Text-Button 

Test Pages