Style Guide

The style guide for this website.

Colours

  • Lynx

    #091217
  • Wolf

    #20323d
  • Bowhead

    #3e5c6d
  • Raven

    #5f8aa6
  • Highland

    #80b7d7
  • Coyote

    #c0dbed
  • Bear

    #ebf3f9
  • Thunder

    #060606
  • Mineshaft

    #2b2b2b
  • Kaiser

    #4f4f4f
  • Nickel

    #737373
  • Yeti

    #dddddd
  • Snowy

    #f9f9f9
  • Aspen

    #ffd700
  • Conifer

    #3d8137
  • Maple

    #e0151f

Available as a palette file for your favourite image/pixel editor!

Sizes

Gigantic
Large
Medium
Small
Tiny
Multi-Steps
Large–Gigantic
Medium–Gigantic
Small–Gigantic
Tiny–Gigantic
Medium–Large
Small–Large
Tiny–Large
Small–Medium
Tiny–Medium
Tiny–Small
Fluid Size Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size
16px
Viewport Widths
700px – 1600px
Sizes (px)
64 – 72
36 – 42
20 – 24
10 – 12
 5 –  6

Font Families

Proxima Vara, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif
Georgia, Times, Times New Roman, serif
monospace

Headings

Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Fluid Type Scale values

Values generated using clamp() Calculator with the following values:

Root Font Size
16px
Viewport Widths
700px – 1600px
Type Scales
Min: Minor Third 1.2
Max: Perfect Fourth 1.333
*: Augmented Fourth 1.414
Font Sizes (px)
33.178 – 72.000 (*)
27.648 – 42.666
23.040 – 32.000
19.200 – 24.000
16.000 – 18.000
14.000 – 16.000 (Custom)

Paragraph

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

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

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

The del element denotes removed content while the ins element indicates content that has been added

The s element denotes content that has been revised but kept for historical sake

Superscript for things like: 4th of August; a2 + b2 = c2; 5,490.35 km2

Subscript for things like: H2O; H2SO4; C24H26O7

The small element is for fine print

Abbreviation: HTML

Acronym: Nasa

This text has a short inline quotation

This text has a short inline quotation with another short inline quotation spoken by a different voice

This text has une citation en incise demonstrating quotes from non-English languages.

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: Ctrl Alt Del

Blockquotes

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 Lists

  • 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 Lists

  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 Lists

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.

Tables

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
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
Cell A-4 Cell B-4 Cell C-4
Cell A-5 Cell B-5 Cell C-5
Foot A Foot B Foot C
With Alternating Columns
Heading A Heading B Heading C Heading D Heading E
Cell A-1 Cell B-1 Cell C-1 Cell D-1 Cell E-1
Cell A-2 Cell B-2 Cell C-2 Cell D-2 Cell E-2
Cell A-3 Cell B-3 Cell C-3 Cell D-3 Cell E-3
Foot A Foot B Foot C Foot D Foot E
With Alternating Rows & Columns
Heading A Heading B Heading C Heading D Heading E
Cell A-1 Cell B-1 Cell C-1 Cell D-1 Cell E-1
Cell A-2 Cell B-2 Cell C-2 Cell D-2 Cell E-2
Cell A-3 Cell B-3 Cell C-3 Cell D-3 Cell E-3
Cell A-4 Cell B-4 Cell C-4 Cell D-4 Cell E-4
Cell A-5 Cell B-5 Cell C-5 Cell D-5 Cell E-5
Foot A Foot B Foot C Foot D Foot E
With Sub-headings
  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

Figures

Cabot Tower in St. John’s, Newfoundland

Preformatted Text

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 Blocks

.box {
padding: var(--gutter, 1em);
}

Buttons

Boxes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit id nulla vitae maximus.

Hey—this box means something good happened!

Uh oh, this box might mean something went wrong.

Uh oh, this box definitely means something went wrong.

Deck

Not without sacrifice

With the boom of JavaScript frameworks and legends-come-true like the new CSS parent selector, we’ve borne witness to an explosion of new technologies and ways to build for the web. But what tradeoffs have we made for all these new bells and whistles?

Shelf

Vigneronne (2021)

Lambic - Fruit

Brasserie Cantillon
4.25/5

Kasteel Rouge

Fruit Beer

Kasteel Brouwerij Vanhonsebrouck
3/5

P9

Sour - Fruited Berliner Weisse

Garage Beer Co.
3.75/5

Sparklines

Like these? Check out my custom web component, <spark-line>.

Or the sound the make? Pentatonic uses the Web Audio API to generate fun little melodies from data.

Can I Use

Desktop support:

  • Chrome: 105
  • Edge: 105
  • Firefox: No
  • Opera: 91
  • Safari: 15.4

Mobile support:

  • Android Browser: 113
  • Chrome (Android): 113
  • Firefox (Android): No
  • Safari (iOS): 15.4
  • Samsung Internet: 20

Browser support data for css-has comes from caniuse.com and is up-to-date as of .

I keep track of a whole bunch of different browser features over on my Browser Feature Watch project.