Skip to content
DesignMunkDesignMunk Submit a site

BlogCMS

blogcms.io
Static blogs built to rank higher—SEO and speed built in.
AI Software Next.js Homepage marlin
Share Visit site
blogcms.io DESKTOP · 1440
BlogCMS

AI Breakdown

Design export

# Design brief: the BlogCMS 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/07091753/blogcms-io-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07091753/blogcms-io-featured.webp
- On DesignMunk: https://designmunk.com/blogcms/

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

# BlogCMS: Big Grotesk Headlines, Square Purple CTAs

## Overview

BlogCMS presents a calm, technical brand aimed at writers and product teams who want speed and SEO without setup. The UI is light-mode by default, with a parchment surface and a single amethyst accent used sparingly. Layout breathes—body at 20px, generous leading—and interactions keep their edges square to feel purposeful and fast. When tokens don't cover a case, prefer neutral backgrounds, high legibility, and one clear call to action per section.

## Colors

- **primary (#211f1b):** Deep ink for headlines, body text, and icons.
- **secondary (#040404):** Absolute black for rare emphasis, logo marks, and high-contrast glyphs.
- **tertiary (#8c4edd):** Amethyst accent for primary CTAs, active states, and badges.
- **neutral (#faf8f5):** Parchment canvas for the page background and large sections.
- **brand-tranquil-eve (#eee6f0):** Lilac wash for hero panels, dividers, and subtle section tints.
- **surface (#faf8f5):** Alias of Neutral; use for containers that should blend with the page.
- **on-surface (#211f1b):** Alias of Primary; the default color for copy on Neutral/Surface.

## Typography

All typography uses Marlin, a custom grotesk. It is self-hosted (not Google); agents cannot assume it's available. Recommended substitutes: Manrope (Google), Inter (Google), or Satoshi (Fontshare) for similar x-height and neutral tone.
- Headline-lg: 56px / 700 / 1.05 / -0.02em for the main hero claim.
- Headline-md: 43px / 700 / 1.21 / -0.016em for section leads.
- Headline-sm: 33px / 700 / 1.12 / -0.019em for key subheads and pricing plan names.
- Headline-xs: 26px / 600 / 1.19 for FAQs and card titles.
- Body-md: 20px / 400 / 1.55 for paragraphs, list items, and small labels to keep reading friction low.

## Layout

Spacing follows a compact, purposeful scale: xs 6px, sm 14px, md 24px, lg 36px, xl 48px. Use md (24px) as the default gap between stacked elements, lg (36px) for section internals, and xl (48px) for section paddings. Horizontal rhythm suits a 12-column layout; keep generous gutters and limit text blocks to comfortable widths. Micro-gaps (xs 6px, sm 14px) handle labels, captions, and button/icon spacing.

## Elevation & Depth

Depth is restrained and purposeful. Use sm (rgba(140, 78, 221, 0.45) 0 0 8px) as a focus glow on accent elements. Use md (rgba(33,31,27,0.18) 0 20px 60px) for floating panels and dialogs. lg combines a soft 7px amethyst ring with a base shadow for spotlight moments. xl is none—most hierarchy is handled by tonal shifts (#EEE6F0 wash), typographic scale, and whitespace. inner adds a subtle inset for inputs when needed.

## Shapes

Action elements are square (0px radius) to feel quick and direct. Containers such as cards use an 8px radius for approachability without softness. Keep this contrast: square for actions and toggles; 8px for content blocks, pricing, and examples.

## Components

Buttons and Cards
- Button—Primary: background #8C4EDD, text #FFFFFF, 0px radius, 14px×32px padding, 47px height. Use for the single primary action per view.
- Button—Secondary: text color #211F1B, 0px radius, 14px×32px padding, 47px height. Use on neutral surfaces when a less-dominant action is required.
- Button—Link: text #7A3FC9, 0px radius for inline actions.
- Card: background #FAF8F5, text #211F1B, 8px radius, 16px padding. Pair with md shadow for elevation if the card sits on a tinted section.

### Early Supporters Banner
A slim top bar promoting the lifetime plan. Use brand-tranquil-eve (#EEE6F0) as the background, Body-md text, and a link styled in #8C4EDD. Vertical padding: sm (14px); horizontal padding: md–lg.

### Hero Panel
Centered headline in Headline-lg, supportive Body-md paragraph, then a primary CTA (Launch your blog) and a quiet secondary CTA. The panel can sit on a #EEE6F0 wash and take md shadow for gentle lift. Stack gaps: md (24px).

### Why Section
A short intro subhead (Headline-sm) followed by compact bullets in Body-md. Use brand-tranquil-eve as a thin divider line between items where needed.

### Feature Grid 01–06
Six features with numeric counters. Titles in Headline-xs, descriptions in Body-md. Use a two- or three-column grid with md (24px) gaps and 8px-radius cards when features need grouping.

### Deploy Anywhere — Integrations Strip
A dense list of framework/host tags. Set tags in Body-md with sm (14px) horizontal padding and xs (6px) vertical padding; separate groups with #EEE6F0 dividers.

### Domains — Examples
Two example blocks showing URL formats. Render as cards (8px radius) with monospaced styling optional; keep 16px internal padding and md gaps between examples.

### Pricing Table
Three cards on #FAF8F5 with 8px radius. Plan name in Headline-sm, price in Headline-md or sm depending on space, features in Body-md. Mark the popular plan with a small badge using #8C4EDD and lift that card with md shadow. CTA uses the primary button.

### FAQ
Expandable items titled in Headline-xs, answers in Body-md. Separate rows with a 1px divider using #EEE6F0; vertical spacing md (24px).

## Do's and Don'ts

- Do reserve #8C4EDD for primary CTAs, active states, and key badges; don't scatter it across decorative text.
- Do keep action shapes square (0px); don't round buttons—roundness is for containers (8px) only.
- Do use Neutral (#FAF8F5) as the main page canvas; don't switch to stark white backgrounds for full sections.
- Do set headlines with the specified tracking; don't loosen or tighten beyond the token values.
- Do build gaps from the spacing scale (6/14/24/36/48); don't introduce ad-hoc spacings except where a component token specifies otherwise (e.g., button padding).

## Agent Prompt Guide

Quick color reference — text: #211F1B; background: #FAF8F5; border/divider: #EEE6F0; accent: #8C4EDD.

1) Hero section with primary and secondary CTA
- Use font-family: Marlin; if unavailable, Manrope. Headline: 56px/700/1.05 with -0.02em letter-spacing in #211F1B. Body: 20px/400/1.55 in #211F1B. Panel background #EEE6F0 on a page background #FAF8F5. Primary button: #8C4EDD bg, #FFFFFF text, 0px radius, 14px×32px padding, 47px height. Secondary button: text #211F1B, 0px radius, same sizing. Gaps: 24px.

2) Six-item feature grid
- Section title: 43px/700/1.21, -0.016em. Each item: title 26px/600/1.19, body 20px/1.55. Use 8px-radius cards on #FAF8F5 with 16px padding, md (24px) grid gaps, and dividers in #EEE6F0 when needed. Accent small links in #8C4EDD.

3) Three-card pricing table
- Container bg #FAF8F5. Cards: 8px radius, 16px padding, optional md shadow (rgba(33,31,27,0.18) 0 20px 60px). Plan name 33px/700/1.12, features 20px/1.55. "Most popular" badge uses #8C4EDD. CTA buttons follow the primary token.

4) Domains examples row
- Two cards with example URLs. Cards: #FAF8F5, 8px radius, 16px padding, border/divider #EEE6F0. Titles 26px/600; examples in 20px body style. Gaps between cards: 24px.

5) FAQ accordion
- Each question: 26px/600/1.19; answers: 20px/1.55. Divider lines #EEE6F0. Vertical spacing between items: 24px. Keep all copy #211F1B and accents/links #8C4EDD.

## Similar Brands

- Ghost: similarly calm, content-first layouts; Ghost leans green and softer radii, while BlogCMS uses square CTAs and an amethyst accent.
- Vercel: disciplined monochrome with occasional purple; Vercel is darker and more developer-heavy, BlogCMS stays light and writer-friendly.
- Framer: large grotesk headlines and a single accent; Framer's gradients are louder and corners rounder.
- Netlify: straightforward grids and clear plan cards; Netlify skews teal and denser, BlogCMS is warmer with #FAF8F5 and lilac tints.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #211f1b;
  --color-secondary: #040404;
  --color-tertiary: #8c4edd;
  --color-neutral: #faf8f5;
  --color-brand-tranquil-eve: #eee6f0;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 700;
  --text-headline-lg-leading: 1.05;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 43px;
  --text-headline-md-weight: 700;
  --text-headline-md-leading: 1.21;
  --text-headline-md-tracking: -0.016em;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 700;
  --text-headline-sm-leading: 1.12;
  --text-headline-sm-tracking: -0.019em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 600;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.55;
  --font-marlin: "marlin";

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

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

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: 0px;
  --button-primary-padding: 14px 32px;
  --button-primary-height: 47px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: 0px;
  --button-secondary-padding: 14px 32px;
  --button-secondary-height: 47px;
  --button-link-text-color: #7a3fc9;
  --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: #211f1b;
  --color-secondary: #040404;
  --color-tertiary: #8c4edd;
  --color-neutral: #faf8f5;
  --color-brand-tranquil-eve: #eee6f0;
  --color-surface: #faf8f5;
  --color-on-surface: #211f1b;
  --font-headline-lg: "marlin";
  --font-headline-md: "marlin";
  --font-headline-sm: "marlin";
  --font-headline-xs: "marlin";
  --font-body-md: "marlin";
  --text-headline-lg: 56px;
  --text-headline-md: 43px;
  --text-headline-sm: 33px;
  --text-headline-xs: 26px;
  --text-body-md: 20px;
  --tracking-headline-lg: -0.02em;
  --tracking-headline-md: -0.016em;
  --tracking-headline-sm: -0.019em;
  --font-weight-headline-lg: 700;
  --font-weight-headline-md: 700;
  --font-weight-headline-sm: 700;
  --font-weight-headline-xs: 600;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 36px;
  --spacing-xl: 48px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.129,
                    0.122,
                    0.106
                ],
                "hex": "#211f1b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.016,
                    0.016,
                    0.016
                ],
                "hex": "#040404"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.306,
                    0.867
                ],
                "hex": "#8c4edd"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.973,
                    0.961
                ],
                "hex": "#faf8f5"
            }
        },
        "brand-tranquil-eve": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.933,
                    0.902,
                    0.941
                ],
                "hex": "#eee6f0"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.98,
                    0.973,
                    0.961
                ],
                "hex": "#faf8f5"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.129,
                    0.122,
                    0.106
                ],
                "hex": "#211f1b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 36,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 48,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "marlin",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "marlin",
                "fontSize": {
                    "value": 43,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.016,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "marlin",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 700,
                "letterSpacing": {
                    "value": -0.019,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "marlin",
                "fontSize": {
                    "value": 26,
                    "unit": "px"
                },
                "fontWeight": 600
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "marlin",
                "fontSize": {
                    "value": 20,
                    "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 BlogCMS**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
capsulecrm.com
Capsule Productivity
Capsule
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
gogallery.online
Gogallery Creative
Gogallery