Stripe

# Design System Guide: Stripe-inspired

## Overview

This guide outlines the core design principles and specifications for a design system inspired by Stripe's aesthetic. The goal is to create a modern, professional, and clear user experience that conveys trust and sophistication, focusing on a clean interface with a functional and engaging use of color and typography.

## Color System

The color palette is designed to be clean, professional, and highly legible, with a strong focus on conveying trust and clarity.

- **Primary:** `hsl(244, 100%, 75%)` (Hex: `#635BFF`) - Used for interactive elements, primary calls to action, and key branding.
- **Secondary:** `hsl(0, 0%, 100%)` (Hex: `#FFFFFF`) - Dominant background, clean canvas.
- **Accent:** `hsl(245, 96%, 66%)` (Hex: `#533AFD`) - Used sparingly for emphasis and interactivity, provides a deeper hue than primary.
- **Background:** `hsl(0, 0%, 100%)` (Hex: `#FFFFFF`) - General page background.
- **Text Primary:** `hsl(239, 49%, 23%)` (Hex: `#202159`) - Main body and heading text for high readability.

**Palette Breakdown (Base Hues):**

- `#635BFF` (hsl(244, 100%, 75%))
- `#FFFFFF` (hsl(0, 0%, 100%))
- `#202159` (hsl(239, 49%, 23%))

## Typography

The typography ensures readability, hierarchy, and a modern feel, balancing professionalism with approachability.

**Font Families:**

- **Primary/Heading:** `Sohne`, `SF Pro Display`, sans-serif
- **Body/Paragraph:** `Sohne`, `SF Pro Display`, sans-serif

**Font Stacks:**

- **Heading:** `'Sohne', 'SF Pro Display', sans-serif`
- **Body:** `'Sohne', 'SF Pro Display', sans-serif`
- **Paragraph:** `'Sohne', 'SF Pro Display', sans-serif`

**Font Sizes (Base `px` values):**

- **H1:** `44px`
- **H2:** `32px`
- **Body (Base):** `32px`

*Note: Further heading sizes and body text variations should be scaled proportionally from these base values.*

## Spacing & Radius

Consistency in spacing and element `radius` contributes to a polished and predictable user experience.

- **Base Spacing Unit:** `8px`
  - All padding, margin, and gap values should be multiples of `8px` for a harmonious layout.
  - Examples: `8px`, `16px`, `24px`, `32px`, `40px` etc.
- **Border Radius:** `0px`
  - Elements predominantly feature sharp, crisp corners, aligning with a modern, precise aesthetic.

## Voice and Feel

The design aims for a **professional, modern, and confident** voice.

- **Clean and Uncluttered:** Emphasizes content clarity and ease of navigation.
- **Sophisticated:** Achieved through a thoughtful color palette and precise typography.
- **Trustworthy:** A consistent and polished interface builds user confidence.
- **Direct and Functional:** Design choices are primarily driven by usability and effective communication.
- **Engaging subtly:** Achieved through strategic use of the primary and accent colors, without being overly flashy.

## Implementation Notes

For easier integration and consistency, the following CSS Custom Properties (designed for use with Tailwind CSS) are provided.

```css
:root {
  /* Colors */
  --color-primary: 244 100% 75%; /* #635BFF */
  --color-secondary: 0 0% 100%; /* #FFFFFF */
  --color-accent: 245 96% 66%; /* #533AFD */
  --color-background: 0 0% 100%; /* #FFFFFF */
  --color-text-primary: 239 49% 23%; /* #202159 */

  /* Typography */
  --font-family-primary: 'Sohne', 'SF Pro Display', sans-serif;
  --font-family-heading: 'Sohne', 'SF Pro Display', sans-serif;

  /* Font Sizes */
  --font-size-h1: 44px;
  --font-size-h2: 32px;
  --font-size-body: 32px;

  /* Spacing & Radius */
  --spacing-unit: 8px;
  --border-radius-base: 0px;
}
```

**Tailwind CSS Configuration (`tailwind.config.js`):**

Extend your Tailwind config's `theme` section to utilize these CSS variables.

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'hsl(var(--color-primary) / <alpha-value>)',
        secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
        accent: 'hsl(var(--color-accent) / <alpha-value>)',
        background: 'hsl(var(--color-background) / <alpha-value>)',
        textPrimary: 'hsl(var(--color-text-primary) / <alpha-value>)',
      },
      fontFamily: {
        primary: 'var(--font-family-primary)',
        heading: 'var(--font-family-heading)',
      },
      fontSize: {
        'h1': 'var(--font-size-h1)',
        'h2': 'var(--font-size-h2)',
        'body': 'var(--font-size-body)',
      },
      spacing: {
        'unit': 'var(--spacing-unit)',
        '1': 'calc(1 * var(--spacing-unit))', // 8px
        '2': 'calc(2 * var(--spacing-unit))', // 16px
        '3': 'calc(3 * var(--spacing-unit))', // 24px
        // Add more as needed
      },
      borderRadius: {
        'none': 'var(--border-radius-base)',
      },
    },
  },
  plugins: [],
};
```