Design System created with Gatsby

Use the specimens of gatsby-remark-design-system to build your own styleguide or design system!
Read the complete README to see all options & examples in detail.

GitHub license npm package LekoArts Homepage

Audio

If your brand has specific sounds for notifications or other sound signatures you can include them with the Audio specimen.

Options

autoplay: boolean Default: false
loop: boolean Default: false
name: string
span: number[1-6] Width of the specimen
src: string The path/url to the file. Needs to be in quotes

Example

```audio
span: 3
name: Sound File #1
src: "/sound.mp3"
```

```audio
span: 3
name: Sound File #2
src: "/sound.mp3"
```

Live Example

Sound File #1
Sound File #2

Color

The colors of your brand. The swatches also include checks on the accessibility (AA). It checks black/white + small/large on your color. The Color specimen has a fixed width of 300px.

Options

color: string Define the color (in HEX, e.g. #b0f6ff)
name: string

Example

```color
name: Light Blue
color: #b0f6ff
```

```color
name: Smaragd
color: #939d7b
```

Live Example

A
Pass
A
Pass
A
Fail
A
Fail

Name

Light Blue

Hex

#b0f6ff

RGB

176, 246, 255

CMYK

31, 4, 0, 0

A
Pass
A
Pass
A
Fail
A
Fail

Name

Smaragd

Hex

#939d7b

RGB

147, 157, 123

CMYK

6, 0, 22, 38

Color-Palette

A sequence of colors showing different shades. The Color-Palette also converts the input HEX color to RGB.

Options

name: string, color: string
Each line represents a color. First define the name then after a comma the HEX value

Example

```color-palette
T400 - Shabby, #448c6c
T300 - Legendary, #dca114
T200 - Smoke, #6c3b0b
```

Live Example

T400 - Shabby
HEX #448c6c
RGB 68, 140, 108
CMYK 51, 0, 23, 45
T300 - Legendary
HEX #dca114
RGB 220, 161, 20
CMYK 0, 27, 91, 14
T200 - Smoke
HEX #6c3b0b
RGB 108, 59, 11
CMYK 0, 45, 90, 58

Download

To link your logos and other resources you can use the Download specimen. You can also show a preview of the file.

Options

color: string Define the background color (in HEX, e.g. white) of the preview box
image: boolean If true the image will be shown below
span: number[1-6] Width of the specimen
src: string The path/url to the file. Needs to be in quotes
subtitle: string The filesize or other information
title: string
width: string The width of the preview image (default: 200px)

Example

```download
color: white
image: true
span: 3
src: "/logo.png"
subtitle: 8KB
title: Avatar Social
width: 250px
```

Live Example

Example

Insert your HTML code and see a live preview above the code sample.

Options

None

Example

```example
<button>You can insert your HTML here</button>
```

Live Example

<button>You can insert your HTML here</button>

Hint

Do give neutral hints or when talking about Dos & Don'ts you can use the Hint specimen.

Options

directive Green, positive note for showing Dos
warning Red, warning note for showing Don'ts
neutral Neutral note (Default)

Example

```hint|directive
Make it so!
```

```hint
Neutral Hint
```

```hint|warning
nooooooooo, not this way
```

Live Example

Make it so!
Neutral Hint
nooooooooo, not this way

Typography

You can use the Typography specimen to keep the numbers of different styles across the sites to a minimum.

Options

size: number|weight: number|metrics: string|weightDesc: string|usage: string
Each line represents a type. You have to define the values in the mentioned order and seperate with |

Example

```typography
42|700|Display|42, line height is 1.1x|Bold, 700|Display type is used for visual impact and emphasis
32|400|Page title|32, line height is 1.1x|Normal, 400|Page title is used to provide hiearchy
```

Live Example

Display

Metrics

42, line height is 1.1x

Weight

Bold, 700

Usage

Display type is used for visual impact and emphasis

Page title

Metrics

32, line height is 1.1x

Weight

Normal, 400

Usage

Page title is used to provide hiearchy.

Video

You can use the Video specimen to include intros or other videos.

Options

autoplay: boolean Default: false
loop: boolean Default: false
muted: boolean Default: false
name: string
src: string The path/url to the file. Needs to be in quotes

Example

```video
autoplay: false
loop: false
muted: false
name: Animation Video
src: "https://www.w3schools.com/html/mov_bbb.mp4"
span: 3
```

Live Example

Animation Video