Design system Pro AI Kit9 components

Stripe-inspired revenue rails

An unofficial, original Stripe-inspired system for payments, billing models, and revenue infrastructure, narrowed to the patterns visibly supported by the current reference.

Desktop · 1440 × 14705

Foundations

The visual decisions behind the system

A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.

Style identity

Financial infrastructure in motion

A high-contrast commerce language for converting attention into payments, billing models, and measurable revenue capacity.

adaptive navy and spectrum theme

Visit website

Typography

Font families

Sohne Variable

Large revenue narrative, navigation, controls, and product explanations

sohne-var, "SF Pro Display", sans-serif

Font website

Weights: 1–1000 variable; live h1 observed at 300
Sizes: 12px metadata, 16px body, 32px h2, 48px live h1
Line height: normal body; 35.2px h2; 55.2px live h1
Tracking: -0.96px at the observed 48px h1; -0.64px at 32px h2; normal body

Fallback: "SF Pro Display", sans-serif

Source Code Pro

Amounts, usage values, API-shaped metadata, and metrics

SourceCodePro, ui-monospace, SFMono-Regular, Menlo, monospace

Font website

Weights: 400–600
Sizes: 11–14px
Line height: 1.4–1.55
Tracking: 0–0.02em

Fallback: ui-monospace, SFMono-Regular, Menlo, monospace

Palette

Core colors

Light canvas

#f6f9fc

Page background in light mode

Light surface

#ffffff

Cards and raised product frames

Dark canvas

#061526

Page background in dark mode

Dark surface

#0b2138

Cards and editor frames in dark mode

Primary text

#102a43

High-contrast content

Muted text

#5c718a

Supporting copy and inactive labels

Accent

#635bff

Primary action and selected state

Accent strong

#8f88ff

Focus ring and display signal

Positive

#12b76a

Healthy, live, or ready state

Warning

#f2b94b

Attention or pending state

Danger

#ed6a5a

Blocked or destructive state

Type scale

Responsive hierarchy

Role	Size	Weight	Line height	Tracking
Display	clamp(44px, 6vw, 76px)	650	0.98	-0.07em
Section heading	clamp(32px, 4vw, 52px)	620	1.03	-0.055em
Product heading	24px	650	1.15	-0.035em
Body large	18px	400	1.55	-0.01em
Body	15px	400	1.55	0
Interface	13px	550	1.4	-0.005em
Metadata	11px	500	1.4	0.02em

Spacing & shape

Layout rhythm

Density: Moderate editorial/product density
Base unit: 4px
Max width: 1180px
Section gap: 64–96px
Card padding: 20–28px
Element gap: 8–16px

Iconography

precise line icons with spectrum accents used sparingly

1.5px stroke · 16px / 20px / 24px

Use outlined symbols for product families and pair every metric or status with a textual label.

Stripe custom inline SVG iconography npm package

System metrics

Radius

Control 9pxPanel 14pxFrame 18pxPill 999px

Spacing

1 4px2 8px3 12px4 16px5 20px

Motion

Fast 160msBase 220msReveal 420msReduced disable non-essential motion

Elevation

Flat frame

1px border, no shadow

Default cards and sections

0 16px 42px rgba(0,0,0,.18)

Floating menus and command surfaces

Dialog

0 24px 80px rgba(0,0,0,.30)

Drawers and focused overlays

Surfaces & shape

Canvas

#f6f9fc / #061526

Page and element background

Surface

#ffffff / #0b2138

Cards and panels

Raised

#f7f9ff / #112d48

Selected rows and nested frames

Soft

#e8eef8 / #193c5d

Quiet fills and navigation rails

Guidelines

Do

Lead with one high-intent conversion action and one sales path.
Use spectrum color as a signal, not a background wash on every surface.
Keep billing and usage values tabular, stable, and easy to compare.
Pair financial trust claims with concrete metrics or product evidence.

Don't

×Do not copy the reference wordmark, protected copy, customer marks, or proprietary UI assets.
×Do not use gradients or color without a product meaning.
×Do not rely on color alone for status, errors, or selection.
×Do not add taxonomy filler or a dashboard-sized specimen.

Imagery

Use original CSS art, abstract geometry, and authored product frames. The two ordered screenshots are explicitly requested live reference media; do not use them inside component source or as decorative imagery.

Layout

Use one aligned content rail, generous section rhythm for marketing proof, compact product frames for workflow evidence, and a single-column mobile stack below 840px. Preserve readable gutters and let tables scroll rather than clip.

Concept

A complete visual language, ready to inspect.

Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.

Assigned collection

Stripe-inspired Interface Elements

9 published components in collection order

Components

Built from the same system

Production-ready specimens from this AI Kit's approved collection.

Open collection

Stripe-inspired Buttons — start-now conversion actions

Stripe-inspired Nav — product and solutions navigation

Stripe-inspired Menus — product category menu

Stripe-inspired Cards — solution family card

Stripe-inspired Tables — usage-meter table

Stripe-inspired Progress — billing usage meter

Stripe-inspired Badges — payment infrastructure labels

Stripe-inspired Charts — scale metrics chart

Stripe-inspired Plans — billing model comparison

Postman-inspired API Orbit

An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.

v0-inspired Prompt Workshop

An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.

Borderless Ledger — Wise-inspired AI Kit

13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.

Runway-inspired Real-World Studio

A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.

Observable-inspired Signal Notebook

An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.

Replit-inspired Build Canvas

A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.