Brand Colors

The design system meticulously incorporates a concise palette, consisting of precisely four carefully selected colors. The simplicity serves a dual purpose: not only does it provide a visually uncluttered aesthetic, but it also strategically directs attention towards the rich and engaging content within the portfolio.

To facilitate seamless integration and easy reference, the design system provides explicit details, including the hexa color codes and CSS variables associated with each color. This ensures a standardized and consistent application of the color scheme throughout the design system.

Accessibility

Text color and background color combinations have been outlined to ensure comformance with the Web Content Accessibility Guidelines (WCAG) levels of accessibility. The WCAG contrast ratio requirements are:

• AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text
• AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.