first commit
This commit is contained in:
necatiozmen
322
design-md/stripe/DESIGN.md
Normal file
322
design-md/stripe/DESIGN.md
Normal file
@@ -0,0 +1,322 @@
|
||||
# Design System: Stripe
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a clean white canvas (`#ffffff`) with deep navy headings (`#061b31`) and a signature purple (`#533afd`) that functions as both brand anchor and interactive accent. This isn't the cold, clinical purple of enterprise software; it's a rich, saturated violet that reads as confident and premium. The overall impression is of a financial institution redesigned by a world-class type foundry.
|
||||
|
||||
The custom `sohne-var` variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType `"ss01"` stylistic set, which modifies character shapes for a distinctly geometric, modern feel. At display sizes (48px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the "bold hero headline" convention; Stripe's headlines feel like they don't need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks. At smaller sizes, the system also uses weight 300 with proportionally reduced tracking, and tabular numerals via `"tnum"` for financial data display.
|
||||
|
||||
What truly distinguishes Stripe is its shadow system. Rather than the flat or single-layer approach of most sites, Stripe uses multi-layer, blue-tinted shadows: the signature `rgba(50,50,93,0.25)` combined with `rgba(0,0,0,0.1)` creates shadows with a cool, almost atmospheric depth -- like elements are floating in a twilight sky. The blue-gray undertone of the primary shadow color (50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand.
|
||||
|
||||
**Key Characteristics:**
|
||||
- sohne-var with OpenType `"ss01"` on all text -- a custom stylistic set that defines the brand's letterforms
|
||||
- Weight 300 as the signature headline weight -- light, confident, anti-convention
|
||||
- Negative letter-spacing at display sizes (-1.4px at 56px, progressive relaxation downward)
|
||||
- Blue-tinted multi-layer shadows using `rgba(50,50,93,0.25)` -- elevation that feels brand-colored
|
||||
- Deep navy (`#061b31`) headings instead of black -- warm, premium, financial-grade
|
||||
- Conservative border-radius (4px-8px) -- nothing pill-shaped, nothing harsh
|
||||
- Ruby (`#ea2261`) and magenta (`#f96bee`) accents for gradient and decorative elements
|
||||
- `SourceCodePro` as the monospace companion for code and technical labels
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Primary
|
||||
- **Stripe Purple** (`#533afd`): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet that anchors the entire system.
|
||||
- **Deep Navy** (`#061b31`): `--hds-color-heading-solid`. Primary heading color. Not black, not gray -- a very dark blue that adds warmth and depth to text.
|
||||
- **Pure White** (`#ffffff`): Page background, card surfaces, button text on dark backgrounds.
|
||||
|
||||
### Brand & Dark
|
||||
- **Brand Dark** (`#1c1e54`): `--hds-color-util-brand-900`. Deep indigo for dark sections, footer backgrounds, and immersive brand moments.
|
||||
- **Dark Navy** (`#0d253d`): `--hds-color-core-neutral-975`. The darkest neutral -- almost-black with a blue undertone for maximum depth without harshness.
|
||||
|
||||
### Accent Colors
|
||||
- **Ruby** (`#ea2261`): `--hds-color-accentColorMode-ruby-icon-solid`. Warm red-pink for icons, alerts, and accent elements.
|
||||
- **Magenta** (`#f96bee`): `--hds-color-accentColorMode-magenta-icon-gradientMiddle`. Vivid pink-purple for gradients and decorative highlights.
|
||||
- **Magenta Light** (`#ffd7ef`): `--hds-color-util-accent-magenta-100`. Tinted surface for magenta-themed cards and badges.
|
||||
|
||||
### Interactive
|
||||
- **Primary Purple** (`#533afd`): Primary link color, active states, selected elements.
|
||||
- **Purple Hover** (`#4434d4`): Darker purple for hover states on primary elements.
|
||||
- **Purple Deep** (`#2e2b8c`): `--hds-color-button-ui-iconHover`. Dark purple for icon hover states.
|
||||
- **Purple Light** (`#b9b9f9`): `--hds-color-action-bg-subduedHover`. Soft lavender for subdued hover backgrounds.
|
||||
- **Purple Mid** (`#665efd`): `--hds-color-input-selector-text-range`. Range selector and input highlight color.
|
||||
|
||||
### Neutral Scale
|
||||
- **Heading** (`#061b31`): Primary headings, nav text, strong labels.
|
||||
- **Label** (`#273951`): `--hds-color-input-text-label`. Form labels, secondary headings.
|
||||
- **Body** (`#64748d`): Secondary text, descriptions, captions.
|
||||
- **Success Green** (`#15be53`): Status badges, success indicators (with 0.2-0.4 alpha for backgrounds/borders).
|
||||
- **Success Text** (`#108c3d`): Success badge text color.
|
||||
- **Lemon** (`#9b6829`): `--hds-color-core-lemon-500`. Warning and highlight accent.
|
||||
|
||||
### Surface & Borders
|
||||
- **Border Default** (`#e5edf5`): Standard border color for cards, dividers, and containers.
|
||||
- **Border Purple** (`#b9b9f9`): Active/selected state borders on buttons and inputs.
|
||||
- **Border Soft Purple** (`#d6d9fc`): Subtle purple-tinted borders for secondary elements.
|
||||
- **Border Magenta** (`#ffd7ef`): Pink-tinted borders for magenta-themed elements.
|
||||
- **Border Dashed** (`#362baa`): Dashed borders for drop zones and placeholder elements.
|
||||
|
||||
### Shadow Colors
|
||||
- **Shadow Blue** (`rgba(50,50,93,0.25)`): The signature -- blue-tinted primary shadow color.
|
||||
- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`): Deeper blue shadow for elevated elements.
|
||||
- **Shadow Black** (`rgba(0,0,0,0.1)`): Secondary shadow layer for depth reinforcement.
|
||||
- **Shadow Ambient** (`rgba(23,23,23,0.08)`): Soft ambient shadow for subtle elevation.
|
||||
- **Shadow Soft** (`rgba(23,23,23,0.06)`): Minimal ambient shadow for light lift.
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
### Font Family
|
||||
- **Primary**: `sohne-var`, with fallback: `SF Pro Display`
|
||||
- **Monospace**: `SourceCodePro`, with fallback: `SFMono-Regular`
|
||||
- **OpenType Features**: `"ss01"` enabled globally on all sohne-var text; `"tnum"` for tabular numbers on financial data and captions.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |
|
||||
|------|------|------|--------|-------------|----------------|----------|-------|
|
||||
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority |
|
||||
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | Secondary hero headlines |
|
||||
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles |
|
||||
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections |
|
||||
| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads |
|
||||
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text |
|
||||
| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | Standard reading text |
|
||||
| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | Primary button text |
|
||||
| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Secondary/compact buttons |
|
||||
| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | Navigation links |
|
||||
| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | Small labels, metadata |
|
||||
| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | Fine print, timestamps |
|
||||
| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | Financial data, numbers |
|
||||
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | Tiny labels, axis markers |
|
||||
| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | Chart data, small numbers |
|
||||
| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | Smallest labels |
|
||||
| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | Code blocks, syntax |
|
||||
| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | Bold code, keywords |
|
||||
| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | Technical labels |
|
||||
| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | Tiny code annotations |
|
||||
|
||||
### Principles
|
||||
- **Light weight as signature**: Weight 300 at display sizes is Stripe's most distinctive typographic choice. Where others use 600-700 to command attention, Stripe uses lightness as luxury -- the text is so confident it doesn't need weight to be authoritative.
|
||||
- **ss01 everywhere**: The `"ss01"` stylistic set is non-negotiable. It modifies specific glyphs (likely alternate `a`, `g`, `l` forms) to create a more geometric, contemporary feel across all sohne-var text.
|
||||
- **Two OpenType modes**: `"ss01"` for display/body text, `"tnum"` for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a data table uses tnum.
|
||||
- **Progressive tracking**: Letter-spacing tightens proportionally with size: -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, -0.26px at 26px, normal at 16px and below.
|
||||
- **Two-weight simplicity**: Primarily 300 (body and headings) and 400 (UI/buttons). No bold (700) in the primary font -- SourceCodePro uses 500/700 for code contrast.
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Buttons
|
||||
|
||||
**Primary Purple**
|
||||
- Background: `#533afd`
|
||||
- Text: `#ffffff`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Font: 16px sohne-var weight 400, `"ss01"`
|
||||
- Hover: `#4434d4` background
|
||||
- Use: Primary CTA ("Start now", "Contact sales")
|
||||
|
||||
**Ghost / Outlined**
|
||||
- Background: transparent
|
||||
- Text: `#533afd`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid #b9b9f9`
|
||||
- Font: 16px sohne-var weight 400, `"ss01"`
|
||||
- Hover: background shifts to `rgba(83,58,253,0.05)`
|
||||
- Use: Secondary actions
|
||||
|
||||
**Transparent Info**
|
||||
- Background: transparent
|
||||
- Text: `#2874ad`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid rgba(43,145,223,0.2)`
|
||||
- Use: Tertiary/info-level actions
|
||||
|
||||
**Neutral Ghost**
|
||||
- Background: transparent (`rgba(255,255,255,0)`)
|
||||
- Text: `rgba(16,16,16,0.3)`
|
||||
- Padding: 8px 16px
|
||||
- Radius: 4px
|
||||
- Outline: `1px solid rgb(212,222,233)`
|
||||
- Use: Disabled or muted actions
|
||||
|
||||
### Cards & Containers
|
||||
- Background: `#ffffff`
|
||||
- Border: `1px solid #e5edf5` (standard) or `1px solid #061b31` (dark accent)
|
||||
- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured)
|
||||
- Shadow (standard): `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
|
||||
- Shadow (ambient): `rgba(23,23,23,0.08) 0px 15px 35px 0px`
|
||||
- Hover: shadow intensifies, often adding the blue-tinted layer
|
||||
|
||||
### Badges / Tags / Pills
|
||||
**Neutral Pill**
|
||||
- Background: `#ffffff`
|
||||
- Text: `#000000`
|
||||
- Padding: 0px 6px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid #f6f9fc`
|
||||
- Font: 11px weight 400
|
||||
|
||||
**Success Badge**
|
||||
- Background: `rgba(21,190,83,0.2)`
|
||||
- Text: `#108c3d`
|
||||
- Padding: 1px 6px
|
||||
- Radius: 4px
|
||||
- Border: `1px solid rgba(21,190,83,0.4)`
|
||||
- Font: 10px weight 300
|
||||
|
||||
### Inputs & Forms
|
||||
- Border: `1px solid #e5edf5`
|
||||
- Radius: 4px
|
||||
- Focus: `1px solid #533afd` or purple ring
|
||||
- Label: `#273951`, 14px sohne-var
|
||||
- Text: `#061b31`
|
||||
- Placeholder: `#64748d`
|
||||
|
||||
### Navigation
|
||||
- Clean horizontal nav on white, sticky with blur backdrop
|
||||
- Brand logotype left-aligned
|
||||
- Links: sohne-var 14px weight 400, `#061b31` text with `"ss01"`
|
||||
- Radius: 6px on nav container
|
||||
- CTA: purple button right-aligned ("Sign in", "Start now")
|
||||
- Mobile: hamburger toggle with 6px radius
|
||||
|
||||
### Decorative Elements
|
||||
**Dashed Borders**
|
||||
- `1px dashed #362baa` (purple) for placeholder/drop zones
|
||||
- `1px dashed #ffd7ef` (magenta) for magenta-themed decorative borders
|
||||
|
||||
**Gradient Accents**
|
||||
- Ruby-to-magenta gradients (`#ea2261` to `#f96bee`) for hero decorations
|
||||
- Brand dark sections use `#1c1e54` backgrounds with white text
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
### Spacing System
|
||||
- Base unit: 8px
|
||||
- Scale: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
|
||||
- Notable: The scale is dense at the small end (every 2px from 4-12), reflecting Stripe's precision-oriented UI for financial data
|
||||
|
||||
### Grid & Container
|
||||
- Max content width: approximately 1080px
|
||||
- Hero: centered single-column with generous padding, lightweight headlines
|
||||
- Feature sections: 2-3 column grids for feature cards
|
||||
- Full-width dark sections with `#1c1e54` background for brand immersion
|
||||
- Code/dashboard previews as contained cards with blue-tinted shadows
|
||||
|
||||
### Whitespace Philosophy
|
||||
- **Precision spacing**: Unlike the vast emptiness of minimalist systems, Stripe uses measured, purposeful whitespace. Every gap is a deliberate typographic choice.
|
||||
- **Dense data, generous chrome**: Financial data displays (tables, charts) are tightly packed, but the UI chrome around them is generously spaced. This creates a sense of controlled density -- like a well-organized spreadsheet in a beautiful frame.
|
||||
- **Section rhythm**: White sections alternate with dark brand sections (`#1c1e54`), creating a dramatic light/dark cadence that prevents monotony without introducing arbitrary color.
|
||||
|
||||
### Border Radius Scale
|
||||
- Micro (1px): Fine-grained elements, subtle rounding
|
||||
- Standard (4px): Buttons, inputs, badges, cards -- the workhorse
|
||||
- Comfortable (5px): Standard card containers
|
||||
- Relaxed (6px): Navigation, larger interactive elements
|
||||
- Large (8px): Featured cards, hero elements
|
||||
- Compound: `0px 0px 6px 6px` for bottom-rounded containers (tab panels, dropdown footers)
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
| Level | Treatment | Use |
|
||||
|-------|-----------|-----|
|
||||
| Flat (Level 0) | No shadow | Page background, inline text |
|
||||
| Ambient (Level 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | Subtle card lift, hover hints |
|
||||
| Standard (Level 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | Standard cards, content panels |
|
||||
| Elevated (Level 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | Featured cards, dropdowns, popovers |
|
||||
| Deep (Level 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | Modals, floating panels |
|
||||
| Ring (Accessibility) | `2px solid #533afd` outline | Keyboard focus ring |
|
||||
|
||||
**Shadow Philosophy**: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (`rgba(50,50,93,0.25)`) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that don't just add depth -- they add brand atmosphere. The multi-layer approach pairs this blue-tinted shadow with a pure black secondary layer (`rgba(0,0,0,0.1)`) at a different offset, creating a parallax-like depth where the branded shadow sits farther from the element and the neutral shadow sits closer. The negative spread values (-30px, -18px) ensure shadows don't extend beyond the element's footprint horizontally, keeping elevation vertical and controlled.
|
||||
|
||||
### Decorative Depth
|
||||
- Dark brand sections (`#1c1e54`) create immersive depth through background color contrast
|
||||
- Gradient overlays with ruby-to-magenta transitions for hero decorations
|
||||
- Shadow color `rgba(0,55,112,0.08)` (`--hds-color-shadow-sm-top`) for top-edge shadows on sticky elements
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
- Use sohne-var with `"ss01"` on every text element -- the stylistic set IS the brand
|
||||
- Use weight 300 for all headlines and body text -- lightness is the signature
|
||||
- Apply blue-tinted shadows (`rgba(50,50,93,0.25)`) for all elevated elements
|
||||
- Use `#061b31` (deep navy) for headings instead of `#000000` -- the warmth matters
|
||||
- Keep border-radius between 4px-8px -- conservative rounding is intentional
|
||||
- Use `"tnum"` for any tabular/financial number display
|
||||
- Layer shadows: blue-tinted far + neutral close for depth parallax
|
||||
- Use `#533afd` purple as the primary interactive/CTA color
|
||||
|
||||
### Don't
|
||||
- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice
|
||||
- Don't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe is conservative
|
||||
- Don't use neutral gray shadows -- always tint with blue (`rgba(50,50,93,...)`)
|
||||
- Don't skip `"ss01"` on any sohne-var text -- the alternate glyphs define the personality
|
||||
- Don't use pure black (`#000000`) for headings -- always `#061b31` deep navy
|
||||
- Don't use warm accent colors (orange, yellow) for interactive elements -- purple is primary
|
||||
- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight
|
||||
- Don't use the magenta/ruby accents for buttons or links -- they're decorative/gradient only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
### Breakpoints
|
||||
| Name | Width | Key Changes |
|
||||
|------|-------|-------------|
|
||||
| Mobile | <640px | Single column, reduced heading sizes, stacked cards |
|
||||
| Tablet | 640-1024px | 2-column grids, moderate padding |
|
||||
| Desktop | 1024-1280px | Full layout, 3-column feature grids |
|
||||
| Large Desktop | >1280px | Centered content with generous margins |
|
||||
|
||||
### Touch Targets
|
||||
- Buttons use comfortable padding (8px-16px vertical)
|
||||
- Navigation links at 14px with adequate spacing
|
||||
- Badges have 6px horizontal padding minimum for tap targets
|
||||
- Mobile nav toggle with 6px radius button
|
||||
|
||||
### Collapsing Strategy
|
||||
- Hero: 56px display -> 32px on mobile, weight 300 maintained
|
||||
- Navigation: horizontal links + CTAs -> hamburger toggle
|
||||
- Feature cards: 3-column -> 2-column -> single column stacked
|
||||
- Dark brand sections: maintain full-width treatment, reduce internal padding
|
||||
- Financial data tables: horizontal scroll on mobile
|
||||
- Section spacing: 64px+ -> 40px on mobile
|
||||
- Typography scale compresses: 56px -> 48px -> 32px hero sizes across breakpoints
|
||||
|
||||
### Image Behavior
|
||||
- Dashboard/product screenshots maintain blue-tinted shadow at all sizes
|
||||
- Hero gradient decorations simplify on mobile
|
||||
- Code blocks maintain `SourceCodePro` treatment, may horizontally scroll
|
||||
- Card images maintain consistent 4px-6px border-radius
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
### Quick Color Reference
|
||||
- Primary CTA: Stripe Purple (`#533afd`)
|
||||
- CTA Hover: Purple Dark (`#4434d4`)
|
||||
- Background: Pure White (`#ffffff`)
|
||||
- Heading text: Deep Navy (`#061b31`)
|
||||
- Body text: Slate (`#64748d`)
|
||||
- Label text: Dark Slate (`#273951`)
|
||||
- Border: Soft Blue (`#e5edf5`)
|
||||
- Link: Stripe Purple (`#533afd`)
|
||||
- Dark section: Brand Dark (`#1c1e54`)
|
||||
- Success: Green (`#15be53`)
|
||||
- Accent decorative: Ruby (`#ea2261`), Magenta (`#f96bee`)
|
||||
|
||||
### Example Component Prompts
|
||||
- "Create a hero section on white background. Headline at 48px sohne-var weight 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px radius)."
|
||||
- "Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, 'ss01'. Body at 16px weight 300, #64748d."
|
||||
- "Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid rgba(21,190,83,0.4)."
|
||||
- "Create navigation: white sticky header with backdrop-filter blur(12px). sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px radius."
|
||||
- "Design a dark brand section: #1c1e54 background, white text. Headline 32px sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300, rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px radius."
|
||||
|
||||
### Iteration Guide
|
||||
1. Always enable `font-feature-settings: "ss01"` on sohne-var text -- this is the brand's typographic DNA
|
||||
2. Weight 300 is the default; use 400 only for buttons/links/navigation
|
||||
3. Shadow formula: `rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2` where Y1/B1 are larger (far shadow) and Y2/B2 are smaller (near shadow)
|
||||
4. Heading color is `#061b31` (deep navy), body is `#64748d` (slate), labels are `#273951` (dark slate)
|
||||
5. Border-radius stays in the 4px-8px range -- never use pill shapes or large rounding
|
||||
6. Use `"tnum"` for any numbers in tables, charts, or financial displays
|
||||
7. Dark sections use `#1c1e54` -- not black, not gray, but a deep branded indigo
|
||||
8. SourceCodePro for code at 12px/500 with 2.00 line-height (very generous for readability)
|
||||
25
design-md/stripe/README.md
Normal file
25
design-md/stripe/README.md
Normal file
@@ -0,0 +1,25 @@
|
||||
# Stripe — Design System
|
||||
|
||||
> Design.md extracted from the public [stripe](https://stripe.dev/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Description |
|
||||
|------|-------------|
|
||||
| `DESIGN.md` | Complete design system documentation (9 sections) |
|
||||
| `preview.html` | Interactive design token catalog (light) |
|
||||
| `preview-dark.html` | Interactive design token catalog (dark) |
|
||||
|
||||
## Usage
|
||||
|
||||
Open `DESIGN.md` to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that matches the Stripe design language.
|
||||
|
||||
## Preview
|
||||
|
||||
A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
|
||||
|
||||
### Dark Mode
|
||||
|
||||
|
||||
### Light Mode
|
||||
|
||||
430
design-md/stripe/preview-dark.html
Normal file
430
design-md/stripe/preview-dark.html
Normal file
@@ -0,0 +1,430 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Stripe (Dark)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'sohne-var';
|
||||
src: local('sohne-var'), local('Sohne'), local('SF Pro Display');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
:root {
|
||||
--purple: #665efd;
|
||||
--purple-hover: #7a73ff;
|
||||
--purple-deep: #533afd;
|
||||
--purple-light: #3d3a7a;
|
||||
--purple-mid: #b9b9f9;
|
||||
--navy: #e8ecf0;
|
||||
--dark-navy: #c8d0da;
|
||||
--brand-dark: #0e0f2e;
|
||||
--white: #0e0f2e;
|
||||
--ruby: #ea2261;
|
||||
--magenta: #f96bee;
|
||||
--magenta-light: rgba(255,215,239,0.1);
|
||||
--success: #15be53;
|
||||
--success-text: #4cdf80;
|
||||
--lemon: #d4a04a;
|
||||
--slate: #8a95a8;
|
||||
--dark-slate: #a0aec0;
|
||||
--border: rgba(255,255,255,0.1);
|
||||
--border-purple: rgba(185,185,249,0.3);
|
||||
--border-soft: rgba(214,217,252,0.15);
|
||||
--shadow-blue: rgba(50,50,93,0.4);
|
||||
--shadow-dark-blue: rgba(3,3,39,0.5);
|
||||
--shadow-black: rgba(0,0,0,0.3);
|
||||
--shadow-ambient: rgba(0,0,0,0.3);
|
||||
--shadow-soft: rgba(0,0,0,0.2);
|
||||
--shadow-card: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;
|
||||
--shadow-ambient-card: rgba(0,0,0,0.3) 0px 15px 35px 0px;
|
||||
--shadow-subtle: rgba(0,0,0,0.2) 0px 3px 6px 0px;
|
||||
--font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--navy);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 300; line-height: 1.40;
|
||||
font-feature-settings: "ss01" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(14,15,46,0.90);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--slate); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--navy); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--purple); color: #ffffff;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.nav-cta:hover { background: var(--purple-hover); }
|
||||
|
||||
/* DARK MODE BADGE */
|
||||
.dark-badge {
|
||||
position: fixed; top: 16px; right: 16px; z-index: 200;
|
||||
background: var(--purple); color: #ffffff;
|
||||
font-size: 11px; font-weight: 400; padding: 4px 10px; border-radius: 4px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 300; line-height: 1.15;
|
||||
letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--purple); color: #ffffff;
|
||||
padding: 10px 20px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-primary:hover { background: var(--purple-hover); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--purple-mid);
|
||||
padding: 10px 20px; border-radius: 4px;
|
||||
border: 1px solid var(--border-purple);
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(102,94,253,0.1); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }
|
||||
.color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 300; color: var(--slate); margin-top: 8px; }
|
||||
.btn-info {
|
||||
display: inline-block; background: transparent; color: #5ba8d9;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
border: 1px solid rgba(91,168,217,0.25); text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-neutral {
|
||||
display: inline-block; background: transparent; color: rgba(232,236,240,0.3);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
outline: 1px solid rgba(255,255,255,0.1); border: none; text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-success {
|
||||
display: inline-block; background: rgba(21,190,83,0.15); color: #4cdf80;
|
||||
padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;
|
||||
border: 1px solid rgba(21,190,83,0.3);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-neutral {
|
||||
display: inline-block; background: rgba(255,255,255,0.05); color: var(--slate);
|
||||
padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: rgba(255,255,255,0.03); border-radius: 6px; padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: box-shadow 0.25s ease;
|
||||
}
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }
|
||||
.card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }
|
||||
.card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: rgba(255,255,255,0.05); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--purple); }
|
||||
.form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: rgba(255,255,255,0.05); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--purple); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
.radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }
|
||||
.footer a { color: var(--purple-mid); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 32px; letter-spacing: -0.64px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start now</a>
|
||||
</nav>
|
||||
<div class="dark-badge">Dark Mode</div>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Stripe</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-primary" href="#">Start now</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#533afd"></div><div class="color-swatch-info"><div class="color-swatch-name">Stripe Purple</div><div class="color-swatch-hex">#533afd</div><div class="color-swatch-role">Primary brand, CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#061b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#061b31</div><div class="color-swatch-role">Headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid rgba(255,255,255,0.1)"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Dark</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1e54"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Dark</div><div class="color-swatch-hex">#1c1e54</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0d253d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Navy</div><div class="color-swatch-hex">#0d253d</div><div class="color-swatch-role">Darkest neutral</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ea2261"></div><div class="color-swatch-info"><div class="color-swatch-name">Ruby</div><div class="color-swatch-hex">#ea2261</div><div class="color-swatch-role">Accent, alerts</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f96bee"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta</div><div class="color-swatch-hex">#f96bee</div><div class="color-swatch-role">Gradients, decorative</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd7ef"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta Light</div><div class="color-swatch-hex">#ffd7ef</div><div class="color-swatch-role">Tinted surface</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive Purple Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4434d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Hover</div><div class="color-swatch-hex">#4434d4</div><div class="color-swatch-role">CTA hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#665efd"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Mid</div><div class="color-swatch-hex">#665efd</div><div class="color-swatch-role">Range selectors</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b9b9f9"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Light</div><div class="color-swatch-hex">#b9b9f9</div><div class="color-swatch-role">Subdued hover bg</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2e2b8c"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#2e2b8c</div><div class="color-swatch-role">Icon hover</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#273951"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#273951</div><div class="color-swatch-role">Labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#64748d"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#64748d</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5edf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5edf5</div><div class="color-swatch-role">Default border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#15be53"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#15be53</div><div class="color-swatch-role">Status, badges</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9b6829"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon</div><div class="color-swatch-hex">#9b6829</div><div class="color-swatch-role">Warning accent</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d6d9fc"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Soft</div><div class="color-swatch-hex">#d6d9fc</div><div class="color-swatch-role">Purple-tinted border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#362baa"></div><div class="color-swatch-info"><div class="color-swatch-name">Dashed Border</div><div class="color-swatch-hex">#362baa</div><div class="color-swatch-role">Drop zones</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.03; letter-spacing:-1.4px; color:var(--navy);">Display Hero</div><div class="type-meta">Display Hero -- 56px / 300 / 1.03 / -1.4px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);">Display Large</div><div class="type-meta">Display Large -- 48px / 300 / 1.15 / -0.96px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);">Section Heading</div><div class="type-meta">Section Heading -- 32px / 300 / 1.10 / -0.64px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);">Sub-heading Large</div><div class="type-meta">Sub-heading -- 26px / 300 / 1.12 / -0.26px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);">Sub-heading</div><div class="type-meta">Sub-heading -- 22px / 300 / 1.10 / -0.22px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.</div><div class="type-meta">Body Large -- 18px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);">Body -- Standard reading text for descriptions and content.</div><div class="type-meta">Body -- 16px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);">Button Text</div><div class="type-meta">Button -- 16px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);">Link / Navigation</div><div class="type-meta">Link -- 14px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);">Caption -- Small labels and metadata</div><div class="type-meta">Caption -- 12px / 300 / 1.45 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;">$1,234,567.89</div><div class="type-meta">Tabular Numbers -- 12px / 300 / 1.33 / -0.36px / sohne-var "tnum"</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;">const stripe = require('stripe')('sk_test_...');</div><div class="type-meta">Code Body -- 12px / 500 / 2.00 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;">API VERSION</div><div class="type-meta">Code Label -- 12px / 500 / uppercase / Source Code Pro</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-primary" href="#">Start now</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-info" href="#">Learn more</a><div class="button-label">Transparent Info</div></div>
|
||||
<div class="button-item"><a class="btn-neutral" href="#">Disabled</a><div class="button-label">Neutral Ghost</div></div>
|
||||
<div class="button-item"><span class="badge-success">Active</span><div class="button-label">Success Badge</div></div>
|
||||
<div class="button-item"><span class="badge-neutral">v2024-12</span><div class="button-label">Neutral Badge</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(83,58,253,0.15); color:var(--purple-mid);">Payments</div>
|
||||
<h3>Online Payments</h3>
|
||||
<p>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(234,34,97,0.15); color:var(--ruby);">Elevated</div>
|
||||
<h3>Revenue Recognition</h3>
|
||||
<p>Automate your revenue reporting. Card shown with full shadow stack for elevated importance.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(21,190,83,0.1); color:var(--success-text);">Connect</div>
|
||||
<h3>Platform Payments</h3>
|
||||
<p>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--focus" type="text" value="https://api.example.com/webhook"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--error" type="text" value="invalid-email"><div class="form-state-label">Error (ruby ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Metadata</label><textarea class="form-textarea" placeholder='{"key": "value"}'></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:14px"></div><div class="spacing-value">14</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1px"></div><div class="radius-label">1px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Standard cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Nav, large cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Featured</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.2) 0px 3px 6px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Ambient soft</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.3) 0px 15px 35px 0px;"><div class="elevation-label">Level 2: Standard</div><div class="elevation-desc">Ambient card</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.4) 0px 30px 45px -30px, rgba(0,0,0,0.3) 0px 18px 36px -18px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Dual layer deep</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(0,0,0,0.5) 0px 14px 21px -14px, rgba(0,0,0,0.3) 0px 8px 17px -8px;"><div class="elevation-label">Level 4: Deep</div><div class="elevation-desc">Dark deep</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://stripe.com/">stripe.com</a> DESIGN.md -- awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
421
design-md/stripe/preview.html
Normal file
421
design-md/stripe/preview.html
Normal file
@@ -0,0 +1,421 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Design System Preview: Stripe (Light)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'sohne-var';
|
||||
src: local('sohne-var'), local('Sohne'), local('SF Pro Display');
|
||||
font-weight: 100 900;
|
||||
font-display: swap;
|
||||
}
|
||||
:root {
|
||||
--purple: #533afd;
|
||||
--purple-hover: #4434d4;
|
||||
--purple-deep: #2e2b8c;
|
||||
--purple-light: #b9b9f9;
|
||||
--purple-mid: #665efd;
|
||||
--navy: #061b31;
|
||||
--dark-navy: #0d253d;
|
||||
--brand-dark: #1c1e54;
|
||||
--white: #ffffff;
|
||||
--ruby: #ea2261;
|
||||
--magenta: #f96bee;
|
||||
--magenta-light: #ffd7ef;
|
||||
--success: #15be53;
|
||||
--success-text: #108c3d;
|
||||
--lemon: #9b6829;
|
||||
--slate: #64748d;
|
||||
--dark-slate: #273951;
|
||||
--border: #e5edf5;
|
||||
--border-purple: #b9b9f9;
|
||||
--border-soft: #d6d9fc;
|
||||
--shadow-blue: rgba(50,50,93,0.25);
|
||||
--shadow-dark-blue: rgba(3,3,39,0.25);
|
||||
--shadow-black: rgba(0,0,0,0.1);
|
||||
--shadow-ambient: rgba(23,23,23,0.08);
|
||||
--shadow-soft: rgba(23,23,23,0.06);
|
||||
--shadow-card: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;
|
||||
--shadow-ambient-card: rgba(23,23,23,0.08) 0px 15px 35px 0px;
|
||||
--shadow-subtle: rgba(23,23,23,0.06) 0px 3px 6px 0px;
|
||||
--font-primary: 'sohne-var', 'SF Pro Display', -apple-system, system-ui, sans-serif;
|
||||
--font-mono: 'Source Code Pro', SFMono-Regular, ui-monospace, Menlo, monospace;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: var(--white);
|
||||
color: var(--navy);
|
||||
font-family: var(--font-primary);
|
||||
font-size: 16px; font-weight: 300; line-height: 1.40;
|
||||
font-feature-settings: "ss01" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* NAV */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 100;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 32px;
|
||||
background: rgba(255,255,255,0.90);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
.nav-brand { font-size: 14px; font-weight: 400; color: var(--navy); text-decoration: none; letter-spacing: -0.28px; }
|
||||
.nav-links { display: flex; gap: 24px; list-style: none; }
|
||||
.nav-links a { font-size: 14px; font-weight: 400; color: var(--slate); text-decoration: none; transition: color 0.15s; }
|
||||
.nav-links a:hover { color: var(--navy); }
|
||||
.nav-cta {
|
||||
display: inline-block; background: var(--purple); color: var(--white);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
text-decoration: none; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.nav-cta:hover { background: var(--purple-hover); }
|
||||
|
||||
/* HERO */
|
||||
.hero { padding: 96px 32px 80px; text-align: center; }
|
||||
.hero h1 {
|
||||
font-size: 48px; font-weight: 300; line-height: 1.15;
|
||||
letter-spacing: -0.96px; color: var(--navy); margin-bottom: 16px;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.hero p { font-size: 18px; font-weight: 300; line-height: 1.40; color: var(--slate); max-width: 560px; margin: 0 auto 32px; }
|
||||
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
|
||||
.btn-primary {
|
||||
display: inline-block; background: var(--purple); color: var(--white);
|
||||
padding: 10px 20px; border-radius: 4px; border: none;
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-primary:hover { background: var(--purple-hover); }
|
||||
.btn-ghost {
|
||||
display: inline-block; background: transparent; color: var(--purple);
|
||||
padding: 10px 20px; border-radius: 4px;
|
||||
border: 1px solid var(--border-purple);
|
||||
font-family: var(--font-primary); font-size: 16px; font-weight: 400;
|
||||
text-decoration: none; cursor: pointer; transition: background 0.15s;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(83,58,253,0.05); }
|
||||
|
||||
/* SECTIONS */
|
||||
.section { padding: 64px 32px; max-width: 1080px; margin: 0 auto; }
|
||||
.section-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.5px; }
|
||||
.section-title { font-size: 32px; font-weight: 300; line-height: 1.10; letter-spacing: -0.64px; margin-bottom: 32px; color: var(--navy); }
|
||||
.section-divider { border: none; border-top: 1px solid var(--border); margin: 0; }
|
||||
|
||||
/* COLORS */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; margin-bottom: 24px; }
|
||||
.color-swatch { border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
|
||||
.color-swatch-block { height: 72px; width: 100%; }
|
||||
.color-swatch-info { padding: 10px 12px; }
|
||||
.color-swatch-name { font-size: 13px; font-weight: 400; margin-bottom: 2px; letter-spacing: -0.26px; color: var(--navy); }
|
||||
.color-swatch-hex { font-size: 12px; color: var(--slate); font-family: var(--font-mono); }
|
||||
.color-swatch-role { font-size: 11px; color: var(--slate); margin-top: 3px; font-weight: 300; }
|
||||
.color-group-label { font-size: 14px; font-weight: 400; color: var(--dark-slate); letter-spacing: -0.28px; margin: 24px 0 10px; }
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
.type-sample { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
|
||||
.type-sample:last-child { border-bottom: none; }
|
||||
.type-meta { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--slate); margin-top: 8px; }
|
||||
|
||||
/* BUTTONS */
|
||||
.button-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||||
.button-item { text-align: center; }
|
||||
.button-label { font-size: 12px; font-weight: 300; color: var(--slate); margin-top: 8px; }
|
||||
.btn-info {
|
||||
display: inline-block; background: transparent; color: #2874ad;
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
border: 1px solid rgba(43,145,223,0.2); text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.btn-neutral {
|
||||
display: inline-block; background: transparent; color: rgba(16,16,16,0.3);
|
||||
padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 400;
|
||||
outline: 1px solid rgb(212,222,233); border: none; text-decoration: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-success {
|
||||
display: inline-block; background: rgba(21,190,83,0.2); color: #108c3d;
|
||||
padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 300;
|
||||
border: 1px solid rgba(21,190,83,0.4);
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.badge-neutral {
|
||||
display: inline-block; background: #ffffff; color: #000000;
|
||||
padding: 0px 6px; border-radius: 4px; font-size: 11px; font-weight: 400;
|
||||
border: 1px solid #f6f9fc;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
|
||||
/* CARDS */
|
||||
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
|
||||
.card {
|
||||
background: var(--white); border-radius: 6px; padding: 24px;
|
||||
border: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-subtle);
|
||||
transition: box-shadow 0.25s ease;
|
||||
}
|
||||
.card:hover { box-shadow: var(--shadow-card); }
|
||||
.card h3 { font-size: 22px; font-weight: 300; letter-spacing: -0.22px; margin-bottom: 8px; color: var(--navy); }
|
||||
.card p { font-size: 14px; color: var(--slate); line-height: 1.50; font-weight: 300; }
|
||||
.card-badge { display: inline-block; font-size: 10px; font-weight: 300; padding: 1px 8px; border-radius: 4px; margin-bottom: 12px; }
|
||||
|
||||
/* FORMS */
|
||||
.form-group { margin-bottom: 20px; max-width: 400px; }
|
||||
.form-label { display: block; font-size: 14px; font-weight: 400; color: var(--dark-slate); margin-bottom: 6px; }
|
||||
.form-input {
|
||||
width: 100%; background: var(--white); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.form-input:focus { border-color: var(--purple); }
|
||||
.form-input--focus { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
|
||||
.form-input--error { border-color: var(--ruby); box-shadow: 0 0 0 1px var(--ruby); }
|
||||
.form-textarea {
|
||||
width: 100%; min-height: 80px; background: var(--white); color: var(--navy);
|
||||
border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px;
|
||||
font-family: var(--font-primary); font-size: 14px; font-weight: 300; resize: vertical; outline: none;
|
||||
font-feature-settings: "ss01" 1;
|
||||
}
|
||||
.form-state-label { font-size: 11px; color: var(--slate); margin-top: 4px; font-weight: 300; }
|
||||
|
||||
/* SPACING */
|
||||
.spacing-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
|
||||
.spacing-item { text-align: center; }
|
||||
.spacing-block { background: var(--purple); border-radius: 2px; margin-bottom: 6px; height: 28px; }
|
||||
.spacing-value { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
|
||||
/* RADIUS */
|
||||
.radius-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
|
||||
.radius-item { text-align: center; }
|
||||
.radius-box { width: 64px; height: 64px; background: var(--purple); margin-bottom: 6px; }
|
||||
.radius-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--slate); }
|
||||
.radius-context { font-size: 10px; color: var(--slate); font-weight: 300; }
|
||||
|
||||
/* ELEVATION */
|
||||
.elevation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
|
||||
.elevation-card { background: var(--white); border-radius: 6px; padding: 20px; text-align: center; }
|
||||
.elevation-label { font-size: 14px; font-weight: 400; letter-spacing: -0.28px; margin-bottom: 4px; color: var(--navy); }
|
||||
.elevation-desc { font-family: var(--font-mono); font-size: 11px; color: var(--slate); }
|
||||
|
||||
/* FOOTER */
|
||||
.footer { padding: 32px; text-align: center; border-top: 1px solid var(--border); font-size: 13px; color: var(--slate); font-weight: 300; }
|
||||
.footer a { color: var(--purple); text-decoration: underline; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 32px; letter-spacing: -0.64px; }
|
||||
.nav-links { display: none; }
|
||||
.section { padding: 48px 20px; }
|
||||
.card-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<a class="nav-brand" href="#">awesome-design-md</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#typography">Typography</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#forms">Forms</a></li>
|
||||
<li><a href="#spacing">Spacing</a></li>
|
||||
</ul>
|
||||
<a class="nav-cta" href="#">Start now</a>
|
||||
</nav>
|
||||
|
||||
<section class="hero">
|
||||
<h1>Design System<br>Inspired by Stripe</h1>
|
||||
<p>A design token catalog generated from DESIGN.md. Every color, font, component, and spacing value -- visualized.</p>
|
||||
<div class="hero-buttons">
|
||||
<a class="btn-primary" href="#">Start now</a>
|
||||
<a class="btn-ghost" href="#">View Documentation</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="colors">
|
||||
<div class="section-label">01 / Colors</div>
|
||||
<h2 class="section-title">Color Palette</h2>
|
||||
|
||||
<div class="color-group-label">Primary</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#533afd"></div><div class="color-swatch-info"><div class="color-swatch-name">Stripe Purple</div><div class="color-swatch-hex">#533afd</div><div class="color-swatch-role">Primary brand, CTA</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#061b31"></div><div class="color-swatch-info"><div class="color-swatch-name">Deep Navy</div><div class="color-swatch-hex">#061b31</div><div class="color-swatch-role">Headings</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffffff; border-bottom:1px solid #e5edf5"></div><div class="color-swatch-info"><div class="color-swatch-name">White</div><div class="color-swatch-hex">#ffffff</div><div class="color-swatch-role">Page background</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Brand & Dark</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#1c1e54"></div><div class="color-swatch-info"><div class="color-swatch-name">Brand Dark</div><div class="color-swatch-hex">#1c1e54</div><div class="color-swatch-role">Dark sections</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#0d253d"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Navy</div><div class="color-swatch-hex">#0d253d</div><div class="color-swatch-role">Darkest neutral</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Accent</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ea2261"></div><div class="color-swatch-info"><div class="color-swatch-name">Ruby</div><div class="color-swatch-hex">#ea2261</div><div class="color-swatch-role">Accent, alerts</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#f96bee"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta</div><div class="color-swatch-hex">#f96bee</div><div class="color-swatch-role">Gradients, decorative</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#ffd7ef"></div><div class="color-swatch-info"><div class="color-swatch-name">Magenta Light</div><div class="color-swatch-hex">#ffd7ef</div><div class="color-swatch-role">Tinted surface</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Interactive Purple Scale</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#4434d4"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Hover</div><div class="color-swatch-hex">#4434d4</div><div class="color-swatch-role">CTA hover state</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#665efd"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Mid</div><div class="color-swatch-hex">#665efd</div><div class="color-swatch-role">Range selectors</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#b9b9f9"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Light</div><div class="color-swatch-hex">#b9b9f9</div><div class="color-swatch-role">Subdued hover bg</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#2e2b8c"></div><div class="color-swatch-info"><div class="color-swatch-name">Purple Deep</div><div class="color-swatch-hex">#2e2b8c</div><div class="color-swatch-role">Icon hover</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Neutral & Status</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#273951"></div><div class="color-swatch-info"><div class="color-swatch-name">Dark Slate</div><div class="color-swatch-hex">#273951</div><div class="color-swatch-role">Labels</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#64748d"></div><div class="color-swatch-info"><div class="color-swatch-name">Slate</div><div class="color-swatch-hex">#64748d</div><div class="color-swatch-role">Body text</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#e5edf5"></div><div class="color-swatch-info"><div class="color-swatch-name">Border</div><div class="color-swatch-hex">#e5edf5</div><div class="color-swatch-role">Default border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#15be53"></div><div class="color-swatch-info"><div class="color-swatch-name">Success</div><div class="color-swatch-hex">#15be53</div><div class="color-swatch-role">Status, badges</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#9b6829"></div><div class="color-swatch-info"><div class="color-swatch-name">Lemon</div><div class="color-swatch-hex">#9b6829</div><div class="color-swatch-role">Warning accent</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="color-group-label">Border & Surface</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#d6d9fc"></div><div class="color-swatch-info"><div class="color-swatch-name">Border Soft</div><div class="color-swatch-hex">#d6d9fc</div><div class="color-swatch-role">Purple-tinted border</div></div></div>
|
||||
<div class="color-swatch"><div class="color-swatch-block" style="background:#362baa"></div><div class="color-swatch-info"><div class="color-swatch-name">Dashed Border</div><div class="color-swatch-hex">#362baa</div><div class="color-swatch-role">Drop zones</div></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="typography">
|
||||
<div class="section-label">02 / Typography</div>
|
||||
<h2 class="section-title">Typography Scale</h2>
|
||||
|
||||
<div class="type-sample"><div style="font-size:56px; font-weight:300; line-height:1.03; letter-spacing:-1.4px; color:var(--navy);">Display Hero</div><div class="type-meta">Display Hero -- 56px / 300 / 1.03 / -1.4px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:48px; font-weight:300; line-height:1.15; letter-spacing:-0.96px; color:var(--navy);">Display Large</div><div class="type-meta">Display Large -- 48px / 300 / 1.15 / -0.96px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:32px; font-weight:300; line-height:1.10; letter-spacing:-0.64px; color:var(--navy);">Section Heading</div><div class="type-meta">Section Heading -- 32px / 300 / 1.10 / -0.64px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:26px; font-weight:300; line-height:1.12; letter-spacing:-0.26px; color:var(--navy);">Sub-heading Large</div><div class="type-meta">Sub-heading -- 26px / 300 / 1.12 / -0.26px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:22px; font-weight:300; line-height:1.10; letter-spacing:-0.22px; color:var(--navy);">Sub-heading</div><div class="type-meta">Sub-heading -- 22px / 300 / 1.10 / -0.22px / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:18px; font-weight:300; line-height:1.40; color:var(--slate);">Body Large -- Financial infrastructure for the internet. Millions of companies use Stripe to accept payments.</div><div class="type-meta">Body Large -- 18px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:300; line-height:1.40; color:var(--slate);">Body -- Standard reading text for descriptions and content.</div><div class="type-meta">Body -- 16px / 300 / 1.40 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:16px; font-weight:400; line-height:1.00; color:var(--navy);">Button Text</div><div class="type-meta">Button -- 16px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:14px; font-weight:400; line-height:1.00; color:var(--navy);">Link / Navigation</div><div class="type-meta">Link -- 14px / 400 / 1.00 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.45; color:var(--slate);">Caption -- Small labels and metadata</div><div class="type-meta">Caption -- 12px / 300 / 1.45 / normal / sohne-var "ss01"</div></div>
|
||||
<div class="type-sample"><div style="font-size:12px; font-weight:300; line-height:1.33; letter-spacing:-0.36px; color:var(--slate); font-feature-settings:'tnum' 1;">$1,234,567.89</div><div class="type-meta">Tabular Numbers -- 12px / 300 / 1.33 / -0.36px / sohne-var "tnum"</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00;">const stripe = require('stripe')('sk_test_...');</div><div class="type-meta">Code Body -- 12px / 500 / 2.00 / Source Code Pro</div></div>
|
||||
<div class="type-sample"><div style="font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:2.00; text-transform:uppercase;">API VERSION</div><div class="type-meta">Code Label -- 12px / 500 / uppercase / Source Code Pro</div></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="buttons">
|
||||
<div class="section-label">03 / Buttons</div>
|
||||
<h2 class="section-title">Button Variants</h2>
|
||||
<div class="button-row">
|
||||
<div class="button-item"><a class="btn-primary" href="#">Start now</a><div class="button-label">Primary Purple</div></div>
|
||||
<div class="button-item"><a class="btn-ghost" href="#">Documentation</a><div class="button-label">Ghost / Outlined</div></div>
|
||||
<div class="button-item"><a class="btn-info" href="#">Learn more</a><div class="button-label">Transparent Info</div></div>
|
||||
<div class="button-item"><a class="btn-neutral" href="#">Disabled</a><div class="button-label">Neutral Ghost</div></div>
|
||||
<div class="button-item"><span class="badge-success">Active</span><div class="button-label">Success Badge</div></div>
|
||||
<div class="button-item"><span class="badge-neutral">v2024-12</span><div class="button-label">Neutral Badge</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="cards">
|
||||
<div class="section-label">04 / Cards</div>
|
||||
<h2 class="section-title">Card Examples</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(83,58,253,0.1); color:var(--purple);">Payments</div>
|
||||
<h3>Online Payments</h3>
|
||||
<p>Accept payments online with a fully integrated suite of payment products. Optimized for conversion with pre-built checkout pages.</p>
|
||||
</div>
|
||||
<div class="card" style="box-shadow: var(--shadow-card);">
|
||||
<div class="card-badge" style="background:rgba(234,34,97,0.1); color:var(--ruby);">Elevated</div>
|
||||
<h3>Revenue Recognition</h3>
|
||||
<p>Automate your revenue reporting. Card shown with full blue-tinted shadow stack for elevated importance.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-badge" style="background:rgba(21,190,83,0.15); color:var(--success-text);">Connect</div>
|
||||
<h3>Platform Payments</h3>
|
||||
<p>Build a marketplace or platform with multi-party payments, instant payouts, and flexible revenue sharing.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="forms">
|
||||
<div class="section-label">05 / Forms</div>
|
||||
<h2 class="section-title">Form Elements</h2>
|
||||
<div class="form-group"><label class="form-label">API Key Name</label><input class="form-input" type="text" placeholder="my-api-key"><div class="form-state-label">Default</div></div>
|
||||
<div class="form-group"><label class="form-label">Webhook URL</label><input class="form-input form-input--focus" type="text" value="https://api.example.com/webhook"><div class="form-state-label">Focus (purple ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Email Address</label><input class="form-input form-input--error" type="text" value="invalid-email"><div class="form-state-label">Error (ruby ring)</div></div>
|
||||
<div class="form-group"><label class="form-label">Metadata</label><textarea class="form-textarea" placeholder='{"key": "value"}'></textarea></div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="spacing">
|
||||
<div class="section-label">06 / Spacing</div>
|
||||
<h2 class="section-title">Spacing Scale</h2>
|
||||
<div class="spacing-row">
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:2px"></div><div class="spacing-value">2</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:4px"></div><div class="spacing-value">4</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:6px"></div><div class="spacing-value">6</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:8px"></div><div class="spacing-value">8</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:10px"></div><div class="spacing-value">10</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:12px"></div><div class="spacing-value">12</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:14px"></div><div class="spacing-value">14</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:16px"></div><div class="spacing-value">16</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:18px"></div><div class="spacing-value">18</div></div>
|
||||
<div class="spacing-item"><div class="spacing-block" style="width:20px"></div><div class="spacing-value">20</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="radius">
|
||||
<div class="section-label">07 / Radius</div>
|
||||
<h2 class="section-title">Border Radius</h2>
|
||||
<div class="radius-row">
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:1px"></div><div class="radius-label">1px</div><div class="radius-context">Micro</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:4px"></div><div class="radius-label">4px</div><div class="radius-context">Buttons, inputs</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:5px"></div><div class="radius-label">5px</div><div class="radius-context">Standard cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:6px"></div><div class="radius-label">6px</div><div class="radius-context">Nav, large cards</div></div>
|
||||
<div class="radius-item"><div class="radius-box" style="border-radius:8px"></div><div class="radius-label">8px</div><div class="radius-context">Featured</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<section class="section" id="elevation">
|
||||
<div class="section-label">08 / Elevation</div>
|
||||
<h2 class="section-title">Elevation</h2>
|
||||
<div class="elevation-grid">
|
||||
<div class="elevation-card" style="border: 1px solid var(--border);"><div class="elevation-label">Level 0: Flat</div><div class="elevation-desc">No shadow</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(23,23,23,0.06) 0px 3px 6px 0px;"><div class="elevation-label">Level 1: Subtle</div><div class="elevation-desc">Ambient soft</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(23,23,23,0.08) 0px 15px 35px 0px;"><div class="elevation-label">Level 2: Standard</div><div class="elevation-desc">Ambient card</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px;"><div class="elevation-label">Level 3: Elevated</div><div class="elevation-desc">Blue-tinted dual layer</div></div>
|
||||
<div class="elevation-card" style="box-shadow: rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px;"><div class="elevation-label">Level 4: Deep</div><div class="elevation-desc">Dark blue-tinted</div></div>
|
||||
<div class="elevation-card" style="box-shadow: 0 0 0 2px var(--purple);"><div class="elevation-label">Focus</div><div class="elevation-desc">Purple ring</div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
Generated from <a href="https://stripe.com/">stripe.com</a> DESIGN.md -- awesome-design-md
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user