skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-stripe

Apply Stripe's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#fintech#stripe#css tokens#ui generation#brand design
One-click install
npx skills add https://github.com/deepparser/skills --skill design-stripe-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-stripe
Source: https://github.com/deepparser/skills/tree/main/design-stripe
Command: npx skills add https://github.com/deepparser/skills --skill design-stripe-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Stripe's visual identity requires exact design tokens—colors, typography, shadows, and spacing—that are tedious to reverse-engineer from the live site. This Skill provides the complete Stripe design system so generated UI matches the brand without manual inspection. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (Stripe Purple #533afd, Deep Navy #061b31), typography scale with sohne-var and OpenType ss01/tnum features, and blue-tinted multi-layer shadow formulas. - Component Specifications: Detailed styling for buttons, cards, badges, forms, and navigation, plus layout, spacing, border-radius, and responsive breakpoint rules. - Light and Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing every token visualized for verification of implementation details. - Use Case: When asked to build a fintech landing page or dashboard styled like Stripe, the Skill supplies the exact CSS values—weight 300 headlines, 4px radii, rgba(50,50,93,0.25) shadows—so the output is brand-accurate on the first pass. ## Quick Start Build a pricing page hero section styled like Stripe with a purple CTA button and blue-tinted card shadows.

Frequently Asked Questions about design-stripe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Stripe?▼

Use Stripe's design tokens: sohne-var font at weight 300 with the ss01 OpenType feature, #533afd purple for CTAs, #061b31 deep navy headings, and blue-tinted shadows like rgba(50,50,93,0.25). Keep border-radius between 4px and 8px.

What font does Stripe use on its website?▼

Stripe uses sohne-var, a custom variable font, with the ss01 stylistic set enabled on all text and tnum for tabular financial numbers. Source Code Pro is the monospace companion for code, with SF Pro Display as fallback.

Does this design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) with adapted tokens such as #0e0f2e backgrounds, lighter purple #665efd, and adjusted shadow opacity. Both light and dark palettes are fully specified.

What border radius should Stripe-style buttons use?▼

Stripe-style buttons and inputs use a 4px border radius, with 5px-6px for cards and navigation and 8px maximum for featured elements. Pill shapes and radii above 8px are explicitly avoided in this system.

Why do Stripe-style shadows look different from normal CSS shadows?▼

Stripe shadows use a blue-tinted color rgba(50,50,93,0.25) layered with a neutral rgba(0,0,0,0.1) shadow at different offsets and negative spread values. This creates chromatic depth tied to the navy brand palette instead of flat gray elevation.

Related Skills

Explore More Design & Creative Skills→
David-MeloDavid-Melo

dev_agent

Translate brand strategy and design tokens into Astro + Tailwind UI implementations.

Community
Advanced
gooseworks-aigooseworks-ai
1.1k

content-asset-creator

Generate branded HTML content assets from structured data.

Official
Advanced
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced