lib/designSystem.ts

// 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';