# porwoll.de Design Guidelines - Definity Template

## Design System Overview

porwoll.de uses the **Definity Template** design system — a light, professional theme with clean typography, material card effects, and elegant animations.

## Color Palette

| Token | Hex | Usage |
|-------|-----|-------|
| dark | #111111 | Headings, primary text, dark backgrounds |
| gray | #777777 | Body text |
| gray-light | #999999 | Secondary text, labels |
| light | #ececec | Borders, dividers |
| light-soft | #f8f8f8 | Card backgrounds |
| light-bg | #f4f4f4 | Section backgrounds |
| accent | #2CAADF | Links, highlights, accent elements |
| accent-dark | #1a8fc4 | Accent hover state |
| error | #e80000 | Form errors |
| success | #0F9D58 | Success messages |

## Typography

| Element | Font | Weight | Size | Letter-Spacing | Transform |
|---------|------|--------|------|----------------|-----------|
| H1 | Montserrat | 700 | 1.7em | 5px | UPPERCASE |
| H2 | Montserrat | 700 | 1.5em | 4px | UPPERCASE |
| H3 | Montserrat | 700 | 1.3em | 3.5px | UPPERCASE |
| H4 | Montserrat | 700 | 1.07em | 3px | UPPERCASE |
| Body | Open Sans | 300 | 14px | 0.2px | normal |
| Label | Montserrat | 700 | 0.85em | 2px | UPPERCASE |
| Button | Montserrat | 700 | 0.9em | 2.5px | UPPERCASE |
| Nav Link | Montserrat | 400 | 0.8em | 2px | UPPERCASE |

Key principle: All headings UPPERCASE with letter-spacing. Body text light-weight (300).

## Spacing

| Token | Value | Usage |
|-------|-------|-------|
| ws-s | 50px | Small section padding |
| ws-m | 100px | Standard section padding |
| ws-l | 160px | Large section padding |

## Shadows

| Token | Value | Usage |
|-------|-------|-------|
| card | 0 1px 1px rgba(0,0,0,0.2) | Card resting state |
| card-hover | 0 22px 43px rgba(0,0,0,0.15) | Card hover lift |

## Components

### Button (6 variants)
- default: Dark fill, light text
- ghost: Transparent, dark border, fills on hover
- ghost-light: Transparent, white border (dark backgrounds)
- light: Light fill, dark text
- text: No border, underline on hover
- text-light: Same, for dark backgrounds
- 3 sizes: small, default, large. Optional rounded prop.

### Card (Material Style)
- White bg, light border, subtle resting shadow
- Hover: -10px translateY + deep shadow
- Padding: 50px/40px

### Navigation
- Fixed, transparent on hero pages, solid on scroll (100px threshold)
- Shrinks 75px to 50px height
- Dropdown: slide-in with left border accent

### Footer
- Social links bar (horizontal, pipe-separated)
- Dark 4-column grid (About, Nav, Legal, Contact)
- Copyright bar (#222)

## Animation Patterns (framer-motion)

- fadeInUp: opacity 0-1, y 30-0
- slideIn: x 30-0 (image-text blocks)
- stagger: 0.1s delay between children
- cardHover: y 0 to -10, shadow transition
- Page transitions: opacity fade via template.tsx
- viewport trigger: once: true

## CSS Architecture (Tailwind v4)

Theme tokens in globals.css via @theme {} directive.
No tailwind.config.ts. Font variables from next/font/google.