Demonstrating the new color palette across various UI elements
This website uses a carefully selected color palette to create a cohesive and visually stunning experience.
The dark teal background (#031118) creates a sophisticated foundation, while the bright mint green primary color (#16f08c) provides vibrant contrast for interactive elements. The soft mauve (#d5b2c9) and coral (#d86475) accent colors add warmth and visual interest throughout the interface.
Surface Variant Background (#072530)
Standard text on surface variant
Muted text on surface variant
Link on surface variantThis card uses the secondary color (#d5b2c9) for its header and border.
This card uses the accent color (#d86475) for its header and border.
This color scheme is implemented using CSS variables for consistency and ease of maintenance:
:root {
--color-background: #031118;
--color-surface: #051a23;
--color-surface-variant: #072530;
--color-primary: #16f08c;
--color-primary-variant: #0fd67d;
--color-secondary: #d5b2c9;
--color-accent: #d86475;
--color-text: #e6e6e6;
--color-text-muted: #a8b0b3;
}A TypeScript utility module is also available for programmatic access to these colors:
import { getColor, hexToRgba, createGradient } from '~/utils/colors';
// Get a color value
const primaryColor = getColor('primary'); // #16f08c
// Create a semi-transparent version
const overlayBg = hexToRgba('#031118', 0.8); // rgba(3, 17, 24, 0.8)
// Create a gradient
const gradient = createGradient('primary', 'accent'); // linear-gradient(to right, #16f08c, #d86475)