Initial commit
This commit is contained in:
Zhongwei Li
347
skills/netresearch-branding/references/colors.md
Normal file
347
skills/netresearch-branding/references/colors.md
Normal file
@@ -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*
|
||||
609
skills/netresearch-branding/references/typography.md
Normal file
609
skills/netresearch-branding/references/typography.md
Normal file
@@ -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
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
**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
|
||||
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
```
|
||||
|
||||
**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
|
||||
<!-- Critical CSS with system font fallback -->
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Preload critical fonts -->
|
||||
<link rel="preload"
|
||||
href="/fonts/raleway-bold.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin>
|
||||
<link rel="preload"
|
||||
href="/fonts/opensans-regular.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin>
|
||||
```
|
||||
|
||||
### 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*
|
||||
860
skills/netresearch-branding/references/web-design.md
Normal file
860
skills/netresearch-branding/references/web-design.md
Normal file
@@ -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
|
||||
<!-- Primary action -->
|
||||
<button class="btn-primary">Get Started</button>
|
||||
|
||||
<!-- Secondary action -->
|
||||
<button class="btn-secondary">Learn More</button>
|
||||
|
||||
<!-- Tertiary action -->
|
||||
<button class="btn-outline">Contact Us</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
|
||||
|
||||
```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
|
||||
<div class="card">
|
||||
<img src="image.jpg" alt="Card image" class="card-image">
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">Card Title</h3>
|
||||
<p class="card-text">Card description goes here.</p>
|
||||
<a href="#" class="btn-primary">Read More</a>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="card-meta">Posted: January 1, 2025</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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
|
||||
<form class="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="email" class="form-label">Email*</label>
|
||||
<input type="email" id="email" class="form-input" placeholder="your@email.com" required>
|
||||
<small class="form-help">We'll never share your email.</small>
|
||||
</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">Send Message</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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*
|
||||
Reference in New Issue
Block a user