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
Icons
wip Used to display the specified icons
Social Share
readyInline Newsletter
ready Allows a user sign up for the newsletter.
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
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
All Raccoons Cheat at Poker, Animal Researchers Say
Lloyd Atkinson
Spotted a typo or want to leave a comment?
Send feedback
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%
- Hello world 1 50%
- Hello world 3 40%
- Hello world 2 25%
- Hello world 3 10%
- 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
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