Skip to content
DesignMunkDesignMunk Submit a site

GetProven Blog

getproven.com
Help your portfolio buy better — and sell more.
Finance Fintech Astro Tailwind Webflow Blog Cabinetgrotesk Inter
Share Visit site
getproven.com DESKTOP · 1440
GetProven Blog

AI Breakdown

Design export

# Design brief: the GetProven 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/10171236/getproven-com-blog-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/10171236/getproven-com-blog-featured.webp
- On DesignMunk: https://designmunk.com/getproven-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

# GetProven: Dotted Underlines on a Soft-Grid Blog Hero

## Overview

GetProven's UI is direct and publication-oriented: confident headlines, highly readable body copy, and restrained color with green accents derived from the brand. It supports a finance/enterprise audience, so tone skews professional rather than playful. Spacing is generous and line lengths are comfortable, aiming for clarity over flair. When tokens don't dictate a choice, prefer calm surfaces, strong typographic hierarchy, and one clearly distinguished primary action.

## Colors

- **primary (#000000):** Core ink for headlines, links, and UI text.
- **secondary (#141c24):** Deep slate for strong subheads, emphasized labels, or dark overlays.
- **neutral (#ffffff):** Paper-white background for pages, cards, and modals.
- **border (#e5e7eb):** Subtle dividers, card borders, input strokes, and table lines.
- **brand-blue-green (#107e6e):** Primary accent for CTAs, badges, and key highlights.
- **brand-holiday (#81bcb4):** Lighter accent for secondary emphasis, tags, and hover states.
- **brand-hushed-green (#c7e1dd):** Tinted surfaces for panels, info banners, or soft button fills.
- **surface ({colors.neutral}):** Default surface color; aliases the neutral token.
- **on-surface ({colors.primary}):** Default text color on surfaces; aliases the primary token.

## Typography

- Headlines (Cabinetgrotesk 500): headline-lg 52px/1.08 and headline-md 48px/1.17 provide the distinctive voice for hero copy and section intros. Availability: custom/self-hosted; not freely available to load via Google. Substitutes with similar geometry and tone: Manrope (Google), Outfit (Google), Plus Jakarta Sans (Google).
- Subheads & overlays (Inter 500): headline-sm 20px/1.2 and headline-xs 18px/1.22 handle card titles, image overlays, and small section headings. Availability: Google; can be loaded directly.
- Body (Inter 400): body-md 16px with a tall 2.0 line-height for readable long-form content, captions, and UI descriptions. Keep paragraph spacing consistent with the spacing scale rather than empty lines.

## Layout

- Spacing scale: xs 10, sm 20, md 32, lg 48, xl 96. Use md (32) as the default gap between cards and blocks; lg (48) for section padding; xl (96) for major page bands.
- A two-column content grid suits article lists; promote a featured item by spanning both columns at the top when needed.
- Internal component padding is compact (16px in cards) to keep density efficient while preserving the generous line-height of body text.
- Maintain consistent outer gutters using sm (20) or md (32) based on viewport width.

## Elevation & Depth

- Depth relies on soft, cinematic shadows: sm (rgba(22, 30, 36, 0.05) 0 15px 80px) for subtle lift on images and panels; md adds a crisper inner layer for cards.
- Larger tiers are intentionally none; hierarchy is completed by borders (#e5e7eb), tonal panels, and whitespace rather than heavy drop shadows.
- Use borders to separate dense lists; reserve shadows for interactive or focus elements.

## Shapes

- Radii: sm 4px for inputs/pills, md 8px for cards and thumbnails, lg 10px for primary buttons and hero CTAs.
- Zero-radius is link-like and should be used only where the design intentionally removes button affordance (button-link).
- Consistent, small radii communicate enterprise credibility while staying contemporary.

## Components

- Buttons
  - Primary: text color #000000, 10px radius, 56px height, 16x24 padding. Apply a branded fill using brand-hushed-green (#c7e1dd) or brand-blue-green (#107e6e) as context requires; ensure contrast with black text.
  - Secondary: text color #000000, 4px radius, 56px height, 16x24 padding. Often sits on a neutral surface with a #e5e7eb border.
  - Link: text color #000000, 0px radius; use for inline actions like "Read more →".
- Card: white background, black text, 8px radius, 16px internal padding. Pair with the md shadow for featured items; sm for standard list cards.

Distinctive on this page:

### Blog Masthead
- Layout: two-column band with large headline at left and a featured image tile at right.
- Type: Cabinetgrotesk headline-lg (52/1.08). Body or strapline in Inter body-md.
- Accents: selective underline for emphasis; keep to one or two key phrases per paragraph.

### Featured Post Tile
- Card with image background, md shadow, md radius (8px). Headline set in Inter headline-sm (20/1.2) reversed over the image.

### Article Card
- 8px radius, 16px padding, md shadow. Title in Inter headline-sm (20/1.2); snippet in Inter body-md. Include a bottom-aligned "Read more →" link using button-link.

### Date Badge
- Small pill placed above titles. Use Inter headline-xs (18/1.22) with a soft accent fill (brand-holiday #81bcb4 or brand-hushed-green #c7e1dd) and on-surface text.

### Top Navigation with Dual CTAs
- Left-aligned logo; right-aligned actions using the button-primary (10px radius) and button-secondary (4px) patterns.

### Footer Link Columns
- Multi-column list using body-md (16/2) and border dividers (#e5e7eb). Keep column gaps at md (32) or lg (48).

## Do's and Don'ts

- Do keep body text at 16px with 2.0 line-height; tighten only for dense UI, not long reads.
- Do use md (32px) gaps between cards and lg (48px) for section padding to maintain rhythm.
- Do limit accent usage to the green family (#107e6e, #81bcb4, #c7e1dd); introducing new hues weakens the system.
- Don't mix multiple primary-looking CTAs in one viewport; designate one primary and one secondary.
- Don't apply heavy, dark shadows—use the measured sm or md tokens only.
- Don't round cards beyond 8px; larger radii feel off-brand.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #107e6e (brand-blue-green)

1) Build a blog masthead
- Container: full-width band on #ffffff with outer padding 48px.
- Left column: h1 in Cabinetgrotesk 52px, weight 500, line-height 1.08, color #000000. Supporting copy in Inter 16px/2.0, color #141c24.
- Right column: featured image in an 8px radius card with md shadow.

2) Create a 2-up article grid
- Grid gap 32px. Each card: background #ffffff, text #000000, radius 8px, padding 16px, shadow md.
- Title: Inter 20px/1.2 weight 500. Snippet: Inter 16px/2.0 weight 400. Add a bottom "Read more →" link styled as button-link (0px radius).

3) Primary and secondary CTAs
- Primary button: 56px height; padding 16px 24px; radius 10px; text color #000000; fill #c7e1dd (brand-hushed-green). Hover: darken fill slightly; keep text #000000.
- Secondary button: 56px height; padding 16px 24px; radius 4px; text #000000; background #ffffff with 1px border #e5e7eb.

4) Date badge pill
- Use Inter 18px/1.22, weight 500; text color #000000 on a rounded 4px capsule. Background #81bcb4. Apply horizontal padding 10px and top/bottom 4–6px.

## Similar Brands

- Brex: similarly crisp, editorial layouts with green accents; Brex pushes bolder gradients while Proven stays mostly neutral with soft tints.
- Mercury: minimal finance UI with generous whitespace; Mercury skews monochrome, Proven embraces green accents and dotted text emphasis.
- Carta: enterprise-ready typography and soft shadows; Carta's components are denser, while Proven keeps long-form reading comfort.
- Stripe Press: publication feel with strong typographic hierarchy; Stripe Press uses more photography and serif flourishes than Proven's pure sans pairing.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #000000;
  --color-secondary: #141c24;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-blue-green: #107e6e;
  --color-brand-holiday: #81bcb4;
  --color-brand-hushed-green: #c7e1dd;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 52px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.08;
  --text-headline-md-size: 48px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.17;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 2;
  --font-cabinetgrotesk: "Cabinetgrotesk";
  --font-inter: "Inter";

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

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

  /* Components */
  --button-primary-text-color: var(--color-primary);
  --button-primary-rounded: var(--radius-lg);
  --button-primary-padding: 16px 24px;
  --button-primary-height: 56px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 16px 24px;
  --button-secondary-height: 56px;
  --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-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #000000;
  --color-secondary: #141c24;
  --color-neutral: #ffffff;
  --color-border: #e5e7eb;
  --color-brand-blue-green: #107e6e;
  --color-brand-holiday: #81bcb4;
  --color-brand-hushed-green: #c7e1dd;
  --color-surface: #ffffff;
  --color-on-surface: #000000;
  --font-headline-lg: "Cabinetgrotesk";
  --font-headline-md: "Cabinetgrotesk";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 52px;
  --text-headline-md: 48px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --font-weight-headline-lg: 500;
  --font-weight-headline-md: 500;
  --font-weight-headline-sm: 500;
  --font-weight-headline-xs: 500;
  --font-weight-body-md: 400;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --spacing-xs: 10px;
  --spacing-sm: 20px;
  --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"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.078,
                    0.11,
                    0.141
                ],
                "hex": "#141c24"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.898,
                    0.906,
                    0.922
                ],
                "hex": "#e5e7eb"
            }
        },
        "brand-blue-green": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.063,
                    0.494,
                    0.431
                ],
                "hex": "#107e6e"
            }
        },
        "brand-holiday": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.506,
                    0.737,
                    0.706
                ],
                "hex": "#81bcb4"
            }
        },
        "brand-hushed-green": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.78,
                    0.882,
                    0.867
                ],
                "hex": "#c7e1dd"
            }
        },
        "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": 10,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 20,
                "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": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Cabinetgrotesk",
                "fontSize": {
                    "value": 52,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Cabinetgrotesk",
                "fontSize": {
                    "value": 48,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "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 GetProven Blog**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse Finance →
billow.so
Billow Finance
Billow
getnick.ai
NickAI AI
NickAI
rekordsoftware.com
Rekord Finance
Rekord
orderx.com
OrderX AI
OrderX