Files

🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s

Details

chore: overhaul infrastructure and integrate @mintel packages

- Restructure to pnpm monorepo (site moved to apps/web)
- Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config
- Implement Docker service architecture (Varnish, Directus, Gatekeeper)
- Setup environment-aware Gitea Actions deployment

2026-02-05 14:18:51 +01:00

3.7 KiB

Raw Blame History

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.

3.7 KiB Raw Blame History