View on GitHub

Color System

Academic aesthetic color palette with deep blues and subtle grays, meeting WCAG 2.1 AA standards.

Primary Colors

Stable

Core brand colors used throughout the design system for primary actions and key interface elements.

#2c5282
Primary
Main brand color
AA Large AAA Normal
#1a365d
Primary Dark
Hover states
AAA Large AAA Normal
#3182ce
Primary Light
Highlights
AA Large AA Normal

When to use primary colors

  • Primary actions and call-to-action buttons
  • Active navigation states
  • Important UI elements that need emphasis
  • Links and interactive text

Best practices

  • Use sparingly to maintain visual hierarchy
  • Ensure sufficient contrast with background colors
  • Consider color blind users - don't rely on color alone
CSS 
/* CSS Variables */
--ds-color-primary: #2c5282;
--ds-color-primary-dark: #1a365d;
--ds-color-primary-light: #3182ce;

/* Usage Examples */
.button-primary {
  background-color: var(--ds-color-primary);
  color: white;
}

.button-primary:hover {
  background-color: var(--ds-color-primary-dark);
}
JavaScript 
// JavaScript Color Tokens
const colors = {
  primary: '#2c5282',
  primaryDark: '#1a365d',
  primaryLight: '#3182ce'
};

// Usage in React
const Button = styled.button`
  background-color: ${colors.primary};
  &:hover {
    background-color: ${colors.primaryDark};
  }
`;
Token Value Type Description
--ds-color-primary #2c5282 color Main brand color for primary actions
--ds-color-primary-dark #1a365d color Darker variant for hover states
--ds-color-primary-light #3182ce color Lighter variant for highlights

Button Component

Stable

Buttons trigger actions throughout the interface. They come in multiple variants for different use cases.