# Shiftbase Pricing Page Design Analysis

**Last Updated:** 2025-01-27

## Overview

Deep analysis of Shiftbase pricing page design patterns to inform the complete visual redesign of Ordio's pricing page.

## Hero Section Analysis

### Layout

- **Structure**: Centered, clean layout
- **Headline**: Large, bold, multi-line headline
  - "Mehr als nur Dienstpläne. Klarheit, Kostenkontrolle, Rechtssicherheit."
  - Font: Large, bold sans-serif
  - Color: Dark text (#1F2937 or similar)
  - Spacing: Generous margins
- **Subheadline**: Smaller text below headline
  - Value proposition focused
  - Clean, readable typography
- **No decorative elements**: No SVGs, no complex backgrounds
- **Whitespace**: Generous spacing between elements

### Design Principles

- Minimal and clean
- Focus on content, not decoration
- Professional typography hierarchy

## Pricing Toggle Analysis

### Design

- **Container**: White background, rounded pill shape
- **Active state**: Light blue background (#E0F2FE or similar) with white text
- **Inactive state**: White background with dark text
- **Savings badge**: Small blue text badge "Spare 10%" on active option
- **Spacing**: Centered, good padding
- **Typography**: Clean, readable font sizes

### Interaction

- Smooth transitions
- Clear visual feedback
- Accessible design

## Pricing Cards Analysis

### Overall Design

- **Background**: Pure white (#FFFFFF)
- **Shadow**: Subtle shadow (shadow-sm or shadow-md)
- **Border**: Light gray border (#E5E7EB)
- **Rounded corners**: rounded-2xl (16px)
- **Spacing**: Generous padding (p-8 to p-12)
- **Layout**: Clean grid, equal height cards

### Highlighted Card (Premium)

- **Header bar**: Dark blue (#1E3A8A or #1E40AF) with white text
- **Badge text**: "Meistgewählt von KMU" (Most chosen by SMEs)
- **Star icon**: Small star icon in badge
- **CTA button**: Green button (#10B981 or similar) instead of blue
- **Visual prominence**: Slightly elevated or more prominent shadow

### Card Structure

1. **Header** (if highlighted): Dark blue bar with badge
2. **Title**: Bold, large text (plan name)
3. **Description**: Benefit-focused text, readable size
4. **Price**: Very large, bold (text-5xl to text-6xl)
5. **Price details**: Smaller text below price
6. **Features**: Clean list with icons
7. **CTA button**: Prominent button at bottom

### Typography

- **Title**: Bold, large (text-3xl to text-4xl)
- **Price**: Very large, bold (text-5xl to text-6xl)
- **Description**: Medium size, readable (text-base)
- **Features**: Clean list, proper spacing

### Colors

- **Card background**: #FFFFFF (white)
- **Text**: #1F2937 (dark gray)
- **Borders**: #E5E7EB (light gray)
- **Highlight header**: #1E3A8A (dark blue)
- **Primary CTA**: #4D8EF3 (blue) or #10B981 (green for highlighted)
- **Shadows**: Subtle, soft

### Spacing

- **Card padding**: p-8 to p-12 (32px to 48px)
- **Gap between cards**: gap-6 to gap-8 (24px to 32px)
- **Feature list spacing**: space-y-3 to space-y-4
- **Margin between sections**: mb-16 to mb-24

## Feature List Design

### Structure

- Clean list with icons
- Proper spacing between items
- Clear visual hierarchy
- Icons aligned properly

### Icons

- Checkmarks for included features
- Crosses or dashes for excluded features
- Consistent sizing
- Proper alignment

## CTA Button Design

### Standard Cards

- Blue button (#4D8EF3)
- White text
- Rounded corners (rounded-xl)
- Good padding
- Hover effects

### Highlighted Card

- Green button (#10B981)
- White text
- More prominent
- Same styling otherwise

## Overall Design System

### Colors

- Primary: Blue (#4D8EF3 or similar)
- Success/Highlight: Green (#10B981)
- Background: White (#FFFFFF)
- Page background: Light gray (#FBFBFB)
- Text: Dark gray (#1F2937)
- Borders: Light gray (#E5E7EB)

### Typography

- Headlines: Large, bold (text-5xl to text-7xl)
- Prices: Very large, bold (text-5xl to text-6xl)
- Body: Medium, readable (text-base)
- Small text: text-sm

### Spacing

- Generous whitespace
- Consistent padding
- Clear visual separation
- Proper margins

### Shadows

- Subtle, soft shadows
- Not too dark
- Creates depth without heaviness

### Borders

- Light, subtle
- Consistent color
- Not too prominent

## Key Takeaways

1. **Clean and minimal**: No unnecessary decorative elements
2. **Generous whitespace**: Lots of breathing room
3. **Clear hierarchy**: Typography and spacing create clear visual hierarchy
4. **Professional**: Modern, professional aesthetic
5. **Consistent**: Consistent spacing, colors, typography throughout
6. **Focused**: Focus on content and clarity
7. **Modern**: Contemporary design patterns

## Implementation Notes

- Use pure white cards (#FFFFFF)
- Subtle shadows (shadow-sm)
- Generous padding (p-8 to p-12)
- Clean typography hierarchy
- Dark blue header bar for highlighted card
- Green CTA for highlighted plan
- Remove all decorative SVGs
- Simplify hero section
- Better spacing throughout