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 spectrumAn unofficial, original Stripe-inspired system for payments, billing models, and revenue infrastructure, narrowed to the patterns visibly supported by the current reference.
Delivered component specimen
HTML + CSS + JavaScript
Frontend ForeverInspect the kit's typography, palette, icons, spacing and motion.
Style identity
A high-contrast commerce language for converting attention into payments, billing models, and measurable revenue capacity.
Reference style: adaptive navy and spectrumTypography
Sohne Variable
Large revenue narrative, navigation, controls, and product explanations
sohne-var, "SF Pro Display", sans-serifFallback: "SF Pro Display", sans-serif
Source Code Pro
Amounts, usage values, API-shaped metadata, and metrics
SourceCodePro, ui-monospace, SFMono-Regular, Menlo, monospaceFallback: ui-monospace, SFMono-Regular, Menlo, monospace
Palette
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
| 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
Iconography
Use outlined symbols for product families and pair every metric or status with a textual label.
System metrics
Radius
Spacing
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
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
9 published components in collection order
Components
HTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverHTML + CSS + JavaScript
Frontend ForeverMore AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
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.
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.