# Medifoxdan.de Design System

> A clinical yet approachable corporate interface defined by high-contrast blue actions, structured Open Sans typography, and expansive white space.

**Source:** https://medifoxdan.de | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Medifoxdan.de utilizes a "monochrome" system type that is heavily anchored by a single primary blue (`#066bce`). The interface is characterized by a high-density use of white surfaces (`#ffffff`) and light gray sectioning (`#f5f5f5`). Typography is exclusively **Open Sans**, leaning on heavy weights (600 and 700) for structural headings and a generous scale for display elements. Interactive elements are strictly defined by sharp-edged rectangular buttons and form fields with a subtle 10px radius, maintaining a professional, software-centric aesthetic.

## Signature DNA
1. **The Action Blue** (`#066bce`): This specific blue is the universal signal for interactivity, used for primary buttons, text links, and borders. It provides a 5.2:1 contrast ratio against the white canvas.
2. **Sharp-Edged Utility**: While form inputs use a 10px radius, the primary CTA buttons and major layout containers use a 0px radius (`{rounded.sharp}`), reinforcing a precise, reliable software identity.
3. **Open Sans Hierarchy**: The system relies on weight variance (400 to 700) within a single font family to create a clear information architecture, particularly in the "Wissensdatenbank" and "Newsletter" sections.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-white` | `#ffffff` | Primary surface, button text | 29 | 1.0 | CSS Variable |
| `--color-grey` | `#3c3c3b` | Secondary text, footer text | 7 | 0.8 | CSS Variable |
| `foundation-black` | `#000000` | Primary text, footer background | 185 | 0.8 | Computed Style |
| `foundation-light-grey` | `#f5f5f5` | Alternating section backgrounds | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-blue` | `#066bce` | Primary CTA bg, links, borders | 22 | 1.0 | CSS Variable |
| `accent-navy` | `#00305d` | Heading text, dark surfaces | 5 | 0.6 | Computed Style |
| `accent-orange` | `#f07300` | Decorative text / Highlights | 4 | 0.6 | Computed Style |
| `accent-red` | `#f54f66` | Decorative text / Highlights | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 400, 500, 600, 700 | All roles (Display, Heading, Body) | N/A (Already Open Source) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 55px | 82.5px | normal | 700 | Hero Stats | `p#count-30-0` |
| `{type.h1}` | 31px | 42px | normal | 600 | Page Titles | `h1.text-center` |
| `{type.h1-alt}` | 31px | 42px | normal | 700 | Card Headlines | `p.cards-headline` |
| `{type.h3}` | 24px | 30.36px | normal | 600 | Section Headers | `h3` |
| `{type.h3-catcher}` | 24px | 36px | normal | 500 | Intro Text | `p.section-text-catcher` |
| `{type.body-lg}` | 18px | 30px | normal | 600 | Button Text | `a.btn.content` |
| `{type.body}` | 16px | 24px | normal | 600 | Sub-headers | `p.like-h4` |
| `{type.body-sm}` | 15px | 22.5px | normal | 400 | UI Labels | `aside.flyout-wrapper` |
| `{type.caption}` | 11px | 22.5px | normal | 400 | Legal/Small print | `div` |

### Principles
1. **Weight as Hierarchy**: Use 600 or 700 weight for any element that requires user attention (headings, buttons, labels).
2. **Generous Leading**: Body text typically uses a line-height of 1.5x the font size (e.g., 15px/22.5px) to maintain readability.
3. **No Tracking**: Letter spacing remains "normal" across all scales, trusting the natural kerning of Open Sans.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 54 |
| `{space.sm}` | 15px | 33 |
| `{space.md}` | 20px | 28 |
| `{space.lg}` | 30px | 23 |
| `{space.xl}` | 50px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{rounded.sharp}` | 0px | Buttons, Cards, Sections | `a.btn.content` |
| `{rounded.md}` | 10px | Form Inputs | `input#firstname` |
| `{rounded.full}` | 50px | Large decorative panels | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | Buttons, Inputs | `Button` component |
| Raised | `rgba(0, 0, 0, 0.07) 0px 0px 10px 0px` | Hoverable cards / Flyouts | `Surface` component |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary site actions
**Pages observed:** All
**Spec:** Background `#066bce` / Text `#ffffff` / Border `#066bce` (2px) / Radius `0px` / Padding `15px 30px` / Typography `{type.body-sm}`
**States observed:** Default | Hover: captured (darker blue shift) | Focus: not captured | Active: captured | Disabled: not captured

#### Text Input
**Role:** Lead generation and search
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px solid #000000` / Radius `10px` / Padding `13px 0px` / Typography `13.5px`
**States observed:** Default | Hover: not captured | Focus: captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Section Surface
**Role:** Content grouping
**Pages observed:** All
**Spec:** Background `#f5f5f5` / Text `#000000` / Border `0px` / Radius `0px` / Padding `34px 0px`
**States observed:** Default only

#### Content Card
**Role:** Feature highlights (Service, Podcast, Blog)
**Pages observed:** Homepage
**Spec:** Background `#ffffff` / Text `#000000` / Shadow `rgba(0, 0, 0, 0.07) 0px 0px 10px 0px` / Radius `0px` / Padding `35px`
**States observed:** Default | Hover: shadow intensity increases

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gap | 60px - 96px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to "MENÜ" hamburger; stacking of 3-up card grids to 1-up. |
| Desktop | 1440px | Horizontal navigation visible; multi-column layouts active. |

## Imagery & decoration
- **Photography**: Real-world imagery of healthcare professionals and office environments, often used in hero sections or as background textures.
- **Grids**: Use of 2x2 or 3x2 grids for service offerings.
- **Avoid**: Rounded corners on primary CTAs; excessive use of gradients.

## Do's
- Use `#066bce` for all primary user actions.
- Ensure all headings use **Open Sans** with a minimum weight of 600.
- Maintain sharp corners (`0px`) for all primary structural components.
- Use `#f5f5f5` for alternating background bands to create rhythm.
- Keep form inputs at a `10px` radius for better touch-target perception.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper theme) for primary buttons. **Right:** Use `#066bce`. **Reason:** Swiper blue is a library default, not the brand primary.
- Do not use serif fonts; the system is strictly sans-serif.
- Do not apply shadows to primary buttons; they must remain flat.
- Avoid using the accent orange (`#f07300`) for primary navigation or buttons.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-blue: #066bce;
  --color-white: #ffffff;
  --color-grey: #3c3c3b;
  --color-light-grey: #f5f5f5;
  --font-primary: 'Open Sans', sans-serif;
  --radius-input: 10px;
  --radius-sharp: 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.07) 0px 0px 10px 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #066bce;
  --color-surface-alt: #f5f5f5;
  --font-sans: 'Open Sans';
  --radius-md: 10px;
  --shadow-card: 0 0 10px 0 rgba(0, 0, 0, 0.07);
}
```

## Agent prompt examples
- "Create a primary CTA button using #066bce background, white Open Sans text at 15px weight 600, and 0px border radius."
- "Design a contact form section with a #f5f5f5 background and white input fields with 10px corner radius."
- "Generate a content card with a white background, no border, and a subtle 10px spread shadow."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Specific mobile breakpoint transitions for the "Wissensdatenbank" grid were not detailed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://medifoxdan.de | 1440px | 2026-06-06 |
| Pricing | https://medifoxdan.de/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://medifoxdan.de | 390px | 2026-06-06 |