Skip to content
DesignMunkDesignMunk Submit a site

Neon Pricing

neon.com
Serverless Postgres that scales, branches, and includes authentication for apps.
Software Technology Next.js Tailwind Pricing Inter
Share Visit site
neon.com DESKTOP · 1440
Neon Pricing

AI Breakdown

Design export

---
version: alpha
name: Neon
description: Serverless Postgres that scales, branches, and includes authentication for apps.
colors:
  primary: "#ffffff"
  secondary: "#36cd98"
  tertiary: "#e9943e"
  neutral: "#000000"
  border: "#374151"
  brand-sparkling-emerald: "#246c54"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Inter
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: -0.014em
  headline-sm:
    fontFamily: Inter
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.03em
  headline-xs:
    fontFamily: Inter
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: -0.046em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.02em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 50px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#1a1a1a"
    rounded: "{rounded.full}"
    padding: 14px 26px
    height: 38px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 14px 26px
    height: 38px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Neon: Dark Pricing Grid with White Pill CTAs

## Overview

A dark, developer-first system built for clarity at speed. Contrast is high, spacing is efficient, and copy density is intentionally above average for technical buyers. The UI should feel precise, performant, and trustworthy with minimal ornament beyond subtle emerald accents. When tokens don't specify, choose legible, low-gloss solutions that privilege scannability over flourish.

## Colors

- **primary (#ffffff):** Default text and the brightest interactive surfaces (primary button, key labels) on dark backgrounds.
- **secondary (#36cd98):** Accent for positive states, bullets, active indicators, and lightweight emphasis in charts or metrics.
- **tertiary (#e9943e):** Attention color for beta/warning chips and caveats; use sparingly so pricing data remains primary.
- **neutral (#000000):** Global background for the dark mode canvas and cards.
- **border (#374151):** Low-noise dividers, card outlines, table rows, and inputs.
- **brand-sparkling-emerald (#246c54):** Deep brand accent for rare backgrounds, gradients, or decorative rails.
- **surface (#000000):** Surface background alias for containers and sections.
- **on-surface (#ffffff):** Text and icon color on surfaces; mirrors primary for consistency.

## Typography

- Inter is the single UI family across headings and body. It is freely available via Google Fonts and may be loaded directly. Substitutes: Roboto (Google), IBM Plex Sans (Google), or the system stack (system-ui, -apple-system, Segoe UI) for performance.
- Headline scale uses Inter at 44/34/27/21 with weight 400 and tight negative letter-spacing for compact, high-contrast headlines.
- Body text is Inter 16/24 (line-height 1.5) for documentation-grade readability on dark backgrounds.
- Noto Color Emoji is available via Google; platform emoji fallbacks like Segoe UI Emoji (Windows) or Apple Color Emoji (macOS/iOS) are acceptable when Noto isn't loaded.

## Layout

Spacing is compact and modular: 6px for micro gaps, 16px for padding and item gutters, 24–32px for card rhythm, and 50px for section breaks. Use a responsive grid that supports three equal columns for pricing tiers, collapsing to one on small screens. Card padding follows 16px per token. Align headings and CTAs on a consistent left edge to aid scan. Keep maximum line lengths near documentation norms; reserve the lg/xl spacers for vertical separation rather than horizontal padding.

## Elevation & Depth

Depth is restrained. A single small shadow (rgba(0,0,0,0.4) 0 8px 20px) is available for overlays or floating elements. Most hierarchy is achieved through contrast, 1px slate borders (#374151), and generous negative space between cards. Avoid medium/large shadows; they're defined as none.

## Shapes

Corners are rectilinear with an 8px radius for cards and inputs. Primary and secondary buttons use a full 9999px radius for pill silhouettes that read as clearly tappable against black. Keep shape language consistent: 8px = container, 9999px = action or chip.

## Components

Buttons and card are tokenized and should be used as-is.
- Button Primary: #ffffff background, #1a1a1a text, full radius (9999px), 38px height, 14px×26px padding. Reserve for Get started / Try actions.
- Button Secondary: text #ffffff on transparent/black, full radius (9999px), 38px height, 14px×26px padding.
- Button Link: text #ffffff, square corners, underline on hover is acceptable.
- Card: #000000 background, #ffffff text, 8px radius, 16px padding, optional 1px #374151 border for separation.

### Pricing Tier Card
- Background #000000 with 1px #374151 border and 8px radius. Tier title set in Inter headline-sm (27px), price or label in headline-md (34px). CTA uses Primary Button. Feature list bullets use secondary (#36cd98).

### Plan Comparison Table
- Table rows separated by 1px #374151 rules. Left column headings in headline-xs (21px). Body copy in body-md (16px). Use on-surface (#ffffff) for text and tertiary (#e9943e) for beta callouts.

### Based-on Select (Workload Preset)
- Input container: 8px radius, 1px #374151 border, text #ffffff in body-md. Inline with "Typical spend".

### Feature List with Status Chips
- Each item prefixed by a 6px dot or icon in secondary (#36cd98). "BETA" chips use tertiary (#e9943e) text on transparent with 1px #374151 border and full radius (9999px).

### Special Programs Card
- Uses Card token with headline-xs (21px) title and body-md description. CTA as Button Link. Optional top rail can use brand-sparkling-emerald (#246c54) for subtle branding.

### FAQ Accordion
- Question titles in headline-xs (21px) within a 16px vertical padding block. Divider #374151 between items. Answer text in body-md (16px). Chevron icons use #ffffff at 60–80% opacity on hover.

### Ask AI Panel
- Card token with headline-sm (27px) title, supporting text in body-md, and a Primary Button. Place after FAQs as a final assist.

## Do's and Don'ts

- Do reserve secondary (#36cd98) for positive states, selection, and checklist bullets; it loses impact if used for large surfaces.
- Do keep primary buttons white with dark text; this is the primary attention mechanism in dark mode.
- Do use 1px #374151 borders to separate dense content instead of heavier shadows.
- Don't overuse tertiary (#e9943e); limit to beta/warning chips so pricing data remains primary.
- Don't mix radii—containers stay at 8px while CTAs and chips are fully rounded (9999px).
- Don't increase headline weights; the system relies on weight 400 plus tight tracking for a clean, technical feel.

## Agent Prompt Guide

Quick color reference: text #ffffff, background #000000, border #374151, accent #36cd98 (secondary), attention #e9943e (tertiary).

1) Build a 3-tier pricing grid
- Canvas: background #000000, text #ffffff (Inter from Google).
- H1: Inter 44px/1.13, weight 400, letter-spacing -0.04em.
- Each card: background #000000, 1px #374151 border, radius 8px, padding 16px.
- Tier title: Inter 27px/1.02 (headline-sm). Price: Inter 34px/1.21 (headline-md).
- Feature bullets: 6px dot in #36cd98; beta chip text in #e9943e with 1px #374151 border, radius 9999px.
- Primary CTA: 38px height, padding 14px 26px, background #ffffff, text #1a1a1a, radius 9999px.

2) Comparison table section
- Section gap: 50px above and below.
- Table: left column titles Inter 21px/1.14, body cells Inter 16px/1.5.
- Row separators: 1px #374151; no outer shadow.
- Inline "Get started" buttons follow primary button spec.

3) FAQ accordion
- Container: max-width fluid, background #000000.
- Item header: Inter 21px/1.14 with 16px vertical padding, border-top 1px #374151.
- Body: Inter 16px/1.5, text #ffffff.
- Icons: #ffffff at 70% opacity; hover to 100%.

4) Special programs strip
- Three cards using Card token (8px radius, 16px padding, #000000 bg, #ffffff text).
- Titles Inter 21px; descriptions Inter 16px.
- Link CTAs use Button Link spec (text #ffffff, square corners). Optional top accent bar in #246c54 at 4px height.

## Similar Brands

- Vercel — Similar dark canvas with green accents and pill CTAs; Vercel leans sparser with more whitespace and fewer tables.
- Supabase — Dark, green-accented Postgres tooling; Supabase uses friendlier spacing and fewer orange warnings.
- PlanetScale — Database pricing with black surfaces and crisp dividers; PlanetScale favors serif headlines at times and more marketing imagery.
- Render — Developer hosting with dark UI and bright CTAs; typography is looser with more color variety.
- Fly.io — Developer-centric content density on dark backgrounds; visual tone is quirkier compared to Neon's restrained precision.

More like this

Browse Software →
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 5 hours ago
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 24 hours ago