Developer Resources

:root {
  --ab-green: #00DE8E;
  --ab-dark-blue: #00004E;
  --ab-cornflower-blue: #000093;
  --ab-red: #ED0735;
  --ab-orange: #FF8E09;
  --ab-dark-green: #00B172;
  --ab-white: #FFFFFF;
  --ab-black: #000000;
  --ab-light-gray: #F6F6F6;
}

$ab-green: #00DE8E;
$ab-dark-blue: #00004E;
$ab-cornflower-blue: #000093;
$ab-red: #ED0735;
$ab-orange: #FF8E09;
$ab-dark-green: #00B172;
$ab-white: #FFFFFF;
$ab-black: #000000;
$ab-light-gray: #F6F6F6;

export const colors = {
  green: '#00DE8E',
  dark-blue: '#00004E',
  cornflower-blue: '#000093',
  red: '#ED0735',
  orange: '#FF8E09',
  dark-green: '#00B172',
  white: '#FFFFFF',
  black: '#000000',
  light-gray: '#F6F6F6',
};

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        'ab-green': '#00DE8E',
        'ab-dark-blue': '#00004E',
        'ab-cornflower-blue': '#000093',
        'ab-red': '#ED0735',
        'ab-orange': '#FF8E09',
        'ab-dark-green': '#00B172',
        'ab-white': '#FFFFFF',
        'ab-black': '#000000',
        'ab-light-gray': '#F6F6F6',
      },
    },
  },
};

Primary Button

.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: #00DE8E;
  color: white;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #000000;
}

Secondary Button

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background-color: #000000;
  color: white;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #00DE8E;
}