Skip to content
DesignMunkDesignMunk Submit a site

EVpin Pricing

evpin.com
No more 18 open tabs. One tool. From scouting to signed proposal.
Software Technology Next.js Tailwind Pricing Inter
Share Visit site
evpin.com DESKTOP · 1440
EVpin Pricing

AI Breakdown

Design export

---
version: alpha
name: EVpin
description: No more 18 open tabs. One tool. From scouting to signed proposal.
colors:
  primary: "#1d1d16"
  secondary: "#020817"
  tertiary: "#0f172a"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Inter
    fontSize: 41px
    fontWeight: 600
    lineHeight: 1.46
    letterSpacing: -0.027em
  headline-sm:
    fontFamily: Inter
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.016em
  headline-xs:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.18
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 2px
  sm: 12px
  md: 20px
  lg: 28px
  xl: 128px
components:
  button-primary:
    backgroundColor: "#f4f4f4"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 15px 20px
    height: 44px
  button-secondary:
    backgroundColor: "#0c0c09"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 15px 20px
    height: 44px
  button-link:
    textColor: "#5b5b4b"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# EVpin: Monochrome Pricing Grid With Pill Toggles

## Overview

EVpin's UI is utilitarian and monochrome, prioritizing data legibility and fast scanning. It targets B2B buyers—developers, utilities, and operators—who value clarity over spectacle. Layouts are spacious with large section paddings and few decorative elements. When a token does not exist, prefer white surfaces, dark ink text, light borders, and pill-shaped controls.

## Colors

- Primary (#1d1d16): Deep ink for headlines, body text, and icons.
- Secondary (#020817): Near-black backgrounds for dark bands, emphasis chips, and badges.
- Tertiary (#0f172a): Deeper slate for rare dark accents and states.
- Neutral (#ffffff): Base page surface and card backgrounds.
- Border (#e5e7eb): Hairline dividers, table rules, and card outlines.
- Surface (#ffffff): Default container and page surface (alias of neutral).
- On-surface (#1d1d16): Text and icon color used on white or light surfaces (alias of primary).

## Typography

All type is Inter. Headlines use Inter 600 at four sizes: 56px (hero, decisive statements), 41px (pricing and section intros), 30px (card and subsection headings), and 22px (FAQ questions and UI labels). Body uses Inter 16px/1.5 for long copy and feature lists.
- Availability: Inter is a Google font and can be loaded directly. Close substitutes: IBM Plex Sans, Source Sans 3, or system-ui/Segoe UI/Roboto fallbacks.
- Emoji: Noto Color Emoji (Google) for inline symbols; acceptable OS fallbacks include Apple Color Emoji and Segoe UI Emoji.
- Weight discipline: 600 for headings, 400 for body—avoid mid-weights to preserve the page's punchy contrast.

## Layout

Spacing is stepped and predictable: use sm 12px for tight clusters, md 20px for card interiors, lg 28px for gutters between sibling blocks, and xl 128px for section paddings. Content reads in a single wide column that breaks into a three-up grid for plans; maintain equal widths and consistent vertical rhythm between cards. Tables use border rules (#e5e7eb) instead of zebra striping. Keep copy lines short and let whitespace carry the hierarchy.

## Elevation & Depth

Depth is minimal. Use the small shadow only for hover or floating elements: rgba(12,12,9,0.25) 0px 1px 3px 0px. Most separation is handled by light borders, weight contrast (600 vs 400), and generous whitespace. Dark chips and bands use secondary (#020817) to create rare but strong emphasis.

## Shapes

Two radii govern the system: sm 8px for cards and structural containers; full 9999px for interactive controls—buttons, toggles, chips, and badges. Use full radius wherever an element should read as tap/click-able. Do not mix square and rounded corners within the same component group.

## Components

Buttons
- Primary: #f4f4f4 background, #1d1d16 text, 44px height, 15px 20px padding, rounded 9999px. Default CTA on light surfaces.
- Secondary: #0c0c09 background, #ffffff text, 44px height, 15px 20px, rounded 9999px. Use for emphasis or on dark bands.
- Link: #5b5b4b text, no radius; keep inline and unbuttoned.

Card
- White (#ffffff) background, #1d1d16 text, 8px radius, 16px internal padding. Add #e5e7eb borders when cards sit on white.

### Masthead Navigation
- Background secondary (#020817) with white text. Left logo, right-aligned product/resources/legal links. CTA uses Primary button for contrast on dark.

### Pricing Hero
- Headline in Inter 56px/600, tight -0.02em tracking. Subtext body 16px. One CTA stack using primary buttons. Keep top/bottom spacing at xl 128px.

### Plan Selector Bar
- A horizontal control with team-size slider, billing toggle, and discount chip. Use pill shapes (9999px) and soft gray #f4f4f4 backgrounds; labels in #1d1d16 at 16px.

### Pricing Tier Cards (Startup, Pro, Max)
- Three equal cards. Plan titles at 30px/600; "Pro" carries a dark badge using secondary or button-secondary styling. Prices set in 41px/600; features in body 16px with bullet spacing sm 12px.

### Feature Comparison Table
- Four-column layout with left feature labels. Use border color #e5e7eb for all rules; headings in 22px/600, cells in 16px. Avoid zebra; rely on borders and row height.

### FAQ Accordion
- Question labels at 22px/600 with 8px card radius; answers in 16px body. Dividers use #e5e7eb; expand/collapse affordance mirrors pill language.

### Final CTA Band
- Dark background (secondary #020817), white copy, two pill CTAs. Vertical padding xl 128px; keep copy short and direct.

## Do's and Don'ts

Do
- Use Inter 600 for all headings and Inter 400 for body to maintain the page's clear weight contrast.
- Keep section paddings at xl 128px and internal gaps in md 20px or lg 28px increments.
- Prefer borders (#e5e7eb) over large shadows; the only shadow should be the small 0px 1px 3px hover.
- Style interactive elements as pills (radius 9999px) and structural containers at 8px.

Don't
- Introduce new accent colors; stick to white, ink (#1d1d16), near-black (#020817/#0c0c09), and the light gray in components.
- Mix multiple headline weights or sizes outside 56/41/30/22; it muddies hierarchy.
- Place cards on white without either a border or adequate spacing; they will visually merge.
- Use zebra striping in tables; rely on rules and spacing instead.

## Agent Prompt Guide

Quick color reference
- Text: #1d1d16
- Background: #ffffff
- Border: #e5e7eb
- Accent/Dark: #020817

1) Build a pricing hero
- Container: background #ffffff, padding top/bottom 128px.
- H1: Inter 56px, 600, line-height 1.07, letter-spacing -0.02em, color #1d1d16.
- Subhead: Inter 16px/1.5, color #1d1d16 at 80% opacity.
- CTA: button 44px high, pill radius 9999px, background #f4f4f4, text #1d1d16.

2) Create a 3-tier pricing grid
- Three cards, equal width; each: background #ffffff, 8px radius, 16px padding, 1px border #e5e7eb.
- Plan name: Inter 30px/600.
- Price: Inter 41px/600.
- Features: Inter 16px/1.5 with 12px vertical gaps.
- "Most popular" badge: pill 9999px, background #0c0c09, text #ffffff.

3) Plan selector bar
- Horizontal capsule with 12px internal gaps; background #f4f4f4, 9999px radius, 1px border #e5e7eb.
- Labels: Inter 16px/400; toggle buttons: pills 9999px, 44px high, selected state uses #0c0c09 with #ffffff text.

4) Comparison table
- Full-width table; header labels Inter 22px/600; cells Inter 16px/1.5.
- All grid lines 1px #e5e7eb; no zebra. Row height multiples of 20px.
- Hover highlight: apply shadow rgba(12,12,9,0.25) 0 1px 3px on the active row only.

5) FAQ accordion
- Question row: 8px radius card with 1px border #e5e7eb; label Inter 22px/600.
- Answer body: Inter 16px/1.5; vertical spacing 12–20px; chevron button is a 32–44px pill.

## Similar Brands

- Linear: Monochrome palette, pill buttons, and Inter-led hierarchy; Linear is denser and relies more on tight spacing.
- Vercel: Black-and-white with near-black bands and understated CTAs; Vercel leans heavier on dark surfaces overall.
- Mapbox: Data-first SaaS with minimal color and strong table usage; Mapbox introduces brand blues where EVpin stays grayscale.
- Plaid: Crisp B2B aesthetic with light borders and Inter; Plaid uses more illustration and color accents than EVpin.

More like this

Browse Software →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 6 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 6 minutes ago
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