mission
Our mission is to create a service that makes customers' lives better. We have developed a unified system of B2B products, and our employees are the users of these products. Our goals: to demonstrate high-quality services, ease of use, seamless interaction and help to achieve high results.
logotypes
You can download the logos in SVG and PNG formats in different versions - in a white and blue background, in short, and in full versions. The product logo is adaptive: it can be either a short logo (icon) to save space or a full logo (icon + word).
Download logosсolours
We use colour to structure the layouts, manage accents, alert and inform the user. To support colour consistency, we use design tokens.
#2979FF
#00C251
#FFFFFF
#E9E9E9
#000000
fonts
Basis Grotesque is the brand font. This geometric grotesque helps to make our products user-friendly with its simple and clear forms. But certain elements of the font add uniqueness and special character.
Download fontsicons
We use icons to enhance the content, catch attention or where text-based typing is impossible. Icons are similar in design to the brand font.
design tokens
Design tokens are the simplest variables that are necessary to build our design system. They consist of basic colours, fonts, padding, styles and animations. Tokens can be used directly and inherited by all other component types.
The basic idea behind token naming is the ease of readability. Ideally, any designer or developer could quickly understand the token used in the system simply by its name.
$bs
This indication means that this token belongs to our design system. This will help to read it quickly in the code.
$type
Defines the type of token. There are two types: $sys and $comp.
$sys indicates that the token refers to system tokens. This includes colours, typography, indentation, element roundings, element sizes, effects. For example, a token $bs.sys.color.main-black - is the system token of the "Basis" design system from the colour category, the colour is black.
The $comp type refers to component-specific attribute tokens. For example, the token $bs.comp.buttonLarge.padding-top is responsible for the top padding inside buttonLarge.
$category
Defines which category the token belongs to (e.g. $color). All token categories are signed in the header. The category in components is the name of the component itself.
$param
Defines the specific parameter of the token.
FigmaCodebuttons
The main function of a button is a call to action. We try not to block buttons in interfaces. Here you will find different types and combinations of buttons for any task.
button-link
Button-link — активный элемент, триггер нужного события.
inputs
The input box allows you to enter data using the keypad. The name of the input box should be capitalised. Name the fields with words that tell you exactly what you need to enter: Telephone, Email, First name, Last name etc. Avoid "Your", "Enter", "Specify" and similar words. They are not meaningful. Also don't put a colon after the name - unnecessary visual noise. A placeholder contains hints or examples of what to type. The placeholder disappears, so it should not contain important information.
monoselect
Monoselect is a list of options where only one option can be selected. The list items are always wrapped in a box.
multiselect
Monoselect is a list in which you can select all or more options. List items are always wrapped in a box and each option has a checkbox.
datepicker
Date Picker is a list of dates and times where you can select a single date or a range of dates.
stepper
Stepper allows the user to enter and edit a numerical value. The "+" and "-" buttons increase or decrease the numerical value in steps (the default step is one).
сheckbox
Checkbox allows you to select multiple items from a list of options or to make a choice between two opposite states or features.
radiobutton
Radiobuttons allow you to select just single item from a list of mutually exclusive options. They can not be used for multiple selections.
switch
Switch allows quick switching between two binary states. Typically used to enable / disable a specified option. Clicking or swiping on the switch immediately toggles the state of the option. The switch indicates that it is on when it is coloured in the product's accent colour and the "control handle" has moved to the right.
tabs
Tabs is a quick navigation element between grouped content without reloading the page. It displays the selected section of content in a common container, hiding the other sections.
tabs button
Tabs Button are filter elements based on predefined parameters. Only one option can be selected at a time, usually used in simple navigation.
stickers
Sticker informs you of the status the object is in and displays additional information. We recommend using colours when additional highlighting of the sticker. If the sticker itself is an accentuating element, a bright colour should not be used.
tooltip
Tooltip helps users understand unknown objects that are not described in the interface. They appear by clicking on an icon, button or link, and disappear by clicking on an area of the screen outside the tooltip.
notification
Notification is a message with various important information for the user. There are three types: info, sucess, mistake.
loader
Loader is used to visually display the loading status. It is used when loading data, processing a request slowly, or executing an action with a delay. Not recommended for loading an array of data in components (table, lpage, etc.). Better to use a skeleton component in such cases. Can be in three colours: grey, white and blue.
skeleton
Skeleton is used to display the structure of a widget or page when it is loaded. A skeleton helps the user to form a mental map of the downloaded data. The part of the skeleton is referred to as the "bone". Used if the content is loaded up to 5 seconds. If longer, it is recommended to use the loader component.
tone of voice
The Basis is supportive, modern but radical, loyal but punctual. It loves to learn, is willing to change for the better, is resourceful, and is ready to take responsibility when a user fails. It characterizes by humanity and honesty, and the primary qualities are openness and sincerity.
The goal is to unite our interfaces into a single ecosystem at the text. These rules are the only ones to guide us when we write the text for the interface. The opinion of an authoritative person inside or outside the company does not matter if the rules say otherwise.
syntax
The rules apply to all texts that appear in different places in the interface: in menus, buttons, errors, tooltips, promotional blocks and modal windows. It does not apply - to texts in social networks, promotional letters, or marketing materials that we use outside the interfaces.
Clear to a beginner
Every screen should pass the beginner's test. If you look at it out of context, is it clear what is happening here and what to do? If not, you need to rework it. It often helps to start with a title and put the main thing at the start of the sentence. This will help untangle a problematic thought
Write not for yourself - for the user
Think more about what the user needs to know than what the company wants to say. Try to keep humanity in the copy.
Keep it short
Copy should be concise and yet communicate the meaning effectively. Use as few words as possible without losing the sense. When writing concisely, we ensure every word on the screen has a job. This rule is especially true for contextual instructions.
Brackets
Try to avoid brackets (this is what bracketed qualifiers are like). If the information in brackets is not essential, it is possible that the text will not be damaged if the brackets and what is inside them are removed. And if the information is important, it should not be hidden in brackets. Make it an organic part of a sentence or even a separate sentence.
Brackets are not a parasite word; you don't have to take them out of everything. But every time you put brackets or read a text where they are present, try rephrasing the sentence, so there are no brackets in it.
Without multitasking
We make the phrase so that it can not be understood any other way. The second example is clean for you? This amount already includes delivery, or will the fee be added on top?
Explaining the strange
If there are unexpected actions in the scenario, spare no words to explain what they are and why
Consistently
In the explanation, put the actions in the order in which the person will perform them.
Concrete, not abstract
The more concrete the wording, the easier it is for a person to understand what we want to say. There is not enough space for interface text and we have to get the most out of every letter. Replace meaningless headings like "Error" or "Attention!" with substance.
Don't lie
A person expects things to happen exactly as we have promised. That is why we formulate it carefully and do not deceive expectations, even minor things.
team
Everyone who has been involved in the development and support of the design system is represented here. Without you, there would be no Basis. Thank you!
