Welcome to the living style guide for your digital product. It is here you can write design documentation for color, typography and UI with live components from your codebase.
{
"name": "Default Theme",
"font": "'Nunito', sans-serif",
"monospace": "'Roboto Mono', Menlo, monospace",
"fontFamilies": [
"'Nunito', sans-serif"
],
"weights": [
100,
200,
300,
400,
500,
600,
700,
800,
900
],
"fontSizes": [
12,
14,
16,
20,
24,
32,
48,
64,
72,
96
],
"colors": {
"base": "#22AD00",
"black": "#000",
"blue": "#1E90FF",
"blue0": "#f5faff",
"blue1": "#e0efff",
"blue2": "#c8e4ff",
"blue3": "#aed7ff",
"blue4": "#91c9ff",
"blue5": "#70b8ff",
"blue6": "#46a4ff",
"blue7": "#1d8af4",
"blue8": "#176dc1",
"blue9": "#0d4072",
"gray": "#adb4b9",
"gray0": "#f9f9fa",
"gray1": "#eceeef",
"gray2": "#dee1e3",
"gray3": "#cfd3d7",
"gray4": "#bfc5c9",
"gray5": "#adb4b9",
"gray6": "#98a1a8",
"gray7": "#7f8b93",
"gray8": "#606e79",
"gray9": "#374047",
"green": "#22AD00",
"green0": "#f5fbf3",
"green1": "#dff3da",
"green2": "#c7eabf",
"green3": "#ade1a0",
"green4": "#8fd57d",
"green5": "#6bc854",
"green6": "#3db71f",
"green7": "#1f9f00",
"green8": "#197e00",
"green9": "#0f4a00",
"orange": "#FF8C00",
"orange0": "#fff8f1",
"orange1": "#ffead1",
"orange2": "#ffdbaf",
"orange3": "#ffc988",
"orange4": "#ffb55b",
"orange5": "#ff9c22",
"orange6": "#f08400",
"orange7": "#ce7100",
"orange8": "#a35900",
"orange9": "#603500",
"red": "#cd3232",
"red0": "#faebeb",
"red1": "#f5d5d5",
"red2": "#efbcbc",
"red3": "#e79d9d",
"red4": "#dd7575",
"red5": "#cd3232",
"red6": "#b92d2d",
"red7": "#a22727",
"red8": "#852121",
"red9": "#5f1717",
"white": "#ffffff",
"yellow": "#FFD700",
"yellow0": "#fffadf",
"yellow1": "#ffef97",
"yellow2": "#ffe03b",
"yellow3": "#f7d000",
"yellow4": "#e5c100",
"yellow5": "#d2b100",
"yellow6": "#bb9e00",
"yellow7": "#a18700",
"yellow8": "#7f6b00",
"yellow9": "#4a3f00",
"navy": "#00008B",
"navy0": "#f9f9fc",
"navy1": "#ededf7",
"navy2": "#dfdff1",
"navy3": "#d1d1ea",
"navy4": "#c1c1e3",
"navy5": "#afafdb",
"navy6": "#9b9bd1",
"navy7": "#8383c6",
"navy8": "#6363b8",
"navy9": "#2d2da0",
"pink": "#cd32cd",
"pink0": "#faebfa",
"pink1": "#f5d4f5",
"pink2": "#eebbee",
"pink3": "#e79ce7",
"pink4": "#dd74dd",
"pink5": "#cd32cd",
"pink6": "#b92db9",
"pink7": "#a228a2",
"pink8": "#862186",
"pink9": "#601760",
"purple": "#7f32cd",
"purple0": "#f2ebfa",
"purple1": "#e4d4f5",
"purple2": "#d4bbee",
"purple3": "#c19ce7",
"purple4": "#a874dd",
"purple5": "#7f32cd",
"purple6": "#722db9",
"purple7": "#6427a1",
"purple8": "#522084",
"purple9": "#39165c"
},
"breakpoints": [
"32em",
"48em",
"64em",
"80em"
],
"space": [
0,
4,
8,
16,
32,
64,
128
],
"radius": 4
}
base
#22AD00
blue
#1E90FF
blue0
#f5faff
blue1
#e0efff
blue2
#c8e4ff
blue3
#aed7ff
blue4
#91c9ff
blue5
#70b8ff
blue6
#46a4ff
blue7
#1d8af4
blue8
#176dc1
blue9
#0d4072
gray
#adb4b9
gray0
#f9f9fa
gray1
#eceeef
gray2
#dee1e3
gray3
#cfd3d7
gray4
#bfc5c9
gray5
#adb4b9
gray6
#98a1a8
gray7
#7f8b93
gray8
#606e79
gray9
#374047
green
#22AD00
green0
#f5fbf3
green1
#dff3da
green2
#c7eabf
green3
#ade1a0
green4
#8fd57d
green5
#6bc854
green6
#3db71f
green7
#1f9f00
green8
#197e00
green9
#0f4a00
orange
#FF8C00
orange0
#fff8f1
orange1
#ffead1
orange2
#ffdbaf
orange3
#ffc988
orange4
#ffb55b
orange5
#ff9c22
orange6
#f08400
orange7
#ce7100
orange8
#a35900
orange9
#603500
red
#cd3232
red0
#faebeb
red1
#f5d5d5
red2
#efbcbc
red3
#e79d9d
red4
#dd7575
red5
#cd3232
red6
#b92d2d
red7
#a22727
red8
#852121
red9
#5f1717
yellow
#FFD700
yellow0
#fffadf
yellow1
#ffef97
yellow2
#ffe03b
yellow3
#f7d000
yellow4
#e5c100
yellow5
#d2b100
yellow6
#bb9e00
yellow7
#a18700
yellow8
#7f6b00
yellow9
#4a3f00
navy
#00008B
navy0
#f9f9fc
navy1
#ededf7
navy2
#dfdff1
navy3
#d1d1ea
navy4
#c1c1e3
navy5
#afafdb
navy6
#9b9bd1
navy7
#8383c6
navy8
#6363b8
navy9
#2d2da0
pink
#cd32cd
pink0
#faebfa
pink1
#f5d4f5
pink2
#eebbee
pink3
#e79ce7
pink4
#dd74dd
pink5
#cd32cd
pink6
#b92db9
pink7
#a228a2
pink8
#862186
pink9
#601760
purple
#7f32cd
purple0
#f2ebfa
purple1
#e4d4f5
purple2
#d4bbee
purple3
#c19ce7
purple4
#a874dd
purple5
#7f32cd
purple6
#722db9
purple7
#6427a1
purple8
#522084
purple9
#39165c
'Nunito', sans-serif
The quick brown fox jumps over the lazy dog.
Aa
100
Aa
200
Aa
300
Aa
400
Aa
500
Aa
600
Aa
700
Aa
800
Aa
900
Aa
Reg
Aa
Bold
Aa
Italic
12
Aa
14
Aa
16
Aa
20
Aa
24
Aa
32
Aa
48
Aa
64
Aa
72
Aa
96
Aa
edit me
<H1 f={6}>Heading 1</H1>
edit me
<H2 f={5}>Heading 2</H2>
edit me
<H3 f={4}>Heading 3</H3>
edit me
<H4 f={3}>Heading 4</H4>
edit me
<H5 f={2}>Heading 5</H5>
edit me
<H6 f={1}>Heading 6</H6>
edit me
<Para> Bring to the table win-win survival strategies to ensure clickthroughs. At the end of the day, going forward, a new normal that has evolved is on the runway heading towards a streamlined cloud solution. This filler copy was generated with <Link href="http://www.cipsum.com/"> Corporate Ipsum </Link> </Para>
edit me
<Text>A text element</Text>
A text element
edit me
<Link href="#">A link</Link>
edit me
<Code>// Some code</Code>
// Some code
edit me
<Em>Em</Em>
edit me
<Strong>Strong</Strong>
edit me
<Small>Small</Small>
edit me
<U>Underline</U>
edit me
<Del>Del</Del>
Grid Styled is a responsive React grid system built with styled-components.
1
2
3
4
5
6