kitten.sh
1const systemFonts = [
2 '-apple-system',
3 'BlinkMacSystemFont',
4 'Segoe UI',
5 'Roboto',
6 'Helvetica Neue',
7 'Arial',
8 'Noto Sans',
9 'sans-serif',
10 'Apple Color Emoji',
11 'Segoe UI Emoji',
12 'Segoe UI Symbol',
13 'Noto Color Emoji',
14];
15
16export const colors = {
17 passiveBg: '#f2f2f2',
18 codeBg: '#f0f7fb',
19 bg: '#ffffff',
20 border: '#ececec',
21 activeBorder: '#a2b1ff',
22 text: '#000000',
23 heading: '#444444',
24 accent: '#566ac8',
25 code: '#403f53',
26 passive: '#444444',
27};
28
29export const layout = {
30 page: '144rem',
31 header: '4.8rem',
32 stripes: '0.7rem',
33 sidebar: '28rem',
34 legend: '22rem',
35 logo: '12rem',
36};
37
38export const fonts = {
39 heading: systemFonts.join(', '),
40 body: systemFonts.join(', '),
41 code: 'Space Mono, monospace',
42};
43
44export const fontSizes = {
45 small: '0.9em',
46 body: '1.8rem',
47 bodySmall: '1.5rem',
48 code: '0.8em',
49 h1: '3.45em',
50 h2: '2.11em',
51 h3: '1.64em',
52};
53
54export const fontWeights = {
55 body: '400',
56 links: '500',
57 heading: '600',
58};
59
60export const lineHeights = {
61 body: '1.5',
62 heading: '1.1',
63 code: '1.2',
64};
65
66export const shadows = {
67 header: 'rgba(0, 0, 0, 0.09) 0px 2px 10px -3px',
68 input: 'rgba(0, 0, 0, 0.09) 0px 2px 10px -3px',
69};
70
71export const mediaSizes = {
72 sm: 700,
73 md: 960,
74 lg: 1200,
75};
76
77export const media = {
78 maxmd: `(max-width: ${mediaSizes.md - 1}px)`,
79 sm: `(min-width: ${mediaSizes.sm}px)`,
80 md: `(min-width: ${mediaSizes.md}px)`,
81 lg: `(min-width: ${mediaSizes.lg}px)`,
82};
83
84export const spacing = {
85 xs: '0.6rem',
86 sm: '1.5rem',
87 md: '2.75rem',
88 lg: '4.75rem',
89 xl: '8.2rem',
90};