mporwoll/frontend.porwoll.de
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/frontend.porwoll.de.git synced 2026-03-17 17:33:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
frontend.porwoll.de/docs/DESIGN.md
CCS Admin 6d32eb9b0e docs: add Definity design guidelines and update CLAUDE.md 
- 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>
2026-02-15 11:07:35 +00:00

2.9 KiB
Raw Blame History

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.