Skip to content
DesignMunkDesignMunk Submit a site

Userbrain

userbrain.com
User testing used to take weeks. Now you’re done in hours.
Software Technology Gatsby Homepage Avenir Next LTPro
Share Visit site
userbrain.com DESKTOP · 1440
Userbrain

AI Breakdown

Design export

---
version: alpha
name: Userbrain
description: User testing used to take weeks. Now you’re done in hours.
colors:
  primary: "#0a0a2d"
  secondary: "#14e2ac"
  tertiary: "#0074c2"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: AvenirNextLTPro
    fontSize: 39px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.01em
  headline-md:
    fontFamily: AvenirNextLTPro
    fontSize: 33px
    fontWeight: 600
    lineHeight: 1.27
  headline-sm:
    fontFamily: AvenirNextLTPro
    fontSize: 27px
    fontWeight: 600
    lineHeight: 1.19
  headline-xs:
    fontFamily: AvenirNextLTPro
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: AvenirNextLTPro
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.53
rounded:
  sm: 8px
  md: 10.6px
spacing:
  xs: 8px
  sm: 20px
  md: 32px
  lg: 40px
  xl: 74px
components:
  button-primary:
    backgroundColor: "#fff4f0"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 16px 32px
    height: 58px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "#42425a"
    rounded: "{rounded.md}"
    padding: 16px 32px
    height: 58px
  button-link:
    textColor: "#42425a"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Userbrain: Mint Inline Highlights Over Deep Navy Headlines

## Overview

Userbrain's UI is calm, confident, and efficiency-oriented. Deep navy type on light surfaces communicates credibility, while mint accents call attention to key phrases and actions. Spacing is moderate-to-roomy, favoring scannability over density. The tone should feel professional yet approachable—research-minded rather than salesy—so defaults lean to text-first layouts with restrained color.

## Colors

- Primary (#0a0a2d): Deep navy for headlines, long-form text, and critical UI labels.
- Secondary (#14e2ac): Mint accent for highlights, chips, and key emphasis within copy.
- Tertiary (#0074c2): Blue accent for links, secondary CTAs, and illustrative UI states.
- Neutral (#ffffff): Base surface for pages, cards, and inputs.
- Border (#e5e7eb): Subtle dividers, card outlines, and grid separators.
- Surface (#ffffff): Alias of Neutral; use for panels and sections.
- On-surface (#0a0a2d): Text color on white/neutral surfaces; pairs with Surface for maximum readability.

## Typography

All text styles use AvenirNextLTPro at defined sizes and weights. This family is proprietary/self-hosted (font_sources provides no hosted source), so agents should substitute comparable, obtainable faces:
- Primary family (proprietary): AvenirNextLTPro across headline-lg 39px/700, headline-md 33px/600, headline-sm 27px/600, headline-xs 23px/600, and body-md 19px/500.
- Recommended substitutes (Google Fonts): Inter (closest general-purpose workhorse), Source Sans 3 (humanist alternative), or Rubik (slightly rounded, similar warmth). Suggested stack: Inter, "Helvetica Neue", Arial, sans-serif.
Use generous letterspacing only where specified (e.g., headline-lg -0.01em). Keep body at 19px for comfortable reading and pair with 1.53 line height for mixed-length paragraphs.

## Layout

Spacing follows an 8px base with pragmatic jumps: 8, 20, 32, 40, 74. Use 32–40px gutters for multi-column sections and 74px for section breaks on desktop. Cards and feature blocks pad at 16px internally. A simple responsive grid works well: single column on small screens, two or three columns on larger screens using md (32px) gaps. Maintain consistent vertical rhythm by stacking content in increments of 8/20/32.

## Elevation & Depth

Depth is restrained. Small and medium shadows add lift for floating elements and popovers (sm/md shadows provided), while larger elevations are intentionally absent. Most hierarchy comes from contrast (navy on white), spacing (xl section breaks), and thin borders (#e5e7eb). Reserve shadows for interactive or focus-requiring elements rather than every card.

## Shapes

Two radii establish the shape language: sm 8px for cards and small chips; md 10.6px for buttons and larger interactive surfaces. The slightly larger, rounded button corner softens CTAs without reading as a pill. Maintain consistency—avoid introducing additional radii or circular shapes unless explicitly needed for icons or avatars.

## Components

Buttons are medium-height (58px) with generous horizontal padding (16px 32px) and md corners.
- Button—Primary: background #fff4f0, text #ffffff, rounded 10.6px, 58px tall. Use for the main action per section.
- Button—Secondary: background #ffffff, text #42425a, rounded 10.6px, 58px tall. Works on tinted or image surfaces.
- Button—Link: text #42425a, no radius; use for tertiary actions inline with body text.
- Card: white background, primary text, sm radius 8px, 16px internal padding; add Border #e5e7eb as needed.

### Hero Headline Highlight
Inline emphasis around key words (e.g., "UX problems") using Secondary (#14e2ac) as a soft block behind text. Apply sm 8px radius and xs (8px) horizontal inset so the highlight reads as a tag rather than a banner.

### Top Navigation Bar
Single-row nav with logo left, links center, and a right-aligned CTA. Use body-md (19px) for links, primary text color, and the button-primary spec for the CTA. Spacing sm (20px) between items.

### Logo Strip
A horizontally centered row of grayscale client logos under the hero. Use Border (#e5e7eb) for optional separators and md (32px) vertical spacing above and below.

### Numbered Steps Grid
Three columns explaining the workflow. Headings in headline-sm (27px/600), body-md for details, and numbers styled prominently. Cards may reuse the Card spec with md (32px) gaps.

### Feature Split Cards
Two-up feature blocks (e.g., "Get automated reports" and "Share your findings") with headline-xs (23px/600) and supporting copy. Use Card with sm radius, 16px padding, and md gaps.

### Completion Speed Stats
A metric panel communicating 24-hour completion rates. Set the lead statement in headline-md (33px/600) and list percentages using body-md with Secondary for emphasis.

### Testimonial Quotes
Block quotes with bold first sentence and attribution below. Primary text color on white; wrap in Card where isolation is needed. Keep md (32px) vertical spacing between quotes.

## Do's and Don'ts

- Do set all long-form text in Primary (#0a0a2d) on white surfaces for optimal readability; reserve Secondary (#14e2ac) for emphasis and highlights.
- Do keep buttons at 58px height with 16px × 32px padding and md (10.6px) radius for consistency across breakpoints.
- Do use sm/md shadows sparingly; when in doubt, separate sections with Border (#e5e7eb) and whitespace rather than heavy elevation.
- Don't introduce new radii or off-scale spacing; stick to 8, 20, 32, 40, and 74px increments.
- Don't flood entire sections with Secondary; it works best as a small, high-contrast accent or inline highlight.
- Don't downgrade hierarchy by mixing link-style actions beside primary buttons; prefer one clear primary per section.

## Agent Prompt Guide

Quick reference: text #0a0a2d, background #ffffff, border #e5e7eb, accent #14e2ac (alt accent #0074c2).

1) Build the hero
- Use Inter (AvenirNextLTPro substitute) for all text: headline-lg 39px/700 (-0.01em letter-spacing) and body-md 19px/500.
- Left column: heading "Find UX problems..." with an inline highlight behind the words "UX problems" using #14e2ac, 8px radius, and 8px horizontal inset.
- Primary CTA uses: background #fff4f0, text #ffffff, height 58px, padding 16px 32px, radius 10.6px.
- Page background #ffffff; text color #0a0a2d.

2) Create a three-step grid
- Container uses 32px gaps; each item is a Card (#ffffff background, 8px radius, 16px padding, optional 1px border #e5e7eb).
- Step titles: headline-sm 27px/600; descriptions: body-md 19px/500.
- Add a small number marker styled in Primary to the left/top of each card.

3) Feature split section
- Two columns with 32–40px gutter on desktop, stacked on mobile.
- Each feature block uses headline-xs 23px/600 and body-md 19px/500.
- Insert a link-style action using text color #42425a (button-link) after each paragraph.

4) Testimonial block
- Use a centered layout with 40px vertical padding.
- Quote text in body-md 19px/500, open with a bolded first sentence; attribution on a new line.
- Wrap each quote in a Card (8px radius, 16px padding) with optional sm shadow for lift.

5) Footer with newsletter
- Four link columns set in body-md 19px/500 with 32px column gaps.
- Newsletter input row on white, bordered with #e5e7eb; CTA reuses the primary button spec (58px, 16×32, 10.6px).

## Similar Brands

- UserTesting: Similar research-first messaging and trust rows; Userbrain's mint highlight and softer surfaces feel friendlier and less enterprise-heavy.
- Lyssna (UsabilityHub): Shares calm typography and simple grids; Lyssna skews brighter with more saturated accents.
- Maze: Comparable focus on speed and AI insights; Maze uses darker sections and denser graphic motifs than Userbrain's lighter, text-led approach.
- Lookback: Also research-focused with understated UI; Lookback leans more technical in tone and fewer inline highlight cues than Userbrain.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 42 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 42 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago