Skip to content
DesignMunkDesignMunk Submit a site

Wrangle Pricing

wrangle.ai
Wrangle works the pipeline. Agents that never stop sourcing.
AI Software Next.js Tailwind Pricing
Share Visit site
wrangle.ai DESKTOP · 1440
Wrangle Pricing

AI Breakdown

Design export

---
version: alpha
name: Wrangle
description: Wrangle works the pipeline. Agents that never stop sourcing.
colors:
  primary: "#4a4a4a"
  secondary: "#171717"
  tertiary: "#5fc890"
  neutral: "#d6dbdc"
  brand-white: "#ffffff"
  brand-dracula-orchid: "#2c343c"
  brand-mountain-mint: "#a9e0c4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: ui-sans-serif
    fontSize: 62px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -0.03em
  headline-md:
    fontFamily: ui-sans-serif
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: ui-sans-serif
    fontSize: 31px
    fontWeight: 500
    lineHeight: 1.19
  headline-xs:
    fontFamily: ui-sans-serif
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.18
  body-md:
    fontFamily: ui-sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 64px
components:
  button-primary:
    backgroundColor: "#fcfcfc"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    height: 36px
  button-secondary:
    textColor: "#7b7b7b"
    rounded: "{rounded.sm}"
    padding: 12px 14px
    height: 36px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Wrangle: Mint-Accented Pricing with Soft Tinted Cards

## Overview

Wrangle's interface is calm, product-first, and practical. It targets recruiting and operations teams evaluating AI tooling, so clarity and comparability beat spectacle. The page is spacious, with generous section gutters and dense but readable feature lists. Emphasis comes from weight, tone, and subtle mint accents rather than saturated fills.

## Colors

- **primary (#4A4A4A):** Graphite for body text, secondary headings, and icons.
- **secondary (#171717):** Charcoal for strong emphasis, prices, and key labels.
- **tertiary (#5FC890):** Signal mint for highlights, states, and success cues (e.g., popular badge, checkmarks).
- **neutral (#D6DBDC):** Cloud gray for dividers, card bases, and subtle UI chrome.
- **brand-white (#FFFFFF):** Page background and large surfaces.
- **brand-dracula-orchid (#2C343C):** Deep slate for dark accents or dense metadata.
- **brand-mountain-mint (#A9E0C4):** Pale mint wash for soft tints and badges.
- **surface (#D6DBDC):** Default control and card surface; pair with on-surface for contrast.
- **on-surface (#4A4A4A):** Text color for content placed on surface neutrals.

## Typography

All headline levels use the ui-sans-serif stack at weight 500, producing a crisp, system-native feel. Headline-lg (62px, -0.03em) is for page titles; headline-md (44px) introduces key sections; headline-sm (31px) and headline-xs (22px) label cards and subsections. Body-md (16px/1.5) handles long copy and feature lists. Fonts are system-provided (freely available via the OS); if a hosted webfont is required, use Inter, Source Sans 3, or IBM Plex Sans as close substitutes. Emoji and pictographic bullets rely on Noto Color Emoji (Google-hosted) when available.

## Layout

Spacing follows an 8px base: xs 8px, sm 16px, md 32px, lg 48px, xl 64px. Sections breathe on xl gutters; card padding is 16px; grid gaps sit at 32px. Use a 12-column grid with three equal cards at desktop, collapsing to a single column on mobile. Copy blocks keep 32–48px rhythm above/below; lists tighten to 8–16px to stay scannable.

## Elevation & Depth

Depth is minimal. Only the small shadow (rgba(0,0,0,0.05) 0 1px 2px) is used sparingly on interactive surfaces. Most hierarchy is achieved with neutral borders (#D6DBDC), tonal surfaces (near-white to Cloud), and whitespace. Accents (#5FC890 and #A9E0C4) communicate state instead of heavy elevation.

## Shapes

Corners are consistently 8px (rounded.sm) on cards and buttons, projecting approachability without feeling playful. Link buttons remain square (0px) to read as inline text actions. Maintain consistent radii across new components to preserve the calm geometry.

## Components

- Button — Primary: 36px height, 12px×14px padding, #fcfcfc background, text #4A4A4A, 8px radius. Use for core CTAs like "Start free trial".
- Button — Secondary: 36px height, 12px×14px padding, text #7B7B7B on transparent/white, 8px radius. Use for lesser actions.
- Button — Link: Text #4A4A4A, 0px radius; treat as inline action.
- Card: Background #D6DBDC surface with 16px padding and 8px radius. Use subtle tints (e.g., #A9E0C4) sparingly for emphasis.

### Pricing Tier Card
Three-column layout. Header in headline-xs (22px/500), big price in secondary (#171717), list in body-md with compact 8–12px spacing. CTA is a primary button. Add an optional soft wash using #A9E0C4 at low opacity for the featured tier.

### Billing Period Toggle
Inline control with "Monthly / Annual –20%". Use body-md text, border/background in #D6DBDC, and 8px radius pills. Active label uses #171717; inactive uses #4A4A4A.

### "Most popular" Badge
Small capsule set above the Scale card. Background #A9E0C4, text #171717, 8px radius, 8px horizontal padding.

### Feature List with Checks
Bulleted list in body-md. Use emoji or icon bullets; text #4A4A4A on white or surface. Row spacing 8–12px.

### FAQ Accordion
Section header in headline-sm (31px). Each item uses a 1px border in #D6DBDC, 16px padding, 8px radius. Body copy in #4A4A4A.

### Announcement Bar
Top-of-page slim strip for updates. Body-md text, white background, links in #4A4A4A.

### CTA Bar ("Ready to get started?")
Two-button group: primary (#fcfcfc) and secondary. Keep 16px button gap and 32px vertical padding on the section.

## Do's and Don'ts

- Do use #4A4A4A for most text on #FFFFFF or #D6DBDC surfaces; reserve #171717 for prices and key labels.
- Do keep buttons at 36px height with 8px radius; pair with 12×14px padding for consistency.
- Do use #5FC890 and #A9E0C4 sparingly to indicate highlights or states, not as large background fills.
- Don't introduce heavier shadows; hierarchy should come from borders (#D6DBDC) and spacing.
- Don't mix corner radii; avoid exceeding 8px or rounding link-style actions.
- Don't over-tighten lists; keep at least 8px row spacing for readability.

## Agent Prompt Guide

Quick color reference:
- Text: #4A4A4A (primary)
- Background: #FFFFFF (brand-white)
- Border: #D6DBDC (neutral)
- Accent: #5FC890 (tertiary) and #A9E0C4 (brand-mountain-mint)

1) Build a three-tier pricing grid
- Container: max-width 1200px, horizontal padding 64px, font-family ui-sans-serif.
- Grid: 3 equal columns, 32px gap.
- Card: background #D6DBDC with 16px padding, 8px radius, small shadow rgba(0,0,0,0.05) 0 1px 2px.
- Headings: 22px/500 for tier name; price in #171717.
- CTA: primary button (#fcfcfc bg, #4A4A4A text, 36px height, 12×14px padding, 8px radius).

2) Add a "Most popular" variant
- Apply a soft overlay tint using #A9E0C4 at low opacity over the card.
- Place a badge: background #A9E0C4, text #171717, 8px radius, 8px horizontal padding, body-md text.

3) Create the billing period toggle
- Inline group with two pills.
- Active: background #FFFFFF, text #171717, 1px border #D6DBDC, 8px radius, 8px×12px padding.
- Inactive: transparent background, text #4A4A4A.

4) FAQ accordion item
- Wrapper: 1px border #D6DBDC, 8px radius, 16px padding.
- Question: 22px/500, #171717; Answer: 16px/1.5, #4A4A4A.
- Chevron target size: 36px min-tap.

5) Dual-CTA footer bar
- Section padding: 32px vertical.
- Primary button (#fcfcfc, #4A4A4A, 36px, 8px radius) + Secondary (text #7B7B7B).
- Keep 16px gap and align end on desktop, center on mobile.

## Similar Brands

- Notion — Monochrome UI with subtle borders; Wrangle adds mint accents and system-level badges for state.
- Ashby — Recruiting SaaS with soft color tints; Wrangle is lighter on saturation and uses near-white CTAs.
- Lever — Clean ATS marketing; Wrangle's typography is tighter and more utilitarian.
- Intercom — Card-driven layouts with minimal shadows; Wrangle is more restrained in color and weight.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 3 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 4 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 16 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 17 hours ago