AEE INTEC

Overview

AEE INTEC is a research institute dedicated to sustainable technologies, serving the scientific and industrial communities across Europe. The design system embodies 'Institutional Clarity'—a philosophy that prioritizes trust, precision, and accessibility through a restrained color palette anchored by a deep institutional blue (#003b7f) paired with teal accents (#2f7789) and warm orange highlights (#ff6900). The aesthetic evokes scientific rigor and forward-thinking sustainability: clean hierarchies, generous whitespace, and purposeful color application create an environment where complex research data feels approachable and credible. The UI communicates authority without coldness, professionalism without sterility.

Brand voice is direct, evidence-based, and multilingual-ready (German and English). Sentences are declarative and fact-forward: 'Unsere Forschung transformiert nachhaltige Technologien in praktische Lösungen.' The personality balances institutional formality with approachability—never breathless, always substantive. Typography relies on Roboto for headlines (conveying structure) and Open Sans for body text (ensuring legibility at all scales). The system prioritizes information density and scanability, reflecting the institute's commitment to making research accessible to both specialists and the general public.

Colors

The color system is anchored by a deep institutional primary blue (#003b7f, rgb(0, 59, 127)) used exclusively for CTAs, links, and interactive focus states. This color commands attention without aggression and signals trustworthiness—essential for a research institution. The secondary teal (#2f7789, rgb(47, 119, 137)) appears in supporting UI elements, section dividers, and secondary navigation, providing visual rhythm without competing with primary actions. Tertiary orange (#ff6900, rgb(255, 105, 0)) is reserved for highlights, badges, and accent callouts—drawing attention to key research outcomes or time-sensitive announcements.

The surface stack is deliberately neutral: pure white (#ffffff) as the base, with a carefully calibrated gray scale (surface-dim #f2f2f2, surface-container #eee

Typography

The type system reflects a dual-audience strategy: Roboto headlines (600–700 weight) project institutional authority and structure, while Open Sans body text (400 weight) ensures accessibility and warmth. Display (60px, 700 weight, -0.04em tracking) is reserved for hero sections and major page titles; headline-lg (40px, 600 weight, -0.02em) anchors section breaks; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and callout text; body-md (16px, 400 weight, 24px line-height) is the default for article content and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and UI controls; label-sm (12px, 500 weight, 0.02em tracking) is used for metadata, timestamps,

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). Content flows in a single-column layout for research articles and documentation, with optional two-column layouts for sidebar navigation or supplementary information. The spacing scale is semantic: unit (8px) is the base increment; xs (4px) for micro-spacing within components; sm (12px) for internal component padding; md (24px) for section separation and card padding; lg (40px) for major section breaks; xl (64px) for hero-to-content transitions. Container max-width is 1280px to prevent line-length from exceeding 75 characters at body-md (16px), maintaining optimal reading comfort. Whitespace is generous—never cramped—refl

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids visual drama while maintaining clear layer hierarchy. Level 1 (Base): flat surfaces (body, header) use no shadow. Level 2 (Cards, Input Fields): md elevation (0 4px 12px rgba(0,0,0,0.08)) creates subtle separation from the background, appropriate for content containers and form elements. Level 3 (Modals, Floating Elements, Hover States): lg elevation (2px 2px 6px rgba(0,0,0,0.3)) provides pronounced depth for overlays and interactive feedback. All cards and inputs also receive a 1px solid border in surface-variant (#d0d7de) to de

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are applied consistently but conservatively, signaling approachability without sacrificing professionalism. Buttons and inputs use DEFAULT radius (0.5rem / 8px) for a subtle, modern feel that avoids both sharp corners (too austere) and excessive rounding (too playful). Cards and modals use lg radius (1rem / 16px) to create gentle containment; full-width sections use no rounding (0px) to maintain structural clarity. Badges and pills use full radius (9999px) to signal secondary, non-critical information. The rationale: 8px rounding is

Components

Action Elements Buttons are the primary interactive affordance. Button-primary uses primary blue (#003b7f) with white text, 12px vertical / 20px horizontal padding, 44px height, and DEFAULT radius (8px). On hover, the background transitions to primary-container (#0573ff) over 150ms; on active/press, it shifts to primary-fixed-dim (#003b7f with increased contrast). Button-secondary is transparent with a 1px primary-blue border and primary-blue text; on hover, the background fills with surface-container-high (#e8e8e8) while maintaining the border. All buttons use label-md typography (14px, 600 weight) and are disabled by setting opacity to 0.5 and pointer-events: none.

Containers & Surfaces Cards are the primary content container. They use surface background (#ffffff), lg radius (16

Do's and Don'ts

**Do**

• Do use primary blue (#003b7f) exclusively for CTAs and interactive focus states—it is the brand's signature and must remain distinctive.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to reflect the institute's confidence in its research and avoid visual overwhelm.
• Do apply md elevation (0 4px 12px rgba(0,0,0,0.08)) to all cards and input fields to create subtle depth without visual drama.
• Do use Roboto (600–700 weight) for all headlines and Open Sans (400 weight) for body text to maintain the dual-audience readability strategy.
• Do apply 1px borders in surface-variant (#d0d7de) to all interactive elements (buttons, inputs, cards) to define boundaries without harshness.

**Don't**

• Don't use secondary teal (#2f7789) or tertiary orange (#ff6900) as primary CTA colors—they are supporting accents and will dilute brand recognition.
• Don't apply shadows stronger than lg elevation (2px 2px 6px rgba(0,0,0,0.3)) to any element; excessive shadow depth contradicts the institutional aesthetic.
• Don't round corners beyond lg radius (16px) on cards or modals—excessive rounding reads as playful rather than trustworthy.
• Don't use near-black text (#000000) or pure white backgrounds; always use on-surface (#1a1a1a) and surface (#ffffff) to maintain the calibrated contrast and reduce eye strain.
• Don't mix Roboto and Open Sans within a single heading or paragraph—maintain clear typographic hierarchy by reserving Roboto for structure and Open Sans for content.