From a662a1824bd5ca56c12a24cb1922fd2b7409a7e0 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:43:19 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 + README.md | 3 + SKILL.md | 1033 ++++++++++++++++++++++ assets/logos/netresearch-symbol-only.svg | 19 + claudedocs/refactoring-summary.md | 54 ++ examples/components.html | 313 +++++++ plugin.lock.json | 77 ++ references/colors.md | 347 ++++++++ references/typography.md | 609 +++++++++++++ references/web-design.md | 860 ++++++++++++++++++ templates/landing-page.html | 285 ++++++ templates/styles.css | 612 +++++++++++++ 12 files changed, 4224 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 SKILL.md create mode 100644 assets/logos/netresearch-symbol-only.svg create mode 100644 claudedocs/refactoring-summary.md create mode 100644 examples/components.html create mode 100644 plugin.lock.json create mode 100644 references/colors.md create mode 100644 references/typography.md create mode 100644 references/web-design.md create mode 100644 templates/landing-page.html create mode 100644 templates/styles.css diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..6d91bc0 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "netresearch-branding", + "description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.", + "version": "1.1.0-20251126", + "author": { + "name": "Netresearch DTT GmbH", + "email": "info@netresearch.de" + }, + "skills": [ + "./" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..cf3728c --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# netresearch-branding + +Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns. diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..2f72708 --- /dev/null +++ b/SKILL.md @@ -0,0 +1,1033 @@ +--- +name: netresearch-branding +version: 1.1.0 +description: "Apply Netresearch brand identity and design standards to web projects, documentation, presentations, and digital content. This skill should be used when creating branded materials, designing web interfaces, building presentations, or ensuring brand consistency. Covers: color system (turquoise #40B4B4, orange #F08C1F), typography (Raleway, Open Sans, Calibri), logo usage, web design patterns, social media templates, and image guidelines. This skill ensures professional, unified Netresearch appearance across all digital touchpoints." +license: Complete terms in LICENSE.txt +--- + +# Netresearch Brand Guidelines + +**Purpose:** Apply Netresearch brand identity and design standards to web projects, documentation, presentations, and digital content. + +**Activation:** This skill activates when working on Netresearch-branded projects, designing web interfaces, creating presentations, or producing digital content for Netresearch. + +## Brand Identity + +### Core Brand Values + +**Netresearch embodies:** +- **Innovation & Technology** - Modern, forward-thinking solutions +- **Clarity & Communication** - Clear, effective expression (turquoise symbolizes communication) +- **Professionalism** - Unified company appearance (one Netresearch, not separate teams) +- **Freshness** - Refreshing, cool, modern approach (turquoise energy) + +### Brand Personality + +- **Visual Identity:** Clean, modern, tech-forward +- **Color Emotion:** Refreshing (turquoise), energetic (orange), professional (grey) +- **Typography:** Contemporary sans-serif, clear and readable +- **Imagery:** Authentic team photos, modern tech environments, clean screenshots + +## Color System + +**Reference:** `references/colors.md` + +### Primary Colors + +**Turquoise (Brand Color)** +``` +Hex: #2F99A4 +RGB: 43, 153, 164 +CMYK: 76, 19, 35, 3 +Pantone: 320 CP +NCS: S 2050-B30G +``` + +**Usage:** +- Primary brand color +- Buttons, links, call-to-actions +- Headers, accents, highlights +- Logo symbol background (negative) +- Represents: communication, clarity, truth, creative expression + +**Orange (Accent Color)** +``` +Hex: #FF4D00 +RGB: 255, 77, 0 +CMYK: 0, 79, 94, 0 +``` + +**Usage:** +- Visual accents and emphasis +- Headlines, highlights +- Graphics and illustrations +- Secondary call-to-actions +- Energy and action elements + +### Neutral Colors + +**Anthracite/Dark Grey** +``` +Hex: #585961 +RGB: 88, 89, 97 +CMYK: 60, 50, 40, 40 +Pantone: Cool Gray 11 C +``` + +**Usage:** +- Body text (alternative to black) +- Softer than pure black +- Harmonizes with turquoise +- Professional, modern tone + +**Light Grey** +``` +Hex: #CCCDCC +RGB: 238, 238, 238 +CMYK: 8, 5, 7, 20 +``` + +**Usage:** +- Text boxes, backgrounds +- Tables, dividers +- Subtle UI elements +- Light backgrounds + +**White** +``` +Hex: #FFFFFF +RGB: 255, 255, 255 +``` + +**Usage:** +- Primary background color +- **High white space is essential** +- Clean, modern appearance +- Text on dark backgrounds + +### Color Application Rules + +**When applying colors to web interfaces**: +```css +/* Primary brand color */ +.brand-primary { color: #2F99A4; } +.brand-primary-bg { background-color: #2F99A4; } + +/* Accent color */ +.brand-accent { color: #FF4D00; } + +/* Text colors */ +.text-primary { color: #585961; } +.text-muted { color: #CCCDCC; } + +/* Backgrounds */ +.bg-light { background-color: #CCCDCC; } +.bg-white { background-color: #FFFFFF; } +``` + +**When applying brand colors**: +- Use turquoise as dominant brand color in all primary elements +- Apply orange sparingly for accents and energy highlights only +- Maintain high white space ratio for clean, modern appearance +- Use grey (#585961) for text instead of pure black for softer look +- Ensure sufficient contrast for accessibility (WCAG AA minimum: 4.5:1) +- Let turquoise dominate over orange (never use them equally) +- Avoid pure black (#000000) for text (use anthracite #585961) +- Never create new color variations outside the brand palette +- Preserve white space generously (don't reduce significantly) +- Reject colors that clash with the brand palette + +## Typography + +**Reference:** `references/typography.md` + +### Font Families + +**Raleway (Primary - Headlines)** +```css +font-family: 'Raleway', sans-serif; +``` + +**Weights Available:** +- Thin (100) +- Extra-Light (200) +- Light (300) +- Regular (400) +- Medium (500) +- Semi-Bold (600) +- Bold (700) +- Extra-Bold (800) +- Heavy (900) + +**Usage:** +- All headlines (h1-h5) +- Emphasis text +- Button labels +- Call-to-action text +- Print media headlines +- Digital document headers + +**Open Sans (Secondary - Web Body Text)** +```css +font-family: 'Open Sans', sans-serif; +``` + +**Weights Available:** +- Light (300) +- Regular (400) +- Italic (400 italic) + +**Usage:** +- Website body text +- Navigation menus +- Quotes and citations +- Long-form content + +**Calibri (Alternative - Documents)** +```css +font-family: 'Calibri', sans-serif; +``` + +**Usage:** +- Internal documents +- Presentations (fallback) +- Email templates +- Office documents + +### Typography Scale + +**Website Hierarchy:** +```css +/* Headlines - Raleway */ +h1 { + font-family: 'Raleway', sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 1.2; + color: #585961; +} + +h2 { + font-family: 'Raleway', sans-serif; + font-size: 36px; + font-weight: 600; + line-height: 1.3; + color: #585961; +} + +h3 { + font-family: 'Raleway', sans-serif; + font-size: 28px; + font-weight: 600; + line-height: 1.4; + color: #585961; +} + +h4 { + font-family: 'Raleway', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 1.4; + color: #585961; +} + +h5 { + font-family: 'Raleway', sans-serif; + font-size: 18px; + font-weight: 600; + line-height: 1.5; + color: #585961; +} + +/* Body Text - Open Sans */ +body, p { + font-family: 'Open Sans', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.6; + color: #585961; +} + +/* Navigation - Open Sans */ +nav, .navigation { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + color: #585961; +} + +/* Quotes - Open Sans Italic */ +blockquote { + font-family: 'Open Sans', sans-serif; + font-size: 18px; + font-style: italic; + line-height: 1.6; + color: #585961; +} + +/* Buttons - Raleway */ +button, .button { + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 600; + text-transform: none; +} + +/* Emphasis - Raleway */ +strong, .emphasis { + font-family: 'Raleway', sans-serif; + font-weight: 600; + color: #2F99A4; +} +``` + +### Typography Application Standards + +**When applying typography**: +- Use Raleway for all headlines and emphasis text +- Use Open Sans for website body text and navigation +- Maintain consistent line-height (1.6 for body, 1.2-1.4 for headlines) +- Apply appropriate font weights to establish visual hierarchy +- Ensure readable font sizes (minimum 16px for body text) +- Keep Calibri separate from Raleway/Open Sans (documents only, not web) +- Limit font weights to Regular, Semi-Bold, and Bold (avoid extremes) +- Restrict all caps to short labels only (never for long text passages) +- Reject decorative or script fonts (maintain professional sans-serif) +- Never reduce line-height below 1.4 (preserves readability) + +## Logo Usage + +### Official Logo Variants + +**Primary Logo (Full)** +- Netresearch wordmark + symbol +- Use for main branding applications +- Maintain minimum size: 120px width (digital), 30mm (print) + +**Symbol Only "[n]"** +- Standalone symbol (brackets represent the frame) +- Use for: favicons, social media profiles, app icons, minimal branding +- Minimum size: 32px × 32px (digital) +- **Official SVG:** `assets/logos/netresearch-symbol-only.svg` +- **Format:** SVG 1.2 tiny-ps (optimized for web and print) +- **Colors:** Turquoise #2999A4 (frame) + Grey #595A62 (letter "n") + +**Logo Colors:** +- **Standard:** Turquoise symbol + grey text (#2F99A4 + #585961) +- **Negative:** White on dark backgrounds +- **Monochrome:** Single color when required + +### Logo Spacing (Clear Space) + +**Minimum clear space = height of "N" in Netresearch wordmark** + +``` +┌─────────────────────────────┐ +│ [CLEAR SPACE] │ +│ ┌──────────────────────┐ │ +│ │ NETRESEARCH LOGO │ │ +│ └──────────────────────┘ │ +│ [CLEAR SPACE] │ +└─────────────────────────────┘ +``` + +### Logo Don'ts + +**❌ Never:** +- Change logo colors (except approved variants) +- Stretch, distort, or rotate logo +- Add effects (shadows, gradients, outlines) +- Place on busy backgrounds without contrast +- Use outdated logo versions +- Use team logos in external communications +- Create custom logo variations + +### Using the Symbol Only Logo + +**HTML Implementation:** +```html + + + Netresearch DTT GmbH + + + + + + + +Netresearch +``` + +**Common Use Cases:** +- **Favicon:** 32×32px or 64×64px (SVG or PNG export) +- **App Icon:** 512×512px (high-resolution export) +- **Social Media Avatar:** Platform-specific sizes (typically 400×400px minimum) +- **Footer/Header Icon:** Flexible sizing with CSS +- **Loading Indicators:** Animated with CSS transforms +- **Email Signatures:** 48×48px to 64×64px + +**Accessibility:** +- Always include `Netresearch DTT GmbH` in SVG +- Use `alt="Netresearch"` for img tags +- Ensure sufficient contrast on backgrounds + +### Social Media Profile Images + +**Standard Profile Image:** +- **Content:** Logo symbol only (negative) +- **Background:** Turquoise (#2F99A4) +- **Position:** Centered +- **Format:** PNG with transparency or solid background + +**Platform Sizes:** +- Facebook: 180 × 180px +- XING: 1500 × 1500px +- LinkedIn: 400 × 400px +- Twitter/X: 400 × 400px + +## Web Design Guidelines + +**Reference:** `references/web-design.md` + +### Layout Principles + +**1. High White Space** +- Generous margins and padding +- Clean, uncluttered layouts +- Let content breathe +- Minimum 40px margins on desktop, 20px on mobile + +**2. Responsive Grid** +- 12-column grid system +- Breakpoints: 320px, 768px, 1024px, 1440px +- Fluid containers with max-width: 1200px +- Mobile-first approach + +**3. Visual Hierarchy** +- Clear content structure (h1 → h2 → h3 → body) +- Turquoise for primary actions +- Orange for secondary accents +- Grey for supporting text + +### Component Styles + +**Buttons:** +```css +/* Primary Button - Turquoise */ +.btn-primary { + background-color: #2F99A4; + color: #FFFFFF; + font-family: 'Raleway', sans-serif; + font-weight: 600; + font-size: 16px; + padding: 12px 32px; + border-radius: 4px; + border: none; + transition: background-color 0.3s ease; +} + +.btn-primary:hover { + background-color: #267883; /* Darker turquoise */ +} + +/* Secondary Button - Orange */ +.btn-secondary { + background-color: #FF4D00; + color: #FFFFFF; + font-family: 'Raleway', sans-serif; + font-weight: 600; + font-size: 16px; + padding: 12px 32px; + border-radius: 4px; + border: none; + transition: background-color 0.3s ease; +} + +.btn-secondary:hover { + background-color: #CC3D00; /* Darker orange */ +} + +/* Outline Button */ +.btn-outline { + background-color: transparent; + color: #2F99A4; + border: 2px solid #2F99A4; + font-family: 'Raleway', sans-serif; + font-weight: 600; + font-size: 16px; + padding: 10px 30px; + border-radius: 4px; + transition: all 0.3s ease; +} + +.btn-outline:hover { + background-color: #2F99A4; + color: #FFFFFF; +} +``` + +**Links:** +```css +a { + color: #2F99A4; + text-decoration: none; + transition: color 0.3s ease; +} + +a:hover { + color: #FF4D00; + text-decoration: underline; +} +``` + +**Cards:** +```css +.card { + background: #FFFFFF; + border: 1px solid #CCCDCC; + border-radius: 8px; + padding: 32px; + box-shadow: 0 2px 8px rgba(88, 89, 97, 0.1); + transition: box-shadow 0.3s ease; +} + +.card:hover { + box-shadow: 0 4px 16px rgba(47, 153, 164, 0.2); +} + +.card-header { + font-family: 'Raleway', sans-serif; + font-size: 24px; + font-weight: 600; + color: #585961; + margin-bottom: 16px; +} +``` + +**Navigation:** +```css +nav { + background-color: #FFFFFF; + border-bottom: 1px solid #CCCDCC; + padding: 20px 0; +} + +nav a { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + color: #585961; + padding: 8px 16px; + transition: color 0.3s ease; +} + +nav a:hover, +nav a.active { + color: #2F99A4; +} +``` + +### Header Patterns + +**Main Header (Website):** +- Turquoise background or image with turquoise overlay +- White text (Raleway Bold) +- Generous padding (80px top/bottom desktop, 40px mobile) +- Clear call-to-action button + +**Section Headers:** +- Raleway Semi-Bold or Bold +- Anthracite grey (#585961) +- Optional orange accent line (4px, #FF4D00) +- 60px margin-bottom + +## Image Guidelines + +### Website Images + +**Primary Source:** Internal photoshoot images (2022 collection) + +**Characteristics:** +- Authentic team photos +- Modern office environments +- Natural lighting +- Candid, professional atmosphere +- Technology in context + +**Fallback:** Stock photos (only when necessary) +- Modern, clean aesthetic +- Technology-focused +- Diverse, inclusive +- Professional quality +- Avoid cliché business imagery + +### Blog & Social Media + +**"Eyecatcher" Approach:** +- Attention-grabbing visuals +- Mix of: stock images, original photos, AI-generated images +- Bright, energetic +- Relevant to content topic +- Branded overlays when appropriate + +**Social Media Post Templates:** +- Background: Turquoise or white +- Logo: Top-left or bottom-right +- Icons: Category indicators +- Text: Raleway headlines, Open Sans body +- Aspect ratios per platform requirements + +### Case Studies + +**Screenshot Treatment:** +- **Always show in context** (laptop, tablet, phone mockup) +- Never use bare screenshots +- Use realistic device frames +- High-quality, crisp images +- Annotations in brand colors (turquoise arrows, orange highlights) + +**Supporting Images:** +- Schematic diagrams (brand colors) +- Technology logos (official versions) +- Process illustrations +- Before/after comparisons + +### Image Technical Requirements + +**Web Optimization:** +- Format: WebP with JPG fallback +- Compression: 80-85% quality +- Responsive: Multiple sizes for different viewports +- Alt text: Descriptive, SEO-friendly +- Lazy loading for below-fold images + +**Dimensions:** +- Hero images: 1920 × 1080px (16:9) +- Blog headers: 1200 × 630px (Facebook OG) +- Case study headers: 1200 × 800px +- Thumbnails: 600 × 400px +- Team photos: 800 × 800px (square) + +## Social Media Guidelines + +### Platform Specifications + +**Facebook:** +- Profile: 180 × 180px (logo symbol, turquoise bg) +- Cover: 828 × 315px (team photo) +- Post: 1200 × 630px (standard template) + +**LinkedIn:** +- Profile: 400 × 400px (logo symbol, turquoise bg) +- Cover: 1584 × 396px (technology logos, abstract) +- Post: 1200 × 627px (standard template) + +**XING:** +- Profile: 1500 × 1500px (logo symbol, turquoise bg) +- Cover: 1280 × 624px (technology logos, abstract) +- Post: 720 × 450px (standard template) + +**Twitter/X:** +- Profile: 400 × 400px (logo symbol, turquoise bg) +- Header: 1500 × 500px (team photo) +- Post: 1200 × 675px (16:9) + +### Post Templates + +**Standard Post:** +- White or turquoise background +- Category icon (top-left) +- Raleway headline (28-36px) +- Open Sans body text (16-18px) +- Logo (bottom-right, small) +- 40px margins minimum + +**Negative Variant:** +- Turquoise background +- White text +- Same layout structure + +### Content Categorization Icons + +Use consistent icons for: +- 💼 Business News +- 🚀 Innovation/Technology +- 👥 Team/Culture +- 📚 Knowledge/Blog +- 🎉 Events +- 💡 Tips/Insights + +## Accessibility Requirements + +### Color Contrast + +**WCAG AA Minimum:** +- Body text: Minimum 4.5:1 contrast ratio +- Large text (18px+): Minimum 3:1 contrast ratio +- UI components: Minimum 3:1 contrast ratio + +**Brand Color Compliance:** +- ✅ #585961 (anthracite) on #FFFFFF (white) = 8.59:1 ✓ +- ✅ #FFFFFF (white) on #2F99A4 (turquoise) = 3.08:1 ✓ (large text only) +- ✅ #FFFFFF (white) on #FF4D00 (orange) = 3.94:1 ✓ (large text only) +- ⚠️ #2F99A4 (turquoise) on #FFFFFF (white) = 3.08:1 (large text or borders) + +**Usage Recommendations:** +- Use anthracite (#585961) for small body text +- Use turquoise (#2F99A4) for headlines 18px+ or UI elements +- Use white text on turquoise/orange for buttons and large text only + +### Keyboard Navigation + +- All interactive elements must be keyboard accessible +- Visible focus states (turquoise outline, 2px) +- Logical tab order +- Skip links for main content + +### Screen Readers + +- Semantic HTML structure +- Descriptive alt text for images +- ARIA labels for complex interactions +- Proper heading hierarchy (h1 → h2 → h3) + +## Pre-Launch Validation Procedures + +Execute these validation steps systematically before launching Netresearch projects: + +**Design Phase Validation** +1. Import Raleway and Open Sans fonts from Google Fonts or internal server +2. Set up color variables using CSS custom properties or Sass variables +3. Define complete typography scale (h1-h5, body, buttons) +4. Create component library with all brand styles documented +5. Establish responsive breakpoints (320px, 768px, 1024px, 1440px) +6. Plan white space allocation and layout grid system + +**Development Phase Validation** +1. Implement brand colors consistently across all components +2. Apply Raleway font family to all headlines (h1-h5) +3. Apply Open Sans to body text, navigation, and UI elements +4. Add Netresearch logo using official variant with proper sizing +5. Optimize all images (WebP format, compression, responsive srcsets) +6. Test color contrast ratios (WCAG AA: minimum 4.5:1 for text) +7. Implement keyboard navigation for all interactive elements +8. Add visible focus states with turquoise outline (2px) + +**Quality Assurance Validation** +1. Verify logo usage (minimum sizes, clear space, correct variant) +2. Check color accuracy across Chrome, Firefox, Safari browsers +3. Test typography rendering on different operating systems +4. Validate responsive behavior at all defined breakpoints +5. Run automated accessibility audit (axe, WAVE, Lighthouse) +6. Verify inclusive language throughout all content (no problematic terms) +7. Execute cross-browser testing (latest 2 versions minimum) +8. Measure and optimize performance (Core Web Vitals) + +**Brand Compliance Validation** + +Execute visual identity checks: +1. Confirm brand colors used correctly (turquoise primary, orange accent) +2. Verify logo displayed properly with adequate clear space +3. Check typography hierarchy is clear and consistent +4. Validate white space is adequate and generous + +Execute content quality checks: +1. Confirm images are high-quality and align with brand aesthetics +2. Verify messaging is clear, professional, and on-brand +3. Check "one Netresearch" principle maintained (no team logos externally) +4. Validate inclusive language used throughout all content + +Execute technical standards checks: +1. Verify WCAG AA accessibility compliance (automated and manual testing) +2. Confirm performance metrics acceptable (Lighthouse score 90+) +3. Validate responsive design works correctly across all viewports +4. Check all brand assets optimized (file sizes, formats, compression) + +## Resources + +### Design Assets + +- **Logo Files:** Contact internal design team +- **Font Files:** Google Fonts (Raleway, Open Sans) or internal server +- **Image Library:** 2022 photoshoot collection (internal) +- **Social Media Templates:** Canva templates (internal access) + +### Official Documentation + +- **Presentation Templates:** + - [Netresearch Template 4:3](https://docs.google.com/presentation) + - [Netresearch Template 16:9](https://docs.google.com/presentation) + - [Company Presentation](https://docs.google.com/presentation) + +- **Website:** https://www.netresearch.de/ + +### External References + +- **Web Fonts:** + - [Google Fonts - Raleway](https://fonts.google.com/specimen/Raleway) + - [Google Fonts - Open Sans](https://fonts.google.com/specimen/Open+Sans) + +- **Accessibility:** + - [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) + - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) + +## Brand Voice & Messaging + +### Communication Principles + +**One Netresearch:** +- Present as unified company, not separate teams +- Team names internal only, not for external communication +- Consistent brand voice across all channels + +**Tone:** +- Professional yet approachable +- Modern and tech-savvy +- Clear and communicative +- Innovative and forward-thinking + +**Language Style:** +- Clear, concise messaging +- Avoid jargon when possible +- Technical accuracy when needed +- Active voice preferred + +**Inclusive Language:** +- Use respectful, professional terminology +- Follow community values and code of conduct standards +- Avoid problematic terms that exclude or offend + +**Terms to Avoid and Alternatives:** +- ❌ "master/slave" → ✅ "primary/replica", "leader/follower", "main/secondary" +- ❌ "blacklist/whitelist" → ✅ "blocklist/allowlist", "denylist/permitlist", "exclusion list/inclusion list" +- ❌ "sanity check" → ✅ "confidence check", "validation check", "coherence check" +- ❌ "dummy" → ✅ "placeholder", "sample", "test" +- ❌ "grandfathered" → ✅ "legacy status", "existing entitlement" + +These guidelines apply to all written content: code, documentation, presentations, marketing materials, and internal communications. + +## TYPO3 Extension Branding + +**Purpose:** Ensure consistent Netresearch branding across all TYPO3 extensions developed by or for Netresearch. + +### Extension Icon + +**Standard:** Use the Netresearch symbol-only logo as the extension icon. + +**File Location:** `Resources/Public/Icons/Extension.svg` + +**SVG Source:** +```xml + +``` + +**Color Values:** +- Frame (brackets): Turquoise `#2999A4` +- Letter "n": Anthracite Grey `#595A62` + +### Description Field Requirements + +**CRITICAL:** Both `composer.json` and `ext_emconf.php` description fields MUST mention the company name. + +**Format:** ` - by Netresearch` or include "Netresearch" naturally in the description. + +**Examples:** +``` +✅ "Adds image support to CKEditor5 - by Netresearch" +✅ "Netresearch extension for image handling in CKEditor5" +✅ "Image support for CKEditor5 RTE. Developed and maintained by Netresearch DTT GmbH." + +❌ "Adds image support to CKEditor5" (missing company name) +❌ "Image extension" (too vague, missing company name) +``` + +**Why this matters:** +- Brand visibility in extension listings +- Clear attribution in TYPO3 Extension Repository (TER) +- Professional identification in Packagist search results + +### composer.json Requirements + +**All Netresearch extensions MUST include:** + +```json +{ + "name": "netresearch/", + "type": "typo3-cms-extension", + "description": " - by Netresearch", + "homepage": "https://github.com/netresearch/", + "license": "AGPL-3.0-or-later", + "authors": [ + { + "name": "", + "email": "@netresearch.de", + "role": "Developer", + "homepage": "https://www.netresearch.de/" + } + ], + "extra": { + "typo3/cms": { + "extension-key": "" + } + } +} +``` + +**Mandatory Fields:** +| Field | Format | Example | +|-------|--------|---------| +| `name` | `netresearch/` | `netresearch/rte-ckeditor-image` | +| `description` | Must mention "Netresearch" | `Image support for CKEditor5 - by Netresearch` | +| `homepage` | GitHub repository URL | `https://github.com/netresearch/t3x-rte_ckeditor_image` | +| `license` | SPDX identifier | `AGPL-3.0-or-later` or `GPL-2.0-or-later` | +| `authors[].email` | Netresearch email | `developer@netresearch.de` | +| `authors[].homepage` | Company website | `https://www.netresearch.de/` | + +### ext_emconf.php Requirements + +**All Netresearch extensions MUST include:** + +```php + '', + 'description' => ' - by Netresearch', + 'category' => '', + 'author' => '', + 'author_email' => '@netresearch.de', + 'author_company' => 'Netresearch DTT GmbH', + 'state' => 'stable', + 'version' => '', + 'constraints' => [ + 'depends' => [ + 'php' => '-', + 'typo3' => '-', + ], + 'conflicts' => [], + 'suggests' => [], + ], +]; +``` + +**Mandatory Fields:** +| Field | Value | Notes | +|-------|-------|-------| +| `description` | Must mention "Netresearch" | Include company name in description text | +| `author_company` | `Netresearch DTT GmbH` | **Exact spelling required** | +| `author_email` | `*@netresearch.de` | Must use Netresearch email domain | +| `author` | Developer name(s) | Comma-separated for multiple | + +### Configuration Files Checklist + +**When creating or auditing a Netresearch TYPO3 extension:** + +1. **Extension Icon** + - [ ] `Resources/Public/Icons/Extension.svg` exists + - [ ] Uses official Netresearch symbol-only logo + - [ ] Colors: Frame `#2999A4`, Letter `#595A62` + +2. **composer.json** + - [ ] `name` starts with `netresearch/` + - [ ] `description` mentions "Netresearch" + - [ ] `homepage` points to GitHub repository + - [ ] `authors[].homepage` is `https://www.netresearch.de/` + - [ ] `authors[].email` uses `@netresearch.de` domain + - [ ] `license` is specified (AGPL-3.0-or-later recommended) + +3. **ext_emconf.php** + - [ ] `description` mentions "Netresearch" + - [ ] `author_company` is exactly `Netresearch DTT GmbH` + - [ ] `author_email` uses `@netresearch.de` domain + - [ ] `author` lists developer name(s) + - [ ] All mandatory fields are populated + +4. **LICENSE file** + - [ ] LICENSE or LICENSE.txt exists in extension root + - [ ] Contains full license text matching composer.json license + +5. **README.md** + - [ ] Mentions "Netresearch DTT GmbH" in credits/author section + - [ ] Links to https://www.netresearch.de/ + +### Validation Commands + +```bash +# Check composer.json vendor +jq -r '.name' composer.json | grep -q "^netresearch/" && echo "✅ Correct vendor" || echo "❌ Wrong vendor" + +# Check composer.json description mentions Netresearch +jq -r '.description' composer.json | grep -qi "netresearch" && echo "✅ Description mentions Netresearch" || echo "❌ Description missing Netresearch" + +# Check author homepage +jq -r '.authors[].homepage' composer.json | grep -q "netresearch.de" && echo "✅ Correct homepage" || echo "❌ Wrong homepage" + +# Check ext_emconf.php description mentions Netresearch +grep "'description' =>" ext_emconf.php | grep -qi "netresearch" && echo "✅ Description mentions Netresearch" || echo "❌ Description missing Netresearch" + +# Check ext_emconf.php author_company +grep -q "'author_company' => 'Netresearch DTT GmbH'" ext_emconf.php && echo "✅ Correct company" || echo "❌ Wrong company" + +# Check extension icon exists +test -f Resources/Public/Icons/Extension.svg && echo "✅ Extension icon exists" || echo "❌ Missing extension icon" +``` + +--- + +## Quick Reference + +### Color Codes +``` +Turquoise: #2F99A4 +Orange: #FF4D00 +Anthracite:#585961 +Light Grey:#CCCDCC +White: #FFFFFF +``` + +### Font Stack +```css +/* Headlines */ +font-family: 'Raleway', sans-serif; + +/* Body (Web) */ +font-family: 'Open Sans', sans-serif; + +/* Body (Documents) */ +font-family: 'Calibri', sans-serif; +``` + +### Logo Minimum Sizes +``` +Digital: 120px width +Print: 30mm width +Icon: 32px × 32px +``` + +### Breakpoints +```css +Mobile: 320px +Tablet: 768px +Desktop: 1024px +Large: 1440px +``` + +--- + +*This skill ensures consistent application of Netresearch brand identity across all digital projects. For questions or clarifications, consult the internal design team.* diff --git a/assets/logos/netresearch-symbol-only.svg b/assets/logos/netresearch-symbol-only.svg new file mode 100644 index 0000000..dd3c671 --- /dev/null +++ b/assets/logos/netresearch-symbol-only.svg @@ -0,0 +1,19 @@ + + + Netresearch DTT GmbH + + + + + diff --git a/claudedocs/refactoring-summary.md b/claudedocs/refactoring-summary.md new file mode 100644 index 0000000..e7f9c54 --- /dev/null +++ b/claudedocs/refactoring-summary.md @@ -0,0 +1,54 @@ +# SKILL.md Refactoring Summary + +**Date:** 2025-11-14 +**Version Change:** 1.0.0 → 1.1.0 +**Skill:** netresearch-branding + +## Changes Applied + +### Pattern 1: Removed "## Overview" Section +- **Before:** Lines 14-23 contained "## Overview" section +- **After:** Removed entire section +- **Rationale:** Content duplicated YAML description; no unique value + +### Pattern 2: Converted Do's/Don'ts to Imperative Form +- **Before:** "Do's:" and "Don'ts:" bullet lists throughout +- **After:** "When X" trigger-based imperative instructions + +#### Color Application Rules +- **Before:** Separate "Do's" and "Don'ts" lists +- **After:** "When applying brand colors" with unified action-oriented instructions +- Combined positive actions and avoidances into cohesive workflow + +#### Typography Application Standards +- **Before:** "Typography Do's and Don'ts" with separate lists +- **After:** "When applying typography" with unified standards +- Converted each guideline to action-oriented instruction + +### Pattern 3: Converted "## Implementation Checklist" to Procedures +- **Before:** Three checklists (Design Phase, Development Phase, Quality Assurance) with checkbox items +- **After:** "## Pre-Launch Validation Procedures" with numbered procedural steps +- **Changes:** + - Design Phase → Design Phase Validation (6 numbered steps) + - Development Phase → Development Phase Validation (8 numbered steps) + - Quality Assurance → Quality Assurance Validation (8 numbered steps) + - Brand Compliance Review → Brand Compliance Validation (3 check categories with numbered steps) + +## Impact Analysis + +**Readability:** Significantly improved - clear action-oriented instructions +**Consistency:** Aligned with skill-creator best practices +**Usability:** Enhanced - readers execute procedures rather than check boxes +**Clarity:** Removed redundant overview; eliminated Do's/Don'ts duplication + +## Files Modified + +- `/SKILL.md` (lines 1-866) + +## Verification + +- Version number updated in YAML frontmatter: ✓ +- Overview section removed: ✓ +- All Do's/Don'ts converted to imperative: ✓ +- Checklists converted to procedures: ✓ +- No broken internal references: ✓ diff --git a/examples/components.html b/examples/components.html new file mode 100644 index 0000000..ca40b12 --- /dev/null +++ b/examples/components.html @@ -0,0 +1,313 @@ + + + + + + Netresearch Brand Components + + + + + + + +
+

Netresearch Brand Components

+ + +
+

Buttons

+ +
+

Primary Buttons

+ + + +
+ +
+

Secondary Buttons

+ + + +
+ +
+

Outline Buttons (on dark background)

+ + + +
+ +
+<button class="btn-primary">Primary Action</button> +<button class="btn-secondary">Secondary Action</button> +<button class="btn-outline">Tertiary Action</button> + +<!-- Sizes --> +<button class="btn-primary btn-small">Small</button> +<button class="btn-primary">Default</button> +<button class="btn-primary btn-large">Large</button> +
+
+ + +
+

Cards

+ +
+
+
+
+

Simple Card

+

This is a basic card with title and text content.

+ Learn more +
+
+ +
+
+

Card with Footer

+

This card includes a footer section with metadata.

+
+
+ Published: Jan 1, 2025 +
+
+ +
+
+

Card with Button

+

This card has a primary action button.

+ +
+
+
+
+ +
+<div class="card"> + <div class="card-content"> + <h3 class="card-title">Card Title</h3> + <p class="card-text">Card description.</p> + <a href="#" class="link-standalone">Learn more</a> + </div> + <div class="card-footer"> + <span class="card-meta">Metadata</span> + </div> +</div> +
+
+ + +
+

Typography

+ +
+

Heading 1 - Raleway Bold 48px

+

Heading 2 - Raleway Bold 36px

+

Heading 3 - Raleway SemiBold 28px

+

Heading 4 - Raleway SemiBold 22px

+

Lead paragraph - Open Sans Regular 20px with comfortable line height for improved readability.

+

Body text - Open Sans Regular 16px. This is the standard paragraph text used throughout the website. It maintains excellent readability with a line-height of 1.6.

+

Small text - Open Sans Regular 14px for captions and metadata.

+
+ +
+<h1>Heading 1</h1> +<h2>Heading 2</h2> +<h3>Heading 3</h3> +<p class="lead">Lead paragraph</p> +<p>Body text</p> +<small>Small text</small> +
+
+ + +
+

Links

+ +
+

This is a paragraph with an inline link within the text.

+

Standalone link with arrow

+

Download link with icon

+

External link with icon

+
+ +
+<!-- Inline link --> +<a href="#">Link text</a> + +<!-- Standalone link with arrow --> +<a href="#" class="link-standalone">Learn more</a> + +<!-- Download link --> +<a href="file.pdf" download>Download PDF</a> + +<!-- External link --> +<a href="https://example.com" target="_blank">External</a> +
+
+ + +
+

Forms

+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+<form> + <div class="form-group"> + <label for="name" class="form-label">Name*</label> + <input type="text" id="name" class="form-input" + placeholder="Your name" required> + </div> + + <div class="form-group"> + <label for="message" class="form-label">Message*</label> + <textarea id="message" class="form-textarea" + placeholder="Your message" required></textarea> + </div> + + <button type="submit" class="btn-primary">Submit</button> +</form> +
+
+ + +
+

Color Palette

+ +
+
+
+
+ Turquoise Primary
+ #2F99A4 +
+
+
+ Orange Accent
+ #FF4D00 +
+
+
+ Anthracite Text
+ #585961 +
+
+
+ Light Grey
+ #CCCDCC +
+
+
+ White
+ #FFFFFF +
+
+
+ +
+/* CSS Custom Properties */ +:root { + --color-primary: #2F99A4; + --color-accent: #FF4D00; + --color-text-primary: #585961; + --color-border: #CCCDCC; + --color-background: #FFFFFF; +} +
+
+ + +
+

Grid Layouts

+ +
+

Two-Column Layout

+
+
Column 1
+
Column 2
+
+ +

Three-Column Layout

+
+
Column 1
+
Column 2
+
Column 3
+
+
+ +
+<!-- Two-column layout --> +<div class="two-column"> + <div>Content 1</div> + <div>Content 2</div> +</div> + +<!-- Three-column layout --> +<div class="three-column"> + <div>Content 1</div> + <div>Content 2</div> + <div>Content 3</div> +</div> +
+
+ +
+ + diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..c640bb1 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,77 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:netresearch/claude-code-marketplace:skills/netresearch-branding", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "0aeaae6c6d369ee917b3c91b58f7cce7bbd86894", + "treeHash": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6", + "generatedAt": "2025-11-28T10:27:20.050957Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "netresearch-branding", + "description": "Implement Netresearch brand guidelines in web projects with comprehensive color system, typography standards (Raleway, Open Sans, Calibri), responsive component library, and production-ready templates. Includes WCAG AA accessibility compliance, social media specifications, and complete web design patterns.", + "version": "1.1.0-20251126" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "a5b0012d55dca7ac9635b19f258541fc2db3bdcce16a520403ad6691a489aadc" + }, + { + "path": "SKILL.md", + "sha256": "4dbc3494d69303bf5be910168bd991bfffa75c0d4f0606274e333f4f1349a032" + }, + { + "path": "references/colors.md", + "sha256": "42fbf46dc515b079a250727b8881dde7541400d1777eccfd07b910c6a43328f8" + }, + { + "path": "references/web-design.md", + "sha256": "2016875af8aaca78eff4121e107871339d79441d0e23d4ff3f148dff3fc12dd9" + }, + { + "path": "references/typography.md", + "sha256": "a2484d7416e8f35e1db48dc694fe56945819951e2e8b9ad9b6d1815627b29fff" + }, + { + "path": "claudedocs/refactoring-summary.md", + "sha256": "c1ace25fce5c5c8afa76d0900c8fec9c8255618c845a32b5eb5adce6803b260f" + }, + { + "path": "examples/components.html", + "sha256": "548341dfdbaacf0b0d8befc95b264f4fdde1793dc6d3f73e1edde038624591f5" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "e46c28cdaadb6b32560e7269d3750de47b3016c188e1c0354b95f8c5ae9495e1" + }, + { + "path": "templates/styles.css", + "sha256": "f4c1ecdb68b4132130f4f6261e56c1b020fdcbe38cf4ad4e4bff85dded88cc79" + }, + { + "path": "templates/landing-page.html", + "sha256": "d5ad833e350e48a1e8cac4c8aa461e293e9723fab60469a8fc3b912046708fed" + }, + { + "path": "assets/logos/netresearch-symbol-only.svg", + "sha256": "b63c3f838232beff165668516c1a2a81f9c05327b3712c07453523e4055337c1" + } + ], + "dirSha256": "c714d3b4b9e117a82e159a14f99a154660041476f07fb603dfc11f68f6d584c6" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/references/colors.md b/references/colors.md new file mode 100644 index 0000000..fc212a6 --- /dev/null +++ b/references/colors.md @@ -0,0 +1,347 @@ +# Netresearch Brand Colors Reference + +Complete color palette with technical specifications and usage guidelines. + +## Primary Brand Colors + +### Turquoise (Primary) +**Technical Specifications:** +- **Hex:** `#2F99A4` +- **RGB:** `rgb(47, 153, 164)` +- **CMYK:** `C71 M7 Y17 K36` +- **Pantone:** 7709 C (approximate) +- **NCS:** S 3040-B30G + +**Usage:** +- Primary brand color for all digital and print materials +- Main CTA buttons and interactive elements +- Headers and key visual elements +- Links in default state +- Primary navigation highlights +- Brand identity elements + +**Contrast Ratios (WCAG AA):** +- On white background: 3.8:1 (Meets AA for large text) +- On #F5F5F5: 4.2:1 (Meets AA for large text) +- White text on turquoise: 4.5:1 (Meets AA for all text) + +**Web Implementation:** +```css +:root { + --color-primary: #2F99A4; + --color-primary-rgb: 47, 153, 164; +} + +.btn-primary { + background-color: var(--color-primary); + color: #FFFFFF; +} + +.link-primary { + color: var(--color-primary); +} +``` + +--- + +### Orange (Accent) +**Technical Specifications:** +- **Hex:** `#FF4D00` +- **RGB:** `rgb(255, 77, 0)` +- **CMYK:** `C0 M70 Y100 K0` +- **Pantone:** 172 C (approximate) +- **NCS:** S 1080-Y60R + +**Usage:** +- Accent color for emphasis and highlights +- Secondary CTA buttons +- Important notifications and alerts +- Hover states on primary elements +- Call-out boxes and highlights +- Limited use - accent only, not dominant + +**Contrast Ratios (WCAG AA):** +- On white background: 3.9:1 (Meets AA for large text) +- On #F5F5F5: 4.3:1 (Meets AA for large text) +- White text on orange: 3.2:1 (Meets AA for large text only) + +**Web Implementation:** +```css +:root { + --color-accent: #FF4D00; + --color-accent-rgb: 255, 77, 0; +} + +.btn-secondary { + background-color: var(--color-accent); + color: #FFFFFF; +} + +.highlight { + border-left: 4px solid var(--color-accent); +} +``` + +--- + +## Neutral Colors + +### Anthracite (Text Primary) +**Technical Specifications:** +- **Hex:** `#585961` +- **RGB:** `rgb(88, 89, 97)` +- **CMYK:** C9 M2 Y0 K62` +- **NCS:** S 5502-B + +**Usage:** +- Primary text color for body copy +- Headlines and subheadings +- Navigation text +- Form labels +- Default icon color + +**Contrast Ratios (WCAG AA):** +- On white background: 8.3:1 (Meets AAA for all text) +- On #F5F5F5: 7.8:1 (Meets AAA for all text) + +**Web Implementation:** +```css +:root { + --color-text-primary: #585961; +} + +body, p, h1, h2, h3 { + color: var(--color-text-primary); +} +``` + +--- + +### Light Grey (Backgrounds) +**Technical Specifications:** +- **Hex:** `#CCCDCC` +- **RGB:** `rgb(204, 205, 204)` +- **CMYK:** C0 M0 Y0 K20` +- **NCS:** S 2000-N + +**Usage:** +- Background sections and cards +- Subtle borders and dividers +- Disabled states +- Alternating table rows +- Input field borders + +**Contrast Note:** +- Not suitable for text on white background +- Use for backgrounds and UI elements only + +**Web Implementation:** +```css +:root { + --color-background-light: #CCCDCC; + --color-border-light: #CCCDCC; +} + +.card { + background-color: #F5F5F5; + border: 1px solid var(--color-border-light); +} +``` + +--- + +### White (Background) +**Technical Specifications:** +- **Hex:** `#FFFFFF` +- **RGB:** `rgb(255, 255, 255)` + +**Usage:** +- Primary background color +- Text on dark backgrounds +- Card backgrounds +- Clean, spacious layouts + +--- + +## Color Combinations + +### Approved Combinations + +**Primary Palette:** +```css +/* Turquoise on white - Primary brand */ +.combination-1 { + background: #FFFFFF; + color: #2F99A4; +} + +/* White text on turquoise - High impact */ +.combination-2 { + background: #2F99A4; + color: #FFFFFF; +} + +/* Orange accent with turquoise */ +.combination-3 { + background: #2F99A4; + border-color: #FF4D00; + color: #FFFFFF; +} +``` + +**Text Combinations:** +```css +/* Body text on white - Standard */ +.text-standard { + background: #FFFFFF; + color: #585961; +} + +/* Body text on light grey - Sections */ +.text-section { + background: #F5F5F5; + color: #585961; +} +``` + +### Avoid These Combinations + +❌ **Never Use:** +- Orange on turquoise (poor contrast) +- Light grey text on white (fails WCAG) +- Turquoise text smaller than 18px on white (AA compliance) +- Orange text on white for small text (fails AA) + +--- + +## Accessibility Guidelines + +### WCAG AA Compliance + +**Minimum Contrast Ratios:** +- **Normal text (< 18px):** 4.5:1 +- **Large text (≥ 18px):** 3:1 +- **UI components:** 3:1 + +**Approved Text Combinations:** + +✅ **Pass AA for All Text Sizes:** +- Anthracite (#585961) on white: 8.3:1 ✓ +- Anthracite (#585961) on #F5F5F5: 7.8:1 ✓ +- White on turquoise (#2F99A4): 4.5:1 ✓ + +✅ **Pass AA for Large Text Only:** +- Turquoise (#2F99A4) on white: 3.8:1 ✓ +- Orange (#FF4D00) on white: 3.9:1 ✓ +- White on orange (#FF4D00): 3.2:1 ✓ + +❌ **Fail AA (Do Not Use):** +- Light grey (#CCCDCC) on white: 1.6:1 ✗ + +--- + +## Usage Guidelines by Context + +### Websites +- **Primary color:** Turquoise for headers, links, CTAs +- **Accent color:** Orange sparingly for emphasis +- **Background:** White (#FFFFFF) or subtle off-white (#F5F5F5) +- **Text:** Anthracite (#585961) +- **High white space:** Let colors breathe + +### Social Media +- **Header images:** Turquoise primary with orange accents +- **Profile elements:** Turquoise logo on white +- **Post graphics:** Maximum 2 brand colors per graphic + +### Documents +- **Headers:** Turquoise or anthracite +- **Highlights:** Orange for key information +- **Body text:** Anthracite +- **Backgrounds:** White primary, light grey for emphasis + +### Presentations +- **Title slides:** Turquoise background with white text +- **Content slides:** White background with turquoise accents +- **Emphasis:** Orange for key points + +--- + +## CSS Custom Properties (Complete Set) + +```css +:root { + /* Primary Colors */ + --color-primary: #2F99A4; + --color-primary-rgb: 47, 153, 164; + --color-primary-light: rgba(47, 153, 164, 0.1); + --color-primary-dark: #257880; + + /* Accent Colors */ + --color-accent: #FF4D00; + --color-accent-rgb: 255, 77, 0; + --color-accent-light: rgba(255, 77, 0, 0.1); + --color-accent-dark: #CC3D00; + + /* Neutral Colors */ + --color-text-primary: #585961; + --color-text-secondary: #8A8B93; + --color-background: #FFFFFF; + --color-background-alt: #F5F5F5; + --color-border: #CCCDCC; + --color-border-light: #E5E5E5; + + /* Semantic Colors */ + --color-success: #28A745; + --color-warning: #FFC107; + --color-error: #DC3545; + --color-info: var(--color-primary); +} +``` + +--- + +## Sass/SCSS Variables + +```scss +// Primary Colors +$color-primary: #2F99A4; +$color-accent: #FF4D00; + +// Neutral Colors +$color-anthracite: #585961; +$color-light-grey: #CCCDCC; +$color-white: #FFFFFF; + +// Backgrounds +$color-bg-primary: $color-white; +$color-bg-secondary: #F5F5F5; + +// Text +$color-text-primary: $color-anthracite; +$color-text-secondary: lighten($color-anthracite, 15%); + +// Borders +$color-border: $color-light-grey; +$color-border-light: #E5E5E5; +``` + +--- + +## Color Testing Checklist + +Before deploying any brand materials: + +- [ ] All text meets WCAG AA contrast requirements +- [ ] Turquoise is primary, orange is accent only +- [ ] No unapproved color combinations used +- [ ] Colors match exact hex values +- [ ] High white space maintained +- [ ] Tested on multiple displays for color accuracy +- [ ] Print materials use CMYK values +- [ ] Digital materials use RGB/Hex values + +--- + +*Last updated: 2025-10-18* +*Maintained by: Netresearch DTT GmbH* diff --git a/references/typography.md b/references/typography.md new file mode 100644 index 0000000..e80e493 --- /dev/null +++ b/references/typography.md @@ -0,0 +1,609 @@ +# Netresearch Typography Reference + +Complete typography system with font specifications, hierarchy, and implementation guidelines. + +## Font Family Overview + +| Context | Typeface | Purpose | +|---------|----------|---------| +| Web Headlines | **Raleway** | Digital headers, navigation, buttons | +| Web Body Text | **Open Sans** | Digital body copy, captions, lists | +| Documents | **Calibri** | Word, PowerPoint, Excel, email | +| Print | **Raleway + Open Sans** | Brochures, flyers, business cards | + +--- + +## Raleway (Headlines & Display) + +### Font Specifications + +**Family:** Raleway +**Designer:** Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida +**License:** Open Font License (free for commercial use) +**Classification:** Sans-serif, Geometric + +**Recommended Weights for Netresearch:** +- **Regular (400)** - Secondary headlines, navigation +- **Semi-Bold (600)** - Buttons, emphasized text +- **Bold (700)** - Primary headlines, h1-h2 + +### Web Font Loading + +**Google Fonts CDN:** +```html + + + +``` + +**CSS @import:** +```css +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap'); +``` + +**Self-Hosted (Recommended for Performance):** +```css +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/fonts/raleway-regular.woff2') format('woff2'), + url('/fonts/raleway-regular.woff') format('woff'); +} + +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('/fonts/raleway-semibold.woff2') format('woff2'), + url('/fonts/raleway-semibold.woff') format('woff'); +} + +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('/fonts/raleway-bold.woff2') format('woff2'), + url('/fonts/raleway-bold.woff') format('woff'); +} +``` + +### Usage Guidelines + +**Use Raleway For:** +- ✅ Page headlines (h1, h2, h3) +- ✅ Navigation menu items +- ✅ Button labels +- ✅ Section headers +- ✅ Pull quotes and callouts +- ✅ Hero text and taglines + +**Do Not Use Raleway For:** +- ❌ Body paragraphs (use Open Sans) +- ❌ Long-form content (readability issues) +- ❌ Small text below 14px (legibility) +- ❌ Dense information tables + +--- + +## Open Sans (Body Text) + +### Font Specifications + +**Family:** Open Sans +**Designer:** Steve Matteson +**License:** Apache License 2.0 (free for commercial use) +**Classification:** Sans-serif, Humanist + +**Recommended Weights for Netresearch:** +- **Regular (400)** - Body text, lists, captions +- **Semi-Bold (600)** - Emphasized body text, labels +- **Bold (700)** - Strong emphasis, sub-headers + +### Web Font Loading + +**Google Fonts CDN:** +```html + +``` + +**CSS @import:** +```css +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap'); +``` + +**Self-Hosted:** +```css +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/fonts/opensans-regular.woff2') format('woff2'), + url('/fonts/opensans-regular.woff') format('woff'); +} + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('/fonts/opensans-semibold.woff2') format('woff2'), + url('/fonts/opensans-semibold.woff') format('woff'); +} + +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('/fonts/opensans-bold.woff2') format('woff2'), + url('/fonts/opensans-bold.woff') format('woff'); +} +``` + +### Usage Guidelines + +**Use Open Sans For:** +- ✅ All body copy and paragraphs +- ✅ Lists (ordered and unordered) +- ✅ Form input text +- ✅ Captions and metadata +- ✅ Table content +- ✅ Footer text + +**Do Not Use Open Sans For:** +- ❌ Main page headlines (use Raleway) +- ❌ Large display text above 48px (use Raleway) + +--- + +## Calibri (Documents) + +### Font Specifications + +**Family:** Calibri +**Designer:** Luc(as) de Groot +**License:** Microsoft bundled (available on Windows/Office) +**Classification:** Sans-serif, Humanist + +**Weights Available:** +- Regular (400) +- Bold (700) +- Italic (400) +- Bold Italic (700) + +### Usage Guidelines + +**Use Calibri For:** +- ✅ Microsoft Word documents +- ✅ PowerPoint presentations +- ✅ Excel spreadsheets +- ✅ Outlook emails +- ✅ Internal documentation + +**Fallback for Non-Microsoft Platforms:** +```css +font-family: Calibri, 'Open Sans', Arial, sans-serif; +``` + +**Document Templates:** +- **Headings:** Calibri Bold, Turquoise (#2F99A4) +- **Body Text:** Calibri Regular, Anthracite (#585961) +- **Emphasis:** Calibri Bold or Calibri Italic + +--- + +## Typography Scale + +### Web Typography Hierarchy + +```css +/* h1 - Page Title */ +h1 { + font-family: 'Raleway', sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 1.2; + color: #585961; + margin-bottom: 24px; +} + +/* h2 - Section Header */ +h2 { + font-family: 'Raleway', sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 1.3; + color: #585961; + margin-bottom: 20px; +} + +/* h3 - Subsection Header */ +h3 { + font-family: 'Raleway', sans-serif; + font-size: 28px; + font-weight: 600; + line-height: 1.4; + color: #585961; + margin-bottom: 16px; +} + +/* h4 - Minor Header */ +h4 { + font-family: 'Raleway', sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 1.4; + color: #585961; + margin-bottom: 12px; +} + +/* h5 - Small Header */ +h5 { + font-family: 'Raleway', sans-serif; + font-size: 18px; + font-weight: 600; + line-height: 1.5; + color: #585961; + margin-bottom: 12px; +} + +/* Body Text */ +body, p { + font-family: 'Open Sans', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 1.6; + color: #585961; + margin-bottom: 16px; +} + +/* Small Text / Captions */ +.text-small, small { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 1.6; + color: #585961; +} + +/* Lead Paragraph */ +.lead { + font-family: 'Open Sans', sans-serif; + font-size: 20px; + font-weight: 400; + line-height: 1.6; + color: #585961; +} +``` + +### Responsive Typography + +```css +/* Mobile First Approach */ + +/* Base (Mobile) */ +h1 { font-size: 32px; } +h2 { font-size: 26px; } +h3 { font-size: 22px; } +h4 { font-size: 18px; } +body, p { font-size: 16px; } + +/* Tablet (768px+) */ +@media (min-width: 768px) { + h1 { font-size: 40px; } + h2 { font-size: 32px; } + h3 { font-size: 26px; } + h4 { font-size: 20px; } +} + +/* Desktop (1024px+) */ +@media (min-width: 1024px) { + h1 { font-size: 48px; } + h2 { font-size: 36px; } + h3 { font-size: 28px; } + h4 { font-size: 22px; } +} + +/* Large Desktop (1440px+) */ +@media (min-width: 1440px) { + h1 { font-size: 56px; } + h2 { font-size: 40px; } +} +``` + +--- + +## Line Height & Spacing + +### Line Height Guidelines + +```css +/* Headlines - Tighter Leading */ +h1, h2, h3 { + line-height: 1.2; +} + +h4, h5, h6 { + line-height: 1.4; +} + +/* Body Text - Comfortable Reading */ +p, li, td { + line-height: 1.6; +} + +/* Small Text */ +small, .caption { + line-height: 1.5; +} +``` + +### Vertical Rhythm + +```css +/* Consistent spacing system */ +:root { + --spacing-xs: 8px; + --spacing-sm: 12px; + --spacing-md: 16px; + --spacing-lg: 24px; + --spacing-xl: 32px; + --spacing-xxl: 48px; +} + +/* Apply to typography */ +h1 { margin-bottom: var(--spacing-lg); } +h2 { margin-bottom: var(--spacing-lg); } +h3 { margin-bottom: var(--spacing-md); } +h4, h5 { margin-bottom: var(--spacing-sm); } +p { margin-bottom: var(--spacing-md); } +``` + +--- + +## Special Typography Elements + +### Buttons + +```css +.btn { + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 1; + letter-spacing: 0.5px; + text-transform: none; +} + +.btn-large { + font-size: 18px; +} + +.btn-small { + font-size: 14px; +} +``` + +### Navigation + +```css +.nav-link { + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 400; + letter-spacing: 0.3px; +} + +.nav-link:hover, +.nav-link.active { + font-weight: 600; +} +``` + +### Blockquotes / Pull Quotes + +```css +blockquote { + font-family: 'Raleway', sans-serif; + font-size: 24px; + font-weight: 400; + line-height: 1.5; + font-style: italic; + color: #2F99A4; + border-left: 4px solid #FF4D00; + padding-left: 24px; + margin: 32px 0; +} + +blockquote cite { + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 600; + font-style: normal; + color: #585961; + display: block; + margin-top: 12px; +} +``` + +### Lists + +```css +ul, ol { + font-family: 'Open Sans', sans-serif; + font-size: 16px; + line-height: 1.6; + margin-bottom: 16px; + padding-left: 24px; +} + +li { + margin-bottom: 8px; +} + +/* Custom bullet points using brand color */ +ul.branded { + list-style: none; + padding-left: 0; +} + +ul.branded li::before { + content: '●'; + color: #2F99A4; + font-weight: bold; + display: inline-block; + width: 1em; + margin-left: -1em; +} +``` + +--- + +## Font Loading Strategy + +### Performance Optimization + +```html + + + + + + +``` + +### Font Display Strategy + +```css +@font-face { + font-family: 'Raleway'; + font-display: swap; /* Show fallback immediately, swap when loaded */ + /* ... other properties */ +} +``` + +### Fallback Stack + +```css +/* Complete fallback chain */ +--font-headlines: 'Raleway', 'Helvetica Neue', Arial, sans-serif; +--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, + 'Segoe UI', Roboto, sans-serif; +--font-documents: Calibri, 'Open Sans', Arial, sans-serif; +``` + +--- + +## Accessibility Considerations + +### Minimum Font Sizes + +- **Body text:** Never below 16px (1rem) +- **Small text:** Never below 14px (0.875rem) +- **Buttons:** Minimum 16px for touch targets + +### Contrast Requirements + +All text must meet WCAG AA: +- **Normal text:** 4.5:1 contrast ratio +- **Large text (≥18px):** 3:1 contrast ratio + +### Readability + +**Line Length:** +- Optimal: 50-75 characters per line +- Maximum: 90 characters per line + +```css +.content { + max-width: 75ch; /* Character-based width */ +} +``` + +**Paragraph Spacing:** +```css +p + p { + margin-top: 16px; /* Clear paragraph separation */ +} +``` + +--- + +## CSS Custom Properties (Complete Set) + +```css +:root { + /* Font Families */ + --font-headline: 'Raleway', sans-serif; + --font-body: 'Open Sans', sans-serif; + --font-document: Calibri, 'Open Sans', sans-serif; + + /* Font Sizes */ + --font-size-xs: 12px; + --font-size-sm: 14px; + --font-size-base: 16px; + --font-size-lg: 18px; + --font-size-xl: 20px; + --font-size-2xl: 24px; + --font-size-3xl: 28px; + --font-size-4xl: 36px; + --font-size-5xl: 48px; + --font-size-6xl: 56px; + + /* Font Weights */ + --font-weight-normal: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + + /* Line Heights */ + --line-height-tight: 1.2; + --line-height-snug: 1.4; + --line-height-normal: 1.6; + --line-height-relaxed: 1.8; + + /* Letter Spacing */ + --letter-spacing-tight: -0.5px; + --letter-spacing-normal: 0; + --letter-spacing-wide: 0.5px; +} +``` + +--- + +## Typography Testing Checklist + +Before deploying: + +- [ ] Fonts load correctly on all major browsers +- [ ] Fallback fonts provide acceptable experience +- [ ] All text meets WCAG AA contrast requirements +- [ ] Font files optimized (woff2 format preferred) +- [ ] Font-display: swap implemented +- [ ] Line lengths within 50-90 character range +- [ ] Responsive typography scales appropriately +- [ ] No text smaller than 14px in production +- [ ] Headlines use Raleway, body uses Open Sans +- [ ] Documents use Calibri with proper fallbacks + +--- + +*Last updated: 2025-10-18* +*Maintained by: Netresearch DTT GmbH* diff --git a/references/web-design.md b/references/web-design.md new file mode 100644 index 0000000..28bf025 --- /dev/null +++ b/references/web-design.md @@ -0,0 +1,860 @@ +# Netresearch Web Design Guidelines + +Comprehensive web design patterns, layouts, components, and responsive design standards. + +## Core Design Principles + +### 1. High White Space +**Philosophy:** Clean, uncluttered layouts that prioritize content and readability. + +```css +/* Generous spacing throughout */ +:root { + --spacing-xs: 8px; + --spacing-sm: 12px; + --spacing-md: 16px; + --spacing-lg: 24px; + --spacing-xl: 32px; + --spacing-xxl: 48px; + --spacing-3xl: 64px; + --spacing-4xl: 96px; +} + +/* Section spacing */ +section { + padding: var(--spacing-4xl) 0; +} + +/* Content spacing */ +.content { + padding: var(--spacing-xxl); +} +``` + +**Guidelines:** +- Minimum 48px padding around major sections +- Minimum 24px margin between content blocks +- Generous line-height (1.6) for readability +- Never crowd elements - let designs breathe + +--- + +### 2. Responsive Grid System + +**12-Column Flexible Grid:** +```css +.grid { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: var(--spacing-lg); + padding: 0 var(--spacing-lg); +} + +/* Content within container */ +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); +} + +/* Responsive columns */ +.col-12 { grid-column: span 12; } +.col-6 { grid-column: span 6; } +.col-4 { grid-column: span 4; } +.col-3 { grid-column: span 3; } + +@media (max-width: 768px) { + .col-6, .col-4, .col-3 { + grid-column: span 12; + } +} +``` + +--- + +### 3. Design Hierarchy +- **Primary:** Turquoise (#2F99A4) for key elements +- **Secondary:** Orange (#FF4D00) for accents only +- **Typography:** Clear hierarchy with Raleway headers and Open Sans body +- **Visual Flow:** Top to bottom, left to right reading patterns + +--- + +## Responsive Breakpoints + +### Standard Breakpoints + +```css +/* Mobile First Approach */ + +/* Extra Small (Mobile Portrait) */ +/* Default: 0px - 599px */ + +/* Small (Mobile Landscape) */ +@media (min-width: 600px) { + /* Adjustments for landscape phones */ +} + +/* Medium (Tablet) */ +@media (min-width: 768px) { + /* Two-column layouts start here */ +} + +/* Large (Desktop) */ +@media (min-width: 1024px) { + /* Full desktop layouts */ +} + +/* Extra Large (Wide Desktop) */ +@media (min-width: 1440px) { + /* Maximum content width, larger typography */ +} + +/* Ultra Wide */ +@media (min-width: 1920px) { + /* Optional: Enhanced spacing for ultra-wide displays */ +} +``` + +### Container Widths + +```css +.container { + width: 100%; + margin: 0 auto; + padding: 0 16px; +} + +@media (min-width: 600px) { + .container { max-width: 580px; } +} + +@media (min-width: 768px) { + .container { max-width: 750px; } +} + +@media (min-width: 1024px) { + .container { max-width: 1000px; } +} + +@media (min-width: 1440px) { + .container { max-width: 1200px; } +} +``` + +--- + +## Component Library + +### Buttons + +```css +/* Primary Button */ +.btn-primary { + display: inline-block; + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 600; + line-height: 1; + text-align: center; + text-decoration: none; + padding: 12px 32px; + border: none; + border-radius: 4px; + background-color: #2F99A4; + color: #FFFFFF; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary:hover { + background-color: #257880; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3); +} + +.btn-primary:active { + transform: translateY(0); +} + +/* Secondary Button */ +.btn-secondary { + background-color: #FF4D00; + color: #FFFFFF; +} + +.btn-secondary:hover { + background-color: #CC3D00; + box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3); +} + +/* Outline Button */ +.btn-outline { + background-color: transparent; + color: #2F99A4; + border: 2px solid #2F99A4; +} + +.btn-outline:hover { + background-color: #2F99A4; + color: #FFFFFF; +} + +/* Button Sizes */ +.btn-small { + padding: 8px 24px; + font-size: 14px; +} + +.btn-large { + padding: 16px 48px; + font-size: 18px; +} + +/* Button States */ +.btn:disabled, +.btn[disabled] { + opacity: 0.5; + cursor: not-allowed; + pointer-events: none; +} +``` + +**Button Usage:** +```html + + + + + + + + + + + + + +``` + +--- + +### Cards + +```css +.card { + background: #FFFFFF; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + overflow: hidden; + transition: all 0.3s ease; +} + +.card:hover { + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + transform: translateY(-4px); +} + +.card-image { + width: 100%; + height: 240px; + object-fit: cover; +} + +.card-content { + padding: var(--spacing-lg); +} + +.card-title { + font-family: 'Raleway', sans-serif; + font-size: 22px; + font-weight: 600; + color: #585961; + margin-bottom: var(--spacing-sm); +} + +.card-text { + font-family: 'Open Sans', sans-serif; + font-size: 16px; + line-height: 1.6; + color: #585961; + margin-bottom: var(--spacing-md); +} + +.card-footer { + padding: var(--spacing-md) var(--spacing-lg); + border-top: 1px solid #E5E5E5; + background-color: #F5F5F5; +} +``` + +**Card Usage:** +```html +
+ Card image +
+

Card Title

+

Card description goes here.

+ Read More +
+
+ Posted: January 1, 2025 +
+
+``` + +--- + +### Navigation + +```css +/* Main Navigation */ +.navbar { + position: sticky; + top: 0; + z-index: 1000; + background: #FFFFFF; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + padding: var(--spacing-md) 0; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); +} + +.navbar-logo { + height: 48px; +} + +.navbar-menu { + display: flex; + gap: var(--spacing-lg); + list-style: none; + margin: 0; + padding: 0; +} + +.navbar-link { + font-family: 'Raleway', sans-serif; + font-size: 16px; + font-weight: 400; + color: #585961; + text-decoration: none; + padding: 8px 16px; + transition: all 0.3s ease; +} + +.navbar-link:hover, +.navbar-link.active { + color: #2F99A4; + font-weight: 600; +} + +/* Mobile Menu Toggle */ +.navbar-toggle { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; +} + +.navbar-toggle span { + display: block; + width: 24px; + height: 3px; + background: #2F99A4; + transition: all 0.3s ease; +} + +@media (max-width: 768px) { + .navbar-toggle { + display: flex; + } + + .navbar-menu { + position: absolute; + top: 100%; + left: 0; + right: 0; + flex-direction: column; + background: #FFFFFF; + padding: var(--spacing-lg); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .navbar-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } +} +``` + +--- + +### Forms + +```css +.form-group { + margin-bottom: var(--spacing-lg); +} + +.form-label { + display: block; + font-family: 'Open Sans', sans-serif; + font-size: 14px; + font-weight: 600; + color: #585961; + margin-bottom: var(--spacing-xs); +} + +.form-input, +.form-textarea, +.form-select { + width: 100%; + font-family: 'Open Sans', sans-serif; + font-size: 16px; + color: #585961; + padding: 12px 16px; + border: 1px solid #CCCDCC; + border-radius: 4px; + background: #FFFFFF; + transition: all 0.3s ease; +} + +.form-input:focus, +.form-textarea:focus, +.form-select:focus { + outline: none; + border-color: #2F99A4; + box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1); +} + +.form-input::placeholder { + color: #8A8B93; +} + +.form-textarea { + min-height: 120px; + resize: vertical; +} + +.form-error { + color: #DC3545; + font-size: 14px; + margin-top: var(--spacing-xs); +} + +.form-input.error { + border-color: #DC3545; +} + +.form-help { + font-size: 14px; + color: #8A8B93; + margin-top: var(--spacing-xs); +} +``` + +**Form Example:** +```html +
+
+ + +
+ +
+ + + We'll never share your email. +
+ +
+ + +
+ + +
+``` + +--- + +### Links + +```css +/* Body Links */ +a { + color: #2F99A4; + text-decoration: none; + transition: all 0.3s ease; + border-bottom: 1px solid transparent; +} + +a:hover { + color: #257880; + border-bottom-color: #2F99A4; +} + +/* External Links */ +a[target="_blank"]::after { + content: ' ↗'; + font-size: 0.9em; +} + +/* Download Links */ +a[download]::before { + content: '⬇ '; +} + +/* Standalone Links */ +.link-standalone { + font-family: 'Raleway', sans-serif; + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 8px; +} + +.link-standalone::after { + content: '→'; + transition: transform 0.3s ease; +} + +.link-standalone:hover::after { + transform: translateX(4px); +} +``` + +--- + +### Hero Sections + +```css +.hero { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 600px; + padding: var(--spacing-4xl) var(--spacing-lg); + background: linear-gradient(135deg, #2F99A4 0%, #257880 100%); + color: #FFFFFF; + text-align: center; +} + +.hero-content { + max-width: 800px; + z-index: 1; +} + +.hero-title { + font-family: 'Raleway', sans-serif; + font-size: 56px; + font-weight: 700; + margin-bottom: var(--spacing-lg); +} + +.hero-subtitle { + font-family: 'Open Sans', sans-serif; + font-size: 20px; + line-height: 1.6; + margin-bottom: var(--spacing-xl); + opacity: 0.9; +} + +.hero-cta { + display: flex; + gap: var(--spacing-md); + justify-content: center; + flex-wrap: wrap; +} + +@media (max-width: 768px) { + .hero { + min-height: 400px; + padding: var(--spacing-xxl) var(--spacing-lg); + } + + .hero-title { + font-size: 36px; + } + + .hero-subtitle { + font-size: 18px; + } + + .hero-cta { + flex-direction: column; + } +} +``` + +--- + +### Tables + +```css +.table { + width: 100%; + border-collapse: collapse; + margin-bottom: var(--spacing-lg); + background: #FFFFFF; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); +} + +.table thead { + background-color: #2F99A4; + color: #FFFFFF; +} + +.table th { + font-family: 'Raleway', sans-serif; + font-weight: 600; + text-align: left; + padding: 16px; +} + +.table td { + font-family: 'Open Sans', sans-serif; + padding: 12px 16px; + border-bottom: 1px solid #E5E5E5; +} + +.table tbody tr:hover { + background-color: #F5F5F5; +} + +.table tbody tr:last-child td { + border-bottom: none; +} + +/* Responsive Table */ +@media (max-width: 768px) { + .table { + display: block; + overflow-x: auto; + } +} +``` + +--- + +### Footer + +```css +.footer { + background-color: #585961; + color: #FFFFFF; + padding: var(--spacing-4xl) 0 var(--spacing-lg); +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-xl); + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); + margin-bottom: var(--spacing-xl); +} + +.footer-section h4 { + font-family: 'Raleway', sans-serif; + font-size: 18px; + font-weight: 600; + color: #FFFFFF; + margin-bottom: var(--spacing-md); +} + +.footer-section ul { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-section li { + margin-bottom: var(--spacing-sm); +} + +.footer-section a { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section a:hover { + color: #2F99A4; +} + +.footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: var(--spacing-lg); + text-align: center; + color: rgba(255, 255, 255, 0.6); + font-size: 14px; +} +``` + +--- + +## Layout Patterns + +### Two-Column Layout + +```css +.two-column { + display: grid; + grid-template-columns: 2fr 1fr; + gap: var(--spacing-xl); +} + +@media (max-width: 768px) { + .two-column { + grid-template-columns: 1fr; + } +} +``` + +### Three-Column Layout + +```css +.three-column { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); +} + +@media (max-width: 1024px) { + .three-column { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + .three-column { + grid-template-columns: 1fr; + } +} +``` + +### Content + Sidebar + +```css +.content-sidebar { + display: grid; + grid-template-columns: 3fr 1fr; + gap: var(--spacing-xxl); +} + +@media (max-width: 1024px) { + .content-sidebar { + grid-template-columns: 1fr; + } +} +``` + +--- + +## Animations & Transitions + +```css +/* Smooth transitions */ +* { + transition-timing-function: ease-in-out; +} + +/* Fade In */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.fade-in { + animation: fadeIn 0.6s ease-out; +} + +/* Slide In */ +@keyframes slideIn { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} + +/* Pulse (for emphasis) */ +@keyframes pulse { + 0%, 100% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } +} +``` + +--- + +## Web Design Checklist + +Before launching any web project: + +**Layout:** +- [ ] High white space maintained throughout +- [ ] Responsive grid implemented correctly +- [ ] All breakpoints tested (mobile, tablet, desktop) +- [ ] Content max-width appropriate (≤1200px) + +**Components:** +- [ ] Buttons follow brand styles (Raleway font, correct colors) +- [ ] Cards have appropriate shadows and hover states +- [ ] Navigation sticky/fixed and accessible +- [ ] Forms styled consistently with validation + +**Typography:** +- [ ] Headlines use Raleway +- [ ] Body text uses Open Sans +- [ ] Font sizes scale responsively +- [ ] Line-heights appropriate for readability + +**Colors:** +- [ ] Turquoise primary, orange accent only +- [ ] WCAG AA contrast compliance verified +- [ ] Brand colors match exactly (no variations) + +**Performance:** +- [ ] Images optimized and responsive +- [ ] Fonts loaded efficiently (preload critical) +- [ ] CSS minified for production +- [ ] Animations use transform/opacity (GPU-accelerated) + +**Accessibility:** +- [ ] All interactive elements keyboard accessible +- [ ] ARIA labels where needed +- [ ] Focus states visible +- [ ] Screen reader tested + +--- + +*Last updated: 2025-10-18* +*Maintained by: Netresearch DTT GmbH* diff --git a/templates/landing-page.html b/templates/landing-page.html new file mode 100644 index 0000000..da050e6 --- /dev/null +++ b/templates/landing-page.html @@ -0,0 +1,285 @@ + + + + + + Netresearch - Landing Page Template + + + + + + + + + + +
+
+

Your Digital Transformation Partner

+

+ We create innovative digital solutions that drive business growth and enhance user experiences. +

+
+ Get Started + Learn More +
+
+
+ + +
+
+

Our Services

+

+ Comprehensive digital solutions tailored to your needs +

+ +
+
+
+

Web Development

+

+ Modern, responsive websites built with the latest technologies and best practices. +

+ Learn more +
+
+ +
+
+

E-Commerce Solutions

+

+ Powerful online stores that drive sales and provide exceptional shopping experiences. +

+ Learn more +
+
+ +
+
+

Digital Strategy

+

+ Strategic consulting to help your business thrive in the digital landscape. +

+ Learn more +
+
+
+
+
+ + +
+
+
+
+

About Netresearch

+

+ With over 20 years of experience, we've been helping businesses succeed online through innovative digital solutions. +

+

+ Our team of experts combines technical excellence with creative thinking to deliver projects that exceed expectations. We specialize in TYPO3, e-commerce, and custom web applications. +

+

+ Based in Leipzig, Germany, we serve clients across Europe and beyond, providing end-to-end digital services from strategy to implementation and support. +

+ Work with us +
+
+ Netresearch team +
+
+
+
+ + +
+
+

Our Work

+

+ Recent projects we're proud of +

+ +
+
+ Project 1 +
+

E-Commerce Platform

+

+ Complete redesign and development of a multi-vendor marketplace. +

+
+ TYPO3 • Magento • 2024 +
+
+
+ +
+ Project 2 +
+

Corporate Website

+

+ Modern website with multilingual content and advanced integrations. +

+
+ TYPO3 • API • 2024 +
+
+
+ +
+ Project 3 +
+

Custom Web Application

+

+ Bespoke solution for complex business requirements and workflows. +

+
+ Laravel • Vue.js • 2024 +
+
+
+
+
+
+ + +
+
+
+
+

Get in Touch

+

+ Ready to start your next project? Let's talk about how we can help. +

+

+ Netresearch DTT GmbH
+ Nonnenstraße 11d
+ 04229 Leipzig, Germany +

+

+ Phone: +49 341 49288-0
+ Email: info@netresearch.de +

+
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+
+ + + + + + + diff --git a/templates/styles.css b/templates/styles.css new file mode 100644 index 0000000..835b8ee --- /dev/null +++ b/templates/styles.css @@ -0,0 +1,612 @@ +/* + * Netresearch Brand Styles + * Complete CSS template following brand guidelines + */ + +/* ============================================ + CSS CUSTOM PROPERTIES + ============================================ */ +:root { + /* Brand Colors */ + --color-primary: #2F99A4; + --color-primary-rgb: 47, 153, 164; + --color-primary-dark: #257880; + --color-accent: #FF4D00; + --color-accent-rgb: 255, 77, 0; + --color-accent-dark: #CC3D00; + + /* Neutral Colors */ + --color-text-primary: #585961; + --color-text-secondary: #8A8B93; + --color-background: #FFFFFF; + --color-background-alt: #F5F5F5; + --color-border: #CCCDCC; + --color-border-light: #E5E5E5; + + /* Typography */ + --font-headline: 'Raleway', sans-serif; + --font-body: 'Open Sans', sans-serif; + + /* Font Sizes */ + --font-size-xs: 12px; + --font-size-sm: 14px; + --font-size-base: 16px; + --font-size-lg: 18px; + --font-size-xl: 20px; + --font-size-2xl: 24px; + --font-size-3xl: 28px; + --font-size-4xl: 36px; + --font-size-5xl: 48px; + --font-size-6xl: 56px; + + /* Spacing */ + --spacing-xs: 8px; + --spacing-sm: 12px; + --spacing-md: 16px; + --spacing-lg: 24px; + --spacing-xl: 32px; + --spacing-xxl: 48px; + --spacing-3xl: 64px; + --spacing-4xl: 96px; + + /* Shadows */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); + --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); +} + +/* ============================================ + RESET & BASE STYLES + ============================================ */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-body); + font-size: var(--font-size-base); + line-height: 1.6; + color: var(--color-text-primary); + background-color: var(--color-background); +} + +/* ============================================ + TYPOGRAPHY + ============================================ */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headline); + font-weight: 700; + line-height: 1.2; + color: var(--color-text-primary); +} + +h1 { + font-size: var(--font-size-5xl); + margin-bottom: var(--spacing-lg); +} + +h2 { + font-size: var(--font-size-4xl); + margin-bottom: var(--spacing-lg); +} + +h3 { + font-size: var(--font-size-3xl); + font-weight: 600; + margin-bottom: var(--spacing-md); +} + +h4 { + font-size: var(--font-size-2xl); + font-weight: 600; + margin-bottom: var(--spacing-sm); +} + +p { + margin-bottom: var(--spacing-md); +} + +.lead { + font-size: var(--font-size-xl); + font-weight: 400; + line-height: 1.6; +} + +a { + color: var(--color-primary); + text-decoration: none; + transition: all 0.3s ease; +} + +a:hover { + color: var(--color-primary-dark); +} + +/* ============================================ + LAYOUT + ============================================ */ +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); +} + +.section { + padding: var(--spacing-4xl) 0; +} + +.section-alt { + background-color: var(--color-background-alt); +} + +.section-title { + text-align: center; + margin-bottom: var(--spacing-md); +} + +.section-subtitle { + text-align: center; + font-size: var(--font-size-xl); + color: var(--color-text-secondary); + margin-bottom: var(--spacing-xxl); +} + +.two-column { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-xl); + align-items: center; +} + +.three-column { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--spacing-lg); +} + +/* ============================================ + NAVIGATION + ============================================ */ +.navbar { + position: sticky; + top: 0; + z-index: 1000; + background: var(--color-background); + box-shadow: var(--shadow-sm); + padding: var(--spacing-md) 0; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); +} + +.navbar-logo { + height: 48px; +} + +.navbar-menu { + display: flex; + gap: var(--spacing-lg); + list-style: none; +} + +.navbar-link { + font-family: var(--font-headline); + font-size: var(--font-size-base); + font-weight: 400; + color: var(--color-text-primary); + padding: var(--spacing-xs) var(--spacing-md); + transition: all 0.3s ease; +} + +.navbar-link:hover, +.navbar-link.active { + color: var(--color-primary); + font-weight: 600; +} + +.navbar-toggle { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; +} + +.navbar-toggle span { + display: block; + width: 24px; + height: 3px; + background: var(--color-primary); + transition: all 0.3s ease; +} + +/* ============================================ + HERO SECTION + ============================================ */ +.hero { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 600px; + padding: var(--spacing-4xl) var(--spacing-lg); + background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); + color: var(--color-background); + text-align: center; +} + +.hero-content { + max-width: 800px; + z-index: 1; +} + +.hero-title { + color: var(--color-background); + margin-bottom: var(--spacing-lg); +} + +.hero-subtitle { + font-size: var(--font-size-xl); + line-height: 1.6; + margin-bottom: var(--spacing-xl); + opacity: 0.95; +} + +.hero-cta { + display: flex; + gap: var(--spacing-md); + justify-content: center; + flex-wrap: wrap; +} + +/* ============================================ + BUTTONS + ============================================ */ +.btn-primary, +.btn-secondary, +.btn-outline { + display: inline-block; + font-family: var(--font-headline); + font-size: var(--font-size-base); + font-weight: 600; + line-height: 1; + text-align: center; + text-decoration: none; + padding: 12px 32px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary { + background-color: var(--color-primary); + color: var(--color-background); +} + +.btn-primary:hover { + background-color: var(--color-primary-dark); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(47, 153, 164, 0.3); +} + +.btn-secondary { + background-color: var(--color-accent); + color: var(--color-background); +} + +.btn-secondary:hover { + background-color: var(--color-accent-dark); + box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3); +} + +.btn-outline { + background-color: transparent; + color: var(--color-background); + border: 2px solid var(--color-background); +} + +.btn-outline:hover { + background-color: var(--color-background); + color: var(--color-primary); +} + +.btn-large { + padding: 16px 48px; + font-size: var(--font-size-lg); +} + +.btn-small { + padding: 8px 24px; + font-size: var(--font-size-sm); +} + +/* ============================================ + CARDS + ============================================ */ +.card { + background: var(--color-background); + border-radius: 8px; + box-shadow: var(--shadow-sm); + overflow: hidden; + transition: all 0.3s ease; + height: 100%; +} + +.card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-4px); +} + +.card-image { + width: 100%; + height: 240px; + object-fit: cover; +} + +.card-content { + padding: var(--spacing-lg); +} + +.card-title { + font-size: var(--font-size-2xl); + font-weight: 600; + margin-bottom: var(--spacing-sm); +} + +.card-text { + font-size: var(--font-size-base); + line-height: 1.6; + color: var(--color-text-primary); + margin-bottom: var(--spacing-md); +} + +.card-footer { + padding: var(--spacing-md) var(--spacing-lg); + border-top: 1px solid var(--color-border-light); + background-color: var(--color-background-alt); +} + +.card-meta { + font-size: var(--font-size-sm); + color: var(--color-text-secondary); +} + +/* ============================================ + LINKS + ============================================ */ +.link-standalone { + font-family: var(--font-headline); + font-weight: 600; + display: inline-flex; + align-items: center; + gap: 8px; + color: var(--color-primary); +} + +.link-standalone::after { + content: '→'; + transition: transform 0.3s ease; +} + +.link-standalone:hover::after { + transform: translateX(4px); +} + +/* ============================================ + FORMS + ============================================ */ +.form-group { + margin-bottom: var(--spacing-lg); +} + +.form-label { + display: block; + font-size: var(--font-size-sm); + font-weight: 600; + color: var(--color-text-primary); + margin-bottom: var(--spacing-xs); +} + +.form-input, +.form-textarea { + width: 100%; + font-family: var(--font-body); + font-size: var(--font-size-base); + color: var(--color-text-primary); + padding: 12px 16px; + border: 1px solid var(--color-border); + border-radius: 4px; + background: var(--color-background); + transition: all 0.3s ease; +} + +.form-input:focus, +.form-textarea:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(47, 153, 164, 0.1); +} + +.form-input::placeholder, +.form-textarea::placeholder { + color: var(--color-text-secondary); +} + +.form-textarea { + min-height: 120px; + resize: vertical; +} + +/* ============================================ + FOOTER + ============================================ */ +.footer { + background-color: var(--color-text-primary); + color: var(--color-background); + padding: var(--spacing-4xl) 0 var(--spacing-lg); +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: var(--spacing-xl); + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--spacing-lg); + margin-bottom: var(--spacing-xl); +} + +.footer-section h4 { + font-size: var(--font-size-lg); + font-weight: 600; + color: var(--color-background); + margin-bottom: var(--spacing-md); +} + +.footer-section ul { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-section li { + margin-bottom: var(--spacing-sm); +} + +.footer-section a { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section a:hover { + color: var(--color-primary); +} + +.footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.1); + padding-top: var(--spacing-lg); + text-align: center; +} + +.footer-bottom p { + color: rgba(255, 255, 255, 0.6); + font-size: var(--font-size-sm); + margin: 0; +} + +/* ============================================ + RESPONSIVE DESIGN + ============================================ */ + +/* Tablet (768px and below) */ +@media (max-width: 1024px) { + .three-column { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 768px) { + /* Typography */ + h1 { font-size: var(--font-size-4xl); } + h2 { font-size: var(--font-size-3xl); } + h3 { font-size: var(--font-size-2xl); } + + /* Layout */ + .two-column, + .three-column { + grid-template-columns: 1fr; + } + + /* Hero */ + .hero { + min-height: 400px; + padding: var(--spacing-xxl) var(--spacing-lg); + } + + .hero-title { + font-size: var(--font-size-4xl); + } + + .hero-subtitle { + font-size: var(--font-size-lg); + } + + .hero-cta { + flex-direction: column; + } + + /* Navigation */ + .navbar-toggle { + display: flex; + } + + .navbar-menu { + position: absolute; + top: 100%; + left: 0; + right: 0; + flex-direction: column; + background: var(--color-background); + padding: var(--spacing-lg); + box-shadow: var(--shadow-md); + transform: translateY(-100%); + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + } + + .navbar-menu.active { + transform: translateY(0); + opacity: 1; + visibility: visible; + } + + /* Sections */ + .section { + padding: var(--spacing-xxl) 0; + } +} + +/* Mobile (600px and below) */ +@media (max-width: 600px) { + h1 { font-size: var(--font-size-3xl); } + h2 { font-size: var(--font-size-2xl); } + + .hero { + min-height: 300px; + } + + .btn-large { + padding: 12px 32px; + font-size: var(--font-size-base); + } +} + +/* ============================================ + UTILITIES + ============================================ */ +.text-center { + text-align: center; +} + +.mb-0 { margin-bottom: 0; } +.mb-sm { margin-bottom: var(--spacing-sm); } +.mb-md { margin-bottom: var(--spacing-md); } +.mb-lg { margin-bottom: var(--spacing-lg); } +.mb-xl { margin-bottom: var(--spacing-xl); }