mirror of
https://github.com/complexcaresolutions/frontend.porwoll.de.git
synced 2026-03-17 16:23:41 +00:00
CCS Admin
6d32eb9b0e
- docs/DESIGN.md: Full design system reference (colors, typography, spacing, shadows, components, animation patterns) - CLAUDE.md: Updated with design system summary, component library, implemented blocks (9/15), architecture overview Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
90 lines
2.9 KiB
Markdown
90 lines
2.9 KiB
Markdown
# 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.
|