File size: 1,493 Bytes
1520b1b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | // Design System Constants - Sage Application
export const colors = {
sage: {
light: '#7A9B76',
dark: '#8FAA8B',
50: '#F5F7F5',
100: '#E8EDE8',
200: '#D1DBD1',
300: '#B0C4B0',
400: '#8FAA8B',
500: '#7A9B76',
600: '#638161',
700: '#4D654D',
800: '#3A4F3A',
900: '#1F2420',
},
terracotta: {
light: '#C07855',
dark: '#D4906F',
50: '#FDF5F3',
100: '#FBE8E3',
200: '#F7D1C7',
300: '#EFB09F',
400: '#D4906F',
500: '#C07855',
600: '#A8604A',
700: '#8A4E3D',
800: '#724136',
900: '#5D3730',
},
cream: {
light: '#F5F1E8',
dark: '#2A2820',
50: '#FDFBF7',
100: '#F5F1E8',
200: '#EBE3D1',
300: '#DFD3B8',
400: '#CFC29D',
},
background: {
light: '#FDFBF7',
dark: '#1F2420',
},
};
export const spacing = {
xs: '4px',
sm: '8px',
md: '12px',
lg: '16px',
xl: '24px',
'2xl': '32px',
'3xl': '48px',
'4xl': '64px',
'5xl': '80px',
};
export const borderRadius = {
sm: '8px',
md: '12px',
lg: '16px',
xl: '24px',
};
export const fontSize = {
logo: '20px',
heading: {
h1: '48px',
h2: '36px',
h3: '28px',
h4: '24px',
},
body: {
lg: '18px',
base: '16px',
sm: '14px',
xs: '12px',
},
};
export const logoSize = {
width: '24px',
height: '24px',
};
export const navbarHeight = '64px';
export const navbarPadding = '48px';
export const footerHeight = '240px';
export const footerPadding = '48px';
|