Skip to content

Commit

Permalink
added guidelines' text and finished all components
Browse files Browse the repository at this point in the history
  • Loading branch information
@g-stamatis
g-stamatis committed Jan 20, 2022
1 parent 934dfd8 commit 02d75fc
Show file tree
Hide file tree
Showing 21 changed files with 136 additions and 196 deletions.
13 changes: 2 additions & 11 deletions website/docs/3-Guidelines/0-intro.md
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,6 @@
---
title: Intro
order: 3
---

The ECL v3 is the Commission's design system, created with a set of guiding principles that followed throughout the process.

By following a user-centred design approach, the ECL is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously.

These solutions are then standardised to offer:

- **vocabulary**: a centralised UI promotes a shared understanding of components & terminology and thus fostering a collaborative flow across the organisation, regardless of discipline. This allows us to focus more on delivering, and less on back-and-forth communications
- **consistency**: increase page performance by decreasing design inconsistencies. By offering our users layouts, components, symbols (icons) and general visual properties they are already familiar with, a consistent design system will decrease confusion and learning curves, while offering predictable patterns of user experience with recognisable interactions
- **re-usability and flexibility**: already existing UI sub-components pieces can be reused to roll out new features or rearranged into new components. A flexible and adaptable system to the future needs of the organisation that simplifies the processing of requesting components features, fixing bugs and improving documentation
- **accessibility**: given our broad audience, our content needs to be accessible to everyone. For this reason ECL follows inclusive design principles, regardless of ability, environment or situation
The DS v1 is the EEA's design system, created with a set of guiding principles that followed throughout the process.
By following a user-centered design approach and best UX practices, the DS v1 is the result of in-depth research into the users' needs and goals, offering solutions that are assessed, tested and revised continuously. All components included in the DS v1 follow the Web Content Accessibility Guidelines (WCAG)
89 changes: 6 additions & 83 deletions website/docs/3-Guidelines/1-typography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,99 +3,22 @@ title: Typography
order: 1
---

Note: all values expressed in pixels are in fact dynamically converted from rem values. The conversion depends on the settings of your browser.
## Primary Font: Roboto

## Typeface

Arial is the standard typeface for the websites under the European Commission domain. The san serif typeface family is versatile and universal.

```css
font-family: Arial, sans-serif;
```
## Web Safe Font: Arial
We use Arial as an alternative font. It is similar in character and style to Roboto typeface and is a commonly available system font.
We set 16px (1rem) as the base font size for body text to ensure readability. It is the default font size for most browsers.

## Modular type scale

A modular type scale is a set of type sizes that are proportionally multiplied by the ratio working its way up or down.

The purpose of using the modular type scale is to create a design that is visually pleasing, consistent, and balanced.

We set 16px (1rem) as the base font size for body text to ensure readability. It is the default font size for most browsers.

## Weight

Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasises the importance in comparison with the regular font style in the font family. We use 400 for regular and 600 for bold. Usually the bold style is assigned to headings. Regular text is used for body text.
Font weight is the thickness of a font's stroke, with various weights used to differentiate content hierarchy. The bold style emphasizes the importance in comparison with the regular font style in the font family. We use 400 for regular and 600 for bold. Usually, the bold style is assigned to headings. Regular text is used for body text.

## Line height
Line spacing is commonly measured as a percentage of font size. Conventional wisdom is that line spacing of 130%-150% is ideal for readability. In fact, anything from about 120% up to 200% is acceptable, but 150% tends to be the most quoted sweet spot (and a WCAG recommendation). You should experiment to see what looks best with your text. The line-height value is always divisible by 4 to support the grid.

Line-height, relevant to the size of the typeface itself. Ideal line-height for standard copy uses 1:1.5 ratio. The exception to this rule are headings, which needs less spacing and therefore have a line-height ratio of 1:1.2. The line-height value is always divisible by 4 in order to support the grid.

## Line length

Line-length is the number of characters displayed in a single line. Lines that are too long or too short can distract readers. For readability, limit to no more than 80 characters including spaces for desktop. Line length for mobile is recommended to use 40 to 60 characters including space per line.

## Headings

**Font weight: 600 (bold)**

### Heading 1

| | Font size | Line height |
| ------- | -------------------------------------------- | --------------------------------------------- |
| mobile | 3XL - 1.75rem - <RemToPixels rem="1.75" />px | 3XL UI - 2rem - <RemToPixels rem="2" />px |
| desktop | 4XL - 2rem - <RemToPixels rem="2" />px | 4XL UI - 2.5rem - <RemToPixels rem="2.5" />px |

### Heading 2

| | Font size | Line height |
| ------- | -------------------------------------------- | ----------------------------------------------- |
| mobile | 2XL - 1.5rem - <RemToPixels rem="1.5" />px | 2XL UI - 1.75rem - <RemToPixels rem="1.75" />px |
| desktop | 3XL - 1.75rem - <RemToPixels rem="1.75" />px | 3XL UI - 2rem - <RemToPixels rem="2" />px |

### Heading 3

| | Font size | Line height |
| ------- | ------------------------------------------- | ----------------------------------------------- |
| mobile | XL - 1.25rem - <RemToPixels rem="1.25" />px | XL UI - 1.5rem - <RemToPixels rem="1.5" />px |
| desktop | 2XL - 1.5rem - <RemToPixels rem="1.5" />px | 2XL UI - 1.75rem - <RemToPixels rem="1.75" />px |

### Heading 4

| | Font size | Line height |
| ------- | -------------------------------------------- | ----------------------------------------------------- |
| mobile | L - 1.125rem - <RemToPixels rem="1.125" />px | L Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |
| desktop | XL - 1.25rem - <RemToPixels rem="1.25" />px | XL Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |

### Heading 5

| | Font size | Line height |
| ---------------- | ------------------------------------ | -------------------------------------------------- |
| mobile & desktop | M - 1rem - <RemToPixels rem="1" />px | M Prolonged - 1.5rem - <RemToPixels rem="1.5" />px |

## Paragraphs

**Font weight: 400 (regular)**

### Lead paragraph

| | Font size | Line height |
| ------- | -------------------------------------------- | ----------------------------------------------------- |
| mobile | L - 1.125rem - <RemToPixels rem="1.125" />px | L Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |
| desktop | XL - 1.25rem - <RemToPixels rem="1.25" />px | XL Prolonged - 1.75rem - <RemToPixels rem="1.75" />px |

### Medium paragraph

| | Font size | Line height |
| ---------------- | ------------------------------------ | -------------------------------------------------- |
| mobile & desktop | M - 1rem - <RemToPixels rem="1" />px | M Prolonged - 1.5rem - <RemToPixels rem="1.5" />px |

### Small paragraph

| | Font size | Line height |
| ---------------- | -------------------------------------------- | ---------------------------------------------------- |
| mobile & desktop | S - 0.875rem - <RemToPixels rem="0.875" />px | S Prolonged - 1.25rem - <RemToPixels rem="1.25" />px |

### Extra Small paragraph

| | Font size | Line height |
| ---------------- | ------------------------------------------- | ----------------------------------------------------- |
| mobile & desktop | XS - 0.75rem - <RemToPixels rem="0.75" />px | XS Prolonged - 1.25rem - <RemToPixels rem="1.25" />px |
16 changes: 5 additions & 11 deletions website/docs/3-Guidelines/2-colours.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@ title: Colours
order: 2
---

The colour palette is designed to support a flexible, modular visual style that feels connected across EC and EU websites and platforms. The intent of the palette is to **convey a united and open European spirit**, and leave users feeling welcome and in good hands.
## Principles
## Communication is key

## Primary colours
Although we value an aesthetically pleasing use of color, clear communication is our focus. We use colors to support the purpose of the content, communicating things like hierarchy of information, interactive states, and the difference between distinct elements.

The **primary colour palette** is comprised of blues, yellows and greys. These colours are present accross all pages and, together with the neutral white, they make up for about 80% of the colours in the page layout. Use these colours to **create consistency** and a strong **visual hierarchy** throughout the page.

### Variations
## Colors follow accessibility guidelines

## Notification colours

The secondary colour palette is mainly used for notification colours. The secondary colours should make up 20% or less of the colour in the layout and should be used sparingly to highlight important information and calls to action.

## Background colour

White is the background colour of the EC-website.
The color system is designed to generate themes that meet WCAG 2.1 compliant contrast ratios. This makes things easier to find, identify, and interact with. It also makes the whole experience more accessible for visitors who are color blind or who have low vision. However, you should never convey information using color alone.
6 changes: 1 addition & 5 deletions website/docs/3-Guidelines/4-iconography.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,4 @@ title: Iconography
order: 5
---

## ECL EC icons

## Social media icons

## Flag icons
Waiting EEA for the icons
71 changes: 28 additions & 43 deletions website/docs/3-Guidelines/5-spacing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,59 +3,44 @@ title: Spacing
order: 6
---

## Two spacing scales
The responsive layout grid is made up of three elements: columns, gutters, and margins.

## Columns
Content is placed in the areas of the screen that contain columns. The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. A breakpoint can correspond with mobile, tablet, or other screen type.

On mobile, at a breakpoint of 480px, this layout grid uses 4 columns.

ECL provides two separate sets of scales:

1. Inner spacing: the spacing within the components
2. Layout spacing: the spacing between the components (+ other elements outside of a component)
On tablet, at a breakpoint of 768px, this layout grid uses 8 columns.

For spacing tokens to be able to conform in the baseline grid and contribute to the vertical rhythm, all sizes must be multiples of <RemToPixels rem="0.25" />px. A vertical rhythm starts from a baseline and it’s the basis for everything from the font sizes, line height and image sizes. The spacing tokens always referring to fixed values and thus they are not responsive. All spacing tokens can be used as values for both margins and paddings.

On desktop, at a breakpoint of 1024px, this layout grid uses 12 columns.

## Use of space
## Gutters
A gutter is the space between columns that helps separate content. Gutter widths are fixed values at each breakpoint range. Wider gutters are more appropriate for larger screens, as they create more open space between columns.

Space is used to create hierarchy and visual relationships. By using the space tokens, you can achieve visual grouping and other associations both between and within the components. Along with the typography system, they contribute to an overall visual hierarchy, providing users with a structured way of organising information.

## Inner component space

Whenever we need a fixed horizontal or vertical spacing inside components then these spacing tokens are to be used. All the values are multiples of <RemToPixels rem="0.25" />px so they can complement the typography when placed in a <RemToPixels rem="0.25" />px vertical grid. The values are based on a geometric progression. There are some exceptions like the <RemToPixels rem="0.75" />px/0.75rem and <RemToPixels rem="3" />px/3rem that they don't fit in the geometric progression, but the need of having was apparent for some rare occasions where the only using geometric progression values wasn't enough

On mobile, at a breakpoint of 480px, this layout grid uses 20px gutters.

On tablet, at a breakpoint of 7687px, this layout grid uses 20px gutters.

On desktop, at a breakpoint of 1024px, this layout grid uses 20px gutters.

<img src="https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Inner%20component%20scale.png" srcset="https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Inner%20component%20scale%20-%20Mobile.png 598w, https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Inner%20component%20scale.png 734w" alt="Space token of components" width="600" />

## Layout spacing
## Don’ts

Do not make gutters too large or the same width as the columns. Oversized gutters will not leave enough room for content and may prevent a layout from appearing unified.

Whenever we need a fixed horizontal or vertical spacing to place components in a layout then the below tokens need to be used. In most cases, the horizontal spacing has been determined to be the 12 column horizontal grid (If there are cases of fixed horizontal spacing, then the tokens need to be used). So the layout spacing tokens are used mostly to define the vertical relationships between components. These spaces are always fixed (thus we use the tokens).

<img src="https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Layout%20scale.png" srcset="https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Layout%20scale%20-%20Mobile.png 598w, https://inno-ecl.s3.amazonaws.com/media/images/EC/Spacing/Spacing%20-%20Layout%20scale.png 734w" alt="Space token of components" width="600" />
## Breakpoints
A breakpoint is the screen size threshold determined by specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.
ΕΕΑ provides responsive layouts based on 4-column, 8-column, and 12-column grids, available for use across different screens, devices, and orientations.
Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

<!-- prettier-ignore-start -->
| Name | Token (example) | Size |
| ---- | --------------- | -------------------------------------- |
| 4xl | $layout-4xl | <RemToPixels rem="4" />px - 4rem |
| 3xl | $layout-3xl | <RemToPixels rem="3" />px - 3rem |
| 2xl | $layout-2xl | <RemToPixels rem="2.5" />px - 2.5rem |
| xl | $layout-xl | <RemToPixels rem="2" />px - 2rem |
| l | $layout-lg | <RemToPixels rem="1.5" />px - 1.5rem |
| m | $layout-md | <RemToPixels rem="1" />px - 1rem |
| s | $layout-sm | <RemToPixels rem="0.75" />px - 0.75rem |
| xs | $layout-xs | <RemToPixels rem="0.5" />px - 0.5rem |
| 2xs | $layout-2xs | <RemToPixels rem="0.25" />px - 0.25rem |
<!-- prettier-ignore-end -->

## Do's

- always use the spacing token when spacing out element (either margin or padding)

## Don'ts

- don't go outside the provided spacing tokens
- don't stack the spacing tokens (such as <RemToPixels rem="0.75" />px + <RemToPixels rem="1" />px)

## When to use

- whenever you need to space out the inner parts within a component (when creating a new component that is outside what ECL provided)
- whenever you need to space out one component from another or other elements outside of a component

## When not to use

- do not use when you want to have responsive spacing since the token are fixed values
## Spacing
To ensure that layouts are visually balanced, most measurements align to 8px, which corresponds to both spacing and the overall layout. Components are sized in 8px increments, ensuring a consistent visual rhythm across each screen.
Smaller elements, such as icons, can align to a 4px grid, while typography can fall on a 4px baseline grid, meaning that each line’s typographic baseline is spaced in increments of 4px from its neighbor.
2 changes: 1 addition & 1 deletion website/docs/5-Components/1-Blockquote.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ import Usage from '../md_components/blockquote_components/usage_markdown.md';
import Showcase from '../md_components/blockquote_components/showcase_markdown.md';
import Api from '../md_components/blockquote_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />}></EEATabs>
<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
2 changes: 1 addition & 1 deletion website/docs/5-Components/13-Logo.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ import Usage from '../md_components/logo_components/usage_markdown.md';
import Showcase from '../md_components/logo_components/showcase_markdown.md';
import Api from '../md_components/logo_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />}></EEATabs>
<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
2 changes: 1 addition & 1 deletion ...Components/13-Media-Container/0-Image.mdx → ...Components/14-Media-Container/0-Image.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,4 @@ import Usage from '../../md_components/media_container_image_components/usage_ma
import Showcase from '../../md_components/media_container_image_components/showcase_markdown.md';
import Api from '../../md_components/media_container_image_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />}></EEATabs>
<EEATabs usage={<Usage />} showcase={<Showcase />} ></EEATabs>
0 website/docs/5-Components/14-Menu.mdx → website/docs/5-Components/15-Menu.mdx
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion website/docs/5-Components/15-Messages.mdx → website/docs/5-Components/16-Messages.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ import Usage from '../md_components/message_components/usage_markdown.md';
import Showcase from '../md_components/message_components/showcase_markdown.md';
import Api from '../md_components/message_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />} >
<EEATabs usage={<Usage />} showcase={<Showcase />} >

</EEATabs>
2 changes: 1 addition & 1 deletion website/docs/5-Components/16-Modal.mdx → website/docs/5-Components/17-Modal.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ import Usage from '../md_components/modal_components/usage_markdown.md';
import Showcase from '../md_components/modal_components/showcase_markdown.md';
import Api from '../md_components/modal_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />} >
<EEATabs usage={<Usage />} showcase={<Showcase />} >

</EEATabs>
2 changes: 1 addition & 1 deletion website/docs/5-Components/17-Pagination.mdx → website/docs/5-Components/18-Pagination.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ import Usage from '../md_components/pagination_components/usage_markdown.md';
import Showcase from '../md_components/pagination_components/showcase_markdown.md';
import Api from '../md_components/pagination_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />} >
<EEATabs usage={<Usage />} showcase={<Showcase />} >

</EEATabs>
2 changes: 1 addition & 1 deletion website/docs/5-Components/18-Popup.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ import Usage from '../md_components/popup_components/usage_markdown.md';
import Showcase from '../md_components/popup_components/showcase_markdown.md';
import Api from '../md_components/popup_components/api_markdown.md';

<EEATabs usage={<Usage />} showcase={<Showcase />} api={<Api />} >
<EEATabs usage={<Usage />} showcase={<Showcase />} >

</EEATabs>

0 comments on commit 02d75fc

Please sign in to comment.