CURATED · OPEN · FREE

Hello Monday

A creative agency crafting digital and magical experiences for startups and product departments.

agencycreative

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://hellomonday.com

📦 Browse pack contents →

Identity DNA

Creative AgencyProduct InnovationDigital ExperiencesCollaborative

A high-end editorial magazine meets a modern creative studio.

Color

#DB7093Accent

#000000Ink

#2C2D2EInk soft

#FFFFFFBG

#F8F6F5BG soft

#CACACAMuted

rgba(0, 0, 0, 0.3)Line

Stark black and white contrast with a single playful accent color, relying heavily on white space and typography.

Typography

transitional-serif · humanist-sans

display80px · 400
body-lg22px · 400
body-sm14px · 400

Display typography uses a classic transitional serif for maximum impact. · Body typography uses a clean humanist sans-serif for high readability. · Font weights are predominantly regular (400), with light (300) used sparingly for subtle hierarchy.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Vertical rhythm is established through generous padding and large margins, often using large multiples of the base (e.g., 64px, 71px).

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 999px

1px solid rgba(0, 0, 0, 0.3) used for subtle section dividers; no rounded corners.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A clean grid with distinct hero sections, large horizontal dividers, and generous whitespace.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Fade-in transitions for content blocks · Hover state transitions on text links

Subtle underline or opacity change on text links and interactive elements. · Immediate response with no heavy feedback animations.

Components

button Text-based CTAs with a simple bottom border underline, no background fill.
card Minimalist case study cards featuring a large image and bold serif text below.
hero Massive typography dominating the viewport, accompanied by subtle illustrative icons.

Voice & Don'ts

Tone Confident, professional, yet playfully approachable.
Headlines Bold, impactful, and often slightly whimsical or poetic.
CTAs Direct and action-oriented, presented as simple underlined text.

Don't use rounded corners on cards or buttons — screenshot shows sharp 90-degree angles.
Don't add drop shadows to surfaces — screenshot shows flat, clean layouts.
Don't use a chaotic color palette — screenshot shows a strict black, white, and single-accent scheme.
Don't hide navigation behind complex mega-menus — screenshot shows a minimal hamburger icon.
Don't use sans-serif for major headlines — screenshot shows a prominent transitional-serif display font.
Don't fill every pixel with content — screenshot shows extensive use of white space to create focus.
Avoid: Avoid cluttered layouts or busy backgrounds.
Avoid: Avoid using stock photography for team sections; prefer custom illustrations.
Avoid: Avoid overly complex navigation structures.

Inside the pack — real screenshots

Hello Monday — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a creative agency portfolio site for Hello Monday. The design is minimalist and highly editorial, featuring a stark contrast between massive transitional-serif display fonts and a clean humanist-sans-serif body font. The color palette is predominantly monochrome (black #000000 and white #FFFFFF) with a warm off-white background (#F8F6F5) and a signature playful pink accent (#DB7093). Layouts rely heavily on generous white space, sharp 90-degree corners, and thin dividers. Key design constraints include: always use sharp, non-rounded corners; always use generous vertical spacing; and never use stock photography for team illustrations. The overall feel is sophisticated, confident, and premium.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko