Monday Design Aesthetic

---
name: monday-design-aesthetic
description: "Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com."
author: "vibes-plug-swarm"
---

# Monday.com Design Aesthetic

[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)

---

<a name="english"></a>
## English

### Orchestration & Integration
Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.

### Description
This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.

### Trigger Conditions
Use this when the user asks for:
- A "Monday.com style" design.
- A modern SaaS landing page with clean structure.
- High-quality, spacious UI with vibrant accents.

### Core Design Tokens
- **Primary Brand Color**: Vibrant Blue (`#0073ea`) for active states and primary buttons.
- **Backgrounds**: Clean White (`#FFFFFF`) for main content, Light Grays (`#F9F9F9`, `#F5F6F8`) for section alternations, Dark Gray/Black (`#111111`) for footers.
- **Typography**: Clean geometric sans-serif (e.g., Figtree, Circular, Inter).
  - Hero text is extra-bold (48-60px).
  - Section headers are bold (32-40px) in dark slate (`#333333`).
  - Body text is medium (16-18px) in muted gray (`#676879`).

### UI Components & Layout
- **Buttons**: Fully rounded corners (~8px). Primary buttons use vibrant blue with white text and generous padding (e.g., `px-6 py-3`).
- **Cards**: Large border radius (12-16px) with flat borders or extremely subtle drop shadows (`shadow-sm`).
- **Layout**: Centered max-width containers (1200-1400px).
- **Spacing**: Generous vertical padding between sections (80-120px) to let content breathe.
- **Interactions**: Smooth hover states, interactive tab systems, and collapsible accordions.

---

<a name="bahasa-indonesia"></a>
## Bahasa Indonesia

### Integrasi Orkestrasi
Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.

### Deskripsi
Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.

### Kondisi Pemicu
Gunakan saat pengguna meminta:
- Desain ala "Monday.com".
- Landing page SaaS modern dengan struktur bersih.
- UI berkualitas tinggi dengan ruang bernapas luas dan aksen cerah.

### Token Desain Utama
- **Warna Utama (Brand Color)**: Biru Cerah (`#0073ea`) untuk elemen aktif dan tombol utama.
- **Background**: Putih Bersih (`#FFFFFF`) untuk konten utama, Abu-abu Terang (`#F9F9F9`, `#F5F6F8`) untuk variasi bagian, Abu-abu Gelap/Hitam (`#111111`) untuk footer.
- **Tipografi**: Sans-serif geometris bersih (mis. Figtree, Circular, Inter).
  - Teks Hero sangat tebal (48-60px).
  - Header bagian tebal (32-40px) dengan warna dark slate (`#333333`).
  - Teks isi sedang (16-18px) berwarna abu-abu redup (`#676879`).

### Komponen UI & Layout
- **Tombol (Buttons)**: Sudut melengkung (~8px). Tombol utama berwarna biru dengan padding luas (`px-6 py-3`).
- **Kartu (Cards)**: Radius sudut besar (12-16px) dengan border datar atau bayangan sangat halus (`shadow-sm`).
- **Tata Letak (Layout)**: Kontainer dengan lebar maksimal (1200-1400px) terpusat.
- **Jarak (Spacing)**: Jarak vertikal yang sangat lega antar bagian (80-120px).
- **Interaksi**: Efek hover halus, sistem tab interaktif, dan akordion lipat.