CURATED · OPEN · FREE

Dropmark

A clean, approachable visual organization tool for creative teams.

SaaSProductivityCollaborationCleanCalm

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://dropmark.com

📦 Browse pack contents →

Identity DNA

organizationcollaborationweb-clippingteams

A digital pinboard for team workflows

Color

#00AFFAAccent

#404040Ink

#7F7F7FInk soft

#FFFFFFBG

#F7F7F1BG soft

#333333Muted

rgba(17,17,17,0.1)Line

Bright white canvas with soft warm greys and a vibrant cyan accent.

Typography

humanist-sans

display56px · 600

Primary typeface is a custom humanist sans-serif (DropmarkRealHead/Text) · Headings use semi-bold weight (600) for approachable prominence · Body text maintains standard readability at 400 weight

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous vertical spacing creates an airy, breathable layout.

Surfaces

sm · 3px

md · 5px

lg · 8px

pill · 60px

1px solid rgba(17,17,17,0.1)

0px 4px 7px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 2px rgb(220,220,210)

Layout

1200container

12columns

24pxgutter

768 / 1024breakpoints

Centered content with a clear single-column hero flow.

Motion & Interaction

100msmicro

225mssmall

400msmedium

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

Standard opacity and filter transitions on interactive elements · Smooth background-color transitions for hover states

Subtle color shifts on buttons and interactive elements. · Standard pointer interactions with minimal press feedback.

Components

button Primary uses bright cyan fill with white text; secondary uses a transparent style with a light grey border.
card Simple white containers with minimal shadows and rounded corners.
chip Not prominently featured in the provided screenshots.
input Clean, minimal text fields with standard padding.
hero Centered, airy headline section supported by a vibrant, colorful abstract illustration.

Voice & Don'ts

Tone Friendly, professional, and inviting.
Headlines Direct, benefit-oriented statements about organization and workflow.
CTAs Action-oriented and encouraging (e.g., 'Sign up for free', 'Show me how').

Don't use dark backgrounds — screenshot shows a bright white (#FFFFFF) main canvas.
Don't use a high-contrast red or green accent — screenshot shows a bright cyan (#00AFFA) as the primary action color.
Don't use sharp, square corners on primary buttons — screenshot shows rounded corners (radius 3-5px).
Don't use heavy, geometric sans-serif fonts — screenshot shows a softer, humanist sans-serif style.
Don't pack elements tightly — screenshot shows generous whitespace and clear vertical rhythm.
Don't use pure black text — screenshot shows a soft dark grey (#404040) for primary text.
Avoid: Overly technical jargon
Avoid: Aggressive marketing language
Avoid: Complex or intimidating instructions

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Dropmark is a friendly, approachable SaaS tool for visual organization and team collaboration. It uses a bright white (#FFFFFF) background with a soft warm off-white (#F7F7F1) for subtle section breaks. The primary text is a soft dark grey (#404040), and the key accent color is a vibrant cyan (#00AFFA). Typography relies on humanist-sans-serif categories for both headings and body, maintaining a semi-bold weight for display text and regular weight for readability. Critical constraints: avoid dark mode or high-contrast dark backgrounds, avoid sharp square corners on buttons, and avoid heavy, aggressive fonts. The layout is centered, airy, and uses generous whitespace to keep the interface calm and focused.

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