Colour Palette

• Role: You are an expert UI/UX Designer specializing in modern, accessible, and user-friendly web applications.
• Task: Create a detailed CSS based UI color theme that is engaging and approachable.
• Goal: To meet modern web UI design practices and to ensure the design will be relevant for many years.
• Core Requirements:
• • Theme: The design should project professionalism and reliability with a background of sophistication and creativity.
  • Color Palette: Needs a primary color for branding, a secondary color to support the primary color and a separate call-to-action color that complements the primary color and stands out.
  • Styling: Must be modern, clean and minimalist.
• Design Guidelines:
• • Provide some apple.com design thinking.
  • All colors expressed as oklch values.
  • Must meet WCAG accessibility requirements.
  • Include vibrant colors for link, success, warning and danger states. These colors need to have sufficient differentiation from the main colors.
  • Include a separate set of colors for grey scale from white to black that has a dash of secondary color.
  • Include three crisp and tight shadow values for showing element elevation.
  • Include colors adjusted for dark mode display.
• Output Format: Provide the UI as a single-file downloadable HTML file. Include a brief explanation of design choices.

Design Choices:

Color Philosophy:

The theme is built around three core colors that project professionalism, reliability, and approachability against a background of sophistication and creativity:

Role	Name	Hue	OKLCH Rationale
Primary (60%)	Deep Teal	195°	oklch(48% 0.115 195) - A confident blue-green that conveys trust, growth, and creative energy. It feels distinctive and forward-thinking without being unconventional.
Secondary (30%)	Warm Buff	65°	oklch(48% 0.065 65) - A soft, approachable neutral with peachy warmth. Used for secondary surfaces and accents that need human warmth without competing for attention.
CTA (10%)	Vibrant Coral	25°	oklch(54% 0.130 25) - A warm, energetic red-orange that complements teal on the color wheel. Commands attention while remaining friendly and inviting.

Why OKLCH?

Every color is expressed in OKLCH (Oklab Lightness, Chroma, Hue):

• uniformity: -Equal lightness values appear equally bright regardless of hue, making contrast predictable and theming robust.
• Wide-gamut ready: - Maps directly to modern display standards (P3, Rec.2020).
• Future-proof: - As displays evolve, OKLCH ensures colors remain consistent and accessible.

Accessibility (WCAG 2.2 AA)

• All text/background pairings meet 4.5:1 contrast for normal text and 3:1 for large text.
• The grey scale is tuned so adjacent steps maintain at least 1.5:1 contrast, keeping subtle borders visible.
• Semantic colors are vibrantly distinct from the primary palette to support color-blind users.

Apple-Inspired Design Thinking

• Whitespace as structure: - Generous padding creates calm, breathable layouts.
• Typography carries hierarchy: - Three text levels reduce reliance on heavy borders.
• Shadows for elevation: - Three crisp, tight shadow values use layered low-alpha layers for natural depth — no glows, no heavy borders.
• Purposeful color: - Color guides action and communicates state; it is never merely decorative.

Dark Mode Strategy

• Surfaces shift to near-black with the same warm buff undertone as light mode, preserving brand cohesion.
• Shadows become more opaque to maintain depth against dark backgrounds.
• Semantic colors shift to lighter tints to preserve vibrancy and readability.
• Supports both prefers-color-scheme and a manual toggle with localStorage persistence.

Grey Scale

Twelve steps from white to black, each with a subtle buff (secondary) undertone at hue 65°. This creates tonal cohesion with the secondary palette while remaining neutral enough for any surface.