Styleguide

Colors

White

$color_white

#fff
WhiteKeyMist

$color_light

#F7FAFB
Black

$color_black

#000
BlackOuterSpace

$color_dark

#0C1518
BlueMidnight

$color_blueMidnight

#1B2B35
Blue

$color_blue

#5724FE
Red

$color_red

#f00
Grey

$color_grey

#fafafa
Grey 2

$color_grey2

#c4c4c4
Grey 3

$color_grey3

#f1f2f3
Grey 4

$color_grey4

#E8ECED
Grey 5

$color_grey5

#707071
Grey 6

$color_grey6

#899398
Grey 7

$color_grey7

#647077

Fonts

Matter

$font_family-matter

"Matter", sans-serif
RecklessNeue

$font_family-reckless

"RecklessNeue", sans-serif

Typography

.t-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.
.t-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Utilities

.-uppercase / .-italic / .-withUnderline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.
.-wLight / .-wNormal / .-wMedium / .-wSemiBold / .-wBold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.
.-tLeft / .-tCenter / .-tRight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.
.-cWhite / .-cWhiteMist / .-cBlack / .-cDark / .-cBlueMidnight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.
.-bgWhite / .-bgWhiteKeyMist / .-bgBlack / .-bgBlackOuterSpace / .-bgBlueMidnight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

Buttons

.c-btn / .-disabled / .-wAuto / .-rounded / .-h36 / .-h64
.c-btn.-secondary / .-disabled / .-wAuto / .-rounded / .-h36 / .-h64
.c-btnCircle / .-close
.c-btnSpinned

Links

.c-link / .-f18 / .-f20

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

Navigations

.c-navHorizontal
- Link 1
- Link 2
- Link 3
- Link 4
.c-navVertical
- Link 1
- Link 2
- Link 3
- Link 4

Form elements

.f-label

Adres e-mail:
.f-group.-input
.f-group.-textarea

Treść wiadomości:
.f-group.-checkbox

Kobiet
.f-fieldset

Chcę dostawać oferty dla:

Kobiet

Mężczyzn
.f-group.-select

Inquiry Reason

Lists

.c-list
- Why do we want to use specific tools and not other ones?
- Why do we want to carry out certain actions in a given order, and not arranged in a different way?
- Why do we need so much time for each phase of the project?
.c-list.-unordered
- Why do we want to use specific tools and not other ones?
- Why do we want to carry out certain actions in a given order, and not arranged in a different way?
- Why do we need so much time for each phase of the project?
.c-list.-ordered
- Why do we want to use specific tools and not other ones?
- Why do we want to carry out certain actions in a given order, and not arranged in a different way?
- Why do we need so much time for each phase of the project?
.c-list.-vertical
- Homepage
- About us
- Contact

Cards

.c-cardAuthor

Artur Manista

Aug 20, 2021
.c-cardPerson

Tim Kremer
Senior Designer

Over 5 years in Flying Bisons. In charge of four different teams: Front-End, Back-End, Mobile App, and Tester. A huge fan of motorsport in all its forms: as a supporter, player, and driver.
View bio
.c-cardPerson.-simple

Tim Kremer
IT Project Manager
.c-cardPerson.-tiny

Tim Kremer

IT Project Manager
.c-cardArticle

[News & Culture] — 2 min read

Junior Designer Maciej Owsik on internship at Flying Bisons.

Artur Manista

Aug 20, 2021
.c-cardArticle.-big

[News & Culture] — 2 min read

Senior UI/UX Designer Tim Kremer on growing with Flying Bisons

Assertiveness and proactivity. I was never a person who took the initiative. As I said before, I joined the team for an internship in 2017 during the early.

Artur Manista

Aug 20, 2021
.c-cardFeaturedArticle

Highlighted Article

[News & Culture] — 2 min read

Junior Designer Maciej Owsik on internship at Flying Bisons.
.c-cardClient
Our long-term relationship with KFC is focused on improving customer experience on all the main sales channels.
- Content Webiste
- E-commerce
- B2C
.c-cardProject

NEW! Autoexperten – Rebuilding a brand for a new generation of car owners.

Other

.c-category / .-h24 / .-h36
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum
- Lorem ipsum

White

WhiteKeyMist

Black

BlackOuterSpace

BlueMidnight

Blue

Red

Grey

Grey 2

Grey 3

Grey 4

Grey 5

Grey 6

Grey 7

Matter

RecklessNeue

.t-title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lacus sem.

.t-text

.-uppercase / .-italic / .-withUnderline

.-wLight / .-wNormal / .-wMedium / .-wSemiBold / .-wBold

.-tLeft / .-tCenter / .-tRight

.-cWhite / .-cWhiteMist / .-cBlack / .-cDark / .-cBlueMidnight

.-bgWhite / .-bgWhiteKeyMist / .-bgBlack / .-bgBlackOuterSpace / .-bgBlueMidnight

.c-btn / .-disabled / .-wAuto / .-rounded / .-h36 / .-h64

.c-btn.-secondary / .-disabled / .-wAuto / .-rounded / .-h36 / .-h64

.c-btnCircle / .-close

.c-btnSpinned

.c-link / .-f18 / .-f20

.c-navHorizontal

.c-navVertical

.f-label

.f-group.-input

.f-group.-textarea

.f-group.-checkbox

.f-fieldset

.f-group.-select

.c-list

.c-list.-unordered

.c-list.-ordered

.c-list.-vertical

.c-cardAuthor

.c-cardPerson

.c-cardPerson.-simple

.c-cardPerson.-tiny

.c-cardArticle

.c-cardArticle.-big

.c-cardFeaturedArticle

Junior Designer Maciej Owsik on internship at Flying Bisons.

.c-cardClient

.c-cardProject

NEW! Autoexperten – Rebuilding a brand for a new generation of car owners.

.c-category / .-h24 / .-h36