stripi-inspired-design-analysis

version	alpha
name	Stripi-Inspired-design-analysis
description	An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell.
colors	{"primary":"#533afd","primary-deep":"#4434d4","primary-press":"#2e2b8c","primary-soft":"#665efd","primary-bg-subdued-hover":"#b9b9f9","brand-dark-900":"#1c1e54","ink":"#0d253d","ink-secondary":"#273951","ink-mute":"#64748d","ink-mute-2":"#61718a","on-primary":"#ffffff","canvas":"#ffffff","canvas-soft":"#f6f9fc","canvas-cream":"#f5e9d4","hairline":"#e3e8ee","hairline-input":"#a8c3de","ruby":"#ea2261","magenta":"#f96bee","lemon":"#9b6829","shadow-blue":"#003770"}
typography	{"display-xxl":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"56px","fontWeight":300,"lineHeight":1.03,"letterSpacing":"-1.4px","fontFeature":"ss01"},"display-xl":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"48px","fontWeight":300,"lineHeight":1.15,"letterSpacing":"-0.96px","fontFeature":"ss01"},"display-lg":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"32px","fontWeight":300,"lineHeight":1.1,"letterSpacing":"-0.64px","fontFeature":"ss01"},"display-md":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"26px","fontWeight":300,"lineHeight":1.12,"letterSpacing":"-0.26px","fontFeature":"ss01"},"heading-lg":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"22px","fontWeight":300,"lineHeight":1.1,"letterSpacing":"-0.22px","fontFeature":"ss01"},"heading-md":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"20px","fontWeight":300,"lineHeight":1.4,"letterSpacing":"-0.2px","fontFeature":"ss01"},"heading-sm":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"18px","fontWeight":300,"lineHeight":1.4,"letterSpacing":0,"fontFeature":"ss01"},"body-lg":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"16px","fontWeight":300,"lineHeight":1.4,"letterSpacing":0,"fontFeature":"ss01"},"body-md":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"15px","fontWeight":300,"lineHeight":1.4,"letterSpacing":0,"fontFeature":"ss01"},"body-tabular":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"14px","fontWeight":300,"lineHeight":1.4,"letterSpacing":"-0.42px","fontFeature":"tnum"},"button-md":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"16px","fontWeight":400,"lineHeight":1,"letterSpacing":0,"fontFeature":"ss01"},"button-sm":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"14px","fontWeight":400,"lineHeight":1,"letterSpacing":0,"fontFeature":"ss01"},"caption":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"13px","fontWeight":400,"lineHeight":1.4,"letterSpacing":"-0.39px","fontFeature":"tnum"},"micro":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"11px","fontWeight":300,"lineHeight":1.4,"letterSpacing":0,"fontFeature":"ss01"},"micro-cap":{"fontFamily":"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif","fontSize":"10px","fontWeight":400,"lineHeight":1.15,"letterSpacing":"0.1px","fontFeature":"ss01"}}
rounded	{"xs":"4px","sm":"6px","md":"8px","lg":"12px","xl":"16px","pill":"9999px"}
spacing	{"xxs":"2px","xs":"4px","sm":"8px","md":"12px","lg":"16px","xl":"24px","xxl":"32px","huge":"64px"}
components	{"button-primary-pill":{"backgroundColor":"{colors.primary}","textColor":"{colors.on-primary}","typography":"{typography.button-md}","rounded":"{rounded.pill}","padding":"8px 16px"},"button-primary-pill-pressed":{"backgroundColor":"{colors.primary-press}","textColor":"{colors.on-primary}","typography":"{typography.button-md}","rounded":"{rounded.pill}","padding":"8px 16px"},"button-secondary":{"backgroundColor":"{colors.canvas}","textColor":"{colors.primary}","typography":"{typography.button-md}","rounded":"{rounded.pill}","padding":"8px 16px"},"button-on-dark":{"backgroundColor":"{colors.brand-dark-900}","textColor":"{colors.on-primary}","typography":"{typography.button-md}","rounded":"{rounded.pill}","padding":"8px 16px"},"text-input":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.sm}","padding":"8px 12px"},"text-input-focused":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.sm}","padding":"8px 12px"},"card-feature-light":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.lg}","padding":"32px"},"card-pricing":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.lg}","padding":"32px"},"card-pricing-featured":{"backgroundColor":"{colors.brand-dark-900}","textColor":"{colors.on-primary}","typography":"{typography.body-md}","rounded":"{rounded.lg}","padding":"32px"},"card-cream-band":{"backgroundColor":"{colors.canvas-cream}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.lg}","padding":"32px"},"card-dashboard-mockup":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-tabular}","rounded":"{rounded.lg}","padding":"24px"},"pill-tag-soft":{"backgroundColor":"{colors.primary-bg-subdued-hover}","textColor":"{colors.primary-deep}","typography":"{typography.micro-cap}","rounded":"{rounded.pill}","padding":"4px 8px"},"nav-bar-on-mesh":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink}","typography":"{typography.body-md}","rounded":"{rounded.xs}","padding":"16px 24px"},"link-on-light":{"backgroundColor":"{colors.canvas}","textColor":"{colors.primary}","typography":"{typography.body-md}","rounded":"{rounded.xs}","padding":"0px"},"footer-light":{"backgroundColor":"{colors.canvas}","textColor":"{colors.ink-mute}","typography":"{typography.caption}","rounded":"{rounded.xs}","padding":"64px 24px"}}

Overview

Stripi's design language opens with the gradient mesh. A wide horizontal band of pastel cream, sherbet orange, lavender, electric indigo, and ruby pink occupies the upper third of nearly every marketing page — the brand's instantly-recognizable atmospheric backdrop. Type and product UI mockups float above it on {colors.canvas} (white), with the gradient acting as both decoration and visual anchor. The lower portion of the page returns to white, with feature explanations on {colors.canvas-soft} (a barely-tinted cool off-white) and dashboard product mockups composited as faux IDE/console panels in deep navy.

The color system has two primary roles. Indigo ({colors.primary} — #533afd) is the brand's signature CTA color, used sparingly: one filled pill per band. Deep navy ({colors.ink} — #0d253d) is the universal body text color and the fill of dashboard mockups, the featured pricing tier, and the dark-app surfaces on the dashboard track. Ruby ({colors.ruby}) and magenta ({colors.magenta}) appear inside the gradient mesh and as accent dots in product UI mockups; they are not used as button colors.

Typography is built around Sohne at weight 300 with negative letter-spacing — the brand's editorial-density display signature. Display sizes (32–56px) use -1.4px to -0.64px tracking; body sizes use 0; tabular caption sizes (where money and numerics matter) use the OpenType tnum feature plus a tightening -0.36 to -0.42px tracking. The ss01 stylistic set is enabled across all roles.

Key Characteristics:

• Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
• Single-indigo CTA hierarchy: filled {colors.primary} pill is the only filled button on marketing surfaces.
• Sohne thin (weight 300) display tier with negative tracking from -1.4px to -0.2px depending on size.
• Tabular-figure body type (tnum) for any cell containing money or numerics — the brand's quiet financial-data signal.
• Dark-app dashboard track: deep navy product UI mockups sit composited above the white canvas, frequently with rendered code or dashboard tables inside.
• Pill-shaped buttons ({rounded.pill} 9999px) with tight 8px 16px padding — short, decisive, transactional.
• Cream-band feature cards ({colors.canvas-cream}) introduce a warm interlude between blue/white sections without breaking the brand's chromatic logic.