This is the place to start for Developers and User Interface Designers to provide a consistent look and feel across all EUAA applications.
This design system unifies the visual style and interaction behaviour of the 30+ different applications of the EUAA. By providing pre-built components and basic layouts in the official EUAA colours, Developers and Designers can spend less time rebuilding and styling basic components and focus more on the specific requirements of the application.
All you need to start or update an EUAA application
Find resources like CSS files and basic HTML templates on the EUAA Bitbucket repository.
EUAA on BitbucketIn Bitbucket please select the static/resources folder to add to your project. This folder contains all the static resources needed for the visual style of the EUAA applications.
Add the following in the header section of the HTML page:
<link rel="stylesheet" type="text/css" href="static/resources/css/euaa-layout.css">
<link rel="stylesheet" type="text/css" href="static/resources/css/euaa-grid-system.css">
<link rel="stylesheet" type="text/css" href="static/resources/css/euaa-components.css">
<link rel="stylesheet" type="text/css" href="static/resources/css/euaa-utilities.css">
<-- adding fontawesome -->
<link rel="stylesheet" type="text/css" href="static/resources/vendor/fontawesome-free-5.15.3-web/css/all.css">
<-- adding colour theme file -->
<link rel="stylesheet" type="text/css" href="static/resources/css/euaa-default-theme.css">If you need to change the colour theme of the EUAA application, please select one of the following to replace the default theme:
All headings and body text are written in the publicly available web font "Open Sans".
"Open Sans" on Google FontsFont Awesome is a font and icon tookit based on CSS and Less. Find all the icons needed for generic actions in Font Awesome.
Font AwesomeHere is a brief overview on the sections of this design system
The most basic elements of this design system are the right fonts and colours.
View style guide overviewDepending on its type or purpose, each application will follow a specifically coloured theme. Find guidance on which set of colours to use in the colours overview.
View EUAA coloursThe components section lists all the web components, such as buttons or tabs, that are following the style guide for EUAA applications.
Where to find:Different applications will require different layouts. Whether this concerns the placement of the main navigation, or if to use a hero image on the landing page, in this section you will find the HTML for the different layouts.