Design System

Colors

BLACK

#0C0B0Fblack--color-black

BLUE

#220071blue--color-blue

BORDER-BLACK

var(--color-black)border black--color-border-black

BORDER-ORANGE

var(--color-primary)border orange--color-border-orange

BORDER-WHITE

var(--color-white)border white--color-border-white

DARK-BROWN

#662000dark brown--color-dark-brown

GRAY

#EFEFEFgray--color-gray

GREEN

#88CE26green--color-green

INDIGO

#3A1591indigo--color-indigo

LIGHT-BROWN

#CC4100light brown--color-light-brown

LIGHT-BROWN-TRANSPARENT

rgba(204, 65, 0, 0)light brown transparent--color-light-brown-transparent

ORANGE

#FEBB00orange--color-orange

OTHER

rgba(12, 11, 15, 0.15)black15--color-black15

#F3F2F3black5--color-black5

#0C0B0F99black60--color-black60

#FBFAFDbrand blue2--color-brand-blue2

#F5F3F9brand blue5--color-brand-blue5

#FFEFE8brand orange10--color-brand-orange10

#FFDFD0brand orange20--color-brand-orange20

#FFD7C5brand orange25--color-brand-orange25

#FFF7F3brand orange5--color-brand-orange5

#FFFBF2brand yellow5--color-brand-yellow5

#D6D6D6gray2--color-gray2

rgba(204, 65, 0, 0.3)light brown30--color-light-brown30

rgba(255, 95, 21, 0.1)primary orange10--color-primary-orange10

rgba(255, 95, 21, 0.15)primary orange15--color-primary-orange15

rgba(255, 95, 21, 0.2)primary orange2--color-primary-orange2

rgba(255, 95, 21, 0.25)primary orange25--color-primary-orange25

rgba(255, 95, 21, 0.03)primary orange3--color-primary-orange3

rgba(255, 95, 21, 0.05)primary orange5--color-primary-orange5

PRIMARY

#FF5F15primary--color-primary

PRIMARY-TRANSPARENT

rgba(255, 95, 21, 0)primary transparent--color-primary-transparent

RED

#FE0000red--color-red

WHITE

#ffffffwhite--color-white

rgba(255, 255, 255, 0.6)white 60--color-white-60

YELLOW

#E6F075yellow--color-yellow

Buttons

Primary

<Action :variant="primary">

<Action :variant="primary" size="small">

Secondary

<Action :variant="secondary">

<Action :variant="secondary" size="small">

Light orange

<Action :variant="light-orange">

<Action :variant="light-orange" size="small">

Light black

<Action :variant="light-black">

<Action :variant="light-black" size="small">

White Shadow

<Action :variant="white-shadow">

<Action :variant="white-shadow" size="small">

Link

<Action :variant="link">

<Action :variant="link" size="small">

Forms

text

Lorem ipsum dolor sit amet.

textarea

number

Lorem ipsum dolor sit amet.

tel

Lorem ipsum dolor sit amet.

select

Checkbox

Radio

option1
option2
option3

Icons

arrow-right

error

info

money

pencil

return

arrow-drop-down-line

Typography

Font weight.

Thin - 100
Extra Light - 200
Light -300
Regular - 400
Medium - 500
Semi Bold - 600
Bold - 700
Extra Bold - 800
Black - 900

Heading 1 - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Heading 2 - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Heading 3 - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Heading 4 - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Paragraph - Lorem ipsum dolor sit amet consectetur adipisicing elit.

.text-large- Lorem ipsum dolor sit amet consectetur adipisicing elit.

.text-medium- Lorem ipsum dolor sit amet consectetur adipisicing elit.

.text-small, small - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Small - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Span - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Strong - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Em - Lorem ipsum dolor sit amet consectetur adipisicing elit.

~~Del - Lorem ipsum dolor sit amet consectetur adipisicing elit.~~

Code - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Pre - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Blockquote - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Q - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Abbr - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Cite - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Dfn - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Kbd - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Samp - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Time - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Var - Lorem ipsum dolor sit amet consectetur adipisicing elit.

B - Lorem ipsum dolor sit amet consectetur adipisicing elit.

I - Lorem ipsum dolor sit amet consectetur adipisicing elit.

U - Lorem ipsum dolor sit amet consectetur adipisicing elit.

~~S - Lorem ipsum dolor sit amet consectetur adipisicing elit.~~

^{Sup - Lorem ipsum dolor sit amet consectetur adipisicing elit.}

_{Sub - Lorem ipsum dolor sit amet consectetur adipisicing elit.}

Mark - Lorem ipsum dolor sit amet consectetur adipisicing elit.

Ins - Lorem ipsum dolor sit amet consectetur adipisicing elit.

~~Del - Lorem ipsum dolor sit amet consectetur adipisicing elit.~~

Listy na desktop na 50% szerokości ekranu, mobile 100%

list 1
list 2
list 3
list 4

list 1
list 2
list 3
list 4

ul.bullet

dostęp do danych z dowolnego miejsca i urządzenia
kreator procesów dostępny dla użytkownika
pełna historia zmian i rejestr operacji na obiegu dokumentu
stabilna technologia .NET Core
możliwość pracy w chmurze i lokalnie