---
name: Dropmark
description: "This site is a great example of a calm, approachable SaaS aesthetic that balances professional utility with friendly, humanist design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#404040"
  secondary: "#7F7F7F"
  tertiary: "#00AFFA"
  neutral: "#333333"
  bg-soft: "#F7F7F1"
  line: "rgba(17,17,17,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 600
    letterSpacing: "-0.5px"

rounded:
  sm: 3px
  md: 5px
  lg: 8px
  pill: 60px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, approachable visual organization tool for creative teams.

*A digital pinboard for team workflows*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#404040`)** — uses `ink` token
- **Secondary text (`#7F7F7F`)** — uses `ink-soft` token
- **Accent (`#00AFFA`)** — uses `accent` token
- **Muted (`#333333`)** — uses `muted` token
- **Borders (`rgba(17,17,17,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- 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

## Layout

Centered content with a clear single-column hero flow.

*Rhythm:* Generous vertical spacing creates an airy, breathable layout.

## Elevation & Depth

- 0px 4px 7px 0px rgba(0,0,0,0.1)
- inset 0px 0px 0px 2px rgb(220,220,210)
- Borders: 1px solid rgba(17,17,17,0.1)

## Shapes

- `sm`: 3px
- `md`: 5px
- `lg`: 8px
- `pill`: 60px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```