Skip to content
DesignMunkDesignMunk Submit a site

SlashEditor

slasheditor.dev
Notion-style block editing—headless Tiptap core, no paid tier.
Developer Tools Next.js Tailwind Homepage Geist
Share Visit site
slasheditor.dev DESKTOP · 1440
SlashEditor

AI Breakdown

Design export

# Design brief: the SlashEditor 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/10/03063902/slasheditor-dev-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03063902/slasheditor-dev-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/slasheditor/

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

# SlashEditor: Monochrome Landing Built Around a Live Editor

## Overview

SlashEditor is a developer-first, open-source product site. The tone is direct and technical: show the working editor, then point to docs and GitHub. The UI is intentionally monochrome and spacious with minimal ornament, using whitespace and hairline rules for structure. When tokens don't prescribe a case, prefer clarity, compact copy, and demo-over-decor.

## Page Structure

- Global nav: compact bar; logo at far left, two text links, then utilities on the right (search with shortcut hint and a GitHub link/icon). Centered and quiet.
- Hero: small eyebrow chips, a two-line display headline, brief supporting copy, and a row of pill CTAs (primary, quiet secondary, and a GitHub button). Center-aligned with generous vertical padding.
- Stat strip: a thin horizontal section under the CTAs with several small metrics laid out in a row and separated by subtle rules.
- Live demo: a large, bordered card containing the functioning editor; a caption above notes it's the real component. Inside are checklist items and a minimal content stub.
- Feature callouts: a vertical stack of compact h3 blocks, each with a sentence or two and a deep-link to docs.
- License band: a low-height, repeating line of short phrases ("MIT... no paid tier...") acting as a visual divider.
- Registry overview: headings and a responsive wrap of registry item names, styled like compact chips/labels.
- Install section: short intro, then a code block that shows the single command and a success line.
- Closing CTA: concise heading and two links back to quick-start docs and GitHub, centered.

## Colors

- Primary (#0a0a0a): Deep ink for headlines, body text, and icons.
- Neutral (#ffffff): Page canvas and card backgrounds.
- Border (#cccccc): Hairline dividers, card outlines, and subtle separators.
- Surface ({colors.neutral}): Alias for background surfaces in cards and sections.
- on-surface ({colors.primary}): Default text color on white surfaces.

## Typography

- Geist Variable (custom/self-hosted): Used for all headings and body. Agents cannot fetch this automatically; substitute with Inter, Plus Jakarta Sans, or Manrope (all freely available on Google Fonts) for similar x-height and modulation.
- Headings: headline-lg 48px/1 @600 for the main hero; headline-md 24px/1.33 @600 for section titles; headline-sm 20px/1.4 and headline-xs 18px/1.22 for small labels and metric headings. Slight negative tracking on lg/md improves density in large sizes.
- Body: body-md 16px/1.75 @400 for paragraphs and helper copy. Use single family consistently to maintain the minimal, tool-like voice.

## Layout

Spacing is a simple step scale: xs 6px for micro-gaps and icon paddings; sm 16px for inline spacing and button padding; md 32px for section internals; lg 64px and xl 96px for vertical section rhythm. Content is center-aligned with a comfortable reading width; dense regions (stats, feature callouts) keep short lines and rely on md spacing. Cards use the card padding (56px 32px) to balance roomy interiors with compact outer gutters.

## Elevation & Depth

Depth is minimal. Most hierarchy is achieved through whitespace and the Border (#cccccc) token. The only measured shadow in use is a very light composite (sm) that can be applied to raised cards or popovers; larger shadow tiers are unused. Focus states should rely on subtle outlines or text color shifts rather than heavy drop shadows.

## Shapes

Two radii define the language: sm 18px for structural surfaces (cards, the editor demo), and full 9999px for interactive elements (buttons, chips). Rounded shapes signal clickability; square edges are rare and reserved for plain text links.

## Components

### Primary Button
- Background #171717, text #fafafa, height 42px, padding 12px 20px, fully rounded (9999px). Use for the main action in a group.

### Secondary Button
- Text color #0a0a0a, no fill by default, height 42px, padding 12px 20px, fully rounded. Pair beside the primary as a quiet/ghost action.

### Link Button
- Text color #737373, square corners, no padding spec beyond text default. Use for tertiary actions and inline links styled as buttons.

### Card
- Background #ffffff, text #0a0a0a, 18px radius, padding 56px 32px. Optionally add the sm shadow for lift and a #cccccc outline.

### Header Navigation
- Left-aligned wordmark; two primary links; right-side utilities: search (with keyboard hint) and a GitHub link/icon. Keep height compact and dividers light (#cccccc) if needed.

### Hero Unit
- Eyebrow chips, headline set in headline-lg (48/1 @600), short body (16/1.75), and a CTA cluster: one primary pill, one secondary pill, and an optional GitHub button. Center all elements and separate with sm–md vertical gaps.

### Live Editor Demo
- Prominent card using the Card spec. Include a caption above. Inside, render the working editor region with checklist items; avoid screenshots.

### Registry Tag Cloud
- A responsive wrap of short labels listing components. Each tag can be a quiet pill (text #0a0a0a on white with #cccccc outline) and 9999px radius to echo buttons.

## Do's and Don'ts

- Do keep backgrounds white (#ffffff) and rely on #cccccc borders for structure.
- Do reserve the 18px radius for substantial surfaces and 9999px for interactive pills.
- Do use headline-lg 48/1 @600 only for the hero; step down to headline-md for section headings.
- Don't introduce additional shadow elevations; the system reads flat by design.
- Don't add saturated accent colors unless you intend to propagate them across links, hovers, and key highlights.
- Don't crowd the stat strip; use concise labels and keep spacing consistent with sm–md tokens.

## Agent Prompt Guide

Quick color reference — Text: #0a0a0a / Background: #ffffff / Border: #cccccc / Accent: #0a0a0a

1) Build the hero
- Container: centered on #ffffff with xl (96px) top/bottom padding.
- Eyebrow: body-md 16/1.75 Inter (as Geist substitute), #737373.
- H1: 48px, weight 600, line-height 1, letter-spacing -0.025em, Inter, color #0a0a0a.
- Copy: 16px/1.75, color #0a0a0a at 80% opacity.
- CTAs: Primary pill (bg #171717, text #fafafa, h 42px, p 12px 20px, radius 9999px). Secondary pill (text #0a0a0a, same size). Space buttons with sm (16px).

2) Add a stat strip under the hero
- Section: border-top and border-bottom 1px solid #cccccc; vertical padding sm (16px).
- Each metric: heading uses headline-xs 18px/1.22 @600; label uses body-md 16/1.75 @400; color #0a0a0a.
- Layout: a single row that wraps on small screens; gap md (32px).

3) Live editor demo card
- Card: bg #ffffff, text #0a0a0a, 18px radius, padding 56px 32px, 1px border #cccccc and optional sm shadow.
- Caption above: body-md 16/1.75 Inter; color #737373; margin-bottom sm (16px).

4) Registry tag cloud
- Container: vertical section gap lg (64px).
- Tags: text #0a0a0a, 1px border #cccccc, radius 9999px, horizontal padding sm (16px), vertical padding xs (6px). Wrap with md (32px) gaps.

## Similar Brands

- Vercel: stark monochrome, Geist typography, and pill buttons; Vercel leans darker and more cinematic, while SlashEditor stays bright and product-demo centric.
- shadcn/ui: minimal docs-driven aesthetic and a registry model; SlashEditor applies it to a focused editor toolkit rather than a general component library.
- Tiptap: developer-oriented editor framework with neutral visuals; SlashEditor adds a block UI and a more marketing-friendly homepage.
- Linear: crisp type and thin dividers; Linear uses gradients as a brand motif, while SlashEditor is largely grayscale aside from a headline accent.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0a0a0a;
  --color-neutral: #ffffff;
  --color-border: #cccccc;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-leading: 1;
  --text-headline-lg-tracking: -0.025em;
  --text-headline-md-size: 24px;
  --text-headline-md-weight: 600;
  --text-headline-md-leading: 1.33;
  --text-headline-md-tracking: -0.025em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 600;
  --text-headline-sm-leading: 1.4;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.75;
  --font-geist-variable: "Geist Variable";

  /* Rounded */
  --radius-sm: 18px;
  --radius-full: 9999px;

  /* Spacing */
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --spacing-xl: 96px;

  /* Components */
  --button-primary-background-color: #171717;
  --button-primary-text-color: #fafafa;
  --button-primary-rounded: var(--radius-full);
  --button-primary-padding: 12px 20px;
  --button-primary-height: 42px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-full);
  --button-secondary-padding: 12px 20px;
  --button-secondary-height: 42px;
  --button-link-text-color: #737373;
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-sm);
  --card-padding: 56px 32px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #0a0a0a;
  --color-neutral: #ffffff;
  --color-border: #cccccc;
  --color-surface: #ffffff;
  --color-on-surface: #0a0a0a;
  --font-headline-lg: "Geist Variable";
  --font-headline-md: "Geist Variable";
  --font-headline-sm: "Geist Variable";
  --font-headline-xs: "Geist Variable";
  --font-body-md: "Geist Variable";
  --text-headline-lg: 48px;
  --text-headline-md: 24px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.025em;
  --tracking-headline-md: -0.025em;
  --font-weight-headline-lg: 600;
  --font-weight-headline-md: 600;
  --font-weight-headline-sm: 600;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 18px;
  --radius-full: 9999px;
  --spacing-xs: 6px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 64px;
  --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.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.8,
                    0.8,
                    0.8
                ],
                "hex": "#cccccc"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.039,
                    0.039,
                    0.039
                ],
                "hex": "#0a0a0a"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 64,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 18,
                "unit": "px"
            }
        },
        "full": {
            "$value": {
                "value": 9999,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Variable",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Variable",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 600,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Variable",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Variable",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist Variable",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

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

More like this

Browse Developer Tools →
reloop.sh
Reloop Communication
Reloop
reworkd.ai
Reworkd Data & Infrastructure
Reworkd
inertiajs.com
Inertia.js Developer Tools
Inertia.js
moxie.birju.dev
Moxie Pricing AI
Moxie Pricing