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

Tokens - Spacing - Padding/Margin

wip
The avaliable spacing tokens
  • 0 11 usages
  • 0.5 3 usages
  • 1 27 usages
  • 2 20 usages
  • 2.5 3 usages
  • 3 19 usages
  • 4 39 usages
  • 5 2 usages
  • 6 7 usages
  • 8 13 usages
  • 10 2 usages
  • 12 2 usages
  • 14 4 usages
  • 16 2 usages
  • 24 1 usages
  • 32 1 usages
  • 36 1 usages

Tokens - Spacing - Gap

wip
The avaliable spacing tokens
  • 0 3 usages
  • 0.5 3 usages
  • 1 6 usages
  • 2 8 usages
  • 2.5 1 usages
  • 3 10 usages
  • 4 12 usages
  • 6 7 usages
  • 8 7 usages
  • 10 4 usages
  • 14 2 usages
  • 24 1 usages

Tokens - Spacing - Standardised

wip
The proposed avaliable spacing tokens for all types of spacing - (?:m|p)(?:b|t|l|r|y|x)?-(?:d{1,2}|0|auto) src/**/*.{astro,ts,tsx}
  • 0 none 3 usages
  • 0.5 micro 3 usages
  • 1 xxx-small 6 usages
  • 2 xx-small 8 usages
  • 2.5 x-small 4 usages
  • 3 small 10 usages
  • 4 medium 12 usages
  • 5 moderate 3 usages
  • 6 large 7 usages
  • 8 x-large 7 usages
  • 10 xx-large 4 usages
  • 12 xxx-large 2 usages
  • 14 spacious 6 usages
  • 16 x-spacious 9 usages
  • 24 xx-spacious 1 usages
  • 32 xxx-spacious 1 usages
  • 36 expansive 1 usages
  • 60 x-expansive 1 usages
  • 96 xx-expansive 1 usages

Foundation Types

review
Underlying foundation types used in the design system
Code
export type Spacing =
    | 'none'
    | 'auto'
    | 'micro'
    | 'xxx-small'
    | 'xx-small'
    | 'x-small'
    | 'small'
    | 'medium'
    | 'moderate'
    | 'large'
    | 'x-large'
    | 'xx-large'
    | 'xxx-large'
    | 'spacious'
    | 'x-spacious'
    | 'xx-spacious'
    | 'xxx-spacious'
    | 'expansive'
    | 'x-expansive'
    | 'xx-expansive';

export type ResponsiveStyle<T> = Readonly<{
    mobile?: T,
    tablet?: T,
    desktop?: T,
    wide?: T,
}>;

export type Margin = Spacing | ResponsiveStyle<Spacing>;
export type MarginX = Spacing | ResponsiveStyle<Spacing>;
export type MarginY = Spacing | ResponsiveStyle<Spacing>;
export type MarginTop = Spacing | ResponsiveStyle<Spacing>;
export type MarginBottom = Spacing | ResponsiveStyle<Spacing>;
export type MarginLeft = Spacing | ResponsiveStyle<Spacing>;
export type MarginRight = Spacing | ResponsiveStyle<Spacing>;

export type Padding = Spacing | ResponsiveStyle<Spacing>;
export type PaddingX = Spacing | ResponsiveStyle<Spacing>;
export type PaddingY = Spacing | ResponsiveStyle<Spacing>;
export type PaddingTop = Spacing | ResponsiveStyle<Spacing>;
export type PaddingBottom = Spacing | ResponsiveStyle<Spacing>;
export type PaddingLeft = Spacing | ResponsiveStyle<Spacing>;
export type PaddingRight = Spacing | ResponsiveStyle<Spacing>;

export type Top = Spacing | ResponsiveStyle<Spacing>;
export type Bottom = Spacing | ResponsiveStyle<Spacing>;
export type Left = Spacing | ResponsiveStyle<Spacing>;
export type Right = Spacing | ResponsiveStyle<Spacing>;

export type Height = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MaximumHeight = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MinimumHeight = Spacing | ResponsiveStyle<Spacing>;

export type Width = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MaximumWidth = Spacing | 'full' | ResponsiveStyle<Spacing | 'full'>;
export type MinimumWidth = Spacing | ResponsiveStyle<Spacing>;

export type DisplayValue =
    | 'block'
    | 'flex'
    | 'inline'
    | 'inlineBlock'
    | 'none';
export type Display = DisplayValue | ResponsiveStyle<DisplayValue>;

export type PositionValue =
    | 'static'
    | 'relative'
    | 'absolute'
    | 'fixed'
    | 'sticky';
export type Position = PositionValue | ResponsiveStyle<PositionValue>

export type AlignValue =
    | 'flexStart'
    | 'flexEnd'
    | 'center'
    | 'baseline'
    | 'stretch';
export type Align = AlignValue | ResponsiveStyle<AlignValue>;

export type JustifyContentValue =
    | 'normal'
    | 'flexStart'
    | 'flexEnd'
    | 'center'
    | 'spaceBetween'
    | 'spaceAround'
    | 'spaceEvenly'
    | 'stretch';
export type JustifyContent = JustifyContentValue | ResponsiveStyle<JustifyContentValue>;

export type FlexDirectionValue =
    | 'row'
    | 'rowReverse'
    | 'column'
    | 'columnReverse';
export type FlexDirection = FlexDirectionValue | ResponsiveStyle<FlexDirectionValue>;

export type FlexWrapValue =
    | 'wrap'
    | 'wrapReverse'
    | 'noWrap';
export type FlexWrap = FlexWrapValue | ResponsiveStyle<FlexWrapValue>;

export type FlexShrinkValue =
    | 0
    | 1;
export type FlexShrink = FlexDirectionValue | ResponsiveStyle<FlexShrinkValue>;

export type FlexGrowValue =
    | 0
    | 1;
export type FlexGrow = FlexGrowValue | ResponsiveStyle<FlexGrowValue>;

export type OverflowValue =
    | 'auto'
    | 'hidden'
    | 'clip'
    | 'visible'
    | 'scroll';
export type Overflow = OverflowValue | ResponsiveStyle<OverflowValue>;

export type ZIndexValue =
    | 0
    | 1
    | 2
    | 3;
export type ZIndex = ZIndexValue | ResponsiveStyle<ZIndexValue>;

export type TextAlignValue =
    | 'left'
    | 'center'
    | 'right'
    | 'justify'
    | 'start'
    | 'end';
export type TextAlign = TextAlignValue | ResponsiveStyle<TextAlignValue>;

// @ts-ignore
type Styles = Partial<{
    margin: Margin,
    marginX: MarginX,
    marginY: MarginY,
    marginTop: MarginTop,
    marginBottom: MarginBottom,
    marginLeft: MarginLeft,
    marginRight: MarginRight,
    padding: Padding,
    paddingX: PaddingX,
    paddingY: PaddingY,
    paddingTop: PaddingTop,
    paddingBottom: PaddingBottom,
    paddingLeft: PaddingLeft,
    paddingRight: PaddingRight,
    top: Top,
    bottom: Bottom,
    left: Left,
    right: Right,
    height: Height,
    maxHeight: MaximumHeight,
    minHeight: MinimumHeight,
    width: Width,
    maxWidth: MaximumWidth,
    minWidth: MinimumWidth,
    display: Display,
    position: Position,
    alignItems: Align,
    alignContent: Align,
    justifyContent: JustifyContent,
    flexDirection: FlexDirection,
    flexWrap: FlexWrap,
    flexShrink: FlexShrink,
    flexGrow: FlexGrow,
    overflow: Overflow,
    zIndex: ZIndex,
    textAlign: TextAlign,
}>;

// const lookup: Record<Spacing, Record<keyof Styles, string>> = {
//     'none': {
//         margin: 'm-0',
//         marginX: 'mx-0',
//         marginY: 'my-0',
//         marginTop: 'mt-0',
//         marginBottom: 'mb-0',
//         marginLeft: 'ml-0',
//         marginRight: 'mr-0',
//         padding: 'p-0',
//         paddingX: 'px-0',
//         paddingY: 'py-0',
//         paddingTop: 'pt-0',
//         paddingBottom: 'pb-0',
//         paddingLeft: 'pl-0',
//         paddingRight: 'pr-0',
//         top: 'top-0',
//         bottom: 'bottom-0',
//         left: 'left-0',
//         right: 'right-0',
//         height: 'h-0',
//         maxHeight: 'max-h-0',
//         minHeight: 'min-h-0',
//         width: 'w-0',
//         maxWidth: 'max-w-0',
//         minWidth: 'min-w-0',
//         display: 'd-none',
//         position: 'position-static',
//         alignItems: 'align-items-stretch',
//         alignContent: 'align-content-stretch',
//         justifyContent: 'justify-content-start',
//         flexDirection: 'flex-direction-row',
//         flexWrap: 'flex-wrap-no-wrap',
//         flexShrink: 'flex-shrink-0',
//         flexGrow: 'flex-grow-0',
//         overflow: 'overflow-visible',
//         zIndex: 'z-0',
//         textAlign: 'text-left',
//     },
//     'auto': {

//     },
// }

// const marginMap: Record<Spacing, string> = {
//     'none': '',
//     'auto': '',
//     'micro': '',
//     'xxx-small': '',
//     'xx-small': '',
//     'x-small': '',
//     'small': '',
//     'medium': '',
//     'moderate': '',
//     'none': '',
//     'none': '',
//     'none': '',
//     'none': '',
//     'none': '',
// }

// const generateStyle = ({
//     margin,
//     marginX,
//     marginY,
//     marginTop,
//     marginBottom,
//     marginLeft,
//     marginRight,
//     padding,
//     paddingX,
//     paddingY,
//     paddingTop,
//     paddingBottom,
//     paddingLeft,
//     paddingRight,
//     top,
//     bottom,
//     left,
//     right,
//     height,
//     maxHeight,
//     minHeight,
//     width,
//     maxWidth,
//     minWidth,
//     display,
//     position,
//     alignItems,
//     justifyContent,
//     flexDirection,
//     flexWrap,
//     flexGrow,
//     flexShrink,
//     overflow,
//     zIndex,
//     textAlign,
//   }: Styles) => {
//     const styles = clsx({
//         'm'
//     });
// };
  


// const getStyleValue = (spacing: Spacing, property: keyof Style): string => {
//     const row = styleTable.find((r) => r.name === spacing);
//     return row ? row[property] : '';
// };
// https://www.smashingmagazine.com/2020/05/reusable-react-components-tailwind/
// https://blog.logrocket.com/build-type-safe-version-tailwind-css-sprinkles/
// https://www.hunterjennings.dev/writing/fluid-typography-configuration
// https://dev.to/mikerogers0/moving-from-tailwind-to-vanilla-er-css-2ghh
// https://www.lekoarts.de/javascript/writing-performant-css-with-vanilla-extract

Box

experimental
The lowest level component that serves as a common foundation for the design system components

Status

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

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

Inline Newsletter

ready
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
h:mm - twelve-hour-time h:mm a - twelve-hour-time-with-period HH:mm - twenty-four-hour-time LLLL d - month-name-with-day-number PPP - month-name-with-ordinal-date dd/MM/yyyy - hh:mm a - date-month-year-and-twelve-hour-time-with-period yyyy-MM-dd - date-year-month-date

Article Search

ready
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

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

Article

ready
Used to display an article

Bar Chart

experimental
Used to display bar charts of numerical data
Hello world 1: 50% Hello world 3: 40% Hello world 2: 25% Hello world 3: 10% Hello world 3: 10%
  1. Hello world 1 50%
  2. Hello world 3 40%
  3. Hello world 2 25%
  4. Hello world 3 10%
  5. Hello world 3 10%
  • Apple
  • Banana
  • Orange
  • Grape
  • Grape
  • Grape
  • Apple
  • Ripe Banana
  • Orange
  • Grape
  • Apple
  • Banana
  • Orange
  • Grape

Venn Diagram

experimental
Used to display overlaps of sets of data
AB
ABC
ABCD

Breakpoint Visualiser

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

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

© Lloyd Atkinson 2024 ✌

Donate