Skip to content
DesignMunkDesignMunk Submit a site

Neverboring

neverboring.ai
Turn what you live into posts that bring you clients.
AI Marketing Next.js Tailwind Homepage Aktiv Grotesk
Share Visit site
neverboring.ai DESKTOP · 1440
Neverboring

AI Breakdown

Design export

# Design brief: the Neverboring 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/03062907/neverboring-ai-en-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/10/03062907/neverboring-ai-en-featured-1440x900.webp
- On DesignMunk: https://designmunk.com/neverboring/

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

# Never Boring AI: Neon CTA Rail Over a Sky-Light Layout

## Overview

A friendly, utilitarian SaaS aesthetic aimed at solo founders and agency operators. The mood is bright and optimistic—sky background, soft neutrals—balanced by a single high-attention accent for action. Copy and structure emphasize consistency and low effort; the UI stays spacious with moderate density in proof sections.

## Page Structure

- Header: compact top nav with left logo, centered links, and a right-aligned primary pill CTA; transparent over the sky backdrop.
- Social proof micro-strip: small avatar cluster with a short usage count, centered.
- Hero: oversized center-aligned headline and brief subcopy with a single primary CTA; generous vertical padding; the app calendar mockup overlaps the fold below.
- Logo strip: a low-contrast row of grayscale partner/agency logos beneath the mockup.
- Metrics row: a row of four counters with labels, evenly spaced.
- How it works: a titled section introducing a simple, vertically stacked five-step sequence with short descriptions.
- Before / After comparison: two stacked columns—left pain points, right solution benefits—each with concise bullet items; duplicated agent badges inline.
- Mid-CTA: short headline, single primary button centered, followed by a repeat of the avatar usage count.
- Feature comparison: repeated rows contrasting the product vs. "post generators" and LLMs; capped by a simple comparison table.
- Testimonials: a long, vertically stacked list of quotes with names/roles; light dividers between items.
- FAQ + contact: two-column feel—left contact/social links, right an accordion of questions and answers.
- Final offer CTA: promotional line with primary button and usage count.
- Footer: multi-column links (Navigation, Features, Comparisons, Resources) with legal links and a small builder credit.

## Colors

- Primary (#1d1d1b): Deep ink for headlines, body text, and icons.
- Secondary (#8c9441): Olive accent for subtle UI emphasis and tags when needed.
- Tertiary (#fcff55): Neon lemon reserved for primary calls to action and key highlights.
- Neutral (#f6f6f3): Porcelain background for sections and cards.
- Border (#d8d8d8): Soft graphite for dividers, input outlines, and component frames.
- Surface (#f6f6f3): Alias of Neutral; use as the default canvas.
- On-surface (#1d1d1b): Text color on Neutral/Surface backgrounds.

## Typography

- Aktiv Grotesk (custom): Used for headline-lg (56px/1.21, weight 400, -0.03em) and headline-md (40px/1.5, weight 400, -0.02em), plus body-md (14px/1.4, weight 400). This family is self-hosted; if unavailable, substitute Inter, IBM Plex Sans, or Source Sans 3.
- Geist (Google): Used for headline-sm (20px/1.2, weight 400) and headline-xs (18px/1.22, weight 400). Freely loadable from Google Fonts; also suitable as a full-site fallback if Aktiv Grotesk isn't available.
- Roles: Large Aktiv Grotesk headlines carry messaging; Geist handles small headings, UI labels, stats, and supportive text to keep hierarchy clear.

## Layout

- Spacing scale: xs 12px for tight element groups; sm 24px for intra-section padding; md 40px for block gaps; lg 80px for section rhythm; xl 132px for hero and promotional blocks.
- Structure: a centered content column with wide gutters; sections alternate between airy (hero, CTAs) and denser proof blocks (metrics, comparisons, testimonials).
- Grids: simple rows for logos and metrics; stacked cards and lists for steps, comparisons, and testimonials. Keep max widths comfortable and let whitespace do the grouping.

## Elevation & Depth

- No shadows at any size; depth is expressed through contrast and spacing.
- Use Border (#d8d8d8) for card frames and dividers; rely on Neutral/Surface for panels against the sky or white backgrounds.
- Hierarchy comes from scale (56px and 40px headlines), bold accent color on CTAs, and generous vertical rhythm.

## Shapes

- Corner radii: sm 4px for subtle UI elements; md 10px for buttons and compact inputs; lg 20px for cards, screenshots, and major containers.
- Shape language signals priority: larger radii for hero/mockup frames, medium for interactive controls, small for utilities and chip-like items.

## Components

### Button — Primary
- Background #fcff55; text #1d1d1b; height 40px; padding 13px 24px; radius 10px. Use for main actions only.

### Button — Secondary
- Text #1d1d1b; height 40px; padding 13px 24px; radius 4px. Minimal background; pair next to the primary when a secondary path is needed.

### Button — Link
- Text #1d1d1b; no radius. Inline action inside paragraphs or lists.

### Card
- Background #ffffff; text #1d1d1b; radius 20px; padding 20px 24px. Add a #d8d8d8 border when separation is needed; avoid shadows.

### Top Navigation Bar
- Single row with left logo, center links, right primary button. Transparent background over imagery; link spacing uses sm (24px); button is the only accent.

### Avatar Cluster + Count
- 5–7 circular avatars overlapped with small negative gaps; adjacent usage count in body-md. Use near hero and CTAs as lightweight social proof.

### App Screenshot Frame
- Large image container with 20px corners; optional 1px #d8d8d8 border. Sits just below the hero copy and spans the main column.

### Metrics Row
- Four equal cells: large numeral in headline-sm (20px Geist) over a short label in body-md. Even gutters; border dividers optional.

### Five-Step List
- Vertical stack with step titles in headline-xs (18px Geist) and short body text; sm (24px) gap between steps; icons optional.

### Before / After Columns
- Two columns on desktop, stacked on mobile. Each is a simple list within a Card container (20px radius), separated with light borders.

### Feature Comparison Table
- Three-column grid with short feature statements; use border lines and body-md text; ticks/dashes remain monochrome to keep the accent on CTAs.

### Testimonial Stack
- Quote first, then name and role; each item separated by #d8d8d8 dividers; avoid heavy avatars to keep density manageable.

### FAQ Accordion
- Question rows in headline-xs; body-md answers revealed below; 1px border separators; chevrons align right.

### Final Promo Banner
- Centered copy with primary CTA; xl (132px) top/bottom padding; avatar cluster may repeat underneath.

## Do's and Don'ts

- Do reserve #fcff55 for primary CTAs and the most important highlights; one per section is usually enough.
- Do keep sections shadow-free; use #d8d8d8 borders and whitespace for separation.
- Do set major headlines at 56px or 40px in Aktiv Grotesk (or Geist/Inter fallback) with the specified negative tracking.
- Do maintain 20px radii on major cards and screenshots; keep buttons at 10px.
- Don't introduce additional bright accent colors or dark section backgrounds that compete with the CTA.
- Don't stack multiple primary buttons side by side; pair with a secondary or link instead.

## Agent Prompt Guide

Quick color reference — Text: #1d1d1b; Background: #f6f6f3; Border: #d8d8d8; Accent: #fcff55.

1) Build the hero
- Canvas #f6f6f3. Center a headline at 56px/1.21, weight 400, letter-spacing -0.03em in 'Aktiv Grotesk', Inter, system-ui, sans-serif; color #1d1d1b.
- Add a 14px body line at 1.4 line-height below.
- Primary button: 40px height, 13px 24px padding, radius 10px, background #fcff55, text #1d1d1b.
- Add a large image/card below with 20px radius and optional 1px #d8d8d8 border.
- Vertical spacing: lg (80px) above/below groups.

2) Logo strip
- Section background #f6f6f3. Center a row of monochrome logos in a card with 20px radius.
- Use md (40px) gap between logos and the section title in 18px Geist.
- Keep all text #1d1d1b; no shadows.

3) Five-step sequence
- Title in 40px/1.5 Aktiv Grotesk.
- Stack five items; each item title 18px Geist with 14px body below.
- Use sm (24px) gap between items and md (40px) padding inside a 20px-radius card.

4) Before / After comparison
- Two cards at 20px radius side by side (stack on mobile). Headings 20px Geist; bullet text 14px.
- Separate items with 1px #d8d8d8 dividers; section spacing lg (80px).

5) FAQ accordion
- Questions in 18px Geist; answers in 14px body.
- 1px #d8d8d8 borders between rows; chevron icons #1d1d1b.
- Add a centered primary CTA below using the button spec above.

## Similar Brands

- Buffer: similarly light, border-driven UI with a single accent for CTAs; Buffer leans more blue and uses denser feature grids.
- Hootsuite: social proof heavy with comparison tables; more corporate palette and heavier modules than this page's airy approach.
- Typefully: minimalist writing-first layouts with bright CTAs; Typefully is even sparser in imagery and relies less on large mockups.
- Taplio: LinkedIn-focused with comparison sections; Taplio's visuals are busier and more gradient-heavy, while Never Boring stays near-neutral.
- Copy.ai: bold headlines and bright accents; Copy.ai uses multiple accent hues, where this site strictly limits emphasis to one.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #1d1d1b;
  --color-secondary: #8c9441;
  --color-tertiary: #fcff55;
  --color-neutral: #f6f6f3;
  --color-border: #d8d8d8;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 56px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.21;
  --text-headline-lg-tracking: -0.03em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.5;
  --text-headline-md-tracking: -0.02em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 14px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.4;
  --text-body-md-tracking: -0.02em;
  --font-aktivgrotesk: "aktivGrotesk";
  --font-geist: "Geist";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* Spacing */
  --spacing-xs: 12px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 132px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-md);
  --button-primary-padding: 13px 24px;
  --button-primary-height: 40px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 13px 24px;
  --button-secondary-height: 40px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-lg);
  --card-padding: 20px 24px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #1d1d1b;
  --color-secondary: #8c9441;
  --color-tertiary: #fcff55;
  --color-neutral: #f6f6f3;
  --color-border: #d8d8d8;
  --color-surface: #f6f6f3;
  --color-on-surface: #1d1d1b;
  --font-headline-lg: "aktivGrotesk";
  --font-headline-md: "aktivGrotesk";
  --font-headline-sm: "Geist";
  --font-headline-xs: "Geist";
  --font-body-md: "aktivGrotesk";
  --text-headline-lg: 56px;
  --text-headline-md: 40px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 14px;
  --tracking-headline-lg: -0.03em;
  --tracking-headline-md: -0.02em;
  --tracking-body-md: -0.02em;
  --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: 10px;
  --radius-lg: 20px;
  --spacing-xs: 12px;
  --spacing-sm: 24px;
  --spacing-md: 40px;
  --spacing-lg: 80px;
  --spacing-xl: 132px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.114,
                    0.114,
                    0.106
                ],
                "hex": "#1d1d1b"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.549,
                    0.58,
                    0.255
                ],
                "hex": "#8c9441"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    1,
                    0.333
                ],
                "hex": "#fcff55"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.965,
                    0.965,
                    0.953
                ],
                "hex": "#f6f6f3"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.847,
                    0.847,
                    0.847
                ],
                "hex": "#d8d8d8"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.965,
                    0.965,
                    0.953
                ],
                "hex": "#f6f6f3"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.114,
                    0.114,
                    0.106
                ],
                "hex": "#1d1d1b"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 132,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "aktivGrotesk",
                "fontSize": {
                    "value": 56,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.03,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "aktivGrotesk",
                "fontSize": {
                    "value": 40,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Geist",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "aktivGrotesk",
                "fontSize": {
                    "value": 14,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.02,
                    "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 Neverboring**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears
agentwork.com
Agentwork AI
Agentwork