Styleguide

Colours permalink

• lynx — Full

  #091217

• lynx — alpha

  90%

• lynx — beta

  50%

• lynx — gamma

  10%

• lynx — delta

  5%

• wolf — Full

  #20323d

• wolf — alpha

  90%

• wolf — beta

  50%

• wolf — gamma

  10%

• wolf — delta

  5%

• bowhead — Full

  #3e5c6d

• bowhead — alpha

  90%

• bowhead — beta

  50%

• bowhead — gamma

  10%

• bowhead — delta

  5%

• raven — Full

  #5f8aa6

• raven — alpha

  90%

• raven — beta

  50%

• raven — gamma

  10%

• raven — delta

  5%

• highland — Full

  #80b7d7

• highland — alpha

  90%

• highland — beta

  50%

• highland — gamma

  10%

• highland — delta

  5%

• coyote — Full

  #c0dbed

• coyote — alpha

  90%

• coyote — beta

  50%

• coyote — gamma

  10%

• coyote — delta

  5%

• bear — Full

  #ebf3f9

• bear — alpha

  90%

• bear — beta

  50%

• bear — gamma

  10%

• bear — delta

  5%

• maple — Full

  #eb2d36

• maple — alpha

  90%

• maple — beta

  50%

• maple — gamma

  10%

• maple — delta

  5%

• conifer — Full

  #3d8137

• conifer — alpha

  90%

• conifer — beta

  50%

• conifer — gamma

  10%

• conifer — delta

  5%

• aspen — Full

  #ffd700

• aspen — alpha

  90%

• aspen — beta

  50%

• aspen — gamma

  10%

• aspen — delta

  5%

• thunder — Full

  #060606

• thunder — alpha

  90%

• thunder — beta

  50%

• thunder — gamma

  10%

• thunder — delta

  5%

• mineshaft — Full

  #2b2b2b

• mineshaft — alpha

  90%

• mineshaft — beta

  50%

• mineshaft — gamma

  10%

• mineshaft — delta

  5%

• kaiser — Full

  #4f4f4f

• kaiser — alpha

  90%

• kaiser — beta

  50%

• kaiser — gamma

  10%

• kaiser — delta

  5%

• dove — Full

  #737373

• dove — alpha

  90%

• dove — beta

  50%

• dove — gamma

  10%

• dove — delta

  5%

• alto — Full

  #dddddd

• alto — alpha

  90%

• alto — beta

  50%

• alto — gamma

  10%

• alto — delta

  5%

• milou — Full

  #f9f9f9

• milou — alpha

  90%

• milou — beta

  50%

• milou — gamma

  10%

• milou — delta

  5%

Measures permalink

Tiny

Small

Medium

Large

Gigantic

Responsive

Fonts permalink

Primary Font: "Proxima Nova", sans-serif;

Primary Font italic: "Proxima Nova", sans-serif;

Primary Font bold: "Proxima Nova", sans-serif;

Secondary Font: Georgia, Times, Times New Roman, serif;

Secondary Font italic: Georgia, Times, Times New Roman, serif;

Monospace Font: monospace;

Title Font: Heebo, sans-serif;

Headings permalink

Heading Level 1 · α

Heading Level 2 · β

Heading Level 3 · γ

Heading Level 4 · δ

Heading Level 5 · ε

Heading Level 6 · ζ

Paragraph permalink

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, to write beside or written beside) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Aside permalink

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Inline Elements permalink

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript for things like: 4^th of August, a² + b² = c², 5,490.35 km², etc.

Subscript for things like: H₂O, H₂SO₄, C₂₄H₂₆O₇

This small text for fine print, etc.

Abbreviation: HTML

This text has a short inline quotation

This text has a short inline quotation with another short inline quotation inside

The dfn element indicates a definition

The mark element indicates a highlight

This is what inline code looks like

This is sample output from a computer program

The variable element, such as x = y

Keyboard input: Tab

Buttons permalink

Blockquote permalink

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

Quote Source

Unordered List permalink

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

Reversed

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item
  • This is another nested list item in an unordered list
• This is the last list item

Ordered List permalink

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item
   2. This is another nested list item in an ordered list
4. This is the last list item

Reversed

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. This is the last list item
   1. This is a nested list item
   2. This is another nested list item in an ordered list

Definition List permalink

Definition List

A number of connected items or names written or printed consecutively, typically one below the other.

This is a term.

This is the definition of that term, which both live in a dl.

And another term.

And it gets a definition too, which is this line.

Table permalink

Heading A	Heading B	Heading C
Cell A-1	Cell B-1	Cell C-1
Cell A-2	Cell B-2	Cell C-2
Cell A-3	Cell B-3	Cell C-3
Foot A	Foot B	Foot C

Table with Alternating Rows

Heading A	Heading B	Heading C
Cell A-1	Cell B-1	Cell C-1
Cell A-2	Cell B-2	Cell C-2
Cell A-3	Cell B-3	Cell C-3
Foot A	Foot B	Foot C

Table with Subheadings

	Heading A	Heading B	Heading C
Subheading 1	Cell A-1	Cell B-1	Cell C-1
Subheading 2	Cell A-2	Cell B-2	Cell C-2
Subheading 3	Cell A-3	Cell B-3	Cell C-3
	Foot A	Foot B	Foot C

Details and Summary permalink

Summary

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Meter permalink

Progress permalink

progress

Preformatted Text permalink

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Code Block permalink

@mixin owl($measure: small) {
  @if not map-has-key($measures, $measure) {
    @error "There is no measure named #{$measure} in `$measures`. measure should be one of #{map-keys($measures)}.";
  }

  & > * + * {
    @include v(margin-top, $measure);
  }
}

Figure permalink

Audio permalink

Video permalink

Sparkline permalink

Box permalink

Deck permalink

Shelf permalink

Can I Use permalink

CodePen permalink

Speakerdeck permalink