HomeColor Systems
Preview
css
--color-primary
--color-secondary
--color-accent
Code
css
:root {
  /* Primary - trust, authority */
  --brand-primary:   #C4640A;
  --brand-primary-2: #A35208;

  /* Secondary — balance and support */
  --brand-secondary:   #2A5A6A;
  --brand-secondary-2: #1A3A4A;

  /* Accent - attention */
  --brand-accent: #8A3A6A;

  /* Neutral surface */
  --brand-bg:      #F8F7F4;
  --brand-surface: #FFFFFF;
  --brand-border:  #E4E0D8;
}
Related Blocks
css
Accessibility Contrast
WCAG AA/AAA compliant color pair table.
css
Dark Mode Pair
Color pairs that switch automatically for light and dark mode.
css
Gradient Library
8 ready gradient combinations for hero and card backgrounds.