Skip to content
DesignMunkDesignMunk Submit a site

Humblytics

humblytics.com
Revenue-based analytics and A/B testing with Stripe-verified results.
AI Analytics Next.js Tailwind Homepage Inter
Share Visit site
humblytics.com DESKTOP · 1440
Humblytics

AI Breakdown

Design export

# Design brief: the Humblytics 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/07090844/humblytics-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07090844/humblytics-com-featured.webp
- On DesignMunk: https://designmunk.com/humblytics/

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

# Humblytics: Red-Orange CTAs Tie Proof to Action

## Overview

Revenue-first marketing site for an analytics and testing platform. Tone is confident and practical, aimed at growth teams and agencies. The UI should feel brisk and factual: warm canvas, sharp text, and a single assertive accent guiding actions. Density is moderate—ample section padding with compact components and succinct copy.

## Colors

- **primary (#0c0a09):** Near-black for headlines, body text, and icons.
- **secondary (#fc7c04):** Bright orange for supportive accents, small tags, and non-primary emphasis.
- **tertiary (#df4000):** Red-orange for primary actions, highlights (e.g., the "revenue" badge), and key charts.
- **neutral (#fcfaf8):** Warm site background used as the main canvas.
- **brand-amber-dawn (#f9bc76):** Soft amber for gentle highlights, ranges, or empty states.
- **surface ({colors.neutral} -> #fcfaf8):** Section backgrounds where a tonal step from white is needed.
- **on-surface ({colors.primary} -> #0c0a09):** Default text color placed on surface tones.

## Typography

Inter is the sole family across headings and body. It is freely available on Google Fonts and may be loaded directly; recommended fallbacks include system-ui, Helvetica Neue, Arial. Levels:
- Headline LG: 46px, 500, -0.045em, 1.2 for hero statements.
- Headline MD: 37px, 500, -0.039em, 1.07 for section intros.
- Headline SM: 29px, 500, -0.006em, 1.21 for feature blocks and card titles.
- Headline XS: 23px, 500, 1.22 for subheads and pricing labels.
- Body MD: 18px, 400, 1.6 for paragraphs, lists, and FAQs.

## Layout

Spacing scale progresses 6 → 14 → 24 → 40 → 80px. Use 80px for section top/bottom padding, 40px for intra-section group gaps, 24px for card gutters and stack spacing, 14px for inline gaps, and 6px for micro-alignments. Content typically centers in a single column with optional two-column splits for features and pricing cards. Cards sit on white within the warm canvas to form natural keylines without borders.

## Elevation & Depth

Shadows are minimal: only a small, soft sm shadow is used on key mockups or floating elements. Most hierarchy comes from tonal contrast (white cards on #fcfaf8), whitespace, and the assertive accent color. Avoid heavy drop shadows; prefer tonal steps and spacing to separate regions.

## Shapes

Two radii define the language: 4px (buttons, chips) for utilitarian controls and 6px (cards, screenshots) for containers. The small rounding keeps components crisp while softening edges enough for the warm palette.

## Components

Buttons and card are standardized:
- Primary Button: #df4000 background, #fff7ed text, 36px height, 0 12px padding, 4px radius.
- Secondary Button: #ffffff background, #2a1e1a text, 36px height, 0 12px padding, 4px radius. Add a subtle 1px keyline only when needed against white cards.
- Link Button: #df4000 text, no radius.
- Card: #ffffff background, #0c0a09 text, 6px radius, 16px padding.

Distinctive page components:

### Header Navigation
Compact top bar with left logo and right-aligned links plus two CTAs (Login as secondary, Start free trial as primary). Use 14px gaps between items.

### Hero with Revenue Badge
Headline LG at 46px centered; highlight a key word in an inline badge using #df4000 background and #fff7ed text. Stack: headline → 24px gap → body → 24px gap → primary/secondary buttons.

### Testimonial KPI Chips
Small avatar/initial + short stat line. Set in Body MD with bolded metric; use 14px gaps and keep width constrained.

### Product Screenshot Frame
A wide card wrapping an app screenshot; apply the sm shadow and 6px radius on white over #fcfaf8 to read as a framed proof block.

### Feature Step Cards (01–04)
Grid of four steps (Behavior, Journeys, Testing, Revenue). Use Headline SM for titles, 24px internal spacing, optional thin top rule or accent dot in #df4000.

### MCP Agent Console
A card showing commands and results for Claude/Codex. Use Body MD, 16px padding, and a subtle tonal row structure; primary CTA sits to the right as a small action.

### Pricing Plan Cards
Two cards (Business, Scale). Headline XS for plan names, big price figure set with Headline SM. Primary buttons are prominent; use 24px internal spacing and 40px gaps between cards.

### FAQ Accordion
Stacked items using Body MD for questions/answers; 24px vertical rhythm and 6px radii if placed on separate cards.

## Do's and Don'ts

- Do reserve #df4000 for primary CTAs and key proof highlights; avoid using it for ordinary links or labels.
- Do place cards on #fcfaf8 and keep explicit borders off unless white sits on white.
- Do use Inter 500 for all headlines and Inter 400 for body; avoid mixed weights within a single headline.
- Do keep section paddings at 80px and inner group gaps at 40px for consistent rhythm.
- Don't introduce larger radii; buttons stay 4px and containers 6px.
- Don't stack two secondary (white) buttons without a keyline on a white card—use the accent or add a divider first.

## Agent Prompt Guide

Quick color reference:
- Text: #0c0a09
- Background: #fcfaf8
- Border: #ffffff on neutral surfaces; #fcfaf8 on white
- Accent (CTA): #df4000

1) Build the hero
- Canvas: #fcfaf8. Center a 960px wrapper with 80px top/bottom padding.
- H1: Inter, 46px, 500, letter-spacing -0.045em, line-height 1.2, color #0c0a09. Wrap one keyword in an inline badge: background #df4000, text #fff7ed, 4px radius, 6px vertical/12px horizontal padding.
- Body: Inter 18px/1.6, color #0c0a09, 24px gap below heading.
- Buttons: Primary (#df4000 bg, #fff7ed text, 36px height, 0 12px, 4px radius). Secondary (#ffffff bg, #2a1e1a text, same size). 14px gap between.

2) Feature steps (4-up)
- Section padding: 80px. Grid: 4 columns, 24px gutters.
- Card: #ffffff, 6px radius, 16px padding, no border. Title: Inter 29px, 500 (Headline SM). Body: Inter 18px/1.6. Add a 2px top accent rule in #df4000.

3) Pricing cards
- Two cards in a 2-column grid with 40px gap.
- Card style: #ffffff, 6px radius, 16px padding, optional sm shadow on hover.
- Plan name: Inter 23px, 500. Price: Inter 37px, 500. Features: Body MD. Primary CTA uses #df4000, 36px height.

4) Screenshot proof block
- Wrapper: white card (6px radius) on #fcfaf8 with the measured small shadow.
- Caption row: Inter 18px/1.6, #0c0a09; accent chips in #fc7c04 if needed.
- Maintain 24px spacing around the image.

## Similar Brands

- Mixpanel — Analytics marketing that pairs a neutral canvas with bold accents; Humblytics is warmer and more CTA-driven.
- PostHog — Product analytics with proof-first sections; Humblytics uses a stronger single accent and less illustration.
- VWO — Optimization platform with KPI-led storytelling; Humblytics feels leaner with smaller radii and a warmer background tone.
- Stripe — Proof-oriented product site with clean cards; Humblytics borrows the rigor but leans into a red-orange action color instead of purple/blue.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #0c0a09;
  --color-secondary: #fc7c04;
  --color-tertiary: #df4000;
  --color-neutral: #fcfaf8;
  --color-brand-amber-dawn: #f9bc76;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 46px;
  --text-headline-lg-weight: 500;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.045em;
  --text-headline-md-size: 37px;
  --text-headline-md-weight: 500;
  --text-headline-md-leading: 1.07;
  --text-headline-md-tracking: -0.039em;
  --text-headline-sm-size: 29px;
  --text-headline-sm-weight: 500;
  --text-headline-sm-leading: 1.21;
  --text-headline-sm-tracking: -0.006em;
  --text-headline-xs-size: 23px;
  --text-headline-xs-weight: 500;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.6;
  --font-inter: "Inter";

  /* Rounded */
  --radius-sm: 4px;
  --radius-md: 6px;

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

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #fff7ed;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 0px 12px;
  --button-primary-height: 36px;
  --button-secondary-background-color: #ffffff;
  --button-secondary-text-color: #2a1e1a;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 0px 12px;
  --button-secondary-height: 36px;
  --button-link-text-color: var(--color-tertiary);
  --button-link-rounded: 0px;
  --card-background-color: #ffffff;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #0c0a09;
  --color-secondary: #fc7c04;
  --color-tertiary: #df4000;
  --color-neutral: #fcfaf8;
  --color-brand-amber-dawn: #f9bc76;
  --color-surface: #fcfaf8;
  --color-on-surface: #0c0a09;
  --font-headline-lg: "Inter";
  --font-headline-md: "Inter";
  --font-headline-sm: "Inter";
  --font-headline-xs: "Inter";
  --font-body-md: "Inter";
  --text-headline-lg: 46px;
  --text-headline-md: 37px;
  --text-headline-sm: 29px;
  --text-headline-xs: 23px;
  --text-body-md: 18px;
  --tracking-headline-lg: -0.045em;
  --tracking-headline-md: -0.039em;
  --tracking-headline-sm: -0.006em;
  --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: 6px;
  --spacing-xs: 6px;
  --spacing-sm: 14px;
  --spacing-md: 24px;
  --spacing-lg: 40px;
  --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.047,
                    0.039,
                    0.035
                ],
                "hex": "#0c0a09"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.486,
                    0.016
                ],
                "hex": "#fc7c04"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.875,
                    0.251,
                    0
                ],
                "hex": "#df4000"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.98,
                    0.973
                ],
                "hex": "#fcfaf8"
            }
        },
        "brand-amber-dawn": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.976,
                    0.737,
                    0.463
                ],
                "hex": "#f9bc76"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.98,
                    0.973
                ],
                "hex": "#fcfaf8"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.047,
                    0.039,
                    0.035
                ],
                "hex": "#0c0a09"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 14,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 40,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 80,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 46,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.045,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 37,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.039,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 29,
                    "unit": "px"
                },
                "fontWeight": 500,
                "letterSpacing": {
                    "value": -0.006,
                    "unit": "em"
                }
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "fontSize": {
                    "value": 23,
                    "unit": "px"
                },
                "fontWeight": 500
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Inter",
                "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 Humblytics**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears