Skip to content
DesignMunkDesignMunk Submit a site

Outseta Pricing

outseta.com
All-in-one platform for SaaS and membership businesses to grow
Software Technology Webflow Pricing Family Jet Brains Mono
Share Visit site
outseta.com DESKTOP · 1440
Outseta Pricing

AI Breakdown

Design export

---
version: alpha
name: Outseta
description: All-in-one platform for SaaS and membership businesses to grow
colors:
  primary: "#240029"
  secondary: "#f8c814"
  tertiary: "#df37a7"
  neutral: "#ffffff"
  border: "#262626"
  brand-grizzly: "#8c5c1c"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: JetBrains Mono
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  headline-md:
    fontFamily: JetBrains Mono
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.01
    letterSpacing: 0.084em
  headline-sm:
    fontFamily: Inter Var
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.07
  headline-xs:
    fontFamily: Inter Var
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.13
  body-md:
    fontFamily: Family
    fontSize: 16px
    fontWeight: 400
    lineHeight: 2.22
    letterSpacing: -0.002em
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    height: 42px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 42px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Outseta: Four-Column Pricing Table With Yearly Savings Badges

## Overview

Outseta's UI is pragmatic, founder-focused, and comparison-first. It uses a light mode palette with dark ink for typography, magenta for primary actions, and yellow for promotional highlights. The page feels spacious, with large paddings and clear modules that support scanning. Tone is straightforward and utility-driven rather than playful.

## Colors

- **primary (#240029):** Deep plum used for headlines, icons, and dense fills.
- **secondary (#f8c814):** Savings and promotional badges; sparingly for emphasis.
- **tertiary (#df37a7):** Primary CTA color for sign up and key actions.
- **neutral (#ffffff):** Page background and card surfaces.
- **border (#262626):** Hairlines, dividers, and subdued body text within cards.
- **brand-grizzly (#8c5c1c):** Supporting accent in brand materials; avoid in core UI unless specified.
- **surface (#ffffff):** Default surface color for sections and cards.
- **on-surface (#240029):** Default text color on light surfaces.

## Typography

- Headline LG/MD — JetBrains Mono, 20px and 19px with tight leading for assertive headings. Freely available via Google Fonts. Use for hero statements, section headings, and price numerals when mono rhythm helps scan.
- Headline SM/XS — Inter Var, 18px and 17px. This is a self-hosted variable build; agents should substitute Inter (Google), Source Sans 3, or IBM Plex Sans for similar x-height and neutrality.
- Body MD — Family, 16px at 400 with tall 2.22 line-height for relaxed reading. This is custom/self-hosted; substitute Inter, Source Sans 3, or Work Sans at 16px/1.7–2.0 line-height when the original isn't available.
- Use dark on-surface text (#240029) on white, and reserve bold weights for plan names and prices only.

## Layout

Spacing is based on an 8px step: 8/16/24/48/80. Build vertical rhythm by stacking md (24px) inside cards, lg (48px) between sections, and xl (80px) above/below hero and final CTA bands. A 12-column grid supports a four-up pricing layout on desktop, collapsing to two-up and single-column on smaller viewports. Keep generous inner paddings so checklists breathe and prices dominate.

## Elevation & Depth

Hierarchy relies on soft shadows and clean borders. Use measured_shadows.sm for subtle outlines on light surfaces and md for lifted elements like active pricing cards or dialogs. Large shadows are disabled (lg/xl none), so prominence is achieved via spacing, weight, and color rather than heavy drop shadows. Borders use #262626 at low contrast primarily for dividers and inputs.

## Shapes

Radii are simple: 8px for interactive controls and buttons (rounded.sm), 12px for cards, modals, and the billing toggle (rounded.md). Use consistent rounding across a module—mixing sizes within the same component reduces cohesion.

## Components

- button-primary — Filled magenta (#df37a7) with white text, 42px height, 8px radius. Use for signup and high-intent actions.
- button-secondary — Brand-dark fill (#240029) with same-color text per token; pair on white surfaces and ensure contrast with supporting iconography or text pairing as implemented.
- button-link — Text-only in #240029 with 0px radius; use for low-emphasis navigation.
- card — White surface with #262626 text, 16px padding, 12px radius; apply measured_shadows.sm or md as needed.

### Segmented billing toggle
- Purpose: Switch between monthly and yearly pricing. Use a 12px radius container with two options. Active tab uses dark text on white; inactive remains outlined. Place centered above the grid with md (24px) gap below.

### Pricing plan card
- Structure: Plan name, savings badge, price, fee note, contact limit, checklist, and CTA. Card uses 16px inner padding, 12px radius, small shadow. Prices and plan names use JetBrains Mono; body uses the sans family.

### Savings badge
- Color: secondary (#f8c814) background with dark text. Radius 8px; small uppercase label like "Save $360/yr." Place near the plan name.

### Contact limit slider (50K plan)
- A horizontal slider aligned to the right of the top row. Use white track inside the card, handle sized to match 8px rounding. Label as "Adjust."

### Feature checklist
- Bullet list of inclusions with consistent leading. Use #240029 for text and subdued icons; 24px spacing between groups.

### FAQ accordion
- Stacked items with #262626 for borders. Question row clickable; answer uses generous 16–24px paddings and tall line-height.

### Final CTA band
- Full-width white section with headline and a primary button in #df37a7. Spacing xl (80px) top/bottom, center-aligned content.

### Assistant help drawer
- Sticky help widget offering AI answers and links to docs. Use card styling with md shadow, 12px radius.

## Do's and Don'ts

- Do reserve #df37a7 for primary CTAs and the final step in a flow.
- Do use #f8c814 only for savings or promotional flags; avoid it for navigation or body copy.
- Do keep card padding to 16px and maintain equal gutters between pricing columns.
- Don't mix 8px and 12px radii within the same component.
- Don't apply large shadows—lg and xl are disabled; use sm or md only.
- Don't place dark buttons on non-white backgrounds without checking contrast; they are tuned for white surfaces.

## Agent Prompt Guide

Quick color reference — Text: #240029; Background: #ffffff; Border/Dividers: #262626; Accent/CTAs: #df37a7; Savings: #f8c814.

1) Build a four-up pricing grid
- Use a 12-column grid. Create four cards (12px radius, 16px padding) on #ffffff with measured_shadows.sm. Headings in JetBrains Mono 20px/1.2, body in Inter 16px/1.8–2.0, color #240029. Each card has a magenta (#df37a7) primary button, 42px height, 8px radius. Gutters: 24px.

2) Create a monthly/yearly segmented toggle
- Container: 12px radius, 1px border #262626 on #ffffff. Two options at equal width. Labels in JetBrains Mono 19px/1.01, color #240029. Active segment filled #ffffff with md shadow; inactive outlined. Place centered with 24px margin below.

3) Add a savings badge
- Small pill 8px radius, background #f8c814, dark text #240029, uppercase label like "Save $360/yr". Position top-right within the card title row with 8px inset.

4) Style a feature checklist
- List items set in Inter 16px with 2.0 line-height, color #240029. Use 8px item spacing and 24px group spacing. Optional thin divider #262626 above the CTA area.

5) Final CTA section
- Full-width white band with center-aligned headline in JetBrains Mono 20px/1.2 and a primary button (#df37a7, 42px height, 8px radius). Apply 80px top/bottom padding and 48px gap between headline and button.

## Similar Brands

- Webflow — Card-based pricing with strong toggles; Outseta diverges with a warmer accent palette (magenta/yellow) versus Webflow's cooler blues.
- Notion — Clean white surfaces and comparison grids; Outseta uses heavier shadows and brighter promotional badges.
- Stripe — Precise typography and restrained layout; Outseta is friendlier with rounder shapes and a bolder accent.
- Intercom — Large, scannable pricing modules; Outseta is simpler, with fewer illustration elements and more straightforward feature lists.

More like this

Browse Software →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 15 hours ago
modulify.ai
Modulify AI
Modulify
Turn a prompt into a real website or web app—edit, refine, publish.
Homepage · 20 hours ago