Skip to content
DesignMunkDesignMunk Submit a site

Prismic Blog

prismic.io
Move faster from brief to live pages
Developer Tools Software Next.js Tailwind Blog copy Font
Share Visit site
prismic.io DESKTOP · 1440
Prismic Blog

AI Breakdown

Design export

# Design brief: the Prismic Blog 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/10170631/prismic-io-blog-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10170631/prismic-io-blog-featured.webp
- On DesignMunk: https://designmunk.com/prismic-blog-page/

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

# Prismic Blog: Compact Black-on-White Cards With 8px Corners

## Overview

A minimalist, monochrome interface optimized for scanning. The target audience is developers and technical marketers who read long-form tutorials and product updates. The feel is efficient and serious rather than playful, with dense information organized into repeatable cards and lists. Color is largely delegated to thumbnails while the UI stays black on white.

## Colors

- **primary (#000000):** Core ink for text, icons, and high-emphasis controls.
- **neutral (#ffffff):** Page background and default card surface.
- **border (#e5e7eb):** Hairline separators, card outlines, and dividers.
- **surface ({colors.neutral} → #ffffff):** Surfaces that sit above the page canvas while remaining colorless.
- **on-surface ({colors.primary} → #000000):** Text and icon color when placed on any surface.

## Typography

Two custom families are referenced: copyFont for larger headlines and body, and headingsFont for medium and small headlines. Because both are self-hosted (type: custom), agents should not attempt to load them directly. Recommended substitutes that preserve a modern, technical tone:
- copyFont substitute options: Inter (Google), Manrope (Google), IBM Plex Sans (Google).
- headingsFont substitute options: Space Grotesk (Google), Poppins (Google), Sora (Google).
Roles by level:
- headline-lg (22px/1.27, 700, family: copyFont): page or section titles in compact layouts.
- headline-md (20px/1.3, 500, -0.025em, family: headingsFont): card titles and list headers.
- headline-sm (19px/1.37, 500, -0.029em, family: headingsFont): secondary titles and sidebar items.
- headline-xs (17px/1.18, 500, family: copyFont): labels that still need prominence.
- body-md (16px/1.5, 500, family: copyFont): paragraphs and descriptive copy.

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 32, lg 48, xl 96. Use sm (16px) as the default gap between cards and for grid gutters; md (32px) for major section padding and between feature blocks; lg/xl for page-level breathing room. A responsive grid built on these increments keeps dense lists readable while aligning thumbnails and sidebars. Lists, rails, and card grids should snap to this rhythm for predictable scan lines.

## Elevation & Depth

There are no shadows (all set to none). Hierarchy is created with whitespace, 1px borders in #e5e7eb, and strong text contrast (#000 on #fff). Featured items get more space and larger imagery rather than elevation effects.

## Shapes

Corners are consistently soft at 8px (rounded.sm), signaling interactive or grouped surfaces such as cards, inputs, and media frames. Text-only links and inline elements remain square (0 radius) to preserve a crisp baseline.

## Components

Buttons and cards are the primary interactive primitives.
- Button — Primary: background #151515, text #ffffff, padding 12px 24px, fixed height 84px. Use for high-intent actions like "Get started".
- Button — Secondary: background #ffffff, text #151515, padding 12px 24px, height 84px. Use on light surfaces where a bordered or inverted look is required.
- Button — Link: text #000000, square corners (0 radius). Use inline within copy or compact lists.
- Card: background #ffffff, text #000000, 8px radius, 16px internal padding, optional #e5e7eb border for separation.

Distinctive components on this page:
### Blog Masthead
- Large page title paired with a short tagline. Use headline-lg for the title, body-md for supporting copy, and lg (48px) vertical spacing.
### Featured Article Card
- Wide card spanning the main column; hero thumbnail on a white card with an 8px radius. Title in headline-md, summary in body-md, 16px gaps, #e5e7eb border.
### Standard Article Card
- Compact tile with category label, title in headline-sm or headline-md, author/date row, and thumbnail. 8px radius, 16px padding, 1px #e5e7eb keyline.
### Right-Rail Popular Lists
- Stacked list cards with counters. Each item uses headline-xs for the link, a right-aligned meta count, and tight 16px vertical spacing with #e5e7eb dividers.
### Category Tabs Row
- Horizontal filter of category links. Use headline-xs for labels, text color #000, hover as underline link (button-link style), and 16px gaps.
### YouTube Feed Items
- Mini cards: title line in headline-sm, small meta (views/date) in body-md, 8px radius around the preview image, 16px vertical rhythm.
### Newsletter Signup
- Single-column form with body copy (body-md), a single input with 8px radius and #e5e7eb border, and a primary button. Use md (32px) spacing between elements.
### Top Promo Banner
- Full-width announcement bar with concise copy and a link-style CTA. Keep padding sm (16px) and text in on-surface (#000).

## Do's and Don'ts

Do
- Use #000 on #fff for all text and surfaces; reserve color for media and illustrations.
- Keep corners at 8px for cards and inputs; leave text links square.
- Separate dense items with a 1px #e5e7eb border or sm (16px) gaps—do not add shadows.
- Use headline-md/Sm for article titles; keep summaries in body-md with 1.5 line height.

Don't
- Introduce new accent colors or drop shadows to force emphasis—scale and whitespace signal priority here.
- Mix radii within a single grid; 8px must be consistent.
- Over-enlarge CTAs inside cards; use padding 12×24 and respect the content stack.

## Agent Prompt Guide

Quick reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent (links/buttons): #000000 or #151515 for filled buttons

1) Build a three-card blog grid
- Container: background #ffffff; padding 32px (md).
- Grid: 3 columns; gap 16px (sm).
- Card: background #ffffff; 1px solid #e5e7eb; border-radius 8px; padding 16px.
- Title: font-family Inter, sans-serif; 20px, weight 500, letter-spacing -0.025em, line-height 1.3.
- Summary: Inter 16px, weight 500, line-height 1.5, color #000000.
- Link: button-link style, text color #000000.

2) Featured article strip
- Wrapper: background #ffffff; padding 32px (md); border 1px solid #e5e7eb; radius 8px.
- Headline: Inter 22px, weight 700, line-height 1.27.
- Meta row: Inter 16px, weight 500, line-height 1.5; color #000000.
- Thumbnail: 8px radius; 16px gap to text.

3) Right-rail list module
- Panel: background #ffffff; border 1px solid #e5e7eb; radius 8px; padding 16px.
- Item: Title in Inter 17px, weight 500; count aligned right; 16px vertical spacing; divider 1px #e5e7eb between items.

4) Newsletter signup block
- Section padding: 48px (lg); background #ffffff.
- Copy: Inter 16px/1.5.
- Input: 1px solid #e5e7eb; radius 8px; padding 12px 16px.
- Button (primary): background #151515; color #ffffff; padding 12px 24px; height 84px; radius 8px.

5) Category tabs row
- Horizontal list with 16px gaps; each tab is a text link in #000000 using Inter 17px/1.18, weight 500; underline on hover; no background; radius 0.

## Similar Brands

- Vercel — shares the stark black-on-white aesthetic and disciplined cards; Vercel leans heavier on dark mode and code-centric visuals.
- Linear — similar sparse UI and tight typography; Linear uses more motion and subtle gradients for emphasis.
- Notion — monochrome interface with strong borders; Notion introduces more iconography and softer spacing.
- GitHub Docs — dense, navigable lists with minimal color; GitHub uses more hierarchical side navigation and fewer thumbnail visuals.

## Tokens

### CSS custom properties

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

  /* Typography */
  --text-headline-lg-size: 22px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.27;
  --text-headline-md-size: 20px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.3;
  --text-headline-md-tracking: -0.025em;
  --text-headline-sm-size: 19px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.37;
  --text-headline-sm-tracking: -0.029em;
  --text-headline-xs-size: 17px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.18;
  --text-body-md-size: 16px;
  --text-body-md-weight: 500;
  --text-body-md-leading: 1.5;
  --font-copyfont: "copyFont";
  --font-headingsfont: "headingsFont";

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

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

  /* Components */
  --button-primary-background-color: #151515;
  --button-primary-text-color: var(--color-neutral);
  --button-primary-padding: 12px 24px;
  --button-primary-height: 84px;
  --button-secondary-background-color: var(--color-neutral);
  --button-secondary-text-color: #151515;
  --button-secondary-padding: 12px 24px;
  --button-secondary-height: 84px;
  --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-sm);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "copyFont";
  --font-headline-md: "headingsFont";
  --font-headline-sm: "headingsFont";
  --font-headline-xs: "copyFont";
  --font-body-md: "copyFont";
  --text-headline-lg: 22px;
  --text-headline-md: 20px;
  --text-headline-sm: 19px;
  --text-headline-xs: 17px;
  --text-body-md: 16px;
  --tracking-headline-md: -0.025em;
  --tracking-headline-sm: -0.029em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 500;
  --radius-sm: 8px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 32px;
  --spacing-lg: 48px;
  --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,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0
                ],
                "hex": "#000000"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 96,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "copyFont",
                "fontSize": {
                    "value": 22,
                    "unit": "px"
                },
                "fontWeight": 700
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "headingsFont",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.025,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "headingsFont",
                "fontSize": {
                    "value": 19,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.029,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "copyFont",
                "fontSize": {
                    "value": 17,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "copyFont",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        }
    }
}
```

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

More like this

Browse Developer Tools →
capsulecrm.com
Capsule Productivity
Capsule
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite