Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- 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
75 lines
3.7 KiB
Markdown
75 lines
3.7 KiB
Markdown
# 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.
|
|
|