Specimens for Design Systems (Preview)

Go back to the homepage to see installation and usage instructions of @lekoarts/gatsby-theme-specimens!

Alert

Make it so!
Neutral Hint
Gentle warning :)
Super helpful information goes here
nooooooooo, not this way

Audio

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.

Border Radius

Token
Size
Preview
none
0
sm
0.125rem
default
0.25rem
lg
0.5rem
full
9999px

Color Row

Dark - Blackness
Hex#000000
RGB0, 0, 0
CMYK0, 0, 0, 100

Color Swatch

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
RGB102, 126, 234
CMYK56, 46, 0, 8
A
Fail
A
Fail
A
Pass
A
Pass
NameTeal - 4
Hex#4fd1c5
RGB79, 209, 197
CMYK62, 0, 6, 18

Download

Gatsby Themes Wallpaper
Use for Social Media previews
File "Gatsby Themes Wallpaper" not found
Logo
File "Logo" not found

Font Family

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
body
-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
heading
inherit
Pack my box with five dozen liquor jugs
monospace
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
Pack my box with five dozen liquor jugs

Font Size

Token
Size
Preview
0
0.875rem
Size 0
1
1rem
Size 1
2
1.25rem
Size 2
3
1.5rem
Size 3
4
1.875rem
Size 4
5
2.25rem
Size 5
6
3rem
Size 6
7
4rem
Size 7
8
4.5rem
Size 8

Font Weight

Token
Value
Preview
hairline
100
Pack my box with five dozen liquor jugs
thin
200
Pack my box with five dozen liquor jugs
light
300
Pack my box with five dozen liquor jugs
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
extrabold
800
Pack my box with five dozen liquor jugs
black
900
Pack my box with five dozen liquor jugs
body
400
Pack my box with five dozen liquor jugs
heading
700
Pack my box with five dozen liquor jugs

Heading

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" }
Heading
Typeh3
Token4
Size1.875rem
Line Height1.25
Weight700
{ fontSize: 4, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }
Heading
Typeh4
Token3
Size1.5rem
Line Height1.25
Weight700
{ fontSize: 3, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }
Heading
Typeh5
Token2
Size1.25rem
Line Height1.25
Weight700
{ fontSize: 2, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }
Heading
Typeh6
Token1
Size1rem
Line Height1.25
Weight700
{ fontSize: 1, fontWeight: "heading", lineHeight: "heading", fontFamily: "heading" }

Palette: Color Rows

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
Indigo - 6
Hex#5a67d8
RGB90, 103, 216
CMYK58, 52, 0, 15
Indigo - 7
Hex#4c51bf
RGB76, 81, 191
CMYK60, 58, 0, 25
Indigo - 8
Hex#434190
RGB67, 65, 144
CMYK53, 55, 0, 44
Indigo - 9
Hex#3c366b
RGB60, 54, 107
CMYK44, 50, 0, 58

Palette: Color Swatches

A
Fail
A
Fail
A
Pass
A
Pass
Namedanger
Hex#feb2b2
A
Fail
A
Fail
A
Pass
A
Pass
Namewarning
Hex#faf089
A
Fail
A
Fail
A
Pass
A
Pass
Nameinfo
Hex#63b3ed
A
Fail
A
Fail
A
Pass
A
Pass
Namelight
Hex#f7fafc
A
Fail
A
Fail
A
Pass
A
Pass
Namemuted
Hex#e2e8f0
A
Fail
A
Pass
A
Pass
A
Pass
Namesecondary
Hex#718096
A
Pass
A
Pass
A
Fail
A
Fail
NameprimaryHover
Hex#2c5282
A
Pass
A
Pass
A
Fail
A
Pass
Nameprimary
Hex#2b6cb0
A
Pass
A
Pass
A
Fail
A
Fail
Nameblack
Hex#000000
A
Pass
A
Pass
A
Fail
A
Fail
Namedark
Hex#2d3748
A
Pass
A
Pass
A
Fail
A
Fail
Nametext
Hex#2d3748
A
Fail
A
Fail
A
Pass
A
Pass
Namewhite
Hex#ffffff
A
Fail
A
Fail
A
Pass
A
Pass
Namebackground
Hex#ffffff
A
Fail
A
Fail
A
Pass
A
Pass
Namesuccess
Hex#9ae6b4
A
Fail
A
Pass
A
Pass
A
Pass
NametextMuted
Hex#718096
A
Pass
A
Pass
A
Fail
A
Fail
NamegrayDark
Hex#2d3748

Sizes

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
20
5rem
24
6rem
32
8rem
40
10rem
48
12rem
56
14rem
64
16rem
px
1px
xs
20rem
sm
24rem
md
28rem
lg
32rem
xl
36rem
2xl
42rem
3xl
48rem
4xl
56rem
5xl
64rem
6xl
72rem
1/2
50%
1/3
33.333333%
2/3
66.666667%
1/4
25%
2/4
50%
3/4
75%
1/5
20%
2/5
40%
3/5
60%
4/5
80%
1/6
16.666667%
2/6
33.333333%
3/6
50%
4/6
66.666667%
5/6
83.333333%
1/12
8.333333%
2/12
16.666667%
3/12
25%
4/12
33.333333%
5/12
41.666667%
6/12
50%
7/12
58.333333%
8/12
66.666667%
9/12
75%
10/12
83.333333%
11/12
91.666667%
full
100%
screenHeight
100vh
screenWidth
100vw

Shadows

Token
Preview
default
md
lg
xl
2xl
inner
outline
none

Space

Token
Size
Preview
0
0
1
0.25rem
2
0.5rem
3
1rem
4
2rem
5
4rem
6
8rem
7
16rem
8
32rem

Video

LekoArts Intro