Style Guide

    All design tokens can be found in src/_data/designTokens.
    This includes all baseline fonts, colors, sizes, and spacing.

    Buttons

    Colors

    The colors are based on GitHub's colorblind theme.

    Foundational theme tones. Composed into the semantic theme variables in variables.css.

    • #495464
      var(--color-base-darkest)

    • #bbbfca
      var(--color-base-dark)

    • #dddee8
      var(--color-base-light)

    • #f4f4f2
      var(--color-base-lightest)

    Gray scale generated from a single base in OKLCH space. Includes the standalone gray-250.

    • #f7f8fb
      var(--color-gray-100)

    • #e3e5e7
      var(--color-gray-200)

    • #c8cacc
      var(--color-gray-250)

    • #acaeb1
      var(--color-gray-300)

    • #7d8085
      var(--color-gray-400)

    • #606368
      var(--color-gray-500)

    • #44484d
      var(--color-gray-600)

    • #383b3f
      var(--color-gray-700)

    • #2b2e32
      var(--color-gray-800)

    • #141619
      var(--color-gray-900)

    Orange scale generated from a single base in OKLCH space.

    • #ffece1
      var(--color-orange-100)

    • #ffdec3
      var(--color-orange-200)

    • #ffb78a
      var(--color-orange-300)

    • #f68f5a
      var(--color-orange-400)

    • #d0621e
      var(--color-orange-500)

    • #a73c00
      var(--color-orange-600)

    • #8c2100
      var(--color-orange-700)

    • #711a00
      var(--color-orange-800)

    • #320100
      var(--color-orange-900)

    Each has a chroma-reduced subdued variant used in dark theme.

    • #644b49
      var(--color-red)

    • #614d4b
      var(--color-red-subdued)

    • #245375
      var(--color-blue)

    • #2f536e
      var(--color-blue-subdued)

    • #3d8ecc
      var(--color-blue-vivid)

    • #626449
      var(--color-green)

    • #62644e
      var(--color-green-subdued)

    • #2e9d4f
      var(--color-green-vivid)

    Custom colors

    in variables.css. Some only change for dark theme.

    • --color-text

    • --color-text-accent

    • --color-bg

    • --color-bg-accent

    • --color-bg-accent-2

    • --color-accent-orange

    • --color-accent-blue

    • --color-accent-green

    Gradients

    • --gradient-slate

    • --gradient-conic

    • --gradient-stripes

    Fonts

    • display

      Source serif 700 with Georgia Bold as fallback

      Font Families: Source Serif, Source Serif Fallback, serif

      var(--font-display)

    • base

      Source Sans 3 VF with Arial as fallback

      Font Families: Source Sans, Source Sans Fallback, sans-serif

      var(--font-base)

    • mono

      Source Code Pro with Courier New as fallback

      Font Families: Source Code Pro, Source Code Pro Fallback, Dank Mono, Fira Code, Fira Mono, Menlo, Consolas, Monaco, monospace

      var(--font-mono)

    Type features

    Typographic defaults from Bringhurst's The Elements of Typographic Style and Butterick's Practical Typography. Each pair shows the plain setting, then the site's.

    Old-style figures

    Running text (.prose) sets old-style, proportional figures, which sit with lowercase letters. Tables, acronyms and code keep lining figures.

    Plain

    Founded in 1994, the W3C made CSS 2.1 a Recommendation in 2011. Code keeps its own figures: --tracking-wide: 0.12ch.

    Site

    Founded in 1994, the W3C made CSS 2.1 a Recommendation in 2011. Code keeps its own figures: --tracking-wide: 0.12ch.

    Small caps

    The .small-caps class, by hand, for the opening words of an article or a name. Letterspaced, and never faked in italic, which has no small caps.

    Plain

    The opening words of an article, or a name such as Robert Bringhurst.

    Site

    The opening words of an article, or a name such as Robert Bringhurst.

    Figure classes

    Four classes for figures, used by hand. They combine with each other and with the running-text default, so class="lining-nums tabular-nums" keeps both. Samples are set in running text (.prose). Put .fraction on the fraction itself: in Source Sans it changes every digit, full stop, comma and parenthesis it covers. .slashed-zero brings lining figures with it, because the old-style zero has no slashed form.

    Without, then with .fraction

    Add 3/4 cup of water and 1/2 teaspoon of salt.

    Add 3/4 cup of water and 1/2 teaspoon of salt.

    Without, then with .slashed-zero

    Serial number O0O-2020-0O.

    Serial number O0O-2020-0O.

    Without, then with .lining-nums

    The 1990s, the 2020s, and 1,380 metres.

    The 1990s, the 2020s, and 1,380 metres.

    Without, then with .tabular-nums

    1,111.11
    8,888.88

    1,111.11
    8,888.88

    Captions and quotes

    Captions and quotes are balanced so their lines come out even, not ending on one word. Short captions are italic and centred; long wiki captions are upright and left-aligned.

    Plain

    A caption long enough to run onto a second line under its picture, where the last word used to sit on its own.
    Simple is almost always more effective than complex, and short.

    Site

    A caption long enough to run onto a second line under its picture, where the last word used to sit on its own.
    Simple is almost always more effective than complex, and short.

    Capital labels

    Strings of capitals are letterspaced 5–10% of the size: --tracking-wide is 0.12ch, about 5.7%.

    Before (0.09ch)

    Articles · Notes · Photos

    Site

    Articles · Notes · Photos

    Footnote numbers

    The font's own superscript figures, bare, rather than a shrunken, raised number in brackets. They don't push the lines apart.

    Plain

    A claim that needs a source.[1] The next line keeps its spacing, or doesn't.

    Site

    A claim that needs a source.1 The next line keeps its spacing, or doesn't.

    Blockquotes

    A quotation set off from the text: a rule on the start edge, a larger size, balanced lines, and no quote marks. The source goes inside the quote as its last paragraph, which the site sets one step smaller.

    With a source

    Typography exists to honor content.

    — Robert Bringhurst, The Elements of Typographic Style

    Written in markdown

    > Typography exists to honor content.
>
> — <span class="small-caps">Robert Bringhurst</span>, *The Elements of Typographic Style*

    Sizes

    Fluid type and space scales were generated with Utopia.

    step-min-2

    13px to 16px

    var(--size-step-min-2)

    step-min-2

    step-min-1

    16px to 22px

    var(--size-step-min-1)

    step-min-1

    step-0

    19px to 28px

    var(--size-step-0)

    step-0

    step-1

    23px to 35px

    var(--size-step-1)

    step-1

    step-2

    27px to 44px

    var(--size-step-2)

    step-2

    step-3

    33px to 55px

    var(--size-step-3)

    step-3

    step-4

    40px to 68px

    var(--size-step-4)

    step-4

    step-5

    47px to 86px

    var(--size-step-5)

    step-5

    step-6

    56px to 107px

    var(--size-step-6)

    step-6

    Spacing

    Fluid type and space scales were generated with Utopia.

    3xs

    2px to 3px

    var(--space-3xs)

    2xs

    3px to 5px

    var(--space-2xs)

    xs

    5px to 7px

    var(--space-xs)

    s

    10px to 14px

    var(--space-s)

    m

    14px to 21px

    var(--space-m)

    l

    19px to 31px

    var(--space-l)

    xl

    38px to 56px

    var(--space-xl)

    2xl

    57px to 84px

    var(--space-2xl)

    3xl

    95px to 140px

    var(--space-3xl)

    xs-s

    5px to 14px

    var(--space-xs-s)

    s-m

    10px to 21px

    var(--space-s-m)

    m-l

    14px to 31px

    var(--space-m-l)

    l-xl

    19px to 56px

    var(--space-l-xl)

    l-2xl

    19px to 84px

    var(--space-l-2xl)

    xl-2xl

    38px to 84px

    var(--space-xl-2xl)

    2xl-3xl

    57px to 140px

    var(--space-2xl-3xl)