Skip to content
DesignMunkDesignMunk Submit a site

QuickPick

quickpick.space
Keep your entire creative world organized in one space.
Design Tools Productivity Next.js Tailwind Homepage Geist Merriweather
Share Visit site
quickpick.space DESKTOP · 1440
QuickPick

AI Breakdown

Design export

# Design brief: the QuickPick design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/08144026/quickpick-space-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/08144026/quickpick-space-featured.webp
- On DesignMunk: https://designmunk.com/quickpick/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# QuickPick: Editorial Serif Hero Over a Proof-Heavy Workspace

## Overview

QuickPick presents a calm, editorial interface aimed at designers and creators who value clarity and retrieval speed. The tone is focused and confident: serif claims, sans explanations, and roomy spacing. The canvas is warm and neutral, with near-black text and minimal color reserved for actions and guidance. Use this system to feel organized, not loud—dense where content demands it, spacious where decisions are made.

## Colors

- **primary (#18181b):** Core text, icons, and high-contrast headings.
- **secondary (#d7a9d5):** Soft lilac accent for gentle highlights, badges, and subtle decorative glows.
- **tertiary (#2e6bff):** Action blue for links, key accents, and interactive affordances.
- **neutral (#f7f7f5):** Warm page canvas; default section background.
- **brand-dover-grey (#848484):** Secondary text, captions, and hairline dividers.
- **brand-guilliman-blue (#699cfc):** Hover/active blue, lighter link states, and soft gradients.
- **surface (#f7f7f5):** Alias to the canvas color for layouts and containers.
- **on-surface (#18181b):** Default text color on surface backgrounds.

## Typography

- Merriweather is the display/statement face for headlines. It is available from Google Fonts. Levels: headline-lg 56px/1.14 (weight 300), headline-md 40px/1.6 (300), headline-sm 29px/1.41 (300). Keep letter-spacing at zero for all display sizes. Substitutes with similar proportions: Lora, Source Serif 4, Playfair Display.
- Geist is the workhorse sans for subheads and body. It is available from Google Fonts. Levels: headline-xs 21px/1.19 (300) for small section headings; body-md 15px/1.65 (300) for paragraphs, lists, and captions. Substitutes: Inter, Manrope, Plus Jakarta Sans.
- Pattern: serif for claims and section headers; sans for interface copy, lists, and labels. Avoid mixing weights; the system stays light (300) and uses size/spacing for hierarchy.

## Layout

- Spacing scale drives rhythm: xs 6px for micro-gaps, sm 14px for tight UI stacks, md 28px for intra-section spacing, lg 36px for module separation, xl 96px for section breaks and hero padding.
- Use a centered, responsive column with generous white space. A 12-column grid with wide gutters suits the roomy aesthetic; align hero copy and CTA group to the center.
- Lists and tool grids use md (28px) internal padding and sm (14px) item gaps to remain scannable without crowding.
- Keep long-form areas at body-md 15/1.65 to preserve readability over multiple paragraphs.

## Elevation & Depth

- Shadows are purposeful and rare. Use measured_shadows.md (rgba(0,0,0,0.45) 0px 24px 60px -28px) to lift large demo frames or prominent cards.
- measured_shadows.sm adds a subtle two-tone glow (orange/blue) that works well under the primary button for personality without clutter.
- Larger shadow tiers are none; outside shadows, rely on tonal shifts (neutral vs card #fbfbfa), crisp borders in brand-dover-grey, and whitespace for hierarchy.

## Shapes

- Radius language is soft-rounded and consistent: sm 10.5px for small controls and the secondary button; md 12px for the primary button and compact fields; lg 18px for cards, demo frames, and large containers.
- Radii communicate affordance: larger corners for touch-friendly, content-holding elements; smaller corners for controls.
- Keep buttons and frames aligned on the same radius families to avoid a mix of pills and squares.

## Components

- Buttons
  - Primary: background #09090b, text #ffffff, radius 12px, padding 15px 23px, height 45px. Works well with measured_shadows.sm for a subtle colored glow.
  - Secondary: background #f1f1ef, text #000000, radius 10.5px, padding 15px 23px, height 45px.
  - Link: text color #18181b, radius 0.
- Card: background #fbfbfa, text #000000, radius 18px, padding 28px. Use measured_shadows.md when the card represents a demo frame.

### Hero CTA Group
- Centered stack: headline-lg above body-md with md (28px) gaps. Place button-primary left of button-secondary with sm (14px) gap. Text color #18181b on surface #f7f7f5.

### Community Badge
- "Join 5,000+ creators..." pill above the H1. Use the secondary button's background #f1f1ef, body-md text, radius sm (10.5px), and xs (6px) horizontal padding increments.

### Workspace Demo Frame
- A large card acting as an app preview. Apply card background #fbfbfa, radius lg (18px), padding 28px, and measured_shadows.md. Inner content can be an image/video; keep outer margins at lg (36px).

### Tools Dock
- A row/grid of square app tiles. Use sm (14px) gaps and align icons center. Labels set in Geist body-md beneath each tile.

### Boards Carousel
- Horizontal list of image thumbnails with titles and metadata. Each item is a card (lg radius, 28px padding) with body-md meta in brand-dover-grey.

### Notes Preview
- Compact cards for note excerpts. Card background #fbfbfa, radius lg (18px), 28px padding. Use body-md for copy; emphasize key phrases with bold or tertiary (#2e6bff) highlight links.

### Suggested Tools List
- Right-side list of tools with small avatar, name, and one-line description. Use body-md for text, brand-dover-grey (#848484) for meta, sm (14px) item spacing, and sm (10.5px) icon container radius.

## Do's and Don'ts

- Do use Merriweather for all section headlines and keep tracking at 0; switch to Geist for smaller headers and all body copy.
- Do reserve tertiary (#2e6bff) and secondary (#d7a9d5) for actions, hovers, and light highlights—color is supporting, not dominant.
- Do space sections with xl (96px) and keep intra-module gaps at md (28px) for an airy rhythm.
- Don't mix radii on adjacent elements; pair button-primary (12px) with button-secondary (10.5px) only—avoid pill shapes.
- Don't stack more than two CTAs together; prefer the primary plus one secondary.
- Don't add heavy drop shadows; use measured_shadows.md sparingly and otherwise separate with tone and whitespace.

## Agent Prompt Guide

Quick color reference — text: #18181b, background: #f7f7f5, border/subtle text: #848484, accent: #2e6bff (with supportive #d7a9d5 and #699cfc).

1) Build the hero
- Canvas: background #f7f7f5. Center container with vertical padding 96px.
- H1: Merriweather, 56px, weight 300, line-height 1.14, color #18181b.
- Lead: Geist, 15px, weight 300, line-height 1.65, color #18181b, max-width comfortable for reading.
- Buttons: Primary (#09090b text #ffffff, radius 12px, height 45px, padding 15px 23px) then Secondary (#f1f1ef text #000000, radius 10.5px, height 45px). Gap 14px.

2) Create a three-card feature row
- Each card: background #fbfbfa, text #000000, radius 18px, padding 28px, internal gap 14px.
- Title: Geist, 21px, weight 300, line-height 1.19, color #18181b.
- Body: Geist, 15px/1.65. Use border or caption text in #848484 if needed.

3) Build a "Suggested Tools" list
- List container: background #f7f7f5.
- Each item: left icon in a 10.5px-radius square, name in Geist 15px/1.65 #18181b, one-line description in #848484. Vertical spacing 14px.
- Link color and hovers use #2e6bff; subtle hover background may use #fbfbfa.

4) Assemble the demo frame
- Outer frame: card spec (background #fbfbfa, radius 18px, padding 28px) with measured_shadows.md.
- Header label: Geist 21px/1.19 #18181b. Place imagery or an embedded video inside; maintain outer margin 36px from surrounding content.

## Similar Brands

- Notion — similarly restrained monochrome with selective blue accents; diverges by using a sans-only system and straighter corners.
- Framer — big central demo with crisp CTAs; diverges with bolder gradients and a sans display face.
- Mobbin — dense tool/resource listings on a light canvas; diverges with more utilitarian typography and less editorial hero.
- Relume — builder-oriented marketing with blue action accents; diverges with heavier gradient treatments and tighter spacing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #18181b;
  --color-secondary: #d7a9d5;
  --color-tertiary: #2e6bff;
  --color-neutral: #f7f7f5;
  --color-brand-dover-grey: #848484;
  --color-brand-guilliman-blue: #699cfc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 300;
  --text-headline-lg-leading: 1.14;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 300;
  --text-headline-md-leading: 1.6;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 300;
  --text-headline-sm-leading: 1.41;
  --text-headline-xs-size: 21px;
  --text-headline-xs-weight: 300;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 15px;
  --text-body-md-weight: 300;
  --text-body-md-leading: 1.65;
  --font-merriweather: "Merriweather";
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 10.5px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 36px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #09090b;
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 15px 23px;
  --button-primary-height: 45px;
  --button-secondary-background-color: #f1f1ef;
  --button-secondary-text-color: #000000;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 15px 23px;
  --button-secondary-height: 45px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #fbfbfa;
  --card-text-color: #000000;
  --card-rounded: var(--radius-lg);
  --card-padding: 28px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #18181b;
  --color-secondary: #d7a9d5;
  --color-tertiary: #2e6bff;
  --color-neutral: #f7f7f5;
  --color-brand-dover-grey: #848484;
  --color-brand-guilliman-blue: #699cfc;
  --color-surface: #f7f7f5;
  --color-on-surface: #18181b;
  --font-headline-lg: "Merriweather";
  --font-headline-md: "Merriweather";
  --font-headline-sm: "Merriweather";
  --font-headline-xs: "Geist";
  --font-body-md: "Geist";
  --text-headline-lg: 56px;
  --text-headline-md: 40px;
  --text-headline-sm: 29px;
  --text-headline-xs: 21px;
  --text-body-md: 15px;
  --font-weight-headline-lg: 300;
  --font-weight-headline-md: 300;
  --font-weight-headline-sm: 300;
  --font-weight-headline-xs: 300;
  --font-weight-body-md: 300;
  --radius-sm: 10.5px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 28px;
  --spacing-lg: 36px;
  --spacing-xl: 96px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.094,
                    0.094,
                    0.106
                ],
                "hex": "#18181b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.843,
                    0.663,
                    0.835
                ],
                "hex": "#d7a9d5"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.18,
                    0.42,
                    1
                ],
                "hex": "#2e6bff"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.969,
                    0.961
                ],
                "hex": "#f7f7f5"
            }
        },
        "brand-dover-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.518,
                    0.518,
                    0.518
                ],
                "hex": "#848484"
            }
        },
        "brand-guilliman-blue": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.412,
                    0.612,
                    0.988
                ],
                "hex": "#699cfc"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.969,
                    0.969,
                    0.961
                ],
                "hex": "#f7f7f5"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.094,
                    0.094,
                    0.106
                ],
                "hex": "#18181b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 28,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 10.5,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Merriweather",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Merriweather",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Merriweather",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 21,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 15,
                    "unit": "px"
                },
                "fontWeight": 300
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as QuickPick**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Design Tools →
agentwork.com
Agentwork AI
Agentwork
time.fyi
Time Productivity
Time
smoothrecorder.com
Smooth Recorder Productivity
Smooth Recorder
astrobuildkit.com
Astrobuildkit Design Tools
Astrobuildkit