Style identity
Financial infrastructure in motion
A high-contrast commerce language for converting attention into payments, billing models, and measurable revenue capacity.
Reference style: adaptive navy and spectrumDesign system Paid source9 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.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
- Theme support:
- Unverified
- Installation:
- No verified installation path listed
Delivered component specimen
Design foundations
Inspect the kit's typography, palette, icons, spacing and motion.
Visit website
Typography
Font families
Sohne Variable
Large revenue narrative, navigation, controls, and product explanations
sohne-var, "SF Pro Display", sans-serif- 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- 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
#f6f9fcPage background in light mode
Light surface
#ffffffCards and raised product frames
Dark canvas
#061526Page background in dark mode
Dark surface
#0b2138Cards and editor frames in dark mode
Primary text
#102a43High-contrast content
Muted text
#5c718aSupporting copy and inactive labels
Accent
#635bffPrimary action and selected state
Accent strong
#8f88ffFocus ring and display signal
Positive
#12b76aHealthy, live, or ready state
Warning
#f2b94bAttention or pending state
Danger
#ed6a5aBlocked 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.
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 shadowDefault cards and sections
Menu
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 / #061526Page and element background
Surface
#ffffff / #0b2138Cards and panels
Raised
#f7f9ff / #112d48Selected rows and nested frames
Soft
#e8eef8 / #193c5dQuiet 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.
Assigned collection
Stripe-inspired Interface Elements
9 published components in collection order
Components
Built from the same system
These working component previews are supplied with the kit. Open a component to inspect its code; the reference screenshots show the original website.
More AI Kits
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 16 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger.
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.