Skip to content

DESIGN.md

Latest commit

 

History

History
406 lines (328 loc) · 13.2 KB

DESIGN.md

File metadata and controls

406 lines (328 loc) · 13.2 KB
Raw
version alpha
name EEA Design System
description European Environment Agency design system for Volto-based web applications. User-centered, WCAG-compliant, with a focus on clarity, functionality, and consistent responsive behaviour across devices.
colors
primary secondary tertiary text background background-supplementary highlight link-default link-hover link-visited link-active success warning error info brown-0 brown-1 brown-2 brown-3 brown-4 brown-5 brown-6 purple-0 purple-1 purple-2 purple-3 purple-4 purple-5 purple-6 red-0 red-1 red-2 red-3 red-4 red-5 red-6 yellow-0 yellow-1 yellow-2 yellow-3 yellow-4 yellow-5 yellow-6 green-0 green-1 green-2 green-3 green-4 green-5 green-6 blue-0 blue-1 blue-2 blue-3 blue-4 blue-5 blue-6 blue-grey-0 blue-grey-1 blue-grey-2 blue-grey-3 blue-grey-4 blue-grey-5 blue-grey-6 grey-0 grey-1 grey-2 grey-3 grey-4 grey-5 grey-6 biodiversity-primary biodiversity-secondary forest-primary forest-secondary freshwater-primary freshwater-secondary marine-primary marine-secondary
#004B7F
#007B6C
#3D5265
#3D5265
#FFFFFF
#F9F9F9
#007B6C
#006BB8
#004B7F
#753AAD
#003052
#007B6C
#FF9933
#B83230
#004B7F
#FFF6EC
#FFEDD8
#E7BC91
#BC8A5F
#8B5E34
#603808
#3D2201
#EFEBF2
#DFD6E7
#BEADCE
#9E84B6
#753AAD
#5C3285
#3C096C
#FBEEF8
#F6DDF0
#E7B2C0
#D78890
#C65B59
#B83230
#5C1918
#FEF6CD
#FBEC9B
#FAD936
#FAC50D
#FDAF20
#FF9933
#C35527
#C8FFF8
#A0E5DC
#78CAC0
#50B0A4
#289588
#007B6C
#005248
#A0D7FF
#47B3FF
#008FF5
#0079CF
#006BB8
#004B7F
#003052
#DAE8F4
#ACCAE5
#87A7C3
#6989A5
#4C677F
#3D5265
#2E3E4C
#FFFFFF
#F9F9F9
#E6E7E8
#BCBEC0
#747678
#323232
#000000
#289588
#FAC50D
#007B6C
#005248
#0079CF
#004B7F
#004B7F
#0079CF
typography
h1 h2 h3 h4 h5 body caption small label
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
44px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
32px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
26px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
20px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
18px
700
1.2
-0.015em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
16px
400
1.5
0em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
14px
400
1.5
0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
12px
400
1.5
0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
Roboto
12px
500
1.0
0.1em
spacing
space-025 space-05 space-1 space-2 space-3 space-4 space-5 space-6 space-7 space-8 space-9 space-10 space-11 space-12 space-13 space-14 space-15 space-16 space-17 space-18 space-19 space-20 space-24
1px
2px
4px
8px
12px
16px
20px
24px
28px
32px
36px
40px
44px
48px
52px
56px
60px
64px
68px
72px
76px
80px
96px
rounded
none sm md lg full
0px
2px
4px
8px
9999px
components
button-primary button-primary-hover button-secondary button-secondary-hover input link tag
backgroundColor textColor rounded padding
{colors.secondary}
{colors.grey-0}
{rounded.none}
12px
backgroundColor
{colors.green-6}
backgroundColor textColor rounded padding
{colors.primary}
{colors.grey-0}
{rounded.none}
12px
backgroundColor
{colors.blue-6}
backgroundColor textColor rounded padding
{colors.grey-0}
{colors.text}
{rounded.none}
12px
textColor typography
{colors.link-default}
{typography.body}
backgroundColor textColor rounded padding
{colors.grey-1}
{colors.text}
{rounded.none}
4px

Overview

The EEA Design System is built on a foundation of functional clarity and institutional trust. Every visual choice serves the content first, avoiding decorative excess. The system is user-centered, follows WCAG 2.1 accessibility guidelines, and is designed for responsive deployment across a network of thematic platforms.

Key design characteristics:

  • Minimal drop shadows — visual hierarchy is achieved through color contrast, spacing, and typography rather than elevation.
  • Sharp edges and corners — the default border radius is 0px, reinforcing a clean, engineered, and authoritative aesthetic.
  • Uncluttered, distraction-free design — whitespace is used deliberately. Content breathes.
  • High readability with clear typography — Roboto at 16px base, with a strict hierarchy of weights and sizes.
  • Easily adjusted for responsive design — desktop and mobile type scales are defined, and the 8px grid system adapts to any viewport.

The system emphasizes function over appearance while maintaining a consistent look irrespective of screen resolution or device type. Unnecessary decorative elements are avoided to support faster loading times and clearer user journeys.

Colors

The EEA color system is designed for accessibility, thematic flexibility, and clear communication. All color combinations must meet WCAG AA contrast ratios (4.5:1 for normal text). The palette is organized into semantic roles, full shade families, and thematic platform variants.

Semantic Colors

  • Primary (#004B7F): EEA Blue — the dominant institutional color, used for primary actions, headers, and key structural elements.
  • Secondary (#007B6C): EEA Green — used for highlights, success states, and complementary actions.
  • Tertiary (#3D5265): Deep Blue-Grey — the default body text color, providing high contrast on white backgrounds.
  • Background (#FFFFFF): Pure white is the default page background.
  • Background Supplementary (#F9F9F9): A near-white tone used for alternate sections or subtle differentiation.

State Colors

  • Success (#007B6C): Positive confirmations, valid form states.
  • Warning (#FF9933): Cautionary messages, non-critical alerts.
  • Error (#B83230): Critical errors, invalid form states, destructive actions.
  • Info (#004B7F): Informational messages, neutral alerts.

Link Colors

  • Default (#006BB8): Standard interactive links.
  • Hover (#004B7F): Link state on mouse hover.
  • Visited (#753AAD): Links the user has already followed.
  • Active (#003052): Link state during active press.

Full Palettes

Each color family contains 7 shades (0–6), from lightest to darkest. These are used for gradients, hover states, backgrounds, and data visualizations.

Brown — warm earth tones for natural-science contexts: #FFF6EC, #FFEDD8, #E7BC91, #BC8A5F, #8B5E34, #603808, #3D2201.

Purple — for distinct thematic differentiation: #EFEBF2, #DFD6E7, #BEADCE, #9E84B6, #753AAD, #5C3285, #3C096C.

Red — error, urgency, attention: #FBEEF8, #F6DDF0, #E7B2C0, #D78890, #C65B59, #B83230, #5C1918.

Yellow — warning, highlights, energy: #FEF6CD, #FBEC9B, #FAD936, #FAC50D, #FDAF20, #FF9933, #C35527.

Green — success, nature, positive action: #C8FFF8, #A0E5DC, #78CAC0, #50B0A4, #289588, #007B6C, #005248.

Blue — primary institutional tone, trust, water: #A0D7FF, #47B3FF, #008FF5, #0079CF, #006BB8, #004B7F, #003052.

Blue-Grey — text, borders, neutral UI: #DAE8F4, #ACCAE5, #87A7C3, #6989A5, #4C677F, #3D5265, #2E3E4C.

Grey — neutrals from white to black: #FFFFFF, #F9F9F9, #E6E7E8, #BCBEC0, #747678, #323232, #000000.

Thematic Platforms

The EEA network uses the full palette above, but each thematic platform has a unique pair of brand colors extracted from its identity:

  • Biodiversity: primary #289588, secondary #FAC50D.
  • Forest: primary #007B6C, secondary #005248.
  • Wise Freshwater: primary #0079CF, secondary #004B7F.
  • Wise Marine: primary #004B7F, secondary #0079CF.

Typography

The type system uses Roboto as the primary typeface, with Arial as the web-safe fallback. Roboto is chosen for its geometric clarity and excellent legibility at screen resolutions. Weights from 300 (Light) to 700 (Bold) are available. Bold is reserved for headings; Regular (400) is used for body text.

Scale

The desktop type scale defines the canonical sizes. Mobile sizes are reduced proportionally to maintain hierarchy without overcrowding small screens.

Desktop:

  • H1: 44px, Bold, line-height 1.2, letter-spacing -0.015em.
  • H2: 32px, Bold, line-height 1.2, letter-spacing -0.015em.
  • H3: 26px, Bold, line-height 1.2, letter-spacing -0.015em.
  • H4: 20px, Bold, line-height 1.2, letter-spacing -0.015em.
  • H5: 18px, Bold, line-height 1.2, letter-spacing -0.015em.
  • Body: 16px, Regular, line-height 1.5, letter-spacing 0em.
  • Caption: 14px, Regular, line-height 1.5, letter-spacing 0.01em.
  • Small: 12px, Regular, line-height 1.5, letter-spacing 0.01em.

Mobile:

  • H1: 30px (down from 44px).
  • H2: 24px (down from 32px).
  • H3: 20px (down from 26px).
  • H4: 18px (down from 20px).
  • Body, Caption, Small: remain the same as desktop.

Line Length

For optimal readability, limit line length to no more than 80 characters (including spaces) on desktop, and 40 to 60 characters on mobile.

Layout

The layout system is built on an 8px base grid. All major measurements — spacing, component heights, and layout gaps — align to this grid. Smaller elements such as icons may align to a 4px sub-grid, and typography sits on a 4px baseline grid.

Spacing Scale

Two spacing scales are used:

  • Component spacing (inside elements): 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px.
  • Layout spacing (between elements): 16px, 24px, 32px, 48px, 64px, 96px.

The full token scale runs from 1px to 96px in 4px increments (with 1px and 2px micro-steps for fine adjustments).

Container Widths

  • Narrow: 900px
  • Container: 1120px
  • Wide: 1320px (1220px on laptop breakpoints)

Elevation & Depth

The EEA Design System avoids heavy shadows. Elevation is expressed primarily through color contrast, spacing, and border definition rather than drop shadows.

When elevation is required (e.g., for modals or dropdowns), use subtle, low-opacity shadows:

  • Subtle shadow: 0px 1px 2px 0 rgba(0,0,0,0.05) — for slight separation.
  • Floating shadow: 0px 2px 4px 0px rgba(34,36,38,0.12), 0px 2px 10px 0px rgba(34,36,38,0.15) — for elevated overlays.

The default global shadow is none.

Shapes

The shape language is defined by architectural sharpness. The default corner radius for all interactive elements, containers, and inputs is 0px. This reinforces the institutional, precise, and uncluttered character of the design.

Circular elements (avatars, icon containers, badges) are the exception and use a 50% border radius.

Components

Buttons

  • Primary button: background EEA Green (#007B6C), white text, 0px radius, 12px padding. Hover darkens to #005248.
  • Secondary button: background EEA Blue (#004B7F), white text, 0px radius, 12px padding. Hover darkens to #003052.

Inputs

  • Background is white, text is deep blue-grey (#3D5265).
  • No border radius (0px).
  • Vertical padding 12px, horizontal padding 18px.
  • Focus state uses a 0.2rem outline in #008FF5 (blue-2) for accessibility.
  • Placeholder color: #B8C6C8.

Links

  • Default color: #006BB8.
  • No underline by default.
  • Hover, visited, and active states follow the link color palette.

Tags / Chips

  • Background: #F9F9F9 (grey-1).
  • Text: #3D5265.
  • 0px radius, 4px padding.
  • Single-color, no gradients or shadows.

Do's and Don'ts

  • Do ensure all text meets WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text).
  • Do use the 8px grid for all spacing and sizing decisions.
  • Do use Roboto for all UI text; Arial is the acceptable fallback.
  • Do keep line length under 80 characters on desktop and 40–60 on mobile.
  • Do use images only when they add value to the content; always provide alt text.
  • Don't use drop shadows as the primary method of conveying hierarchy.
  • Don't apply border radius to cards, buttons, or inputs unless explicitly required by a component variant.
  • Don't convey information using color alone; always pair with text, icons, or patterns.
  • Don't embed text inside images (breaks translation and accessibility tools).
  • Don't use more than two font weights on a single screen.
  • Don't apply effects, gradients, borders, or filters to photographs.