Specimens for Design Systems

Leverage the wide variety of powerful React components of @lekoarts/gatsby-theme-specimens to build your design system. Display your colors, typography or any other design tokens with ease and focus on the design system itself, not on how to showcase it. Works seamlessly with MDX.

Source code for this site

If you simply want to see how the components look, head over to the Preview!

GitHub stars Twitter Follow npm License

Also be sure to checkout other Free & Open Source Gatsby Themes

Features

  • Theme UI-based theming
  • Suitable for MDX
  • Offers React components specifically designed for design systems. You can display:
    • Colors as swatches and rows. Individually placed or automated from an object/array in your theme file
    • Typography e.g. font-family, font-size, font-weight and headings
    • Spacing scales
    • Audio files and downloads
    • border-radius or box-shadow
    • Alerts to emphasize important messages

Installation

npm install @lekoarts/gatsby-theme-specimens

And in your gatsby-config.js:

// gatsby-config.js
module.exports = {
plugins: [
{
resolve: `@lekoarts/gatsby-theme-specimens`,
options: {}
}
}
]
}

View the theme's README to see more instructions on how to set up this theme!

Specimens

Please note: Components wrapped in a render() don't need to be written this way in your MDX files - it's only necessary for react-live demos on this page.

Alert

Variants: alerts.success, alerts.hint, alerts.warning, alerts.info, alerts.danger,

Available props:

  • type (string) (optional) (Default: "hint")
Editor
Preview
Neutral hint - Default
Editor
Preview
Make it so!
Neutral Hint
Gentle warning :)
Super helpful information goes here
nooooooooo, not this way

Audio

Variant: audio.specimens

Available props:

  • src (string) - Must be a valid path on your webserver, e.g. the sound file below is placed inside src/static/sounds
  • name (string) (optional) (Default: "")
  • desc (string) (optional) (Default: "")
Editor
Preview
Through the Gate
Hundreds of years in the future, in a colonized Solar System, police detective Josephus Miller, born on Ceres in the asteroid belt, is sent to find a missing young woman, Juliette 'Julie' Andromeda Mao. James Holden, Executive Officer of the ice hauler Canterbury, is involved in a tragic incident that threatens to destabilize the uneasy peace between Earth, Mars and the Belt.
Editor
Preview

Border Radius

Variant: tables.borderRadius

Available props:

  • radii

radii has to be in the following format:

radii: {
[key: string]: string
}

Editor
Preview
Token
Size
Preview
none
0
sm
0.5rem
md
1rem

Color Row

Variant: rows.specimens

Available props:

  • color (string) - Must be in HEX format
  • name (string)
  • prefix (string) (optional) (Default: "")
Editor
Preview
Dark - Blackness
Hex#000000
RGB0, 0, 0
CMYK0, 0, 0, 100

Color Swatch

Variant: swatches.specimens

Available props:

  • color (string) - Must be in HEX format
  • name (string) (optional) (Default: "")
  • minimal (boolean) (optional) (Default: false)
  • prefix (string) (optional) (Default: "")
Editor
Preview
A
Fail
A
Fail
A
Pass
A
Pass
Hex#ffffff
RGB255, 255, 255
CMYK0, 0, 0, 0
A
Pass
A
Pass
A
Fail
A
Fail
NameBlueish
Hex#2d3748
RGB45, 55, 72
CMYK37, 24, 0, 72
A
Fail
A
Pass
A
Pass
A
Pass
NameSwift
Hex#667eea
A
Fail
A
Fail
A
Pass
A
Pass
NameTeal - 4
Hex#4fd1c5
RGB79, 209, 197
CMYK62, 0, 6, 18

Download

Variant: download.specimens

Available props:

  • src (string) - Must be a valid path on your webserver, e.g. the file below is placed inside src/static/downloads
  • name (string)
Editor
Preview
Gatsby Themes Wallpaper
Use for Social Media previews
File "Gatsby Themes Wallpaper" not found
Editor
Preview

Font Family

Variant: typography.fontFamily

Available props:

  • fonts

fonts has to be in the following format:

fonts: {
[key: string]: string
}

Editor
Preview
Token
Value
Preview
sans
-apple-system, BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
Pack my box with five dozen liquor jugs
serif
Georgia, Cambria, "Times New Roman", Times, serif
Pack my box with five dozen liquor jugs
mono
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
Pack my box with five dozen liquor jugs

Font Size

Variant: typography.fontSize

Available props:

  • fontSizes

fontSizes has to be in the following format:

fontSizes: string[] | number[]

Editor
Preview
Token
Size
Preview
0
0.875rem
Size 0
1
1rem
Size 1
2
1.25rem
Size 2
3
1.5rem
Size 3

Font Weight

Variant: typography.fontWeight

Available props:

  • fontWeights

fontWeights has to be in the following format:

fontWeights: {
[key: string]: string
}

Editor
Preview
Token
Value
Preview
normal
400
Pack my box with five dozen liquor jugs
medium
500
Pack my box with five dozen liquor jugs
semibold
600
Pack my box with five dozen liquor jugs
bold
700
Pack my box with five dozen liquor jugs
black
900
Pack my box with five dozen liquor jugs

Heading

Variants: typography.heading, codeStyles.default

Available props:

  • styles
  • theme

If you're already using Theme UI your theme file already has all necessary keys (styles, fontSizes, fontWeights, fonts). As you can see in the below example the theme.styles has entries like h1 which then will be used to display.

You can filter which keys to show by using the helper function filterStyles({ input, allowed }).

Editor
Preview
Heading
Typeh1
Token6
Size3rem
Line Height1.25
Weight700
{ fontSize: 6, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }
Heading
Typeh2
Token5
Size2.25rem
Line Height1.25
Weight700
{ fontSize: 5, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }

Palette: Color Rows

Available props:

  • colors - If you use Theme UI you can use the helper function normalizeThemeUIColors({ colors }) to convert the array of color strings to the necessary format
  • prefix (string) (optional) (Default: "")

colors has to be in the following format:

colors: {
name: string
color: string
}[]

Editor
Preview
Indigo - 1
Hex#ebf4ff
RGB235, 244, 255
CMYK8, 4, 0, 0
Indigo - 2
Hex#c3dafe
RGB195, 218, 254
CMYK23, 14, 0, 0
Indigo - 3
Hex#a3bffa
RGB163, 191, 250
CMYK35, 24, 0, 2
Indigo - 4
Hex#7f9cf5
RGB127, 156, 245
CMYK48, 36, 0, 4
Indigo - 5
Hex#667eea
RGB102, 126, 234
CMYK56, 46, 0, 8

Orange

1
Hex#feebc8
RGB254, 235, 200
CMYK0, 7, 21, 0
2
Hex#fbd38d
RGB251, 211, 141
CMYK0, 16, 44, 2

Palette: Color Swatches

Available props:

  • colors - If you use Theme UI you can use the helper function normalizeThemeUIColors({ colors }) to convert the array of color strings to the necessary format
  • prefix (string) (optional) (Default: "")
  • single (boolean) (optional) (Default: false) - When passing in the colors object you can filter out all keys that have arrays as children
  • minimal (boolean) (optional) (Default: false) - Hide RGB and CMYK label
  • mode (string) (optional) (Default: "list")

colors has to be in the following format:

colors: {
name: string
color: string
}[]

Editor
Preview
A
Pass
A
Pass
A
Fail
A
Pass
Nameprimary
Hex#2b6cb0
A
Fail
A
Fail
A
Pass
A
Pass
Namesecondary
Hex#feb2b2
A
Fail
A
Fail
A
Pass
A
Pass
Namesuccess
Hex#9ae6b4
A
Pass
A
Pass
A
Fail
A
Fail
Nametext
Hex#2d3748
A
Fail
A
Pass
A
Pass
A
Pass
Nameindigo.5
Hex#667eea
A
Fail
A
Fail
A
Pass
A
Pass
Nameindigo.4
Hex#7f9cf5
A
Fail
A
Fail
A
Pass
A
Pass
Nameindigo.3
Hex#a3bffa
A
Fail
A
Fail
A
Pass
A
Pass
Nameindigo.2
Hex#c3dafe
A
Fail
A
Fail
A
Pass
A
Pass
Nameindigo.1
Hex#ebf4ff

Sizes

Variant: tables.space

This theme also exposes a Table component. It is used in this case to showcase the different sizes of the theme. Generally speaking the Table component has the following props:

  • columns (string[])
  • titles (string[])
  • children (React.ReactNode)

The columns prop is defining the grid-template-columns of the table in the fashion of Theme UI (Responsive Styles). The titles should be the same count as columns.

So you can define the style for every breakpoint, e.g. [`120px 1fr`, `150px 1fr`] (120px for everything below the smallest breakpoint, 150px for everything above smallest breakpoint).

You can format the data you want to show how you like but in the end you should have the amount of columns as defined above.


Editor
Preview
Token
Value
0
0
1
0.25rem
2
0.5rem
3
0.75rem
4
1rem
5
1.25rem
6
1.5rem
8
2rem
10
2.5rem
12
3rem
16
4rem

Shadows

Variant: tables.shadow

Available props:

  • shadows

shadows has to be in the following format:

shadows: {
[key: string]: string
}

Editor
Preview
Token
Preview
default
xl
2xl

Space

Available props:

  • space

space has to be in the following format:

space: string[] | number[]

Editor
Preview
Token
Size
Preview
0
0
1
0.25rem
2
0.5rem
3
1rem
4
2rem
5
4rem
6
8rem

Video

Variant: video.specimens

Available props:

  • src (string) - Must be a valid path on your webserver, e.g. the video file below is placed inside src/static/videos
  • poster (string) (optional) (Default: "") - By default the video tag will use the first frame of the video as a preview. With the poster you can define a custom preview image
  • name (string) (optional) (Default: "")
  • muted (boolean) (optional) (Default: false)
  • loop (boolean) (optional) (Default: false)
  • autoplay (boolean) (optional) (Default: false)
Editor
Preview
LekoArts Intro