Ellevio

Overview

Ellevio is a Swedish electricity distribution company serving nearly one million customers with a design system rooted in Scandinavian Functionalism—a philosophy that prioritizes clarity, efficiency, and trustworthiness over ornamentation. The visual language combines a confident, forest-green primary accent (#0b8454) with warm, neutral grays and whites to convey stability and technical competence. The brand personality is direct, solution-oriented, and deeply committed to electrification and sustainability; the UI reflects this through clean hierarchies, generous whitespace, and purposeful color deployment that guides users toward critical actions without distraction.

The tone is professional yet approachable—never corporate-speak, always practical. Ellevio speaks to customers as partners in the energy transition, using concrete language and avoiding jargon. Example sentence in brand voice: 'Anslut din laddare på under 5 minuter—vi hanterar resten.' (Connect your charger in under 5 minutes—we handle the rest.) The design system emphasizes accessibility and legibility at all scales, with typography anchored in FuturaEF (a geometric sans-serif family) and a spacing model that respects cognitive load.

Colors

The color system is anchored by a primary green (#0b8454) that appears on all call-to-action buttons, active states, and brand-critical interactive elements. This green is derived from Ellevio's commitment to sustainable energy and is used sparingly to maintain visual impact—it never appears as a background fill for large surfaces, only as an accent on components like buttons (padding: 12px 32px, border-radius: 8px) and focus indicators. The secondary red (#ce1f36) is reserved for error states, alerts, and critical warnings; it should never be used for positive actions. Tertiary orange (#f5a623) serves as a supporting accent for highlights and secondary calls-to-action in specific contexts.

The surface stack is deliberately minimal: white (#ffffff) is the primary canvas, with subtle off-w

Typography

The typography system uses FuturaEF-DemiBold for all headings and labels, and FuturaEF-Book for body text, creating a clear distinction between structural and content layers. Display text (72px, line-height: 80px, letter-spacing: -0.02em) is reserved for hero sections and major page titles; headline-lg (48px, line-height: 56px) for section headings; headline-md (32px, line-height: 40px) for subsections; and body-lg (20px, line-height: 28px) for primary body copy. The label system (label-md at 16px, label-sm at 14px) is used exclusively for buttons, form labels, and metadata. All text over 16px should use a line-height of at least 1.4× the font size to maintain readability; body text at 20px uses 28px line-height (1.4×). When placing small labels (12–14px) over busy or colored backgrounds,

Layout

The page layout follows a 12-column grid with a max-width of 1200px, centered on the viewport with symmetric margins. The gutter between columns is 24px, and the outer margin (from viewport edge to container edge) is also 24px on desktop, reducing to 16px on tablets and 12px on mobile. Section spacing uses the lg token (40px) for major section breaks, md (24px) for subsection breaks, and sm (12px) for component-level spacing. The container-max-width of 1200px accommodates up to three equal-width cards per row at desktop resolution, with graceful reflow to two columns at 768px and single column below 480px. Whitespace is generous and intentional: a typical section has 40px top margin, 40px bottom margin, and 24px internal padding between the section header and content. This rhythm creates v

Elevation & Depth

Depth in this system is achieved through restrained shadows and subtle surface color shifts rather than dramatic layering. The elevation model consists of three levels: Level 1 (Base) uses no shadow and sits directly on the white surface (#ffffff). Level 2 (Standard Cards & Modals) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a background color of #f2f1f0 or #e5e3e1 to create gentle separation. Level 3 (Elevated Modals & Overlays) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a background of #ffffff to ensure maximum contrast and focus. Interactive elements like buttons never u

Shapes

The shape philosophy is 'Geometric Clarity'—combining sharp, technical precision with subtle softness to reflect Ellevio's dual nature as both an infrastructure company and a customer-focused service provider. Buttons use a 8px border-radius (rounded.DEFAULT: 0.5rem) to provide a modern, approachable feel without excessive rounding; this radius is applied consistently across all button variants (primary, secondary, hero-light). Cards and containers use 12px border-radius (rounded.md: 0.75rem) to create a slightly more relaxed appearance while maintaining geometric integrity. Input fields use t

Components

Action Elements Buttons are the primary interactive component and come in three variants: primary (green background #0b8454, white text, 2px green border), secondary (white background, dark text #3f3d3c, 2px dark border), and hero-light (white background with dark border, used on dark hero backgrounds). All buttons use FuturaEF-DemiBold at 16px with 24px line-height, padding of 12px 32px, and a height of 48px. Hover states transition the background color over 100ms (transition-duration: 0.1s) to the darker variant (#0f5a46 for primary, #3f3d3c for secondary). Focus states add a 2px dotted black outline with 4px offset. Disabled buttons use a neutral gray (#757575) for both background and border, with white text, and the cursor changes to not-allowed. Button groups use 24px gap spacing

Do's and Don'ts

**Do**

• Do use the primary green (#0b8454) exclusively for call-to-action buttons, active states, and brand-critical interactive elements—never as a background fill for large surfaces.
• Do maintain 40px spacing between major sections and 24px between subsections to create visual breathing room and reduce cognitive load.
• Do apply the 2px solid border to all buttons and interactive elements to reinforce clickability and provide clear visual definition.
• Do use FuturaEF-DemiBold for all headings and labels, and FuturaEF-Book for body text, to create a clear distinction between structural and content layers.
• Do use soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals to maintain the clean, Scandinavian aesthetic.
• Do apply focus states with a 2px dotted black outline and 4px offset to meet accessibility standards and provide clear keyboard navigation feedback.

**Don't**

• Don't use the secondary red (#ce1f36) or tertiary orange (#f5a623) for positive actions or primary call-to-action buttons—reserve red for errors and orange for secondary highlights only.
• Don't apply shadows to buttons or interactive elements; instead, use color change and border definition to signal state changes.
• Don't exceed a line-height of 1.5× the font size for body text, as this disrupts the geometric proportions of FuturaEF and reduces readability.
• Don't use full-width backgrounds for interactive components; always contain them within the 12-column grid and use shadows to separate from the surface.
• Don't apply letter-spacing beyond 0.05em, as this disrupts the intended proportions of FuturaEF and creates visual discomfort.
• Don't mix FuturaEF with system fonts or other typefaces in the same component; maintain typographic consistency across all UI layers.