---
title: "Dropmark design system"
variant: extended
source: https://www.dropmark.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/dropmark-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Dropmark · Design System

> A calm canvas for organizing work visually

**Theme:** light · **Industry:** productivity · **Source:** https://www.dropmark.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Dropmark’s homepage pairs a spacious, typography-led introduction with a large, colorful illustration of visual organization. Warm off-white section bands, crisp blue calls to action, and a concise proof-and-trust area keep the page approachable and easy to scan.

## North star

Keep the interface calm and legible, then let a single vivid, geometric product illustration provide the visual energy.

## Overview

The page uses a predominantly white canvas, with charcoal text providing contrast and a warm, lightly tinted band distinguishing the lower showcase and trust content. Bright cyan-blue is reserved for the primary sign-up action and selected links, while dark navy appears mainly within illustration artwork rather than as a broad interface surface. A centered hero establishes a clear reading hierarchy: bold, compact headline, supporting copy, paired actions, then a wide, geometric illustration. The custom Dropmark text face carries most interface and body copy; a distinct display face adds character to larger headings. Below the hero, small visual collection previews form a horizontal strip, followed by a two-column trust area and a restrained footer. Thin neutral borders and mostly flat surfaces keep the visual system crisp; the colorful artwork supplies energy without turning the interface into a dense or heavily decorated layout.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Cyan | `#00affa` | `--color-signal-cyan` | accent | Primary sign-up button, selected links, and navigation accents; the page’s clearest interactive highlight. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas and card backgrounds, preserving the open, uncluttered feel around the hero. |
| Soft Graphite | `#7f7f7f` | `--color-soft-graphite` | neutral | Muted supporting text, used to give secondary copy less emphasis than charcoal headings. |
| Quiet Stone | `#e0e0da` | `--color-quiet-stone` | surface | Hairline card borders and restrained neutral framing around content previews. |
| Warm Parchment | `#f7f7f1` | `--color-warm-parchment` | surface | Broad lower-page section band behind collection previews and the trust area. |
| Charcoal Ink | `#404040` | `--color-charcoal-ink` | brand | Primary headings, body copy, navigation, footer text, and the dark sign-up button. |
| Midnight Indigo | `#1e2554` | `--color-midnight-indigo` | semantic | Inverse dark panel color visible in collection-style artwork; not a dominant interface background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f1` (Warm Parchment) · `--color-surface-2` → `#e0e0da` (Quiet Stone) · `--color-surface-3` → `#1e2554` (Midnight Indigo) · `--color-text` → `#404040` (Charcoal Ink) · `--color-text-muted` → `#7f7f7f` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e0e0da` (Quiet Stone) · `--color-accent` → `#00affa` (Signal Cyan) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#f7f7f1` | 9.64:1 | AAA |
| `#404040` | `#e0e0da` | 7.82:1 | AAA |
| `#404040` | `#1e2554` | 1.4:1 | fail |
| `#7f7f7f` | `#ffffff` | 4:1 | AA-large |
| `#7f7f7f` | `#f7f7f1` | 3.72:1 | AA-large |
| `#7f7f7f` | `#e0e0da` | 3.02:1 | AA-large |
| `#7f7f7f` | `#1e2554` | 3.62:1 | AA-large |
| `#ffffff` | `#f7f7f1` | 1.08:1 | fail |
| `#ffffff` | `#e0e0da` | 1.33:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DropmarkRealText | `--font-body` | webfont | 400, 600, 700 | Main interface font for navigation, body copy, buttons, links, and text headings. | Inter |
| DropmarkRealHead | `--font-display` | webfont | 500 | Display and secondary heading face, especially the prominent hero headline. | Manrope |

- **DropmarkRealText:** Sans-serif with measured 400, 600, and 700 weights; mostly sentence case and untracked.
- **DropmarkRealHead:** Sans-serif display face at measured 500 weight; clean, compact, and without added tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.2 | 0 | — | DropmarkRealHead | Large centered hero headline. |
| h1 | 40px | 600 | 1.5 | 0 | — | DropmarkRealText | Primary page or section headline. |
| h2 | 24px | 500 | 1.2 | 0 | — | DropmarkRealHead | Secondary section headings, including the trust block. |
| h3 | 20px | 400 | 1.5 | 0 | — | DropmarkRealText | Feature and collection-preview titles. |
| body | 15px | 400 | 1.5 | 0 | — | DropmarkRealText | Hero supporting copy and explanatory text. |
| caption | 14px | 400 | 1.2 | 0 | — | DropmarkRealText | Small supporting labels and metadata. |
| button | 20px | 400 | 1.5 | 0 | — | DropmarkRealText | Primary and secondary action labels. |
| nav | 20px | 400 | 1.5 | 0 | — | DropmarkRealText | Header navigation links. |
| link | 15px | 600 | 1.5 | 0 | — | DropmarkRealText | Inline calls to action such as “Find out more.” |

OpenType features in use: `"lnum", "tnum"`, `"lnum"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 8, 10, 20, 27, 30, 35, 46, 58, 60, 80 px.
- Section rhythm 60px · element gap 10px · card padding — · max content width 1200px.

A centered hero sits within a broad, responsive page frame, with a compact header aligning the logo left and navigation right. The headline, supporting copy, and paired actions share a centered axis above a wide illustration. Content below shifts into a horizontal row of collection previews, then a two-column trust area. The measured page max width is 1200px, with comfortable density and a measured 60px section gap. A multi-column footer closes the page; transitions between white and warm off-white provide rhythm without heavy dividers.

## Shape & elevation

- Radius: button `3px` · nav `3px` · xs `3px`
- Shadow `inset` (nav): `rgb(220, 220, 210) 0px 0px 0px 2px inset`
- Shadow `sm` (other): `rgba(0, 0, 0, 0.1) 0px 4px 7px 0px`
- Motion: standard transition `0.225s ease` on interactive elements.

The interface is predominantly flat, with white cards separated by thin #e0e0da borders and warm off-white bands. A subtle inset shadow is measured on navigation, while other elements use only a light soft shadow. Avoid floating stacks or dramatic depth; the illustration itself provides the strongest visual layering.

## Imagery

The main visual is a large, flat geometric illustration of people arranging colorful content panels. It combines bold cyan, violet, coral, teal, and dark indigo shapes; these vivid artwork colors are illustrative, not core interface tokens. Smaller collection previews show image-led cards and product examples in a horizontal strip. The imagery is clean-edged, playful, and integrated into the page rather than presented as photography.

## Components

### Header navigation

Logo on the left, text links aligned on the right, and a compact charcoal sign-up button; links use the measured 20px navigation style.

### Hero

Centered display headline, short supporting paragraph, paired actions, and a wide geometric illustration below.

### Primary action

Cyan #00affa button with white text, a 3px radius, and measured padding of 8px 20px 10px.

### Secondary action

White, lightly bordered button with cyan text, placed beside the primary sign-up action.

### Collection preview strip

A horizontal row of image-led cards on the warm off-white section band, with short titles and blue links.

### Trust panel

Two-column lower section pairing customer logos and a “Trusted for 15+ years” statistics panel.

### Footer

Quiet multi-column link groups with compact brand and copyright information on a white canvas.

### Measured component styles

- **Primary button** (“Sign up for free”): background #00affa · text #ffffff · radius 3px · padding 8px 20px 10px 20px · 400 20px DropmarkRealText
- **Secondary button** (“Sign up”): background #404040 · text #ffffff · radius 3px · padding 8px 20px 10px 20px · 400 20px DropmarkRealText
- **Link** (“Get on the same page Elisabeth saves Tat”): transparent background · text #404040 · radius 0px · padding 0px · 400 20px DropmarkRealText
- **Card** (“Get on the same page Elisabeth saves Tat”): background #ffffff · text #404040 · border 1px solid #e0e0da · radius 0px · padding 0px · 400 20px DropmarkRealText
- **Navigation item** (“Dropmark Features Apps Plans Blog Log in”): transparent background · text #404040 · radius 0px · padding 0px · 400 20px DropmarkRealText

## Do

- Keep the hero centered and spacious.
- Use cyan for the primary action and selected links.
- Use charcoal for the main text hierarchy.
- Let the illustration carry the brightest colors.
- Separate lower content with a warm off-white band.
- Keep cards and controls visually flat and crisp.

## Don't

- Do not spread illustration colors across ordinary interface controls.
- Do not crowd the hero with extra copy or badges.
- Do not use heavy shadows or layered floating cards.
- Do not replace the clean white canvas with a dark theme.
- Do not make all links look like primary buttons.
- Do not add decorative gradients absent from the measured design.

## Agent prompt

Build a new Dropmark-style productivity page with a calm white canvas (#ffffff), charcoal typography (#404040), and a warm off-white section band (#f7f7f1). Use Signal Cyan (#00affa) selectively for the main CTA and prominent links; use Quiet Stone (#e0e0da) for restrained borders and Soft Graphite (#7f7f7f) for secondary copy. Keep the header compact, with brand left and navigation right. Center the hero headline, short explanation, and paired actions above one broad, playful geometric product illustration. Use DropmarkRealText with Inter as a fallback for interface copy, and DropmarkRealHead with Manrope as a fallback for display headings. Below, organize content into image-led collection previews and a simple trust or proof section. Favor generous whitespace, flat surfaces, thin borders, and a quiet multi-column footer; reserve Midnight Indigo (#1e2554) for illustration or inverse artwork.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above paired actions and a wide illustration. | Clear value proposition, Primary and secondary action | Centered typography, Large geometric artwork, Cyan CTA |
| 2 | feature-grid | Horizontal strip of image-led collection previews within a warm off-white band. | Browse examples, Short feature summaries, Learn-more links | Compact cards, Thumbnail imagery, Thin neutral borders |
| 3 | stats | Two-column trust section pairing customer marks with a dark statistics panel. | Social proof, Product usage metrics | Centered section heading, Logo area, Inverse artwork panel |
| 4 | footer | White footer with compact brand details and multiple link columns. | Secondary site navigation, Account links | Small muted copy, Grouped links, Minimal decoration |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/dropmark-com