Remixes of www.efuels-forum.de
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
The eFuels Forum design system embodies a modern, forward-thinking aesthetic grounded in sustainability and scientific authority. The visual language combines vibrant, energetic teal and green tones with sophisticated blue accents, creating a sense of innovation and environmental responsibility. The system emphasizes clarity and accessibility through generous whitespace, clean typography, and purposeful use of color to guide attention. The overall mood is professional yet approachable, communicating expertise in renewable fuels and clean mobility while remaining welcoming to a broad audience of stakeholders, researchers, and industry professionals.
Key Characteristics:
#5A80B4): Core brand color for primary CTAs, navigation highlights, and key interactive elements. Most frequently deployed across the system for consistent brand recognition.#3CAA88): Secondary brand anchor used extensively for accents, link text, and interactive hover states. Represents the sustainability and innovation mission.#E29027): Supporting accent for secondary CTAs and highlight callouts; creates visual contrast against cool palette.#FF6900): Bold accent for emphasis and special announcements; use sparingly for maximum impact.#7BDCB5): Lighter accent variant for hover states and secondary backgrounds; maintains color family cohesion.#00D084): Energetic accent for positive messaging and highlights; reinforces sustainability narrative.#F78DA7): Supporting accent color for secondary callouts; provides gentle contrast in card-based layouts.#ABB8C3): Tertiary accent for subtle dividers and secondary UI elements.#5A80B4): Blue button background for primary actions; pairs with white text at 12px weight 700.#E29027): Orange button background for secondary actions; maintains same sizing and typography as primary.#D14343): Red button background for destructive actions or error states.#F5BE2A): Yellow/gold button background for warning or alert states.#3CAA88): Teal underline and hover color for text links throughout body content.#494B4E): Primary text color for all body content, labels, and interface text; highest frequency token in the system.#272926): Deepest neutral used for emphasis and high-contrast headings.#000000): Reserved for critical emphasis and maximum contrast scenarios.#777777): Secondary text color for de-emphasized content and metadata.#949494): Tertiary text for disabled states and very low emphasis.#ADADAD): Used for subtle dividers and borders.#898D92): Neutral overlay and background tinting color.#FFFFFF): Primary background color and text on dark overlays.#FFFFFF): Default background for all content containers and cards.#E0E2E4): Subtle 1px borders on input fields and subtle dividers; derived from neutral scale.#494B4E at 0.17 opacity): Semi-transparent dark overlay for modals and overlays.#39B54A): Primary success color for positive confirmations and completed states.#58A946): Secondary success tone for layered success messaging.#D14343): Destructive and error state indicator; used in buttons and validation messages.#F5BE2A): Caution and warning indicator for user alerts and notices.Primary: Poppins (font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif)
Secondary: Nunito Sans (font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Poppins | 85px | 500 | 85px | 0px | Hero/cover headlines; maximum visual impact |
| Display Large | Poppins | 78px | 700 | 78px | 0px | Large hero headings with emphasis |
| Display | Poppins | 66px | 500 | 66px | 0px | Full-width hero sections |
| H1 | Poppins | 60px | 500 | 90px | 0px | Page-level headings; primary messaging |
| H1 Alt | Poppins | 50px | 800 | 50px | 0px | Emphasized primary headings |
| H2 | Poppins | 50px | 600 | 50px | 0px | Section headings and major content divisions |
| H2 Alt | Poppins | 39px | 800 | 39px | 0px | Secondary headings with high emphasis |
| H2 Tertiary | Poppins | 37px | 500 | 37px | 0px | Section headings in alternative style |
| H3 | Poppins | 24px | 500 | 28.8px | 0px | Subsection and card headings |
| H3 Variant | Poppins | 20px | 700 | 28px | 0px | Emphasized subsection text |
| H3 Small | Poppins | 18px | 800 | 23.4px | 0px | Small headings and callouts |
| H4 | Poppins | 24px | 500 | 28.8px | 0px | Component headings |
| H5 | Poppins | 14px | 700 | 14px | 0px | Small section labels and badges |
| Body Large | Nunito Sans | 18px | 400 | 23.4px | 0px | Primary body text; high readability |
| Body | Nunito Sans | 15px | 400 | 18px | 0px | Standard body and article text |
| Body Small | Nunito Sans | 14px | 400 | 21px | 0px | Secondary body text and captions |
| Button | Poppins | 12px | 700 | 18px | 0px | CTA and button text; uppercase recommended |
| Input | Nunito Sans | 16px | 400 | 24px | 0px | Form field text and placeholder text |
| Label | Nunito Sans | 14px | 700 | 21px | 0px | Form labels and field identifiers |
| Link | Nunito Sans | 18px | 400 | 32px | 0px | Inline and standalone links |
#5A80B4#FFFFFF12px, weight 700, line-height 18px10px 10px32px3px0px none#4A6B9F (darken by 15%), cursor pointer#3A5B8F, text remains white#ADADAD, text #777777, cursor not-allowed, opacity 0.5#E29027#FFFFFF12px, weight 700, line-height 18px10px 10px32px3px0px none#D17E1F (darken by 10%), cursor pointer#C27319, text remains white#F5BE2A#27292612px, weight 700, line-height 18px10px 10px32px3px0px none#E8B220, cursor pointer, text remains dark#DAAA1A, text remains dark#D14343#FFFFFF12px, weight 700, line-height 18px10px 10px32px3px0px none#C53535, cursor pointer#B52D2D, text remains white#5A80B412px, weight 700, line-height 18px10px 10px32px3px2px solid #5A80B4#F0F4F8, border #4A6B9F, text #4A6B9F#E0E8F0, border #3A5B8F, text #3A5B8F#FFFFFF#494B4E0px (no border by default)0px24px32px (for stacked content)4px solid #3CAA88 (teal accent)20px (adjusted for border)#3CAA88#FFFFFF0px52px 24px#FFFFFF (lightbulb or arrow icon)18px, weight 800, line-height 23.4px14px, weight 400, line-height 21px240px#3CAA88 (top) to #5A80B4 (bottom 50%)#FFFFFF80px 52px400px60px, weight 500, line-height 90px18px, weight 400, line-height 23.4px#FFFFFF1px solid #E0E2E40px12px50px16px, weight 400, line-height 24px#000000#898D922px solid #5A80B4, box-shadow inset 0 0 0 2px rgba(90, 128, 180, 0.1)#F5F5F5, border 1px solid #ADADAD, text #ADADAD#FFFFFF1px solid #E0E2E40px7px 20px59px16px, weight 400, line-height 30px#898D922px solid #5A80B414px, weight 700, line-height 21px#494B4E8px12px24pxrgba(0, 0, 0, 0) (transparent)46px0px18px, weight 400, line-height 32px#494B4E#494B4E18px12px 16px0.2s ease#5A80B4#FFFFFF12px 16px400rgba(90, 128, 180, 0.1)#5A80B40.2s ease#3CAA8850%28px28px#FFFFFF14px14px#2B9373, cursor pointer#238060Base Unit: 8px
Spacing Scale:
4px — 0.5 base units (minimum padding between tight elements)8px — 1 base unit (gap between inline elements, minimal padding)12px — 1.5 base units (padding within small components, tight list gaps)16px — 2 base units (standard padding and margins, button horizontal padding)20px — 2.5 base units (section internal spacing)24px — 3 base units (card padding, major component spacing)28px — 3.5 base units (section dividers)32px — 4 base units (gap between cards, feature rows)52px — 6.5 base units (large feature section padding)80px — 10 base units (major section margins, hero top/bottom)124px — 15.5 base units (maximum section separation)Usage Context:
4px–8px for micro-spacing within components12px–16px for standard component padding and gaps20px–32px for card and container spacing52px–124px for section-level spacing and hero sections1440px (derived from observed container measurements)1340px (observed standard width for main content)auto for centering on larger screens32px)32px)370px on desktop; scales to 100% on mobile20px on mobile, 52px on tablet/desktop; vertical 80px standardThe system embraces generous whitespace to support visual clarity and content emphasis. Large sections breathe with vertical padding of 80px between major content blocks. Cards and components maintain consistent internal padding (24px–52px) to prevent visual crowding. Navigation and hero sections leverage whitespace to direct focus toward key messaging. On mobile, whitespace is compressed proportionally to maintain hierarchy within constrained viewports.
0px — Default; most components (buttons, inputs, cards, containers)3px — Subtle rounding for button corners; minimal visual softness50% — Perfect circles for icon buttons and avatar badges1px — Default borders on input fields and subtle dividers2px — Button focus outlines and accent borders (left borders on cards)3px — Used sparingly for emphasis and section dividers| Level | Treatment | Use |
|---|---|---|
| Base | No shadow | All default components: buttons, inputs, cards, navigation |
| Hover | Subtle shadow 0px 4px 12px rgba(73, 75, 78, 0.15) | Interactive elements on hover (cards, buttons in certain contexts) |
| Overlay | Transparent dark rgba(73, 75, 78, 0.17) | Modals and overlay backgrounds; darkens content beneath |
| Sticky | Shadow 0px 2px 8px rgba(73, 75, 78, 0.12) | Fixed navigation bars and sticky headers |
Shadow Philosophy:
The eFuels Forum system prioritizes a flat, modern aesthetic with minimal use of shadows. Shadows are applied conservatively to enhance interactivity and focus, not to create dimensional hierarchies. Most components maintain a 0px box-shadow (flat design). Hover states introduce subtle shadows to signal interactivity and provide tactile feedback. Modals and overlays use transparent dark tints rather than shadows to indicate depth and focus on modal content.
1.0 (100%) — Default text, interactive elements0.90 (90%) — Slightly de-emphasized content0.86 (86%) — Secondary metadata and reduced emphasis0.50 (50%) — Disabled states and placeholders0.25 (25%) — Very subtle backgrounds or dividers0.17 (17%) — Semi-transparent dark overlays for modalsz-index: 1 — Default components, page contentz-index: 2 — Dropdowns, tooltips, popoversz-index: 3 — Modals, full-screen overlaysz-index: 10 — Fixed navigation, sticky headers (ensure always visible)#5A80B4) and teal (#3CAA88) consistently for all CTAs, links, and brand-critical UI elements to maintain strong brand recognition.80px vertical spacing between major sections and 24px–32px between cards and components.1px borders in #E0E2E4 for subtle input and divider treatments; avoid heavy borders that conflict with flat aesthetic.#39B54A) for success, red (#D14343) for errors, yellow (#F5BE2A) for warnings.12px gap; use full-width stacking on mobile (100% width, margin-bottom 12px).#5A80B4) for primary actions and teal (#3CAA88) for secondary/accent use.box-shadow: none; reserve subtle shadows for hover states and modals only.12px for body content or 14px for labels; prioritize readability over space savings.0px, 3px, 50%); deviations create visual inconsistency.#FFFFFF) on light backgrounds — always ensure minimum 4.5:1 contrast ratio.24px as standard card padding; exceed only in large hero sections (52px–80px).0.17, 0.25, 0.50, 0.86, 0.90, 1.0) for consistency.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single-column layout; font sizes reduce by 20–30%; padding compresses to 16px; hero sections stack vertically; full-width cards; navigation collapses to mobile menu |
| Tablet | 600px–1023px | Two-column layout; moderate font reductions (10–15%); padding 20px–24px; cards maintain wider spacing; navigation may wrap or collapse |
| Desktop | 1024px+ | Full three-column layout; typography at defined sizes; max-width container 1440px; full navigation bar; comfortable spacing at 32px between elements |
Specific Responsive Adjustments:
66px (desktop) → 48px (tablet) → 32px (mobile)80px vertical (desktop) → 52px (tablet) → 24px (mobile)370px (desktop, multi-column) → 100% (mobile/tablet, single column)100% width on mobile with 12px bottom margin between stacked buttons32px (desktop) → 24px (tablet) → 16px (mobile)44px × 44px for all interactive elements (buttons, links, icon buttons)28px × 28px minimum (social links, close buttons)10px horizontally, 8px vertically to ensure adequate tap area8px gap between adjacent links or buttons to prevent accidental taps44px (previously stated as 50px or 59px; maintain at least 44px for touch compliance)24px and reduce image height by 40–50%12px#5A80B4)#E29027)#3CAA88)#494B4E) or Darkest (#272926)#494B4E)#FFFFFF)#E0E2E4)#39B54A)#D14343)#F5BE2A)#3CAA88)#3CAA88 → #5A80B4)Typography Foundation: Always use Poppins for headings and buttons; use Nunito Sans for body text and forms. Match exact pixel sizes and weights from the hierarchy table — no approximations.
Color Consistency: Primary blue (#5A80B4) is the dominant brand color; use it for primary buttons, active navigation states, and focus outlines. Teal (#3CAA88) is the secondary accent for links, hover states, and secondary CTAs.
Spacing Discipline: Adhere strictly to the spacing scale (4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 52px, 80px, 124px). Section padding is typically 80px top/bottom and 52px left/right on desktop; scale down proportionally on mobile.
Component Padding: Standard card padding is 24px; feature/hero sections use 52px. Input fields are 12px padding with 50px minimum height. Button padding is 10px with 32px height minimum.
Border Radius Simplicity: Use 0px (sharp corners) for most components; 3px for button corners only; 50% for circular elements (avatar badges, icon buttons). Never mix radii within the same component set.
Responsive Breakpoints: Implement CSS media queries at 600px (mobile-to-tablet) and 1024px (tablet-to-desktop). Reduce typography sizes by 20–30% on mobile; compress spacing by 30–50%. Always test touch targets remain ≥ 44px × 44px.
Interactive States: Every button and link must have visible hover, active, and focus states. Use subtle color darkening (10–15%) for hover; apply focus outlines (2px border in primary blue) for keyboard navigation. Disabled states use gray (#ADADAD) with opacity 0.5.
Contrast & Accessibility: Ensure all text meets WCAG AA standard (4.5:1 for body, 3:1 for large text). Test dark text (#494B4E) on light backgrounds; white text on colored backgrounds (blue, teal, orange, red); ensure readability in all cases.
Flat Design Aesthetic: Avoid excessive shadows; use box-shadow: none as default. Reserve subtle shadows (0px 4px 12px rgba(73, 75, 78, 0.15)) for hover states and modals only. Leverage color, typography, and spacing for visual hierarchy instead of depth.
Border & Divider Treatment: Input borders are 1px solid #E0E2E4 (light gray); accent borders (left edges on cards) are 2px solid #3CAA88 (teal). Use 1px dividers for subtle section breaks; reserve thicker borders for emphasis only.
Form Consistency: All form inputs use Nunito Sans 16px with 24px line-height, 12px padding, and 50px+ height. Labels are 14px weight 700 positioned above inputs with 8px margin-gap. Focus states trigger 2px solid #5A80B4 border.
Navigation & Header: Main navigation text is Nunito Sans 18px weight 400 on transparent background. Active nav link gets #5A80B4 background with white text. Mobile navigation collapses to hamburger menu at < 600px. Social icon buttons are 28px circles, #3CAA88 background, white icons.