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 - 50
Hex#f9fafb
RGB249, 250, 251
CMYK1, 0, 0, 2
Gray - 100
Hex#f3f4f6
RGB243, 244, 246
CMYK1, 1, 0, 4
Gray - 200
Hex#e5e7eb
RGB229, 231, 235
CMYK3, 2, 0, 8
Gray - 300
Hex#d1d5db
RGB209, 213, 219
CMYK5, 3, 0, 14
Gray - 400
Hex#9ca3af
RGB156, 163, 175
CMYK11, 7, 0, 31
Gray - 500
Hex#6b7280
RGB107, 114, 128
CMYK16, 11, 0, 50
Gray - 600
Hex#4b5563
RGB75, 85, 99
CMYK24, 14, 0, 61
Gray - 700
Hex#374151
RGB55, 65, 81
CMYK32, 20, 0, 68
Gray - 800
Hex#1f2937
RGB31, 41, 55
CMYK44, 25, 0, 78
Gray - 900
Hex#111827
RGB17, 24, 39
CMYK56, 38, 0, 85

Red

Red - 50
Hex#fef2f2
RGB254, 242, 242
CMYK0, 5, 5, 0
Red - 100
Hex#fee2e2
RGB254, 226, 226
CMYK0, 11, 11, 0
Red - 200
Hex#fecaca
RGB254, 202, 202
CMYK0, 20, 20, 0
Red - 300
Hex#fca5a5
RGB252, 165, 165
CMYK0, 35, 35, 1
Red - 400
Hex#f87171
RGB248, 113, 113
CMYK0, 54, 54, 3
Red - 500
Hex#ef4444
RGB239, 68, 68
CMYK0, 72, 72, 6
Red - 600
Hex#dc2626
RGB220, 38, 38
CMYK0, 83, 83, 14
Red - 700
Hex#b91c1c
RGB185, 28, 28
CMYK0, 85, 85, 27
Red - 800
Hex#991b1b
RGB153, 27, 27
CMYK0, 82, 82, 40
Red - 900
Hex#7f1d1d
RGB127, 29, 29
CMYK0, 77, 77, 50

Orange

Orange - 50
Hex#fff7ed
RGB255, 247, 237
CMYK0, 3, 7, 0
Orange - 100
Hex#ffedd5
RGB255, 237, 213
CMYK0, 7, 16, 0
Orange - 200
Hex#fed7aa
RGB254, 215, 170
CMYK0, 15, 33, 0
Orange - 300
Hex#fdba74
RGB253, 186, 116
CMYK0, 26, 54, 1
Orange - 400
Hex#fb923c
RGB251, 146, 60
CMYK0, 42, 76, 2
Orange - 500
Hex#f97316
RGB249, 115, 22
CMYK0, 54, 91, 2
Orange - 600
Hex#ea580c
RGB234, 88, 12
CMYK0, 62, 95, 8
Orange - 700
Hex#c2410c
RGB194, 65, 12
CMYK0, 66, 94, 24
Orange - 800
Hex#9a3412
RGB154, 52, 18
CMYK0, 66, 88, 40
Orange - 900
Hex#7c2d12
RGB124, 45, 18
CMYK0, 64, 85, 51

Green

Green - 50
Hex#f0fdf4
RGB240, 253, 244
CMYK5, 0, 4, 1
Green - 100
Hex#dcfce7
RGB220, 252, 231
CMYK13, 0, 8, 1
Green - 200
Hex#bbf7d0
RGB187, 247, 208
CMYK24, 0, 16, 3
Green - 300
Hex#86efac
RGB134, 239, 172
CMYK44, 0, 28, 6
Green - 400
Hex#4ade80
RGB74, 222, 128
CMYK67, 0, 42, 13
Green - 500
Hex#22c55e
RGB34, 197, 94
CMYK83, 0, 52, 23
Green - 600
Hex#16a34a
RGB22, 163, 74
CMYK87, 0, 55, 36
Green - 700
Hex#15803d
RGB21, 128, 61
CMYK84, 0, 52, 50
Green - 800
Hex#166534
RGB22, 101, 52
CMYK78, 0, 49, 60
Green - 900
Hex#14532d
RGB20, 83, 45
CMYK76, 0, 46, 67

Blue

Blue - 50
Hex#eff6ff
RGB239, 246, 255
CMYK6, 4, 0, 0
Blue - 100
Hex#dbeafe
RGB219, 234, 254
CMYK14, 8, 0, 0
Blue - 200
Hex#bfdbfe
RGB191, 219, 254
CMYK25, 14, 0, 0
Blue - 300
Hex#93c5fd
RGB147, 197, 253
CMYK42, 22, 0, 1
Blue - 400
Hex#60a5fa
RGB96, 165, 250
CMYK62, 34, 0, 2
Blue - 500
Hex#3b82f6
RGB59, 130, 246
CMYK76, 47, 0, 4
Blue - 600
Hex#2563eb
RGB37, 99, 235
CMYK84, 58, 0, 8
Blue - 700
Hex#1d4ed8
RGB29, 78, 216
CMYK87, 64, 0, 15
Blue - 800
Hex#1e40af
RGB30, 64, 175
CMYK83, 63, 0, 31
Blue - 900
Hex#1e3a8a
RGB30, 58, 138
CMYK78, 58, 0, 46

Indigo

Indigo - 0
Hex#eef2ff
RGB238, 242, 255
CMYK7, 5, 0, 0
Indigo - 1
Hex#e0e7ff
RGB224, 231, 255
CMYK12, 9, 0, 0
Indigo - 2
Hex#c7d2fe
RGB199, 210, 254
CMYK22, 17, 0, 0
Indigo - 3
Hex#a5b4fc
RGB165, 180, 252
CMYK35, 29, 0, 1
Indigo - 4
Hex#818cf8
RGB129, 140, 248
CMYK48, 44, 0, 3
Indigo - 5
Hex#6366f1
RGB99, 102, 241
CMYK59, 58, 0, 5
Indigo - 6
Hex#4f46e5
RGB79, 70, 229
CMYK66, 69, 0, 10
Indigo - 7
Hex#4338ca
RGB67, 56, 202
CMYK67, 72, 0, 21
Indigo - 8
Hex#3730a3
RGB55, 48, 163
CMYK66, 71, 0, 36
Indigo - 9
Hex#312e81
RGB49, 46, 129
CMYK62, 64, 0, 49

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" }

Palette: Color Rows

Indigo - 0
Hex#eef2ff
RGB238, 242, 255
CMYK7, 5, 0, 0
Indigo - 1
Hex#e0e7ff
RGB224, 231, 255
CMYK12, 9, 0, 0
Indigo - 2
Hex#c7d2fe
RGB199, 210, 254
CMYK22, 17, 0, 0
Indigo - 3
Hex#a5b4fc
RGB165, 180, 252
CMYK35, 29, 0, 1
Indigo - 4
Hex#818cf8
RGB129, 140, 248
CMYK48, 44, 0, 3
Indigo - 5
Hex#6366f1
RGB99, 102, 241
CMYK59, 58, 0, 5
Indigo - 6
Hex#4f46e5
RGB79, 70, 229
CMYK66, 69, 0, 10
Indigo - 7
Hex#4338ca
RGB67, 56, 202
CMYK67, 72, 0, 21
Indigo - 8
Hex#3730a3
RGB55, 48, 163
CMYK66, 71, 0, 36
Indigo - 9
Hex#312e81
RGB49, 46, 129
CMYK62, 64, 0, 49

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#1f2937
A
Pass
A
Pass
A
Fail
A
Fail
Nametext
Hex#1f2937
A
Fail
A
Fail
A
Pass
A
Pass
Namebackground
Hex#ffffff
A
Pass
A
Pass
A
Fail
A
Pass
Nameprimary
Hex#1d4ed8
A
Pass
A
Pass
A
Fail
A
Fail
NameprimaryHover
Hex#1e40af
A
Pass
A
Pass
A
Fail
A
Fail
Namesecondary
Hex#4b5563
A
Fail
A
Fail
A
Pass
A
Pass
Namemuted
Hex#d1d5db
A
Fail
A
Fail
A
Pass
A
Pass
Namesuccess
Hex#86efac
A
Fail
A
Fail
A
Pass
A
Pass
Nameinfo
Hex#60a5fa
A
Fail
A
Fail
A
Pass
A
Pass
Namewarning
Hex#fdba74
A
Fail
A
Fail
A
Pass
A
Pass
Namedanger
Hex#fca5a5
A
Fail
A
Fail
A
Pass
A
Pass
Namelight
Hex#f3f4f6
A
Pass
A
Pass
A
Fail
A
Fail
Namedark
Hex#1f2937
A
Pass
A
Pass
A
Fail
A
Fail
NametextMuted
Hex#4b5563

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
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