Skip to content
DesignMunkDesignMunk Submit a site

Featurebase

featurebase.app
Support customers with AI, feedback, and product updates in one tool
AI Communication Next.js Tailwind Homepage
Share Visit site
featurebase.app DESKTOP · 1440
Featurebase

AI Breakdown

Design export

# Design brief: the Featurebase 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/07084245/featurebase-app-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07084245/featurebase-app-featured.webp
- On DesignMunk: https://designmunk.com/featurebase/

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

# Featurebase: Dark UI with a Single Pole-Star CTA

## Overview

A focused dark-mode system for B2B support and feedback software. Tone is modern, confident, and calm. Layouts are spacious rather than dense, with long-form copy supported by generous vertical rhythm. Purple is an accent, not a base; the interface should feel reliable first, innovative second.

## Colors

- **primary (#dee1ea):** Primary text on dark surfaces and high-emphasis UI labels.
- **secondary (#5e5dee):** Accent for interactive states, highlights, and brand moments; use sparingly to avoid visual noise.
- **tertiary (#b2b8cd):** Subtext, helper copy, and subdued links; ideal for secondary metadata.
- **neutral (#050608):** Global background for the dark canvas and large surfaces.
- **border (#13161f):** Hairline dividers, input strokes, card outlines, and subtle separators on dark.
- **brand-winterspring-lilac (#b4acf4):** Soft decorative tint for gradients, glows, or hover accents adjacent to secondary.
- **surface ({colors.neutral} → #050608):** Surface color for cards, nav, and panels.
- **on-surface ({colors.primary} → #dee1ea):** Default text on surfaces; use for body and headings.

## Typography

All typography uses Inter via a self-hosted build ("__Inter_f367f3"). Because it is not Google-hosted in this system, agents should substitute obtainable families with similar metrics: Inter (Google Fonts), Manrope, or Plus Jakarta Sans.
- Headline-lg: 48px/1.38, weight 500, letter-spacing -0.02em. Use for hero H1 and key section intros.
- Headline-md: 38px/1.21, weight 400. Secondary section headings.
- Headline-sm: 29px/1.21, weight 400. Tertiary headings and card titles.
- Headline-xs: 23px/1.22, weight 400. Inline section labels and compact headers.
- Body-md: 18px/1.56, weight 400. Default paragraph size for legibility on dark backgrounds.

## Layout

Spacing follows a compact-to-spacious scale: 6, 14, 24, 32, and 80px. Use 80px as the default vertical section gap, 24–32px for intra-section grouping, 14px for tight inline stacks, and 6px for micro-gaps. Cards and feature blocks align to even multiples of 24/32px for predictable rhythm across breakpoints.

## Elevation & Depth

Depth is primarily conveyed through tone and borders. Shadows are minimal: only the small shadow is available (rgba(0,0,0,0.1) twin-drop) for floating elements like sticky navs or overlayed widgets. Otherwise use the border color (#13161f) and contrast between neutral and on-surface to separate layers.

## Shapes

Rounded language is simple and utilitarian. Use 12px corners for interactive controls (buttons, pills, small inputs). Use 16px for larger containers such as cards, previews, and modals. Avoid mixing radii on peers; pick one per tier to keep the silhouette consistent.

## Components

Buttons
- Primary: background #ffffff, text #101219, 42px height, 10px×16px padding, 12px radius. Use as the main CTA and in high-contrast spots.
- Secondary: text #ffffff, 42px height, 10px×16px padding, 12px radius. Use as a ghost/quiet action on #050608; pair with a subtle #13161f border when needed.
- Link: text {colors.tertiary} (#b2b8cd), radius 0px. For inline text actions.

Card
- Background {colors.neutral} (#050608), radius 16px, padding 40px. Text follows on-surface for readability.

Distinctive components on this page

### Pillar Switcher Bar
A five-item pill navigator (Support, Feedback, Help Center, Product Updates, Customers). Use body-md labels, 12px radius, 24–32px horizontal gaps, and border #13161f to separate from the canvas.

### Hero with Dual CTAs
H1 at 48px/500, supporting copy in 18px/1.56. Primary "Get started – free" (white) and secondary "Get a demo" (ghost) sit side-by-side with 14px gap.

### Product Preview Montage
Dark cards (16px radius, 40px padding) showing the omnichannel inbox and chat widget overlay. Use the small shadow token to float the overlayed widget.

### Stats Band
A four-up metric row (e.g., 30m+, 186+, 1,500+, >99.9%). Use headline-sm for numerals and tertiary for labels; 32px column gaps, 80px vertical padding.

### Testimonial Quote Block
Single quote with author name and role. Set quote in headline-xs and body-md mix; keep 24px padding inside a 16px-radius surface.

### Integrations Logo Grid
Grid of partner logos with even 24px gutters and 16px card radius when boxed. Use tertiary for captions.

### Compliance Badges
GDPR, CCPA, SOC 2 icons in a compact row; rely on border #13161f and 12px radius chips. Keep copy at body-md.

### Footer Mega Menu
Multi-column links with body-md, tertiary for low-emphasis items, and 24px column gaps. Section headers set in headline-xs.

## Do's and Don'ts

- Do keep primary copy at 18px and headings at the prescribed sizes for readability on #050608.
- Do reserve #5e5dee for active states, highlights, and small UI elements; overusing it reduces its impact.
- Do rely on #13161f borders and tone shifts before adding shadows; use only the small shadow when elements float.
- Don't mix 12px and 16px radii within the same component cluster.
- Don't introduce additional accent colors; pair #5e5dee with #b4acf4 only.
- Don't reduce button height below 42px; the rounded silhouette and tap target are part of the system's feel.

## Agent Prompt Guide

Quick color reference
- Text: #dee1ea
- Background: #050608
- Border: #13161f
- Accent: #5e5dee

1) Build a hero with dual CTAs
- Background #050608. H1 set in Inter (or Manrope/Plus Jakarta Sans) at 48px, weight 500, letter-spacing -0.02em, color #dee1ea. Body copy 18px/1.56, color #b2b8cd. Primary button 42px tall, 10px×16px padding, radius 12px, background #ffffff, text #101219. Secondary button 42px tall, radius 12px, text #ffffff on transparent with a 1px border #13161f. Gap between buttons 14px. Section padding top/bottom 80px.

2) Create a five-pill section switcher
- Row on #050608 with 24px horizontal gaps and 14px vertical padding. Each pill uses 12px radius, text 18px, default text color #b2b8cd, active text #dee1ea with a 1px border #13161f. Use accent #5e5dee for the active indicator dot.

3) Product preview card with overlay widget
- Base card: background #050608, radius 16px, padding 40px, border 1px #13161f. Overlay widget uses the small shadow token (rgba(0,0,0,0.1) 0 20px 25px -5px, rgba(0,0,0,0.1) 0 8px 10px -6px), radius 16px. Text #dee1ea; helper text #b2b8cd.

4) Four-up stats band
- Container padding 80px vertical. Each stat uses headline-sm at 29px for the number in #dee1ea, label in 18px #b2b8cd. Columns separated by 32px with 1px dividers #13161f on large screens.

5) Footer mega menu
- Background #050608. Section headers headline-xs 23px #dee1ea. Links body-md 18px #b2b8cd with hover color #dee1ea. Column gaps 24px, group spacing 32px, outer padding 80px.

## Similar Brands

- Intercom — Dark surfaces with restrained purple accents; Intercom is airier and uses larger illustrations.
- Linear — Precision dark UI and disciplined typography; Linear leans more monochrome and denser spacing.
- Vercel — Black canvas, minimal chrome, subtle borders; Vercel is more technical and sparse in marketing copy.
- Raycast — High-contrast dark aesthetic with glowing purples; Raycast pushes the glow motif harder, while Featurebase keeps it utilitarian.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #dee1ea;
  --color-secondary: #5e5dee;
  --color-tertiary: #b2b8cd;
  --color-neutral: #050608;
  --color-border: #13161f;
  --color-brand-winterspring-lilac: #b4acf4;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 48px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.38;
  --text-headline-lg-tracking: -0.02em;
  --text-headline-md-size: 38px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.21;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.56;
  --font-inter-f367f3: "__Inter_f367f3";

  /* Rounded */
  --radius-sm: 12px;
  --radius-md: 16px;

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

  /* Components */
  --button-primary-background-color: #ffffff;
  --button-primary-text-color: #101219;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 10px 16px;
  --button-primary-height: 42px;
  --button-secondary-text-color: #ffffff;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 10px 16px;
  --button-secondary-height: 42px;
  --button-link-text-color: var(--color-tertiary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: #000000;
  --card-rounded: var(--radius-md);
  --card-padding: 40px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #dee1ea;
  --color-secondary: #5e5dee;
  --color-tertiary: #b2b8cd;
  --color-neutral: #050608;
  --color-border: #13161f;
  --color-brand-winterspring-lilac: #b4acf4;
  --color-surface: #050608;
  --color-on-surface: #dee1ea;
  --font-headline-lg: "__Inter_f367f3";
  --font-headline-md: "__Inter_f367f3";
  --font-headline-sm: "__Inter_f367f3";
  --font-headline-xs: "__Inter_f367f3";
  --font-body-md: "__Inter_f367f3";
  --text-headline-lg: 48px;
  --text-headline-md: 38px;
  --text-headline-sm: 29px;
  --text-headline-xs: 23px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.02em;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 12px;
  --radius-md: 16px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 80px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.871,
                    0.882,
                    0.918
                ],
                "hex": "#dee1ea"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.369,
                    0.365,
                    0.933
                ],
                "hex": "#5e5dee"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.698,
                    0.722,
                    0.804
                ],
                "hex": "#b2b8cd"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.02,
                    0.024,
                    0.031
                ],
                "hex": "#050608"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.075,
                    0.086,
                    0.122
                ],
                "hex": "#13161f"
            }
        },
        "brand-winterspring-lilac": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.706,
                    0.675,
                    0.957
                ],
                "hex": "#b4acf4"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.02,
                    0.024,
                    0.031
                ],
                "hex": "#050608"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.871,
                    0.882,
                    0.918
                ],
                "hex": "#dee1ea"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 32,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.02,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 38,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "__Inter_f367f3",
                "fontSize": {
                    "value": 18,
                    "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 Featurebase**, 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