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

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Checkbox

Radio

Icons

accept
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.

.widget-title - 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.
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
  1. list 1
  2. list 2
  3. list 3
  4. 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