Skip to content
DesignMunkDesignMunk Submit a site

Hyperline Pricing

hyperline.co
Billing and revenue management, reimagined for the AI era
Fintech Software Next.js Tailwind Pricing season Sans
Share Visit site
hyperline.co DESKTOP · 1440
Hyperline Pricing

AI Breakdown

Design export

---
version: alpha
name: Hyperline
description: Billing and revenue management, reimagined for the AI era
colors:
  primary: "#3d3833"
  secondary: "#29251f"
  tertiary: "#000000"
  neutral: "#fcfcfc"
  brand-berry-brown: "#554d4d"
  brand-shady-lady: "#9e9c9c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: seasonSans
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.01em
  headline-md:
    fontFamily: seasonSans
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.25
  headline-sm:
    fontFamily: seasonSans
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
  headline-xs:
    fontFamily: seasonSans
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: seasonSans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 2.03
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 14px
  md: 32px
  lg: 48px
  xl: 104px
components:
  button-primary:
    backgroundColor: "#2a2620"
    textColor: "#efede7"
    rounded: "{rounded.full}"
    padding: 11px 14px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 11px 14px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Hyperline: Three-Tier Pricing on a Warm, Smoky Backdrop

## Overview

Hyperline's UI is built for finance and operations teams comparing complex plans. The tone is professional, warm, and restrained—more ledger than billboard. Layouts prioritize scanability with modest headlines, generous line height, and repeated primary actions. Use neutral surfaces with deep brown text and minimal ornament; density comes from tables and lists, not from color.

## Colors

- **primary (#3d3833):** Deep espresso for headlines, body text, and icons.
- **secondary (#29251f):** Dark walnut for featured areas and header bands (e.g., highlighted plan).
- **tertiary (#000000):** Carbon black reserved for maximum-contrast elements and overlays.
- **neutral (#fcfcfc):** Porcelain base for pages and cards.
- **brand-berry-brown (#554d4d):** Muted brown accent for subtle emphasis, tags, and icon tints.
- **brand-shady-lady (#9e9c9c):** Fogged gray for secondary text, captions, and delicate dividers.
- **surface (#fcfcfc):** Default surface color for panels and tables.
- **on-surface (#3d3833):** Default ink on surfaces; pair with surface for high contrast.

## Typography

Season Sans is the primary family (custom/self-hosted). If you cannot load it, substitute Inter, Manrope, or Plus Jakarta Sans for similar x-height and neutral geometry.
- Headline LG (28px/1.25, 500, -0.01em): Page titles like "Pricing built for revenue speed."
- Headline MD (26px/1.25, 500): Section leaders such as "Modules you can add to any plan."
- Headline SM (20px/1.4, 500): Card headings and table group labels.
- Headline XS (18px/1.22, 500): Small section labels and badges.
- Body MD (16px/1.0 weight 500, line-height 2.03): All descriptive copy, lists, and table cells; the generous leading is intentional for long checklists.

## Layout

Spacing is stepwise and compact-to-roomy: 6, 14, 32, 48, 104px. Use 104px for section breaks, 48px for block spacing within sections, and 32px as the default grid gutter. Within cards, keep 16px padding (component token) and 14px vertical rhythm between items; 6px is for icon offsets and micro-gaps. A three-column grid presents plans at larger breakpoints, collapsing to a single column on small screens.

## Elevation & Depth

Depth is restrained. Only the small multi-stop shadow is used to lift cards or floating pills; larger elevations are none. Hierarchy relies on tonal steps (secondary vs surface), whitespace, and occasional borders or gray text (#9e9c9c). Prefer contrast and spacing over heavy shadows.

## Shapes

Corners speak hierarchy: cards and panels use sm radius at 8px; buttons and badges use full radius (9999px) for fast, friendly actions. Links styled as buttons stay square (0px) to read as text actions rather than primary controls.

## Components

Buttons and card use the supplied tokens.

### Button — Primary
- Background #2a2620, text #efede7, height 40px, padding 11px 14px, full radius. Use for the principal action per card or section.

### Button — Secondary
- Text only in primary ink (#3d3833), full radius, same sizing as primary. Use for low-emphasis actions near the primary.

### Button — Link
- Text-style action in #3d3833 with 0px radius. Avoid on dark backgrounds.

### Card
- Surface #fcfcfc, ink #3d3833, 8px radius, 16px padding, small shadow when lifted.

### Pricing Tier Card
- Three-up grid. Header: plan name in 20px; price line prominent; features as a checklist with 14px spacing. The featured (Growth) plan uses a darker header band in #29251f.

### "Most popular" Badge
- Neutral pill (#fcfcfc) with full radius and the small shadow; text in #3d3833. Center it above the featured card.

### Feature Checklist
- 16px body with 2.03 leading; check icons aligned to a 14px rhythm; secondary notes may use #9e9c9c.

### Add-on Module Tile
- Two-up cards linking to Accounts Receivable and Customer Intelligence. Use standard card styling with concise copy and a link action.

### Plan Comparison Table
- Surface #fcfcfc with group headers in 20px; body cells in 16px with ample vertical spacing. Use #9e9c9c for subtle dividers and unoffered states.

### Customer Logo Strip
- Low-contrast logos on a very light surface; keep spacing generous and avoid strong color.

### Bottom CTA Band
- Headline at 26–28px, supporting line in 16px, and a primary pill button (40px) aligned to the copy.

## Do's and Don'ts

- Do use #fcfcfc surfaces with #3d3833 ink for all primary reading experiences.
- Do reserve the #2a2620 primary button for one clear action per card or section.
- Do space lists at 14px and tables generously to preserve the 2.03 line-height feel.
- Don't introduce bright accent colors; use #554d4d or #9e9c9c for emphasis instead.
- Don't apply heavy shadows; stick to the provided small shadow when elevation is needed.
- Don't mix square and rounded corners on the same component—cards are 8px, actions are full-radius or text-link (0px).

## Agent Prompt Guide

Quick color reference — Text: #3d3833; Background: #fcfcfc; Border: #9e9c9c; Accent: #2a2620 (primary) or #554d4d (subtle).

1) Build a 3-column pricing grid
- Container background #fcfcfc, max-width your grid.
- Use Inter (fallback for Season Sans). H1 28px/1.25 weight 500; body 16px line-height 2.03.
- Each card: background #fcfcfc, color #3d3833, radius 8px, padding 16px, small shadow.
- Header text 20px/1.4, features in 16px with 14px gaps; primary button 40px high, 11px 14px, background #2a2620, text #efede7.
- Emphasize the middle plan with a header band in #29251f and a "Most popular" pill above it.

2) Create a "Most popular" badge
- Font Inter 14–16px, weight 500.
- Pill with background #fcfcfc, text #3d3833, full radius 9999px, apply the small shadow; place centered above the emphasized card.

3) Two add-on module tiles
- Two cards side by side: background #fcfcfc, text #3d3833, radius 8px, padding 16px, 32px gap between tiles.
- Headline 20px/1.4; body 16px/2.03; link action styled as button-link (text #3d3833, radius 0px).

4) Plan comparison table
- Table on #fcfcfc; section headers in 20px/1.4; cells in 16px/2.03.
- Use #9e9c9c for dividers and unavailable states; checkmarks and offered items in #3d3833.

5) Bottom CTA band
- Headline 26–28px/1.25, supporting copy 16px/2.03.
- Primary button: 40px tall, 11px 14px, full radius, background #2a2620, text #efede7.

## Similar Brands

- Stripe: similarly disciplined pricing tables; Stripe leans cool blues where Hyperline uses warm browns.
- Paddle: three-tier cards with soft emphasis; Paddle's typography is heavier and more promotional.
- Chargebee: comparable enterprise-oriented feature matrices; Chargebee uses brighter accents and more iconography.
- Ramp: calm neutrals and pill buttons; Ramp's aesthetic is greener and more contrast-forward.

More like this

Browse Fintech →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 31 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 · 31 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