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!

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

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



npm install @lekoarts/gatsby-theme-specimens

And in your 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!

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.

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

Available props:

type (string) (optional) (Default: "hint")

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: "")

Variant: tables.borderRadius

Available props:

radii

radii has to be in the following format:

radii: { [key: string]: string }

Variant: rows.specimens

Available props:

color (string) - Must be in HEX format

name (string)

prefix (string) (optional) (Default: "")

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: "")

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)

Variant: typography.fontFamily

Available props:

fonts

previewText (string) (optional) - Replace "The quick brown fox jumps over the lazy dog" with something custom

fonts has to be in the following format:

fonts: { [key: string]: string }

Variant: typography.fontSize

Available props:

fontSizes

fontSizes has to be in the following format:

fontSizes: string[] | number[]

Variant: typography.fontWeight

Available props:

fontWeights

previewText (string) (optional) - Replace "The quick brown fox jumps over the lazy dog" with something custom

fontWeights has to be in the following format:

fontWeights: { [key: string]: string }

Variants: typography.heading , codeStyles.default

Available props:

styles

theme

previewText (string) (optional) - Replace "Heading" with something custom

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 }) .

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

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 }[]

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

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 }[]

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.

Variant: tables.shadow

Available props:

shadows

shadows has to be in the following format:

shadows: { [key: string]: string }

Available props:

space

space has to be in the following format:

space: string[] | number[]

Variant: video.specimens

Available props: