Myfritz Design System Deep Dive

1. Brand Overview

Myfritz’s design language is exactly what you’d expect from a brand that sits in the networking / connectivity space: clean, functional, and just a little bit utilitarian. This is not a “look at me” type of interface — it’s a login portal at https://sso.myfritz.net/, built to get you into your account without friction or visual noise.

The vibe is pragmatic. The palette is dominated by whites and blues, with neutral greys for text and UI states. There’s no flashy gradients, no playful animations. Every element seems designed to reassure the user: “you’re in the right place, your data is safe.” It’s very much form over ornament.

Typography choices reinforce this utilitarian approach. Source Sans Pro leads the way — a humanist sans that’s readable at small sizes and neutral enough to not pull attention from the task at hand. The iconography is served via Font Awesome, another practical choice that means designers and developers can pull from a large, consistent library without inventing bespoke icons.

Spacing follows an 8px scale — the gold standard for responsive, grid-based UI systems. Breakpoints range from tiny (98px — probably internal constraints or image widths) to standard Bootstrap-like widths (576px, 768px, 992px, 1200px), which reinforces that the responsive architecture is built on Bootstrap.

Shadows are minimal. Borders are used sparingly to separate and define rather than decorate. Rounded corners (4px and 8px) give just enough softness to keep inputs and buttons approachable without feeling playful.

If you’re designing for Myfritz, you’re working inside a system that values clarity, trust, and efficiency over visual experimentation. The design is meant to disappear so that the functional goal — logging in, managing settings — can happen without distraction.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(232, 232, 230) — normalized as #e8e8e6. This is unusual. Most brands define primary as a saturated brand color, but here primary is a pale neutral. This makes sense in a login context: the neutral is the “surface” color for buttons and backgrounds, while the saturated blue #006ec0 is actually doing the heavy lifting for interactive states.

Psychologically, #006ec0 is a safe, trustworthy blue — darker than the aggressive “Facebook blue” but not as muted as navy. It’s perfect for links, help buttons, and focus indicators. It says “professional” and “secure” without screaming.

Compared to competitors in networking (think Netgear, Cisco), this palette is restrained. Cisco leans teal, Netgear goes deep purple — Myfritz sticks to blue for action, grey/white for surfaces, and subtle greys for text.

2.2 Complete Palette

2.3 Color Relationships

The contrast between #006ec0 (blue) and #ffffff (white) is strong (WCAG AA+ for text at any size). The pale neutral #e8e8e6 against #969693 is lower contrast — fine for disabled states but not for essential text. The greys used for hover (#3f464c) are dark enough against white surfaces to remain accessible.

There’s no dark mode defined here — this is a light-only interface. If you were to adapt for dark mode, the brand blue could hold, but the neutrals would need inversion.

2.4 Usage Guide

• Good combos:
  • #006ec0 text on #ffffff — crisp, accessible
  • #ffffff text on #006ec0 — primary CTAs
  • #3f464c on #ffffff — hover states
• Avoid:
  • #e8e8e6 text on #ffffff — too low contrast
  • #969693 as body text — only for disabled or placeholder
  • Mixing #74a8df with #006ec0 in the same element — hover accent should be distinct from base blue.

3. Typography

3.1 Font Families

Primary type: Source Sans Pro — no fallbacks listed in data, but in practice it’s a standard sans stack after the main font. This is a Google font, though the source here doesn’t mention Google Fonts loading — possibly bundled locally.

Iconography: FDS-Iconfont — likely an internal or Font Awesome derivative, with "liga" font features enabled for icon ligatures.

3.2 Type Scale

3.3 Hierarchy

The jump from 14px to 16px to 20px to 30px is clean — each step is significant enough to visually signal hierarchy. Bold weights (600, 900) are used sparingly — mostly for headings and buttons — while body/link text sits at 400.

Readability is excellent. Line heights are generous for body sizes (1.43–1.50), tighter for headings (1.20) to keep titles compact.

4. Spacing & Layout

4.1 Spacing Scale

This is a clear 8px base scale, with occasional half-steps (2px, 3px, 6px). Frequencies suggest heavy use of 4px, 6px, 8px, 12px, and 16px.

4.2 Layout

Breakpoints are numerous — likely due to Bootstrap’s core plus some custom constraints:
98px, 270px, 315px, 350px, 360px, 361px, 480px, 481px, 576px, 600px, 601px, 767px, 768px, 899px, 992px, 1000px, 1200px.

These allow fine-grained adjustments for a variety of device widths. It’s a “mobile-first” approach, scaling up through tablet to desktop.

5. Visual Elements

Border Radius

• 4px — used for inputs, buttons, divs. Gives a subtle curve without going soft.
• 8px — rare, appears on forms (perhaps to separate the form container visually).

Shadows

Two shadows exist:

• rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px — focus ring style shadow for inputs.
• rgba(0, 0, 0, 0.45) 0px 1px 1px 0px — subtle depth for buttons.

They’re functional, not decorative.

Borders & Dividers

Borders are precise:

• List items: right border only (0 1px 0 0) in divider grey alpha.
• Inputs: either blue #80bdff or divider grey depending on type.
• Buttons: blue #0064c0 border.

6. Components

6.1 Buttons

Primary button (btn btn-block btn-primary btn-primary-loadable dis):

Default:

• Background: #e8e8e6
• Text: #969693
• Padding: 6px 12px 6px 0px (note: right padding 0 — odd choice)
• Radius: 4px
• Border: 1px solid #0064c0
• Shadow: rgba(0,0,0,0.45) 0px 1px 1px 0px
• Opacity: 0.75

Hover:

• Text: divider grey alpha
• Background: initial (transparent)
• Border: none

Active:

• Background: initial
• Text: divider grey alpha
• No shadow, no border

Focus:

• Background: rgb(26,125,199)
• Text: white
• No border
• Opacity: 0.75

6.2 Links

Four link styles:

1. Black alpha text, hover to divider grey alpha + underline.
2. Brand blue text, hover to divider grey alpha + underline.
3. White bold text, hover to divider grey alpha + underline.
4. Divider grey alpha text, hover to same grey + underline.

6.3 Forms

Email input:
Default — white background, text grey #495057, border #80bdff, radius 4px, shadow ring blue alpha.
Focus — same background/text, border stays blue, shadow tightens to 0.2rem.

Password input:
Default — white background, text grey, border divider grey alpha, no shadow.
Focus — border changes to blue, shadow same as email input.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-neutral: #e8e8e6;
  --color-primary-blue: #006ec0;
  --color-black-alpha-90: rgba(0,0,0,0.9);
  --color-dark-grey: #3f464c;
  --color-light-blue-alpha: rgba(116,168,223,0.937);
  --color-input-border-blue: #80bdff;
  --color-button-border-blue: #0064c0;
  --color-divider-grey-alpha: rgba(63,70,76,0.73);
  --color-disabled-grey: #969693;
  --color-text-grey: #495057;

  /* Typography */
  --font-source-sans-pro: "Source Sans Pro", sans-serif;
  --font-fds-iconfont: "FDS-Iconfont";
  --font-size-h1-lg: 30px;
  --font-size-lg: 20px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --line-height-tight: 1.20;
  --line-height-normal: 1.50;
  --line-height-loose: 1.43;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-32: 32px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shadows */
  --shadow-focus-blue: rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px;
  --shadow-button: rgba(0, 0, 0, 0.45) 0px 1px 1px 0px;
}

8. AI Coding Assistant Prompt

# Myfritz Design System Specification

You are a Myfritz design expert. Build UIs matching their visual language exactly.

## Brand Context
Myfritz values clarity, trust, and efficiency. The design is neutral and functional, with a restrained color palette, humanist sans typography, and minimal decorative elements. All components should feel consistent, precise, and unobtrusive.

## Color Palette
- White: #ffffff — Page backgrounds, input backgrounds
- Primary Neutral: #e8e8e6 — Button backgrounds
- Primary Blue: #006ec0 — Links, help buttons, interactive accents
- Black alpha 90%: rgba(0,0,0,0.9) — Navbar brand text
- Dark Grey: #3f464c — Hover/focus states
- Light Blue alpha: rgba(116,168,223,0.937) — Hover accent
- Input Border Blue: #80bdff — Email input borders
- Button Border Blue: #0064c0 — Primary button border
- Divider Grey alpha: rgba(63,70,76,0.73) — List dividers, password input border
- Disabled Grey: #969693 — Disabled button text
- Text Grey: #495057 — Input text

## Typography
- Font Families:
  - Headings, body: "Source Sans Pro", sans-serif
  - Icons: "FDS-Iconfont"
- Sizes:
  - H1: 30px / 1.88rem — 900 or 600 weight — line height 1.20
  - Link (large): 20px / 1.25rem — 400 weight — line height 1.50
  - Link (medium): 16px / 1rem — 400 or 600 weight — line height 1.50
  - Button: 16px — 600 weight — line height 1.50
  - Link (small): 14px / 0.88rem — 400 weight — line height 1.13
  - Button (small): 14px — 400 weight — line height 1.43

## Spacing & Grid
Base: 8px grid. Values: 2px, 3px, 4px, 6px, 8px, 12px, 16px, 20px, 32px.

## Border Radius
- sm: 4px — inputs, buttons
- md: 8px — forms

## Shadows & Depth
- Focus ring blue: rgba(0, 123, 255, 0.25) 0 0 0 3.2px
- Button shadow: rgba(0,0,0,0.45) 0 1px 1px 0

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background-color: #e8e8e6;
  color: #969693;
  padding: 6px 12px 6px 0px;
  border-radius: 4px;
  border: 1px solid #0064c0;
  box-shadow: rgba(0,0,0,0.45) 0px 1px 1px 0px;
  font-weight: 600;
  font-size: 16px;
  opacity: 0.75;
}

Hover:

.btn-primary:hover {
  color: rgba(63,70,76,0.73);
  background-color: transparent;
  border: none;
}

Active:

.btn-primary:active {
  color: rgba(63,70,76,0.73);
  background-color: transparent;
  box-shadow: none;
  border: none;
}

Focus:

.btn-primary:focus {
  background-color: rgb(26,125,199);
  color: #ffffff;
  border: none;
}

Navigation Links

a {
  text-decoration: none;
  color: #006ec0;
}
a:hover {
  color: rgba(63,70,76,0.73);
  text-decoration: underline;
}

Input Fields

Email:

input[type="email"] {
  background-color: #ffffff;
  color: #495057;
  border: 1px solid #80bdff;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 3.2px;
}
input[type="email"]:focus {
  border-color: #80bdff;
  box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem;
  outline: none;
}

Password:

input[type="password"] {
  border: 1px solid rgba(63,70,76,0.73);
  border-radius: 4px;
}
input[type="password"]:focus {
  border-color: #80bdff;
  box-shadow: rgba(0, 123, 255, 0.25) 0px 0px 0px 0.2rem;
}

Layout & Responsive Rules

• Breakpoints: 98px, 270px, 315px, 350px, 360px, 361px, 480px, 481px, 576px, 600px, 601px, 767px, 768px, 899px, 992px, 1000px, 1200px.
• Mobile-first scaling.

Interaction Rules

• Transitions: 150ms ease for color/background changes.
• Focus indicators: visible via background color change or shadow.

DO List

• Use ONLY colors from the palette.
• Maintain 8px grid — all spacing multiples of 8px or documented exceptions.
• Use Source Sans Pro for all text; FDS-Iconfont for icons.
• Keep borders at 1px solid in specified colors.
• Use 4px radius for most components.

DON'T List

• Don’t add new colors.
• Don’t mix rounded and sharp corners.
• Don’t remove focus indicators.
• Don’t apply large shadows — stick to defined subtle shadows.

Code Examples

Primary button (Tailwind-like utility classes):

.btn-primary {
  @apply bg-[#e8e8e6] text-[#969693] px-3 py-1 rounded-[4px] border border-[#0064c0] shadow-sm;
}

Card:

.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
}

Form input:

.input {
  border: 1px solid #80bdff;
  border-radius: 4px;
  padding: 6px 12px;
}
.input:focus {
  border-color: #80bdff;
  box-shadow: rgba(0,123,255,0.25) 0 0 0 0.2rem;
}

---

## 9. Summary

**TL;DR** — Myfritz’s design system is minimal, functional, and built for clarity. Blue is for action, white and neutral greys are for surfaces, and typography is all Source Sans Pro. Spacing is on an 8px grid, with subtle radius and shadows to keep things approachable without distraction.

**Brand Keywords**: secure-minimalist, functional-neutral, blue-trust, grid-precise, bootstrap-driven