Design Guidelines

Use darkened section alternatively with regular section if possible to show contrast between sections.

Here is a demonstration of using Bold and Italic to emphasize text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 deserunt mollit anim id est laborum.

Here is a example of a block quote. Use it when quoting something:

I am a block quote. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Here is a example of paragraph without markups:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 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 deserunt mollit anim id est laborum.

Implementation Guidelines

Create darkened sections by using darken class on the div. When implementing, put inGrid class inside of the darken div. put container inside of inGrid, inGridTop and inGridHero tag if possible.

Always put computer codes into code tag.

Use hero class for hero images.

Use textCenter class to center texts.

Use rmTopMargin class to remove the margin on the top of the element.

Use inGridTop class to style the very top section.

Use inGridHero class to style the Hero sections.

Use inGrid class to style any other section.

Use increasePaddingBottom, increasePaddingTop, increasePaddingBottom, increasePadding id to add padding (by 23 px), while increasePadding add padding to both top and bottom.

Use increaseMarginTop, increaseMarginBottom, increaseMarginRight, increaseMargin id to add margin (by 64 px), while increaseMargin add padding to both top and bottom.

Use dl (dictionary list), dt (dictionary term), dd (dictionary definitions) for definitions. Here is a demonstration of dictionary list:

Term: Description

Use `h1` for the top level titles

Design Guidelines

Implementation Guidelines

Use `h1` for the top level titles

Use `h2` for the secondary titles

Use `h3` for the tertiary titles

Use `h5` as a label

Use `h6` as a tag

New

Pupper Centered Design

Corgi Fashion App

Design Guidelines

Implementation Guidelines

Use h1 for the top level titles

Use h2 for the secondary titles

Use h3 for the tertiary titles

Use h5 as a label

Use h6 as a tag

New

Pupper Centered Design

Corgi Fashion App

Use `h1` for the top level titles

Use `h2` for the secondary titles

Use `h3` for the tertiary titles

Use `h5` as a label

Use `h6` as a tag