Style guide

Colors

Primary color palette

  • Primary #6e9adc
  • Secondary a #8b6edc
  • Secondary b #6edcd5
  • Complementary #ffcb73
  • Interactive #dc6e9a

The primary color palette is an accented analogical color scheme based on my original link color choice. The “interactive” color is used both for interaction and pop color. (Plus I love pink, so deal with it.)

50 6 shades of grey

  • Base #111
  • Dark Grey #666
  • Light Grey #333
  • Lighter Grey #ddd
  • Inverted #eee
  • White #fff

Since this site has always been a dark theme, I need several shades of grey to work with. The naming scheme needs some work.

Typography

The majority of the site is set in 14px (automatically changed to rem) Arial, with generic sans-serif as fallback.

The size of the type is based on a 14 pixel major second (8:9) modular scale. The vertical rhythm is based off the 1.5 line-height (leading).

Headings are set in Georgia with Times New Roman and generic serif as fallback. The largest heading has a slightly smaller letter-spacing (tracking), while they all include a slight text-shadow.

The logo is set in Dieter Steffmann’s Kleist-Fraktur.

Paragraphs

Use the lead utility class for the opening lead paragraph(s) of articles. When used in the excerpt, don’t include links or it will break the parent anchor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum massa tortor, quis molestie massa pellentesque ut. Nulla sollicitudin arcu libero, cursus iaculis enim congue eu. Mauris molestie lectus vel tristique dapibus. Suspendisse luctus nisi mauris. Fusce lobortis nisl vel nisl gravida molestie. Vivamus tempor pharetra dui, in auctor augue. Donec sit amet sapien sapien. Sed vulputate at nulla eu consequat. Ut et nunc ligula.

<p class="lead">...</p>

Integer aliquet cursus mauris. Cras facilisis, diam nec fermentum condimentum, sem est elementum quam, nec porttitor augue magna ac ligula. Donec bibendum, arcu at rutrum vehicula, nisl ligula vulputate augue, vitae venenatis dui lacus et nunc. Nulla fringilla, nisi in mattis egestas, nibh eros iaculis dolor, elementum rhoncus neque dolor non ligula. Etiam vitae dolor non sem pulvinar tristique. In vestibulum, tortor non accumsan egestas, sapien libero congue justo, sit amet viverra sem libero vitae est. Aliquam feugiat condimentum ligula, dignissim pharetra eros placerat a. In dui nisi, tincidunt et faucibus sed, lacinia et leo.

<p>...</p>

Headings

Heading one, .alpha

<h1>...</h1>
<div class="alpha">...</div><-- /alpha -->

Heading two, .beta

<h2>...</h2>
<div class="beta">...</div><-- /beta -->

Heading three, .gamma

<h3>...</h3>
<div class="gamma">...</div><-- /gamma -->

Heading four, .delta

<h4>...</h4>
<div class="delta">...</div><-- /delta -->
Heading five, .epsilon
<h5>...</h5>
<div class="epsilon">...</div><-- /epsilon -->
Heading six, .zeta
<h6>...</h6>
<div class="zeta">...</div><-- /zeta -->

Lists

  • list item
  • list item
  • list item
<ul>
    <li>...</li>
</ul>
  1. list item
  2. list item
  3. list item
<ol>
    <li>...</li>
</ol>

This utility class can be used when a list with lowercase alphabet is preferred.

  1. list item
  2. list item
  3. list item
<ol class="list--alpha">
    <li>...</li>
</ol>

This utility class can be used for a list with no list-type or left margin.

  • list item
  • list item
  • list item
<ul class="list--unstyled">
    <li>...</li>
</ul>

This utility class can be used for a list of inline items without type-style.

  • list item
  • list item
  • list item
<ul class="list--inline">
    <li>...</li>
</ul>

This utility class can be used for a list of inline-block items without type-style.

  • list item
  • list item
  • list item
<ul class="list--inline-block">
    <li>...</li>
</ul>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum massa tortor, quis molestie massa pellentesque ut. Nulla sollicitudin arcu libero, cursus iaculis enim congue eu. Mauris molestie lectus vel tristique dapibus. Suspendisse luctus nisi mauris. Fusce lobortis nisl vel nisl gravida molestie. Vivamus tempor pharetra dui, in auctor augue. Donec sit amet sapien sapien. Sed vulputate at nulla eu consequat. Ut et nunc ligula.

<blockquote>
    <p>...</p>
</blockquote>

Code

Syntax highlighting provided by prism.js.

Code blocks

<ul>
    <li>...</li>
</ul>
<pre><code class="language-markup">&lt;ul&gt;
    &lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;</code></pre>

Inline code

<-- /end__class --> 
<code class="language-markup">&lt;-- /end__class --&gt;</code>