Monday.com Design Aesthetic

SkillMedia

Expert guide for implementing the modern, spacious, and highly structured Monday.com design system / Panduan desain ala Monday.com.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Monday.com Design Aesthetic skill

What this skill tells your AI

The instructions your AI receives, as published by roedyrustam/vibes-plug in skills/monday-design-aesthetic/SKILL.md and read by ahel’s review.

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.

Signals

GitHub stars
50
Forks
10
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
monday-design-aesthetic
Source
github.com/roedyrustam/vibes-plug