UI Elements
Our brand always in movement
The Library
It is a central point for UI elements which can be used across the group, for all digital implementations. It is in constant movement where elements are being fine-tuned and further defined regularly. Based on the needs of the digital design community and the further development of the digital A1 Brand in general we will add new sections.
Get started
Create a new Figma account or use an existing one. If you register with an e-mail address containing an A1 domain such as a1.hr you will have view-access to most areas of the A1 Figma space by default. Editor access is managed locally in the markets. Reach out to your MarCom department for more information.
Core
Core
Logo
There are three red logo variations, the standard, the simplified and the basic. For all digital applications the simplified logo should be used
Core
Icons
We have two categories of iconography: Functional and Illustrative. Functional icons are for functional applications. The illustrative icons have more detail.
Core
Typography
Typefaces play a major role in the A1 visual language. We have our own typeface family, that includes the A1 Serif and A1 Sans.
Core
Colour: Primitives
The basic colours include the brand colours and additional definitions for feedback colours. Also find guidelines how to map old to new brand colours.
Core
Colour: Theme & Variables
From the basic brand colours we derive semantic colours or tokens. This could for example be the default surface color or the default text color.
Core
Gradients & Effects
Color gradients create depth and movement. There are two main types of gradient, simple (linear & point) and complex gradients (organic).
Core
Disruptors
Tweak the provided components to fit your needs or create your own disruptors inspired by the layout examples.
Core
Grid
Elements of layouts are aligned to a basic grid of 8 dp. That means all spacings, margins, gutters, paddings, etc. should be a multiple of 8.
Core
Accessibility
Everybody should be access and communicate with A1. Therefore we provide access without barriers to all digital channels such as apps and websites.
Web
Web
Accordions
Accordions allow you to hide a lot of content while also making the hidden content accessible by giving it a label. This can reduce scrolling.
Web
Badges
Badges indicate the state of another element. A counter or short text can give additional information.
NEW
Web
Breadcrumbs
Breadcrumbs provide orientation to where you are in the hierarchy of an app or website or to show which path you have taken so far.
Web
Buttons
Choose buttons that have the right emphasis for your use case and that fit your background and environment.
Web
Bubbles (mini disruptors)
Use a bubble to put the focused on a preferred option or to give additional information.
Web
Cards
Cards are visual frames that group content and UI elements.
Web
Checkboxes
With checkboxes users can select muptiple choices from a list.
Web
Chips (tags & quicklinks)
Chips are small versatile UI elements for various applications.
NEW
Web
Dialogs
A dialog presents important information in a flow or prompts the user for critical input.
NEW
Web
Dividers
Dividers are lines that group items together or separate sections in a container.
Web
Expressivity scale
We have a flexible system that can adjust from simple and functional applications to expressive moments.
Web
Grid
For desktop and tablet we use a grid of 12 columns. The desktop layout is fixed or flexible. The mobile gris has 8 columns.
Web
Headers
Headers contain the logo and the main menu. They can also contain a call-to-action button or an additional icon menu.
Web
Menus (dropdowns)
Menus offer a list of options after the user has interacted with another element such as a select field, a button or a chip.
Web
Notifications
Notifications (banners, toasts) are highlighted messages that convey information to the user.
Web
Number input
The number input let’s you increase or decrease number values. Increase or decrease a number with a single click.
Web
Pagination
Pagination lets you spread your content over severall pages. The pagination controls let you directly select a numbered page.
Web
Radio buttons
Use radio buttons to select a single option out of multiple choices. Only one radio button can be selected at a time
Web
Segmented buttons
Segmented buttons are content switchers. They contain 2–7 items.
Web
Selectors
Selectors are containers for selecting one or multiple options. They can be arranged horizontally or vertically.
Web
Sliders
Input a value from a certain range with sliders. Sliders are either continuous (e.g. volume controls) or discrete.
Web
Steppers
Steppers (vertical & horizontal) illustrate and group the steps of a linear process like ordering a product.
Web
Tabs
Use tabs to group related content. You can reduce visual clutter by only showing content from the active tab.
Web
Tab bars
Navigate the main parts of a (Web) app with the help of bottom tab bars (bottom navigation). A tab should represent a self-contained use case.
Web
Text fields
With text fields uers can input text. Text fields can be part of a form together with other input components.
Web
Toggle switches
Toggle switches turn something on or off like a light switch. Compared to checkboxes users expect immediate effects from using a toggle switch.
Shortcuts
Understand our Brand
Brand Strategy
ESG
Brand Guidelines
Videos from all A1 countries
A1 Video Archive