Monday.com Design Aesthetic
English | Bahasa Indonesia
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.
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.
1---2name: monday-design-aesthetic3description: Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com.4---56# Monday.com Design Aesthetic78[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)910---1112<a name="english"></a>13## English1415### Orchestration & Integration16Connects and orchestrates with relevant domain skills like `brainstorming`, `zero-to-prod-orchestrator`, and `project-context-mapper` to ensure cohesive execution.1718### Description19This skill focuses on implementing the modern, spacious, and structured design aesthetic inspired by Monday.com. It is ideal for SaaS landing pages and dashboards.2021### Trigger Conditions22Use this when the user asks for:23- A "Monday.com style" design.24- A modern SaaS landing page with clean structure.25- High-quality, spacious UI with vibrant accents.2627### Core Design Tokens28- **Primary Brand Color**: Vibrant Blue (`#0073ea`) for active states and primary buttons.29- **Backgrounds**: Clean White (`#FFFFFF`) for main content, Light Grays (`#F9F9F9`, `#F5F6F8`) for section alternations, Dark Gray/Black (`#111111`) for footers.30- **Typography**: Clean geometric sans-serif (e.g., Figtree, Circular, Inter).31 - Hero text is extra-bold (48-60px).32 - Section headers are bold (32-40px) in dark slate (`#333333`).33 - Body text is medium (16-18px) in muted gray (`#676879`).3435### UI Components & Layout36- **Buttons**: Fully rounded corners (~8px). Primary buttons use vibrant blue with white text and generous padding (e.g., `px-6 py-3`).37- **Cards**: Large border radius (12-16px) with flat borders or extremely subtle drop shadows (`shadow-sm`).38- **Layout**: Centered max-width containers (1200-1400px).39- **Spacing**: Generous vertical padding between sections (80-120px) to let content breathe.40- **Interactions**: Smooth hover states, interactive tab systems, and collapsible accordions.4142---4344<a name="bahasa-indonesia"></a>45## Bahasa Indonesia4647### Integrasi Orkestrasi48Terhubung dan mengorkestrasi skill domain yang relevan seperti `brainstorming`, `zero-to-prod-orchestrator`, dan `project-context-mapper` untuk memastikan eksekusi yang kohesif.4950### Deskripsi51Skill ini berfokus pada implementasi desain yang modern, luas (spacious), dan terstruktur yang terinspirasi oleh Monday.com. Sangat cocok untuk landing page dan dashboard SaaS.5253### Kondisi Pemicu54Gunakan saat pengguna meminta:55- Desain ala "Monday.com".56- Landing page SaaS modern dengan struktur bersih.57- UI berkualitas tinggi dengan ruang bernapas luas dan aksen cerah.5859### Token Desain Utama60- **Warna Utama (Brand Color)**: Biru Cerah (`#0073ea`) untuk elemen aktif dan tombol utama.61- **Background**: Putih Bersih (`#FFFFFF`) untuk konten utama, Abu-abu Terang (`#F9F9F9`, `#F5F6F8`) untuk variasi bagian, Abu-abu Gelap/Hitam (`#111111`) untuk footer.62- **Tipografi**: Sans-serif geometris bersih (mis. Figtree, Circular, Inter).63 - Teks Hero sangat tebal (48-60px).64 - Header bagian tebal (32-40px) dengan warna dark slate (`#333333`).65 - Teks isi sedang (16-18px) berwarna abu-abu redup (`#676879`).6667### Komponen UI & Layout68- **Tombol (Buttons)**: Sudut melengkung (~8px). Tombol utama berwarna biru dengan padding luas (`px-6 py-3`).69- **Kartu (Cards)**: Radius sudut besar (12-16px) dengan border datar atau bayangan sangat halus (`shadow-sm`).70- **Tata Letak (Layout)**: Kontainer dengan lebar maksimal (1200-1400px) terpusat.71- **Jarak (Spacing)**: Jarak vertikal yang sangat lega antar bagian (80-120px).72- **Interaksi**: Efek hover halus, sistem tab interaktif, dan akordion lipat.
roedyrustam