Design System

An evolving design system for my site

Tokens - Palette

wip
The available colour tokens
Aa Aa
bg-white
#FFFFFF
bg-white
Aa Aa
bg-slate-100
#F1F5F9
bg-slate-100
Aa Aa
bg-gray-100
#F3F4F6
bg-gray-100
Aa Aa
bg-gray-500
#6B7280
bg-gray-500
Aa Aa
bg-gray-700
#374151
bg-gray-700
Aa Aa
bg-gray-900
#111827
bg-gray-900
Aa Aa
bg-green-100
#ECFCCB
bg-green-100
Aa Aa
bg-yellow-100
#FEF9C3
bg-yellow-100
Aa Aa
bg-red-100
#FEE2E2
bg-red-100
Aa Aa
bg-red-vibrant
#FF0000
bg-red-vibrant
Aa Aa
bg-blue-600
#FEE2E2
bg-blue-600

Status

ready
Used to indicate the status of a component and the framework it's available for
review wip ready deprecated experimental

Placeholder

ready
Used to indicate an area will have content or for demonstrating spacing and layout

Tokens - Typography - Size

wip
The available typography tokens
text-xs font-normal text-slate-900

Jackdaws love my big sphinx of quartz.

text-sm font-normal text-slate-900

Jackdaws love my big sphinx of quartz.

text-base font-normal text-slate-900

Jackdaws love my big sphinx of quartz.

text-xl font-normal text-slate-900

Jackdaws love my big sphinx of quartz.

text-2xl font-normal text-slate-900

Jackdaws love my big sphinx of quartz.

Tokens - Typography - Prose (article content)

review
The available typography tokens

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.

Jackdaws love my big sphinx of quartz.
Jackdaws love my big sphinx of quartz.

Tokens - Typography - Prose (article content)

ready
The standard prose typography used for articles and other pages

Ostendit honore

Sanguine veniet terras Iove ibat nomina

Lorem markdownum quaeque duri exterrita dextra. Ad cum nunc plurimus possis et Aeetias esse. Quae spectat moriturus decimo parcere bella sua videat, hic vidi, non deam! Nec virgo Solis cultores videri Troiae scelus est quae, sustulit alta trementia maneat.

  1. Et navigat nova ego regia equidem et
  2. Coniunx adversa palustribus
  3. Vulnere Combe pars lustrat morsa venae

Versato Delos et domum Antenora aetate pariter potest

Icons

wip
Used to display the specified icons

Social Share

ready
Allows a user to share the current page. Uses icons with a softer colour to not distract from the prose.

Share:

Social Accounts

ready
Displays my social accounts

Newsletter

ready
Allows a user sign up for the newsletter. The heading can be aligned to fit the use case of the components placement and usage.

Newsletter

Newsletter

Newsletter

Inline Newsletter

wip
Allows a user sign up for the newsletter.

Stay up to date

Subscribe to my newsletter to stay up to date on my articles and projects

Time and Date

ready
Used to display date and time in a specific format
TwelveHourTime - h:mm TwelveHourTimeWithPeriod - h:mm a TwentyFourHourTime - HH:mm MonthNameWithDayNumber - LLLL d MonthNameWithOrdinalDate - PPP DateMonthYearAndTwelveHourTimeWithPeriod - dd/MM/yyyy - hh:mm a

Article Search

wip
Used to search articles - composes Search component

    Article Preview

    ready
    Used to display a preview of an article

    Articles - Most Recent

    ready
    Used to display the most recent articles

    Article Header

    ready
    Used to display an article heading. Titles are capitalised in APA style.

    All Raccoons Cheat at Poker, Animal Researchers Say

    Lloyd Atkinson
    If you read it here, that means it happened
    If you read it here, that means it happened

    Article

    ready
    Used to display an article

    Categories

    review
    Used to display categories

    Breakpoint Visualiser

    wip
    Used for visualising responsive breakpoints during development
    SM MD LG XL 2XL

    Resize

    wip
    Used to allow for resizing of slotted content to test breakpoints and layouts
    Hi

    Grouped List

    wip
    Used to display a list of items with a title

    2022

    Navigation Link

    wip
    Used to display navigation links between pages with indication of current page

    Magic

    experimental
    Used to add a little bit of magic