# Style Guide: Digital Architect

This document defines the visual language and design rules for the Mintel ecosystem. The goal is to maintain a "Digital Architect" aesthetic: technical, reductionist, and high-fidelity.

## 1. Core Philosophy: Reduction to Essentials

The design should feel "Websites ohne Overhead." Every element must serve a purpose. If it doesn't add value, remove it.

- **Technical Precision**: Use grids, mono-spaced labels, and clear hierarchies to signal technical competence.
- **Tactile Digital Objects**: UI elements should feel like physical objects (buttons that depress, tags that pop in, glass that blurs).
- **High Contrast**: Bold black/slate on clean white backgrounds, with vibrant highlighter accents.

## 2. Color Palette

The project uses a monochrome base with curated highlighter accents.

- **Primary Base**: 
    - **Backgrounds**: Pure White (`#ffffff`) for clarity.
    - **Surfaces**: Slate-50 for subtle depth, White with 90% opacity + 10px blur for glassmorphism.
- **Grays (Slate)**: 
    - **Text**: Slate-800 for body, Slate-900 for headings.
    - **UI Borders**: Slate-100 or Slate-200.
    - **Muted text**: Slate-400 or Slate-500.
- **Highlighter Accents**: Used exclusively for tags, markers, and selective emphasis.
    - **Yellow**: Warm, high-visibility (`rgba(255, 235, 59, 0.95)`).
    - **Pink**: Vibrant, energetic (`rgba(255, 167, 209, 0.95)`).
    - **Green**: Success, technical health (`rgba(129, 199, 132, 0.95)`).
    - **Blue**: Neutral, structural (`rgba(226, 232, 240, 0.95)`).

## 3. Typography

A high-contrast mix of fonts that balances modern tech with editorial readability.

- **Headings (Sans-serif)**: Use **Inter**.
    - Tracking: `-0.025em` to `-0.05em` (tracking-tighter).
    - Weight: Bold (`700`).
    - Color: Slate-900.
- **Body (Serif)**: Use **Newsreader** or Georgia.
    - Style: Defaults to serif for long-form content to provide a "notebook" feel.
    - Line-height: Relaxed (`1.6` to `1.75`).
- **Technical (Monospace)**: Use **JetBrains Mono**.
    - Usage: Small labels, tags, code snippets, and "Mono-Labels" (e.g., section numbers).
    - Feature: Uppercase with wide tracking (`0.3em` to `0.4em`).

## 4. Layout & Rhythm

Standardized containers ensure consistency across different screen sizes.

- **Standard Container**: Max-width 6xl (`72rem`). Used for most page sections.
- **Wide Container**: Max-width 7xl (`80rem`). Used for galleries or high-impact visuals.
- **Narrow Container**: Max-width 4xl (`56rem`). Used for focused reading and blog posts.
- **Section Rhythm**: Sections are separated by clear `border-top` lines and numbered (e.g., "01", "02").

## 5. UI Elements & Interactions

### 5.1 Buttons
- **Shape**: Always pill-shaped (rounded-full).
- **Style**: Thin borders (`1px`) with bold, uppercase mono-spaced text.
- **Hover**: Should feel "expensive." Smooth translate-up (`-0.5rem`) and deep, soft shadows.

### 5.2 Cards & Containers
- **Glassmorphism**: Use for search boxes and floating elements (`backdrop-filter: blur(10px)`).
- **Cards**: Minimalist. Use `Slate-50` or thin `Slate-100` borders. Avoid heavy shadows unless on hover.

### 5.3 Highlighters & Tags
- **Marker Effect**: Use a hand-drawn marker underline (diagonal skew, slightly erratic rotation) for key titles.
- **Tags**: Small, bold, uppercase. They should use `tagPopIn` animations when appearing.

## 6. Motion & Atmosphere

- **Reveals**: Content should never "just appear." Use slide-up and fade-in transitions (`0.5s` to `0.7s`) to create a sense of discovery.
- **Background Grid**: A subtle, low-opacity grid pattern provides a technical "blueprint" feel to the pages.
- **Micro-interactions**: Hovering over icons or tags should trigger subtle scales (`105%-110%`) and color shifts.