Skip to content
DesignMunkDesignMunk Submit a site

Flexprice

flexprice.io
The billing infrastructure for AI revenue
Developer Tools Fintech Framer Homepage Eb garamond Roobert
Share Visit site
flexprice.io DESKTOP · 1440
Flexprice

AI Breakdown

Design export

---
version: alpha
name: Flexprice
description: The billing infrastructure for AI revenue
colors:
  primary: "#000000"
  tertiary: "#082e44"
  neutral: "#fffcf6"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: EB Garamond Variable Regular
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.13
  headline-md:
    fontFamily: EB Garamond Variable Regular
    fontSize: 41px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Roobert VF-TRIAL Variable Light
    fontSize: 22px
    fontWeight: 300
    lineHeight: 1.45
    letterSpacing: 0.01em
  headline-xs:
    fontFamily: sans-serif
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.22
  body-md:
    fontFamily: Roobert VF-TRIAL Variable Light
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.63
    letterSpacing: 0.011em
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 36px
  xl: 90px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.sm}"
    padding: 11px 24px
    height: 45px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 11px 24px
    height: 45px
  button-link:
    textColor: "#6b6b6b"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Flexprice: Garamond Headlines on Warm Ivory, Navy CTAs

## Overview

Flexprice presents a confident, editorial feel suited to an enterprise developer audience. The palette is minimal—warm ivory surface, black text, and a deep navy accent—to keep technical content readable. Density is medium: generous section spacing with compact subheads and long-form body. Use serif headlines for authority and a light, modern sans for long explanations and metrics.

## Colors

- **primary (#000000):** Core text and high-emphasis elements, including headlines and body.
- **tertiary (#082e44):** Accent and primary action backgrounds; use for high-intent CTAs and key badges.
- **neutral (#fffcf6):** Warm ivory background for the overall canvas and cards.
- **border (#e5e7eb):** Subtle dividers, table rules, logo-grid lines, and control outlines.
- **surface ({colors.neutral}):** Default surface for sections and cards; matches Warm Ivory.
- **on-surface ({colors.primary}):** Text and icons placed on surface backgrounds; ensures strong contrast.

## Typography

- Headline Large (56px, 400, 1.13) uses EB Garamond Variable Regular for hero statements and major section intros. This file is self-hosted (custom). Substitutes you can reliably load: EB Garamond (Google Fonts), Cormorant Garamond, or Spectral.
- Headline Medium (41px, 400, 1.2) continues EB Garamond for secondary section headings and quote leads. Same substitutes as above.
- Headline Small (22px, 300, 1.45, +0.01em) uses Roobert VF-TRIAL Variable Light (custom). Recommended substitutes: Inter Light, Manrope Light, or Outfit Light.
- Headline X-Small (18px, 300, 1.22) is a sans level for overlines, short teasers, or small section labels. Use the same sans substitutes.
- Body Medium (16px, 300, 1.63, +0.011em) is the default paragraph style; pair with the sans substitutes above to keep long technical copy relaxed and legible.

## Layout

Spacing scale follows 8px steps with larger leaps for sections. Use 90px (xl) vertical padding for section breaks, 36px (lg) for internal grouping, 24px (md) for card padding/stacks, and 16px (sm) for compact controls. A 12-column grid with wide gutters fits the airy hero and the multi-column logo and KPI rows. Keep headings tight and paragraphs generously leaded to balance the serif display with technical body copy.

## Elevation & Depth

Shadows are minimal. Use the small measured shadow for lightweight elevation (dropdowns or hover lifts); all other elevations are none. Hierarchy is primarily expressed through tonal contrast (ivory vs. white imagery), thin borders (#e5e7eb), and whitespace. Avoid heavy blurs or large z-elevation—this system reads as flat and editorial.

## Shapes

Corners are understated. Buttons are 4px radius (rounded.sm) for utilitarian controls; cards use 8px (rounded.md) to soften information blocks. Links remain square (0px) to look textual. Use radius as a signal of interactivity: small for actions, medium for containers, none for inline elements.

## Components

- Button Primary: background #082e44, text #0000ee, 4px radius, 11px×24px padding, 45px height. Use for the highest-intent actions like "Try for Free."
- Button Secondary: text #000000 on neutral background, 4px radius, 11px×24px padding, 45px height. Add a #e5e7eb border when needed.
- Button Link: text #6b6b6b, no radius. Reserve for low-emphasis, inline actions.
- Card: background #fffcf6, text #000000, 8px radius, 16px padding. Apply #e5e7eb borders to form grids.

Distinctive page components:

### Top Navigation with Utility CTA
- Horizontal nav with compact items and a right-aligned "Talk to Engineer" button using #082e44, 4px radius, 45px height.

### Dual-CTA Hero Group
- H1 at 56px EB Garamond over ivory. Two side-by-side buttons spaced 16px: Primary (accent) + Secondary (neutral), plus a proof strip of badges beneath.

### Customer Logo Grid
- 4–5 columns of client marks inside bordered cells (#e5e7eb). Cells use 24px internal padding and 8px card radius when needed.

### KPI Stats Row
- Four metrics presented in a 4-column grid. Use Headline-xs (18px) labels and numeric emphasis with the sans at 22px.

### Integrations Strip
- Inline vendor logos (Stripe, HubSpot, etc.) on neutral with 8px vertical padding and 16px horizontal gaps; border top/bottom with #e5e7eb.

### Testimonial Quote Card
- Serif quote as Headline-md (41px) followed by name/title in Body-md. Use 24px padding, 8px radius, optional sm shadow on hover.

### FAQ Accordion
- Borders #e5e7eb between items, 24px vertical padding, caret uses primary text color.

### Footer Founder Row
- Three profile links set in Body-md with 16px gaps and thin dividers; keep contrast high on ivory.

## Do's and Don'ts

- Do set H1 at 56px (EB Garamond) and H2 around 41px to maintain the editorial hierarchy.
- Do keep backgrounds on #fffcf6 and rely on #e5e7eb borders for structure; avoid adding new grays.
- Do space sections with 90px top/bottom and group related items with 36px.
- Don't introduce large drop shadows; use only the small measured shadow when necessary.
- Don't round controls beyond 8px; this system favors square, enterprise-friendly geometry.
- Don't add extra accent colors; #082e44 is the sole action color.

## Agent Prompt Guide

Quick reference — Text: #000000, Background: #fffcf6, Border: #e5e7eb, Accent/CTA: #082e44.

1) Build the hero
- Canvas #fffcf6. Center a headline set to EB Garamond 56px/1.13, weight 400, color #000000 (substitute Google "EB Garamond" or Spectral if unavailable). Add two buttons: Primary (bg #082e44, text #0000ee, radius 4px, height 45px, padding 11px 24px) and Secondary (text #000000 on #fffcf6 with #e5e7eb 1px border). Space the buttons 16px apart and add 90px vertical padding to the section.

2) Customer logo grid
- Use a 12-col grid. Create 4–5 columns of cells with 24px padding, 1px #e5e7eb borders, 8px radius. Place monochrome logos centered. Section padding: 90px top/bottom; gap between rows: 36px.

3) KPI row
- Four equal columns. Each card: label in a sans at 18px/1.22 (Inter/Manrope if Roobert trial is unavailable), metric in 22px/1.45. Use #000000 text on #fffcf6 with a bottom border #e5e7eb. Overall row margin-top: 36px.

4) Testimonial block
- Container card with 8px radius, 24px padding, optional small shadow. Quote set in EB Garamond 41px/1.2, 400, #000000; author line in 16px/1.63 sans. Keep max-width around 720px and center with 90px vertical spacing.

5) FAQ accordion
- Stack items with 24px vertical padding, 1px #e5e7eb separators. Question in 18px sans, answer in 16px sans. Chevron icons in #000000. No extra shadows.

## Similar Brands

- Stripe: similarly spare palette and trust-first content; diverges by using a grotesk-only type system versus Flexprice's serif display.
- Paddle: enterprise billing with restrained color; Flexprice is warmer (ivory surface) and leans on serif headlines for brand.
- Chargebee: comparable information density and grids; Flexprice is less colorful and more editorial.
- Segment: technical audience with KPI proof and integrations; Segment uses brighter accents where Flexprice stays navy-only.

More like this

Browse Developer Tools →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 1 hour ago
adapt.com
Adapt About AI
Adapt About
A minimal header with announcement bar and dual CTAs leads into a centered, punchy mission headline, followed by a friendly collage of…
About · 1 hour ago
openlayer.com
Openlayer About AI
Openlayer About
A high-contrast hero dominates with a black card, elegant serif headline, and a single purple CTA, establishing a clear hierarchy and sleek…
About · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 2 hours ago