Skip to content
DesignMunkDesignMunk Submit a site

Set

set.space
Location management for the screen industry—gather, organize, and present all locations.
Creative Software Homepage Quadrant
Share Visit site
set.space DESKTOP · 1440
Set

AI Breakdown

Design export

# Design brief: the Set 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/07085118/set-space-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07085118/set-space-featured.webp
- On DesignMunk: https://designmunk.com/set/

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

# Set Space: Monochrome, Time-Stamped UI for Location Scouts

## Overview

Set Space presents a cinematic, tool-first interface: dark mode by default, high-contrast white type, and minimal color. The audience is film and TV location professionals who value clarity over flourish. Layouts are spacious but not airy; sections use decisive vertical gaps to separate ideas. The tone is confident, utilitarian, and slightly editorial from the serif–mono pairing.

## Colors

- **primary (#ffffff):** Primary text and icon color on dark surfaces; also the fill for high-emphasis buttons.
- **secondary (#7c7c7c):** Muted text for captions, meta, and low-priority links.
- **tertiary (#ff5900):** Accent for high-attention UI like the nav "create account" chip, badges, and sparing highlights.
- **neutral (#000000):** Base canvas for the entire site and card surfaces.
- **border (#374151):** Hairline dividers, input outlines, and accordion separators on dark.
- **brand-unique-grey (#c9c9c9):** Subtle elements such as icons, rules, or secondary strokes where white would be too loud.
- **surface ({colors.neutral}):** The working surface; treat as #000000.
- **on-surface ({colors.primary}):** Default on-surface content color; treat as #ffffff.

## Typography

- Quadrant (custom, self-hosted): Used for headline-lg and headline-sm display titles. Not available from Google; use obtainable substitutes with similar tone such as Fraunces, DM Serif Text, or Cormorant.
- Pressura Mono (custom, self-hosted): Used for headline-md and headline-xs, section labels, numerals, and UI chrome. Substitute IBM Plex Mono, Space Mono, or Cousine.
- Quadrant Slab (custom, self-hosted): Body copy at 16px with 1.5 line height and slight tracking. Substitute Roboto Slab, Zilla Slab, or Bitter.
- Roles: headline-lg 39px for hero and major section titles; headline-md 31px mono for interstitial headings and numbers; headline-sm 25px for secondary headings; headline-xs 20px mono with 0.052em tracking for labels; body-md 16px slab for paragraphs and lists.

## Layout

Spacing follows a compact-to-generous ladder: 4, 20, 24, 40, 182px. Use lg (40px) for standard section rhythm and xl (182px) for hero padding and major breaks. Content typically sits centered on a single column with room for side-by-side buttons or a secondary column for imagery. Grids for feature lists should rely on equal columns with border separators using #374151, keeping vertical gaps at 24–40px.

## Elevation & Depth

Depth is mostly tonal. Only the sm shadow is available (rgba(0,0,0,0.5) 0 0 13px 0) and should be reserved for overlays on photography or floating elements. Everywhere else, hierarchy is created with contrast (white on black), borders in #374151, and whitespace using lg and xl spacing.

## Shapes

Corners are square-leaning with two radii: 4px for interactive elements (buttons, pills) and 8px for containers (cards, media frames). Use radius to signal clickability versus grouping; avoid larger radii not in the scale.

## Components

Buttons
- Primary: 40px height, 8px×16px padding, 4px radius; fill #ffffff with #000000 text. Use for the main CTA against dark surfaces.
- Secondary: 40px height, 8px×16px padding, 4px radius; text-only in #ffffff on black (no fill). Use for the secondary action beside the primary.
- Link: Text link with 0px radius, #ffffff color; use inline.

Card
- Background #000000, text #ffffff, 8px radius, 16px padding. Works for pricing, FAQs, and feature callouts.

Distinctive components on this page
### Top Navigation Bar
- Minimal text links left; live time display at top-right; accent "create account" chip often in #ff5900. Links use body-md; spacing sm–md.
### Hero Masthead
- Full-bleed imagery with center-aligned copy: headline-lg (39px) on black overlay; two CTAs using primary and secondary buttons with 20px gap.
### Split-Line Intro Statement
- Large paragraph broken into single-word lines for emphasis, set in body-md; use xl spacing above and below for breathing room.
### Numbered Feature Sections (01–05)
- Section number in headline-md (31px, mono); title in headline-sm (25px); supporting text in body-md. Vertical rhythm at md–lg with border separators as needed.
### Feature Spec Grid
- Small caps/label rows (headline-xs, mono) with short descriptions; two-to-three columns on wide screens; dividers in #374151.
### Walkthrough Video Link
- Text link plus thumbnail or icon; sit within a card or on surface with md padding; optional sm shadow over photography.
### Pricing Tiers Row
- Three cards using the card token; plan name in headline-sm, price emphasized; primary sign-up button per card, small badges may use #ff5900 sparingly.
### FAQ Accordion
- Question in headline-xs (mono) with chevron; answer in body-md; row dividers in #374151 and 24–40px padding.

## Do's and Don'ts

Do
- Use #ffffff for primary text on #000000 surfaces; reserve #ff5900 for key accents only.
- Pair serif headlines with monospace labels as defined; keep body in the slab at 16px.
- Respect the 4px/8px radius split — 4px for buttons, 8px for cards.
- Use #374151 borders to structure lists, tables, and FAQs instead of heavy shadows.

Don't
- Introduce additional grays beyond #7c7c7c and #c9c9c9 for text or rules.
- Fill secondary buttons; they are text-only on dark.
- Overuse the sm shadow; it's only for overlays on imagery.
- Expand spacing beyond the defined scale or add new radii.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #000000
- Border: #374151
- Accent: #ff5900

1) Hero masthead with two CTAs
- Container: full-bleed #000000 over photography, vertical padding 182px.
- Headline: font-family "Quadrant" (fallback Fraunces), size 39px, weight 400, line-height 1.15, color #ffffff, center.
- Subtext: font-family "Quadrant Slab" (fallback Roboto Slab), size 16px, line-height 1.5, color #ffffff at 80%.
- Buttons: primary — 40px height, padding 8px 16px, radius 4px, fill #ffffff, text #000000; secondary — 40px height, padding 8px 16px, radius 4px, text #ffffff on transparent. Gap 20px.

2) Numbered feature block (01 — Gather location data)
- Number: font-family "Pressura Mono" (fallback IBM Plex Mono), size 31px, weight 400, color #ffffff.
- Title: font-family "Quadrant", size 25px, line-height 1.48, color #ffffff.
- Body: font-family "Quadrant Slab", size 16px, line-height 1.5, color #ffffff.
- Layout: two columns on wide screens; vertical gaps 24–40px; separators in #374151 at 1px.

3) Feature spec grid with labels
- Labels: font-family "Pressura Mono", size 20px, letter-spacing 0.052em, color #ffffff.
- Descriptions: font-family "Quadrant Slab", size 16px, line-height 1.5.
- Grid: 2–3 columns; card background #000000 with 16px padding, radius 8px; cell gaps 24px; use #374151 borders between rows.

4) Pricing tiers row
- Each card: background #000000, text #ffffff, padding 16px, radius 8px, optional small badge in #ff5900.
- Plan name: "Quadrant" 25px; price emphasis with "Pressura Mono" 31px.
- Primary sign-up button: as defined — 40px height, 8px×16px, radius 4px, fill #ffffff, text #000000.

5) FAQ accordion
- Question row: "Pressura Mono" 20px with 0.052em tracking, color #ffffff; divider #374151.
- Answer: "Quadrant Slab" 16px, line-height 1.5, color #7c7c7c for a quieter tone.
- Spacing: 24px inside rows, 40px between groups.

## Similar Brands

- Vercel — Shares a strict black/white palette and code-adjacent mono; Set Space diverges with serif display type and film-oriented imagery.
- Linear — Similarly restrained dark UI and precise spacing; Set Space is warmer and more editorial with slab body copy.
- Raycast — Dark, high-contrast marketing site with minimal color; Set Space uses a bolder serif/mono pairing and photographic hero.
- MUBI — Film-centric visuals and serif typography; Set Space is a product site, using the look to support structured, tool-like content.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #ff5900;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 39px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.15;
  --text-headline-md-size: 31px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.19;
  --text-headline-sm-size: 25px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.48;
  --text-headline-xs-size: 20px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.2;
  --text-headline-xs-tracking: 0.052em;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: 0.012em;
  --font-quadrant: "Quadrant";
  --font-pressura-mono: "Pressura Mono";
  --font-quadrant-slab: "Quadrant Slab";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 20px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 182px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #7c7c7c;
  --color-tertiary: #ff5900;
  --color-neutral: #000000;
  --color-border: #374151;
  --color-brand-unique-grey: #c9c9c9;
  --color-surface: #000000;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Quadrant";
  --font-headline-md: "Pressura Mono";
  --font-headline-sm: "Quadrant";
  --font-headline-xs: "Pressura Mono";
  --font-body-md: "Quadrant Slab";
  --text-headline-lg: 39px;
  --text-headline-md: 31px;
  --text-headline-sm: 25px;
  --text-headline-xs: 20px;
  --text-body-md: 16px;
  --tracking-headline-xs: 0.052em;
  --tracking-body-md: 0.012em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 20px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --spacing-xl: 182px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.486,
                    0.486
                ],
                "hex": "#7c7c7c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    0.349,
                    0
                ],
                "hex": "#ff5900"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.216,
                    0.255,
                    0.318
                ],
                "hex": "#374151"
            }
        },
        "brand-unique-grey": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.788,
                    0.788,
                    0.788
                ],
                "hex": "#c9c9c9"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 182,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Quadrant",
                "fontSize": {
                    "value": 39,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Pressura Mono",
                "fontSize": {
                    "value": 31,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Quadrant",
                "fontSize": {
                    "value": 25,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Pressura Mono",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.052,
                    "unit": "em"
                }
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Quadrant Slab",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": 0.012,
                    "unit": "em"
                }
            }
        }
    }
}
```

## 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 Set**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Creative →
capsulecrm.com
Capsule Productivity
Capsule
sundayparis.com
Sunday Paris Creative
Sunday Paris
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite