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 Families

Gray

Gray - 1
Hex#f7fafc
RGB247, 250, 252
CMYK2, 1, 0, 1
Gray - 2
Hex#edf2f7
RGB237, 242, 247
CMYK4, 2, 0, 3
Gray - 3
Hex#e2e8f0
RGB226, 232, 240
CMYK6, 3, 0, 6
Gray - 4
Hex#cbd5e0
RGB203, 213, 224
CMYK9, 5, 0, 12
Gray - 5
Hex#a0aec0
RGB160, 174, 192
CMYK17, 9, 0, 25
Gray - 6
Hex#718096
RGB113, 128, 150
CMYK25, 15, 0, 41
Gray - 7
Hex#4a5568
RGB74, 85, 104
CMYK29, 18, 0, 59
Gray - 8
Hex#2d3748
RGB45, 55, 72
CMYK37, 24, 0, 72
Gray - 9
Hex#1a202c
RGB26, 32, 44
CMYK41, 27, 0, 83

Red

Red - 1
Hex#fff5f5
RGB255, 245, 245
CMYK0, 4, 4, 0
Red - 2
Hex#fed7d7
RGB254, 215, 215
CMYK0, 15, 15, 0
Red - 3
Hex#feb2b2
RGB254, 178, 178
CMYK0, 30, 30, 0
Red - 4
Hex#fc8181
RGB252, 129, 129
CMYK0, 49, 49, 1
Red - 5
Hex#f56565
RGB245, 101, 101
CMYK0, 59, 59, 4
Red - 6
Hex#e53e3e
RGB229, 62, 62
CMYK0, 73, 73, 10
Red - 7
Hex#c53030
RGB197, 48, 48
CMYK0, 76, 76, 23
Red - 8
Hex#9b2c2c
RGB155, 44, 44
CMYK0, 72, 72, 39
Red - 9
Hex#742a2a
RGB116, 42, 42
CMYK0, 64, 64, 55

Orange

Orange - 1
Hex#fffaf0
RGB255, 250, 240
CMYK0, 2, 6, 0
Orange - 2
Hex#feebc8
RGB254, 235, 200
CMYK0, 7, 21, 0
Orange - 3
Hex#fbd38d
RGB251, 211, 141
CMYK0, 16, 44, 2
Orange - 4
Hex#f6ad55
RGB246, 173, 85
CMYK0, 30, 65, 4
Orange - 5
Hex#ed8936
RGB237, 137, 54
CMYK0, 42, 77, 7
Orange - 6
Hex#dd6b20
RGB221, 107, 32
CMYK0, 52, 86, 13
Orange - 7
Hex#c05621
RGB192, 86, 33
CMYK0, 55, 83, 25
Orange - 8
Hex#9c4221
RGB156, 66, 33
CMYK0, 58, 79, 39
Orange - 9
Hex#7b341e
RGB123, 52, 30
CMYK0, 58, 76, 52

Yellow

Yellow - 1
Hex#fffff0
RGB255, 255, 240
CMYK0, 0, 6, 0
Yellow - 2
Hex#fefcbf
RGB254, 252, 191
CMYK0, 1, 25, 0
Yellow - 3
Hex#faf089
RGB250, 240, 137
CMYK0, 4, 45, 2
Yellow - 4
Hex#f6e05e
RGB246, 224, 94
CMYK0, 9, 62, 4
Yellow - 5
Hex#ecc94b
RGB236, 201, 75
CMYK0, 15, 68, 7
Yellow - 6
Hex#d69e2e
RGB214, 158, 46
CMYK0, 26, 79, 16
Yellow - 7
Hex#b7791f
RGB183, 121, 31
CMYK0, 34, 83, 28
Yellow - 8
Hex#975a16
RGB151, 90, 22
CMYK0, 40, 85, 41
Yellow - 9
Hex#744210
RGB116, 66, 16
CMYK0, 43, 86, 55

Green

Green - 1
Hex#f0fff4
RGB240, 255, 244
CMYK6, 0, 4, 0
Green - 2
Hex#c6f6d5
RGB198, 246, 213
CMYK20, 0, 13, 4
Green - 3
Hex#9ae6b4
RGB154, 230, 180
CMYK33, 0, 22, 10
Green - 4
Hex#68d391
RGB104, 211, 145
CMYK51, 0, 31, 17
Green - 5
Hex#48bb78
RGB72, 187, 120
CMYK61, 0, 36, 27
Green - 6
Hex#38a169
RGB56, 161, 105
CMYK65, 0, 35, 37
Green - 7
Hex#2f855a
RGB47, 133, 90
CMYK65, 0, 32, 48
Green - 8
Hex#276749
RGB39, 103, 73
CMYK62, 0, 29, 60
Green - 9
Hex#22543d
RGB34, 84, 61
CMYK60, 0, 27, 67

Teal

Teal - 1
Hex#e6fffa
RGB230, 255, 250
CMYK10, 0, 2, 0
Teal - 2
Hex#b2f5ea
RGB178, 245, 234
CMYK27, 0, 4, 4
Teal - 3
Hex#81e6d9
RGB129, 230, 217
CMYK44, 0, 6, 10
Teal - 4
Hex#4fd1c5
RGB79, 209, 197
CMYK62, 0, 6, 18
Teal - 5
Hex#38b2ac
RGB56, 178, 172
CMYK69, 0, 3, 30
Teal - 6
Hex#319795
RGB49, 151, 149
CMYK68, 0, 1, 41
Teal - 7
Hex#2c7a7b
RGB44, 122, 123
CMYK64, 1, 0, 52
Teal - 8
Hex#285e61
RGB40, 94, 97
CMYK59, 3, 0, 62
Teal - 9
Hex#234e52
RGB35, 78, 82
CMYK57, 5, 0, 68

Blue

Blue - 1
Hex#ebf8ff
RGB235, 248, 255
CMYK8, 3, 0, 0
Blue - 2
Hex#bee3f8
RGB190, 227, 248
CMYK23, 8, 0, 3
Blue - 3
Hex#90cdf4
RGB144, 205, 244
CMYK41, 16, 0, 4
Blue - 4
Hex#63b3ed
RGB99, 179, 237
CMYK58, 24, 0, 7
Blue - 5
Hex#4299e1
RGB66, 153, 225
CMYK71, 32, 0, 12
Blue - 6
Hex#3182ce
RGB49, 130, 206
CMYK76, 37, 0, 19
Blue - 7
Hex#2b6cb0
RGB43, 108, 176
CMYK76, 39, 0, 31
Blue - 8
Hex#2c5282
RGB44, 82, 130
CMYK66, 37, 0, 49
Blue - 9
Hex#2a4365
RGB42, 67, 101
CMYK58, 34, 0, 60

Indigo

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

Purple

Purple - 1
Hex#faf5ff
RGB250, 245, 255
CMYK2, 4, 0, 0
Purple - 2
Hex#e9d8fd
RGB233, 216, 253
CMYK8, 15, 0, 1
Purple - 3
Hex#d6bcfa
RGB214, 188, 250
CMYK14, 25, 0, 2
Purple - 4
Hex#b794f4
RGB183, 148, 244
CMYK25, 39, 0, 4
Purple - 5
Hex#9f7aea
RGB159, 122, 234
CMYK32, 48, 0, 8
Purple - 6
Hex#805ad5
RGB128, 90, 213
CMYK40, 58, 0, 16
Purple - 7
Hex#6b46c1
RGB107, 70, 193
CMYK45, 64, 0, 24
Purple - 8
Hex#553c9a
RGB85, 60, 154
CMYK45, 61, 0, 40
Purple - 9
Hex#44337a
RGB68, 51, 122
CMYK44, 58, 0, 52

Pink

Pink - 1
Hex#fff5f7
RGB255, 245, 247
CMYK0, 4, 3, 0
Pink - 2
Hex#fed7e2
RGB254, 215, 226
CMYK0, 15, 11, 0
Pink - 3
Hex#fbb6ce
RGB251, 182, 206
CMYK0, 27, 18, 2
Pink - 4
Hex#f687b3
RGB246, 135, 179
CMYK0, 45, 27, 4
Pink - 5
Hex#ed64a6
RGB237, 100, 166
CMYK0, 58, 30, 7
Pink - 6
Hex#d53f8c
RGB213, 63, 140
CMYK0, 70, 34, 16
Pink - 7
Hex#b83280
RGB184, 50, 128
CMYK0, 73, 30, 28
Pink - 8
Hex#97266d
RGB151, 38, 109
CMYK0, 75, 28, 41
Pink - 9
Hex#702459
RGB112, 36, 89
CMYK0, 68, 21, 56

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"
The quick brown fox jumps over the lazy dog
serif
Georgia, Cambria, "Times New Roman", Times, serif
The quick brown fox jumps over the lazy dog
mono
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
The quick brown fox jumps over the lazy dog
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"
The quick brown fox jumps over the lazy dog
heading
inherit
The quick brown fox jumps over the lazy dog
monospace
Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
The quick brown fox jumps over the lazy dog

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
The quick brown fox jumps over the lazy dog
thin
200
The quick brown fox jumps over the lazy dog
light
300
The quick brown fox jumps over the lazy dog
normal
400
The quick brown fox jumps over the lazy dog
medium
500
The quick brown fox jumps over the lazy dog
semibold
600
The quick brown fox jumps over the lazy dog
bold
700
The quick brown fox jumps over the lazy dog
extrabold
800
The quick brown fox jumps over the lazy dog
black
900
The quick brown fox jumps over the lazy dog
body
400
The quick brown fox jumps over the lazy dog
heading
700
The quick brown fox jumps over the lazy dog

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

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