EHiP – Europäische Hochschule für Innovation und Perspektive

Overview

EHiP is a state-recognized distance-learning university serving working professionals, parents, and non-traditional students across the German-speaking world. The design system embodies 'Accessible Institutional Warmth'—a philosophy that marries the credibility and structure of traditional higher education with the human-centered, approachable aesthetics of modern edtech. The visual language prioritizes clarity and trust: a deep forest green (#007550) anchors institutional authority, while a vibrant mint accent (#52c38a) signals opportunity and forward momentum. The UI avoids cold minimalism; instead, it uses generous white space (surface: #ffffff, surface-dim: #f5f8f9), soft shadows (0 8px 24px rgba(29, 42, 47, 0.06)), and rounded corners (12–14px on cards, 999px on buttons) to create an inviting, human-scale experience.

The brand voice is direct, empowering, and solution-oriented. EHiP speaks to students who refuse to choose between ambition and life: 'Dein Leben wartet nicht. Dein Studium muss es auch nicht.' (Your life doesn't wait. Your studies shouldn't either.) Sentences are short, active, and benefit-driven. Vocabulary avoids jargon; instead, it uses concrete, relatable language ('Beruf, Familie, Verantwortung'—career, family, responsibility). The tone is never patronizing or breathless; it is calm, competent, and genuinely supportive. Example: 'An der staatlich anerkannten EHiP kommst du akademisch weiter — digital, persönlich begleitet und ohne dein Leben einem Hochschulkalender unterzuordnen.' (At state-recognized EHiP, you advance academically—digitally, person

Colors

The color system is built on three core pillars: institutional green, supportive teal, and accent magenta. Primary (#52c38a, a bright, optimistic mint-green) is the signature action color, deployed on all CTAs, hover states, and interactive focus rings. It conveys growth, accessibility, and forward progress. The primary container (#eaf4ef) provides a soft, low-contrast background for secondary information and badges. On-primary text (#06281a, a near-black forest tone) ensures WCAG AA contrast (18.5:1) on primary buttons. Secondary (#148296, a professional teal) supports status indicators, secondary CTAs, and informational accents; it pairs with on-secondary (#ffffff) for high-contrast badges and alerts. Tertiary (#e8006d, a bold magenta) is reserved for high-priority CTAs and emotional mom

Typography

The type system pairs Barlow Semi Condensed (a geometric, semi-condensed sans-serif optimized for headlines and UI labels) with Source Sans Pro (a warm, humanist sans-serif for body text and long-form content). This pairing creates visual distinction without jarring contrast: Barlow's 200–800 weight range and tight letterSpacing (-0.02em on display, -0.01em on headlines) conveys confidence and forward momentum, while Source Sans Pro's generous lineHeight (28px on body-lg, 24px on body-md) ensures readability on screens and in dense study materials. Display (56px, 800 weight, -0.02em) is reserved for hero headlines and major section breaks; headline-lg (40px, 700 weight) anchors page sections; headline-md (28px, 700 weight) introduces subsections; title-lg (22px, 600 weight) labels cards an

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, centered with auto margins. The gutter (24px on desktop, 16px on tablet, 12px on mobile) is applied consistently to all column padding. Container max-widths vary by content type: hero sections and full-width callouts use 100% width with internal padding; card grids use 1280px; narrow content (study program descriptions, testimonials) is constrained to 800–900px for optimal reading. White-space philosophy prioritizes breathing room: section separation uses lg spacing (40px) between major blocks, md spacing (24px) between cards and subsections, and sm spacing (12px) between inline elements. The spacing scale is semantic: xs (4px) for micro-interactions and icon padding, sm (12px) for form field padding and list item ga

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reflects the institutional, trustworthy nature of the brand. Level 1 (Base/Surface): no shadow; surfaces sit flush on the background. Level 2 (Raised Cards & Inputs): box-shadow: 0 8px 24px rgba(29, 42, 47, 0.06)—a soft, diffuse shadow that lifts cards 4–8px above the background without creating visual noise. This shadow is applied to all card-hover states and input-field-focus states. Level 3 (Modals & Overlays): box-shadow: 0 10px 28px rgba(6, 40, 26, 0.32)—a deeper, more pronounced shadow that creates clear separation for modals, dro

Shapes

The shape philosophy is 'Soft-Technical Accessibility'—rounded corners are used strategically to soften the institutional rigidity of a university brand while maintaining clear, scannable UI hierarchy. Buttons use sm radius (4px) for a subtle, professional appearance that reads as 'clickable' without being playful. Cards and containers use lg radius (12px) to create a welcoming, approachable feel; this radius is large enough to signal 'safe space' but not so large as to appear casual or consumer-oriented. Input fields and search boxes use full radius (999px) to signal 'text entry' and create a

Components

Action Elements Buttons are the primary interaction mechanism and are designed for clarity and accessibility. button-primary uses primary (#52c38a) background with on-primary (#06281a) text, Barlow Semi Condensed 17px 600 weight, 12px vertical / 16px horizontal padding, 4px border-radius, and 44px height (meeting 44px minimum touch target). On hover, the background shifts to #3fa86d (a 15% darker green) and applies elevation.md shadow (0 8px 24px rgba(29, 42, 47, 0.06)) to signal interactivity. On active/pressed, the background darkens further to #2d8a52. Transitions are always 0.15s ease. button-secondary uses a transparent background with a 2px solid primary border, primary text, and the same padding and height; on hover, it fills with primary-container (#eaf4ef) while maintaining th

Do's and Don'ts

**Do**

• Do use primary (#52c38a) exclusively for CTAs, focus rings, and interactive states—never for body text or backgrounds.
• Do apply md spacing (24px) between all major sections and lg spacing (40px) between full-width blocks to maintain visual rhythm.
• Do use Barlow Semi Condensed for all headlines, buttons, and labels; reserve Source Sans Pro for body text and long-form content.
• Do enforce 44px minimum height on all touch targets (buttons, inputs, list items) to meet accessibility standards.
• Do apply elevation.md shadow (0 8px 24px rgba(29, 42, 47, 0.06)) on card-hover and input-focus states to signal interactivity.
• Do use full radius (999px) on buttons, inputs, and badges to create visual distinction and signal interactivity.
• Do include a 3px spread focus ring (rgba(82, 195, 138, 0.1)) on all interactive elements for keyboard navigation.
• Do use on-surface (#1d2a2f) for primary text and on-surface-variant (#5a6b72) for secondary text; never use pure black or pure white.

**Don't**

• Don't use secondary (#148296) or tertiary (#e8006d) as primary button colors—reserve them for status indicators and high-priority CTAs only.
• Don't apply rounded corners larger than 14px on standard UI elements; this dilutes the system's institutional credibility.
• Don't use box-shadow values outside the three-tier system (sm, md, lg); custom shadows introduce visual inconsistency.
• Don't apply text-shadow to body text or headlines; use it only on small labels (12–14px) over busy backgrounds.
• Don't mix Barlow Semi Condensed and Source Sans Pro within a single headline or button label—choose one per component.
• Don't use opacity-based text colors (rgba) for interactive elements like links or buttons; use solid hex colors from the palette.
• Don't apply transitions longer than 0.4s on interactive elements; this creates a sluggish, unresponsive feel.
• Don't use the focus ring color (primary at 10% opacity) for any other purpose; reserve it exclusively for keyboard navigation.