Figma

## Overview

Clean, professional, and highly accessible with a focus on clarity and functionality. The design feels modern and sophisticated while maintaining warmth through rounded corners and generous spacing. The monochromatic palette creates a timeless, tool-focused aesthetic that doesn't compete with user content.

Generous spacing with a 24px gutter system, max-width containers for content readability, and consistent vertical rhythm. The layout uses a flexible grid system with clear content sections and ample whitespace to create breathing room.

Uses a 4px base grid with scale: 0.5, 1, 2, 3, 4, 6, 8, 10, 16, 20.

## Colors
- **Ink Black** (#000000): Primary text, buttons, and key interface elements
- **Paper White** (#ffffff): Main background, button text, and contrast elements
- **Secondary Gray** (#808080): Secondary text and subtle interface elements
- **Light Gray** (#e6e6e6): Subtle borders and dividers
- **Electric Cyan** (#33dfdf): Brand accent color for highlights and interactive elements
- **Digital Blue** (#4d49fc): Secondary accent for interactive states

## Typography
- **Headline Font**: figmaSans
- **Body Font**: figmaSans
- **Label Font**: figmaSans
- **Code Font**: figmaMono

Figma Sans serves as the primary typeface across all contexts, with weight variations creating clear hierarchy. Large headings use lighter weights (400) with negative letter-spacing for elegance, while body text uses regular weight (400) with comfortable line-height ratios around 1.45. The system employs subtle negative letter-spacing on larger sizes to improve readability and create a more refined appearance.

## Elevation

Minimal shadow strategy with subtle elevation using rgba(0, 0, 0, 0.08) shadows for floating elements like modals. The design primarily relies on contrast and spacing rather than heavy shadows, maintaining a clean, flat aesthetic with occasional depth for interactive elements.

## Components
- **Cookie Preferences Modal**: Dark overlay modal with toggle switches for different cookie categories, featuring clear typography hierarchy and accessible controls
- **Navigation Header**: Clean horizontal navigation with dropdown menus, logo placement, and prominent CTA buttons with consistent spacing
- **Button System**: Primary black buttons with white text, secondary outlined buttons, and consistent rounded corners across all interactive elements
- **Toggle Switches**: Custom toggle switches with smooth transitions and clear on/off states for settings and preferences
- **Content Cards**: Clean card layouts with consistent padding, subtle shadows, and clear content hierarchy

## Do's and Don'ts
- Do use high contrast ratios between text and backgrounds for accessibility
- Do maintain consistent 8px spacing increments throughout the interface
- Do use rounded corners consistently across all interactive elements
- Don't use colors with insufficient contrast against the primary black and white palette
- Don't mix different corner radius values within the same component group
- Do leverage negative letter-spacing on headings 24px and larger
- Don't use font weights heavier than 540 to maintain the clean aesthetic
- Do ensure all interactive elements have clear hover and focus states