Style Guide

This is a living style guide. It will evolve alongside the main site, hawkeward.com.

Colors

  • #fb3640
  • #6d6c6b
  • #1a936f
  • #18231d
  • #f2eaee

Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris purus, dictum sed rhoncus et, efficitur a risus. Curabitur vel odio id nisi ultricies feugiat. Praesent at augue viverra neque egestas ornare. Phasellus posuere accumsan aliquet. Duis suscipit, elit sodales bibendum fringilla, est sapien tempus augue, eget ultrices massa dui in dui. Morbi eu mauris ac odio blandit egestas id eu erat. Praesent ultrices vehicula gravida.

Mauris at velit vitae ipsum bibendum blandit. Fusce sed nisl interdum, molestie mi in, consequat ex. Proin sagittis est nec orci efficitur, tempus interdum tellus scelerisque.

Read more

Headings

h1. Heading 1

Lorem ipsum…

h2. Heading 2

Lorem ipsum…

h3. Heading 3

Lorem ipsum…

h4. Heading 4

Lorem ipsum…

h5. Heading 5

Lorem ipsum…

h6. Heading 6

Lorem ipsum…

Post heading

The quick brown fox jumped over the lazy dog

Anchor links

This is a regular anchor link.

Text action link

Learn more

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mauris purus, dictum sed rhoncus et, efficitur a risus. Curabitur vel odio id nisi ultricies feugiat. Praesent at augue viverra neque egestas ornare. Phasellus posuere accumsan aliquet. Duis suscipit, elit sodales bibendum fringilla.

Pull quote

This pull quote has no source:

This pull quote has a source:

Code blocks

This is a code sample: console.log("Hello world!");.

Here are some individual tags like <html> and <html>.

<html>
<head>
<title>Sample code</title>
…
</head>
<body>
…

Buttons

Buttons that are anchor tags:

Primary Btn Primary Btn (Hover) Primary Btn (Active) Primary Btn (Disabled)
Secondary Btn Secondary Btn (Hover) Secondary Btn (Active) Secondary Btn (Disabled)

Lists

First, simple ordered and unordered lists:

  1. List item 1
  2. And list item 2
  3. Finally, list item 3
  • List item 1
  • And list item 2
  • Finally, list item 3

Second, two-tiered lists:

  1. List item 1
  2. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet
  3. Finally, list item 3
  • List item 1
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet
  • Finally, list item 3

Third, three-tiered lists:

  1. List item 1
  2. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet
  3. List item has a sub-list:
    1. Lorem ipsum…
    2. … dolor sit amet
      • Lorem ipsum…
      • … dolor sit amet
  • List item 1
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet
  • List item has a sub-list:
    • Lorem ipsum…
    • … dolor sit amet
      • Lorem ipsum…
      • … dolor sit amet

Definition list

Definition list
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.
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.

Tables

This table has a header and footer:

Header Row Here
127 40 16 720
12 34 5 678
5 2 9 8
20 3 0 0
90 1 2 34

This is a simpler table:

12 34 5 678
5 2 9 8
20 3 0 0
90 1 2 34