Skip to content
DesignMunkDesignMunk Submit a site

Measured

measuredhq.com
The modern wirehouse for independents
Finance Fintech Webflow Homepage Inter
Share Visit site
measuredhq.com DESKTOP · 1440
Measured

AI Breakdown

Design export

---
version: alpha
name: Measured
description: The modern wirehouse for independents
colors:
  primary: "#000000"
  secondary: "#092318"
  tertiary: "#0c422b"
  neutral: "#f2f0f0"
  brand-dover-grey: "#848484"
  brand-rainy-grey: "#a4a4a4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.4
  headline-xs:
    fontFamily: system-ui
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.69
rounded:
  sm: 4px
  md: 8px
  lg: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 96px
components:
  button-primary:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 12px 24px
    height: 50px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Measured: Sunlit Hero Framed by Evergreen Finance Bands

## Overview

Measured uses a restrained, advisor-facing tone: confident, minimal, and trustworthy. The UI should feel serious but not stuffy—calm typography, spacious sections, and deep evergreen accents. Default surfaces are light and quiet; emphasis comes from dark bands and clear CTAs. When tokens don't cover a case, bias toward clarity, ample whitespace, and high contrast.

## Colors

- primary (#000000): Core text and icons; use for headings and body on light surfaces.
- secondary (#092318): Evergreen emphasis for dark sections, footers, and strong accents.
- tertiary (#0c422b): Supporting green accent for hovers, highlights, or secondary emphasis.
- neutral (#f2f0f0): Off-white canvas for page and content blocks.
- brand-dover-grey (#848484): Secondary text on light surfaces; metadata and captions.
- brand-rainy-grey (#a4a4a4): Subtle dividers, borders, and disabled states.
- surface (#f2f0f0): Section and card backgrounds on light mode.
- on-surface (#000000): Text color when placed on the surface token.

## Typography

- Inter (google): Primary family for all headlines and body. Freely available via Google Fonts. Suitable substitutes with similar x-height and neutrality: Roboto (google), Fira Sans (google), Ubuntu (google).
- system-ui: Used for headline-xs. Comes from the platform; no external load required. If consistency is preferred, replace with Inter. Other viable system-adjacent fallbacks: Segoe UI (Windows), San Francisco (Apple platforms).
- headline-lg — Inter 52px/1.2, 500: Hero statements and top-level marketing headlines.
- headline-md — Inter 44px/1.2, 500: Section intros and key value props.
- headline-sm — Inter 24px/1.4, 500: Feature titles and FAQ questions.
- headline-xs — system-ui 18px/1.22, 500: Pill labels, minor section leads, and small callouts.
- body-md — Inter 16px/1.69, 400: All paragraph copy, disclaimers, and FAQ answers.

## Layout

An 8-point spacing scale governs rhythm: 8, 16, 32, 64, 96px. Use md (32px) for intra-component padding, lg (64px) between stacked blocks, and xl (96px) for section breaks. Content tends to center with generous outer padding on large screens; feature lists can switch to a simple two- or three-column grid as space allows. Keep copy widths comfortable and prioritize vertical breathing room over dense packing.

## Elevation & Depth

Shadows are minimal: only sm is defined (subtle two-layer shadow) and should be used sparingly for floating elements. Most hierarchy is achieved through color blocks (#092318 vs. #f2f0f0), type scale, and whitespace. When separation is needed without depth, prefer thin borders in #a4a4a4 or tonal contrast over heavier shadows.

## Shapes

Radii form a clear language: sm 4px for small controls, md 8px for cards and inputs, lg 12px for primary CTAs and hero buttons. Roundness signals interactivity and priority—larger radius implies higher emphasis.

## Components

- Button — primary: #ffffff background, #000000 text, 12px radius, 12x24 padding, 50px height. Use on dark or colored surfaces for maximum contrast.
- Button — secondary: #000000 text, 4px radius, 12x24 padding, 50px height. Use on light surfaces when a quiet action is needed; background is context-driven.
- Button — link: #000000 text, 0px radius. Inline actions inside paragraphs or cards.
- Card: #f2f0f0 background, #000000 text, 8px radius, 16px padding. Use for grouped content and use-case panels.

Distinctive components on this page:
### Hero masthead
- Centered copy over photography. headline-lg 52px/500, body-md 16px. Primary CTA button at lg radius 12px; place over a darkened image for legibility.
### Evergreen intro band
- Full-width section using secondary #092318 with text on neutral #f2f0f0. Headline uses headline-md 44px; supporting line in body-md 16px with spacious 64–96px vertical padding.
### Feature list grid
- Six items in a responsive grid. Each item title uses headline-sm 24px/500; copy in body-md 16px. Use md (32px) gap; optional subtle dividers in #a4a4a4.
### Use-case split cards
- Two side-by-side cards (New lines / Refinance). Card token values: #f2f0f0 background, 8px radius, 16px padding; "Learn More" as button-link.
### FAQ accordion
- Question set in headline-sm 24px with caret affordance; answers in body-md 16px. Use borders in #a4a4a4 and 32px vertical spacing.
### Partner CTA strip
- Dark section near footer using #092318, headline-md 44px, a single prominent CTA (button-primary works well on the dark background).

## Do's and Don'ts

- Do use #092318 for emphasis sections and pair it with #f2f0f0 text for accessible contrast.
- Do reserve headline-lg (52px/500) for the main hero only; step down to 44px for subsequent intros.
- Do space sections with 64–96px to keep long finance copy readable.
- Don't apply heavy shadows; use the sm shadow only for rare floating elements.
- Don't mix multiple button styles in the same region; choose one primary action per section.
- Don't place grey text (#848484 or #a4a4a4) on the dark green backgrounds; use #f2f0f0 instead.

## Agent Prompt Guide

Quick color reference: text #000000, background #f2f0f0, border #a4a4a4, accent #092318.

1) Build a hero masthead with centered copy over an image. Use Inter 52px/500 for the headline, Inter 16px/1.69 for subcopy. Primary CTA: background #ffffff, text #000000, radius 12px, padding 12px 24px, height 50px. Place content within a light overlay so text remains readable.

2) Create an evergreen intro band. Section background #092318, headline Inter 44px/500 in #f2f0f0, paragraph Inter 16px/1.69 in #f2f0f0 at 80% opacity. Vertical padding 96px top and bottom; center align.

3) Produce a six-item feature grid. Use a responsive 3-column layout with 32px gaps. Each item: title Inter 24px/500 in #000000, copy Inter 16px/1.69 in #000000. Optional card wrapper: background #f2f0f0, radius 8px, padding 16px, border 1px #a4a4a4.

4) Build a two-card use-case split. Each card: background #f2f0f0, text #000000, radius 8px, padding 32px. Add a button-link (#000000 text, 0px radius) labeled "Learn More". Maintain 64px gap between cards.

5) Implement an FAQ accordion. Question row: Inter 24px/500, 32px vertical padding, border-bottom 1px #a4a4a4. Answer: Inter 16px/1.69, 16px top padding. Only one item expanded by default.

## Similar Brands

- Plaid: Similarly austere fintech with restrained color; Plaid leans more on geometric patterns where Measured uses photographic warmth.
- Mercury: Dark green accents and spacious marketing pages; Mercury shows more product UI, while Measured stays conceptual.
- Brex: Clear Inter-driven typography and strong sections; Brex uses brighter highlights and heavier illustration.
- Wealthfront: Calm investment tone and generous spacing; more consumer-friendly palette versus Measured's deeper evergreen.
- Stripe Capital: Minimal copy blocks and disciplined type; Stripe's UI previews are more prominent than Measured's.

More like this

Browse Finance →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 6 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 7 days ago