# Pricing Page Design System

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

## Color Palette

### Primary Colors

- **Ordio Blue**: `#4D8EF3` (primary CTA, links, accents)
- **Ordio Blue Dark**: `#3B82F6` (hover states, gradients)
- **Ordio Blue Light**: `#EFF6FF` (backgrounds, highlights)

### Highlight Colors

- **Success Green**: `#10B981` (highlighted plan CTA, success states)
- **Success Green Dark**: `#059669` (hover states)

### Neutral Colors

- **Background**: `#FBFBFB` (page background)
- **Card Background**: `#FFFFFF` (pure white for cards)
- **Text Primary**: `#1F2937` (main text)
- **Text Secondary**: `#6B7280` (secondary text)
- **Text Muted**: `#9CA3AF` (muted text)
- **Border**: `#E5E7EB` (light gray borders)
- **Border Light**: `#F3F4F6` (very light borders)

### Highlight Badge Colors

- **Dark Blue Header**: `#1E3A8A` or `#1E40AF` (for "Am beliebtesten" badge)
- **White Text**: `#FFFFFF` (on dark backgrounds)

## Typography

### Headlines

- **Hero H1**: `text-5xl sm:text-6xl lg:text-7xl` (48px to 72px)
- **Section H2**: `text-4xl sm:text-5xl lg:text-6xl` (36px to 60px)
- **Card Title**: `text-3xl sm:text-4xl` (30px to 36px)
- **Font**: Gilroy Bold
- **Line Height**: `leading-[110%]` or `leading-tight`
- **Letter Spacing**: `tracking-[-1.5px]` to `tracking-[-3px]`

### Body Text

- **Large**: `text-lg` (18px)
- **Base**: `text-base` (16px)
- **Small**: `text-sm` (14px)
- **Font**: Inter (various weights)
- **Line Height**: `leading-relaxed` (1.625)

### Prices

- **Large Price**: `text-5xl sm:text-6xl` (48px to 60px)
- **Font**: Gilroy Bold
- **Color**: `#1F2937` (dark gray)

### Small Text

- **Price Details**: `text-sm` (14px)
- **Features**: `text-base` (16px)
- **Labels**: `text-xs` (12px)

## Spacing System

### Card Padding

- **Desktop**: `p-8` to `p-12` (32px to 48px)
- **Mobile**: `p-6` (24px)

### Section Spacing

- **Between Sections**: `mb-16` to `mb-24` (64px to 96px)
- **Within Sections**: `mb-8` to `mb-12` (32px to 48px)

### Grid Gaps

- **Card Grid**: `gap-6` to `gap-8` (24px to 32px)
- **Feature List**: `space-y-3` to `space-y-4` (12px to 16px)

### Margins

- **Hero Bottom**: `mb-12` to `mb-16` (48px to 64px)
- **Toggle Margin**: `mb-8` to `mb-12` (32px to 48px)

## Card Design System

### Standard Card

```css
background: #FFFFFF
border: 1px solid #E5E7EB
border-radius: 16px (rounded-2xl)
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) (shadow-sm)
padding: 32px to 48px (p-8 to p-12)
```

### Highlighted Card

```css
Same as standard card, plus:
- Dark blue header bar (#1E3A8A) with white text
- "Am beliebtesten" badge in header
- Green CTA button instead of blue
- Slightly more prominent shadow (shadow-md)
```

### Card Hover State

```css
transform: translateY(-4px)
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) (shadow-lg)
transition: all 0.3s ease
```

## Component Patterns

### Pricing Toggle

- **Container**: White background, rounded-full, shadow-sm
- **Active Button**: Light blue background (#E0F2FE), white text
- **Inactive Button**: White background, dark text
- **Savings Badge**: Small blue text badge

### CTA Buttons

- **Standard**: Blue (#4D8EF3), white text, rounded-xl
- **Highlighted Plan**: Green (#10B981), white text, rounded-xl
- **Hover**: Slight lift, darker shade
- **Padding**: `px-6 py-3` to `px-8 py-4`

### Feature Lists

- **Icon Size**: Consistent (20px to 24px)
- **Spacing**: `space-y-3` (12px between items)
- **Alignment**: Flex items-center
- **Text**: Base size, readable

### Badges

- **Header Badge**: Dark blue (#1E3A8A), white text, uppercase
- **Info Badge**: Light background, colored text
- **Rounded**: `rounded-t-2xl` for header badges

## Responsive Breakpoints

- **Mobile**: < 640px (sm)
- **Tablet**: 640px - 1024px (md, lg)
- **Desktop**: > 1024px (xl, 2xl)

## Animation & Transitions

- **Duration**: 0.3s for most transitions
- **Easing**: `cubic-bezier(0.4, 0, 0.2, 1)` (ease-in-out)
- **Hover**: Subtle lift (translateY(-4px))
- **Price Change**: Fade animation (opacity + transform)

## Shadows

- **Card**: `shadow-sm` (0 1px 3px rgba(0,0,0,0.1))
- **Card Hover**: `shadow-lg` (0 10px 25px rgba(0,0,0,0.1))
- **Modal**: `shadow-2xl` (0 25px 50px rgba(0,0,0,0.25))
- **Toggle**: `shadow-sm` to `shadow-md`

## Borders

- **Card Border**: `border border-gray-200` (#E5E7EB)
- **Input Border**: `border border-gray-300` (#D1D5DB)
- **Focus Border**: `border-ordio-blue` (#4D8EF3)
- **Radius**: `rounded-2xl` (16px) for cards, `rounded-xl` (12px) for buttons