mintel.me/apps/web/docs/STYLEGUIDE.md

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.

7. Thumbnail & Illustration Style

Blog post thumbnails are generated via AI image generation. They should follow these style rules:

• Style: Technical blueprint / architectural illustration — clean lines, monochrome base with one highlighter accent color
• No photos: Abstract, geometric, or diagrammatic illustrations only
• Color palette: Slate grays + one accent from the highlighter palette (yellow, pink, or green)
• Feel: "Engineering notebook sketch" — precise, minimal, professional
• No text in images: Titles and labels are handled by the website layout
• Aspect ratio: 16:9 for blog headers, 1:1 for social media cards
• No AI-generated photos of people, products, or realistic scenes — only abstract/technical visualizations