This document outlines the color design tokens and theme settings for the website's user interface, aligned with 2023 UI trends.
Our design system uses a set of predefined color tokens to maintain consistency and adhere to the latest design trends.
Nature-inspired neutral tones with a personalization twist:
--color-grey-0: #FFFFFF (Pure white)--color-grey-10: #F4F4ED (Natural linen off-white)--color-grey-50: #E8E8D0 (Sand beige)--color-grey-100: #D1D1B2 (Herbal warm grey)--color-grey-200: #B3B38C (Muted olive)--color-grey-300: #8E8E66 (Sage green)--color-grey-400: #6A6A4A (Wet bark brown-grey)--color-grey-500: #555546 (Forest floor dark tone)--color-grey-600: #3F3F32 (Deep moss green)--color-grey-700: #292921 (Rich soil brown)--color-grey-800: #141412 (Deep woods at night)--color-grey-900: #0A0A06 (Darkest shade before black)--color-grey-1000: #000000 (Pure black)
Bold and bright colors for dark mode and accentuation:
--color-primary-50: #E3F9FD (Light sky blue)--color-primary-100: #C2EFFB (Clear day blue)--color-primary-200: #80DFF7 (Vibrant cyan)--color-primary-300: #3ED0F3 (Bright blue with green hint)--color-primary-400: #00C0EF (Electric blue)--color-primary-500: #00A0BC (Pantone-inspired classic blue)--color-primary-600: #007D99 (Deep ocean blue)--color-primary-700: #005766 (Dark teal)--color-primary-800: #003440 (Sea depths blue)--color-primary-900: #001B22 (Darkest of blue before black)
Our theme settings function dynamically applies these tokens based on the chosen mode (light or dark). It ensures that our UI is consistent, accessible, and incorporates the latest trends for a pleasing aesthetic and user experience.
Utilizes lighter shades for a bright and airy interface.
Employs darker shades for a modern look that reduces eye strain.
Remember to reference these tokens in your CSS to maintain consistency across components and layouts.