Antumo Design System v0.2.0

Colors

Complete color palette with base, alpha, and semantic color scales. Grey and Navy adapt to the current theme.

Base

white

#FFFFFF

black

#000000

focus

#5B6EF2

Alpha Black

10%

rgba(0,0,0,0.1)

20%

rgba(0,0,0,0.2)

30%

rgba(0,0,0,0.3)

40%

rgba(0,0,0,0.4)

50%

rgba(0,0,0,0.5)

60%

rgba(0,0,0,0.6)

70%

rgba(0,0,0,0.7)

80%

rgba(0,0,0,0.8)

90%

rgba(0,0,0,0.9)

100%

#000000

Alpha White

10%

rgba(255,255,255,0.1)

20%

rgba(255,255,255,0.2)

30%

rgba(255,255,255,0.3)

40%

rgba(255,255,255,0.4)

50%

rgba(255,255,255,0.5)

60%

rgba(255,255,255,0.6)

70%

rgba(255,255,255,0.7)

80%

rgba(255,255,255,0.8)

90%

rgba(255,255,255,0.9)

100%

#FFFFFF

Grey

25

#FDFDFD

50

#FAFAFA

100

#F5F5F5

200

#E9EAEB

300

#D5D7DA

400

#A4A7AE

500

#717680

600

#535862

700

#414651

800

#252B37

900

#181D27

950

#0A0D12

Navy

25

#FBFBFD

50

#F6F7FA

100

#E6E8F0

200

#C7CAD9

300

#A4A7BF

400

#6C6F92

500

#3A3A66

600

#32355A

700

#2A2D4F

800

#21243F

900

#171A2D

950

#0F1220

Blue

25

#FBFDFF

50

#F5FAFF

100

#E6F1FB

200

#CFE3F6

300

#B3D3EF

400

#9CC3E8

500

#7FAEDD

600

#6A97C8

700

#557FAF

800

#3E5F85

900

#2C425E

950

#1B2A3F

Yellow

25

#FFFDF5

50

#FFF9E8

100

#FFF3D4

200

#FFE7A8

300

#FDDC79

400

#F4CF53

500

#F1C846

600

#D4AB32

700

#AC8624

800

#7F6118

900

#523D0F

950

#2F2208

Green

25

#F6FCF9

50

#ECF8F2

100

#D7F0E5

200

#B3E3CF

300

#82D1B4

400

#4DBD95

500

#2FA46F

600

#268A5E

700

#1F6F4D

800

#184F38

900

#103325

950

#081D14

Red

25

#FEF6F6

50

#FDECEC

100

#FAD7D7

200

#F4B3B3

300

#EA8282

400

#DE6363

500

#D14C4C

600

#B53F3F

700

#923434

800

#6B2626

900

#441818

950

#260D0D

Violet

25

#FBFAFE

50

#F5F3FC

100

#E7E3F7

200

#CEC6F0

300

#B1A8E7

400

#9A8DDA

500

#8B7FD1

600

#7568B8

700

#5E5497

800

#443E6E

900

#2E2A4A

950

#1B182C

Color Variables

Semantic color tokens that map to the color palette. Each variable resolves to a different scale token in light and dark mode.

Kolory tekstu

Kolory tekstu służą do zarządzania czytelnością treści w interfejsie. Każda zmienna mapuje się na inny token skali w zależności od trybu jasnego/ciemnego.

Nazwa	Light mode	Dark mode	Użycie
`text-primary`	gray-900	gray-50	Główny kolor tekstu treści
`text-secondary`	gray-700	gray-300	Dodatkowy kolor tekstu
`text-secondary-hover`	gray-800	gray-200	Hover stanu text-secondary
`text-tertiary`	gray-600	gray-400	Trzeciorzędny kolor tekstu
`text-tertiary-hover`	gray-700	gray-300	Hover stanu text-tertiary
`text-quaternary`	gray-500	gray-400	Czwartorzędny kolor tekstu
`text-disabled`	gray-400	gray-500	Wyłączony / nieaktywny tekst
`text-placeholder`	gray-500	gray-500	Tekst zastępczy (placeholder)
`text-white`	white	white	Biały tekst na ciemnych tłach
`text-brand-solid`	navy-500	navy-500	Tekst marki (solid)
`text-brand-hover`	navy-600	navy-600	Hover tekstu marki
`text-error`	red-600	red-400	Tekst błędu
`text-error-hover`	red-700	red-300	Hover tekstu błędu
`text-warning`	yellow-600	yellow-400	Tekst ostrzeżenia
`text-success`	green-600	green-400	Tekst sukcesu
`text-brand-primary`	navy-900	navy-100	Główny kolor tekstu marki

Kolory obramowań

Kolory obramowań służą do zarządzania wszystkimi obramowaniami (stroke) komponentów w interfejsie.

Nazwa	Light mode	Dark mode	Użycie
`border-primary`	gray-300	gray-700	Główne obramowanie
`border-secondary`	gray-200	gray-800	Drugorzędne obramowanie
`border-tertiary`	gray-100	gray-800	Trzeciorzędne obramowanie
`border-disabled`	gray-300	gray-700	Obramowanie wyłączonych elementów
`border-disabled-subtle`	gray-200	gray-800	Subtelne obramowanie wyłączonych
`border-brand`	navy-500	navy-500	Obramowanie marki
`border-error`	red-500	red-400	Obramowanie błędu
`border-error-subtle`	red-300	red-500	Subtelne obramowanie błędu
`border-focus`	focus	focus	Obramowanie focusa

Kolory foreground

Zmienne koloru foreground służą do zarządzania wszystkimi nietekstowymi elementami pierwszego planu — ikonami, wskaźnikami, badge'ami itp.

Nazwa	Light mode	Dark mode	Użycie
`fg-primary`	gray-900	white	Główny kolor foreground
`fg-secondary`	gray-700	gray-300	Drugorzędny foreground
`fg-secondary-hover`	gray-800	gray-200	Hover stanu fg-secondary
`fg-tertiary`	gray-600	gray-400	Trzeciorzędny foreground
`fg-tertiary-hover`	gray-700	gray-300	Hover stanu fg-tertiary
`fg-quaternary`	gray-400	gray-600	Czwartorzędny foreground
`fg-quaternary-hover`	gray-500	gray-500	Hover stanu fg-quaternary
`fg-white`	white	white	Biały foreground
`fg-disabled`	gray-400	gray-500	Wyłączony foreground
`fg-disabled-subtle`	gray-300	gray-600	Subtelny wyłączony foreground
`fg-brand-primary`	navy-500	navy-500	Foreground marki (primary)
`fg-brand-secondary-hover`	navy-600	navy-600	Hover foregroundu marki
`fg-info-primary`	blue-600	blue-500	Foreground informacyjny
`fg-info-secondary`	blue-500	blue-400	Drugorzędny fg informacyjny
`fg-error-primary`	red-600	red-500	Foreground błędu
`fg-error-secondary`	red-500	red-400	Drugorzędny fg błędu
`fg-warning-primary`	yellow-600	yellow-500	Foreground ostrzeżenia
`fg-warning-secondary`	yellow-500	yellow-400	Drugorzędny fg ostrzeżenia
`fg-success-primary`	green-600	green-500	Foreground sukcesu
`fg-success-secondary`	green-500	green-400	Drugorzędny fg sukcesu

Kolory tła

Zmienne Background color służą do zarządzania kolorami tła (fill) wszystkich elementów interfejsu — komponentów, sekcji, kontenerów.

Nazwa	Light mode	Dark mode	Użycie
`bg-primary`	white	gray-950	Główne tło strony
`bg-primary-hover`	gray-50	gray-800	Hover głównego tła
`bg-primary-solid`	gray-950	gray-900	Solid tło (ciemne w light mode)
`bg-secondary`	gray-50	gray-900	Drugorzędne tło
`bg-secondary-hover`	gray-100	gray-800	Hover drugorzędnego tła
`bg-tertiary`	gray-100	gray-800	Trzeciorzędne tło
`bg-quaternary`	gray-200	gray-700	Czwartorzędne tło
`bg-active`	gray-50	gray-800	Aktywne tło
`bg-brand-primary`	navy-50	navy-950	Tło marki (primary)
`bg-brand-secondary`	navy-100	navy-100	Tło marki (secondary)
`bg-brand-solid`	navy-500	navy-500	Solid tło marki
`bg-brand-hover`	navy-600	navy-600	Hover tła marki
`bg-disabled`	gray-100	gray-900	Tło wyłączonych elementów
`bg-disabled-subtle`	gray-50	gray-700	Subtelne tło wyłączonych
`bg-overlay`	gray-900	gray-700	Tło nakładki (overlay)
`bg-error-primary`	red-50	red-950	Tło błędu (primary)
`bg-error-secondary`	red-100	red-400	Tło błędu (secondary)
`bg-error-solid`	red-600	red-400	Solid tło błędu
`bg-error-hover`	red-700	red-500	Hover tła błędu
`bg-warning-primary`	yellow-50	yellow-950	Tło ostrzeżenia
`bg-warning-solid`	yellow-600	yellow-500	Solid tło ostrzeżenia
`bg-success-primary`	green-50	green-950	Tło sukcesu (primary)
`bg-success-solid`	green-600	green-500	Solid tło sukcesu
`bg-success-secondary`	green-100	green-400	Tło sukcesu (secondary)

Typography

Type scale for headings, body text, and labels. Each level maps to a single CSS class.

Text style	Display	Font size	Line height	Letter spacing	Weight
Heading 2xl	The quick brown fox jumps over the lazy dog.	32 px \| 2 rem	36 px \| 2.25 rem	-1%	Bold
Heading xl	The quick brown fox jumps over the lazy dog.	28 px \| 1.75 rem	32 px \| 2 rem	-1%	Bold
Heading lg	The quick brown fox jumps over the lazy dog.	24 px \| 1.5 rem	28 px \| 1.75 rem	-1%	Bold
Heading md	The quick brown fox jumps over the lazy dog.	20 px \| 1.25 rem	24 px \| 1.5 rem	-1%	Bold
Heading sm	The quick brown fox jumps over the lazy dog.	18 px \| 1.125 rem	24 px \| 1.5 rem	-1%	Bold
Heading xs	The quick brown fox jumps over the lazy dog.	14 px \| 0.875 rem	20 px \| 1.25 rem	-1%	Bold
Heading 2xs	The quick brown fox jumps over the lazy dog.	12 px \| 0.75 rem	16 px \| 1 rem	-1%	Bold
Body xl	The quick brown fox jumps over the lazy dog.	18 px \| 1.125 rem	28 px \| 1.75 rem	0%	Regular
Body lg	The quick brown fox jumps over the lazy dog.	16 px \| 1 rem	24 px \| 1.5 rem	0%	Regular
Body md	The quick brown fox jumps over the lazy dog.	14 px \| 0.875 rem	20 px \| 1.25 rem	0%	Regular
Body sm	The quick brown fox jumps over the lazy dog.	12 px \| 0.75 rem	16 px \| 1 rem	0%	Regular
Label xl	Label text	18 px \| 1.125 rem	28 px \| 1.75 rem	0%	Medium
Label lg	Label text	16 px \| 1 rem	24 px \| 1.5 rem	0%	Medium
Label md	Label text	14 px \| 0.875 rem	20 px \| 1.25 rem	0%	Medium
Label sm	Label text	12 px \| 0.75 rem	16 px \| 1 rem	0%	Medium

Grid System

12-column responsive grid based on Bootstrap 5 classes. Antumo uses custom gutter widths: 20px on desktop, 16px on tablet/mobile (Figma spec).

Breakpoint Reference

Breakpoint	Range	Columns	Gutter	Margin	Context
`Desktop`	1024 – 1920px	12	20px	32px	With side nav (280px)
`Tablet`	480 – 1024px	12	16px	16px	Full-width, no side nav
`Mobile`	320 – 479px	12	16px	16px	Stacked layout, no side nav

Antumo app layout = Side Nav (280px fixed) + Content area (fluid, max ~1174px). Content area is a flex child, not a .container.

12-Column Grid

1

2

3

4

5

6

7

8

9

10

11

12

Common Layouts

.col-6 + .col-6 — Equal halves

col-6

.col-4 × 3 — Thirds

col-4

.col-3 + .col-9 — Sidebar + Content (like Antumo Side Nav)

col-3 (sidebar)

col-9 (content)

.col-8 + .col-4 — Content + Aside

col-8

col-4

.col-3 × 4 — Quarters

col-3

Responsive Columns

Resize browser to see responsive behavior. Columns stack on mobile, split on tablet, and show 3-across on desktop.

col-12 col-md-6 col-lg-4

col-12 col-md-12 col-lg-4

col-12 col-sm-6 col-lg-3

col-12 col-lg-8 (main)

col-12 col-lg-4 (aside)

Effects

Shadows, focus rings, and backdrop blur effects. All values come from design tokens and are available as CSS custom properties.

Shadows

shadow-xs

0px 1px 2px 0px rgba(10,13,18,0.05)

shadow-sm

2 layers

shadow-md

2 layers

shadow-lg

3 layers

shadow-xl

3 layers

Shadow Spec

Token	CSS Variable	Value	Use Case
`shadow-xs`	`--antumo-shadow-xs`	0px 1px 2px 0px rgba(10,13,18,0.05)	Subtle elevation — cards, containers
`shadow-sm`	`--antumo-shadow-sm`	2 layers, 1px offset	Buttons, input fields at rest
`shadow-md`	`--antumo-shadow-md`	2 layers, 4-6px offset	Dropdowns, tooltips, popovers
`shadow-lg`	`--antumo-shadow-lg`	3 layers, 12-16px offset	Modals, overlays
`shadow-xl`	`--antumo-shadow-xl`	3 layers, 20-24px offset	Floating elements, max elevation

Focus Ring

focus-ring

2px white + 4px #5B6EF2

focus-ring-shadow-xs

focus-ring + shadow-xs underneath

Focus Ring Spec

Token	CSS Variable	Structure	Use Case
`focus-ring`	`--antumo-focus-ring`	Inner: 2px `#FFFFFF` · Outer: 4px `#5B6EF2`	Default keyboard focus indicator
`focus-ring-shadow-xs`	`--antumo-focus-ring-shadow-xs`	focus-ring + shadow-xs layer	Elevated interactive elements (buttons with shadow)

Focus ring color #5B6EF2 is the unified standard. In dark mode, the white inner ring becomes var(--antumo-gray-950) for contrast.

Backdrop Blur

backdrop-blur-sm

blur(8px)

light

backdrop-blur-sm

blur(8px)

dark

backdrop-blur-md

blur(12px)

light

backdrop-blur-md

blur(12px)

dark

backdrop-blur-lg

blur(16px)

light

backdrop-blur-xl

blur(24px)

light

Backdrop Blur Spec

Token	Blur Radius	Use Case
`backdrop-blur-none`	0px	No blur (default)
`backdrop-blur-sm`	8px	Subtle glass — overlays, cards
`backdrop-blur-md`	12px	Modal overlays, prominent glass
`backdrop-blur-lg`	16px	Strong glass-morphism
`backdrop-blur-xl`	24px	Maximum frosted glass effect

Pair with semi-transparent background: light = rgba(255,255,255,0.6), dark = rgba(0,0,0,0.6). Includes -webkit-backdrop-filter for Safari support.

Logos

Brand and product logos in Brand (light background) and White (dark background) color schemes. SVG format, always maintain aspect ratio.

Antumo

Full (146 × 32)

Icon / Sygnet (33 × 32)

Antumo MDM

Full (120 × 32)

Standalone (207 × 100)

—

Antumo POS

Full (120 × 32)

Standalone (207 × 100)

—

Logo Sizes

Size	Height	Use Case
`xs`	16px	Favicons, tiny UI elements
`sm`	24px	Mobile headers, compact layouts
`md`	32px	Default — web headers
`lg`	48px	Landing pages, prominent placements
`xl`	64px	Hero sections, marketing
`2xl`	96px	Large displays, presentations

Guidelines

• Minimum clear space = height of icon element on all sides • Minimum size: full logo 32px, icon 24px height • Brand color on light/neutral backgrounds, White on dark/colorful backgrounds • Always maintain aspect ratio — never distort, rotate, or add effects • SVG format only — files in web/assets/logos/

Buttons

Primary actions, secondary options, destructive confirmations, and sizing variants.

Button

Small – 36 px · Medium – 40 px · Large – 48 px · XL – 56 px

sm

	primary		secondary		tertiary		link
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no
default
hover
pressed
focused
disabled
loading

md

	primary		secondary		tertiary		link
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no
default
hover
pressed
focused
disabled
loading

lg

	primary		secondary		tertiary		link
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no
default
hover
pressed
focused
disabled
loading

xl

	primary		secondary		tertiary		link
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no
default
hover
pressed
focused
disabled
loading

Button destructive

sm

	primary		secondary		tertiary
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes
default
hover
pressed
focused
disabled
loading

md

	primary		secondary		tertiary
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes
default
hover
pressed
focused
disabled
loading

lg

	primary		secondary		tertiary
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes
default
hover
pressed
focused
disabled
loading

xl

	primary		secondary		tertiary
	icon only: no	icon only: yes	icon only: no	icon only: yes	icon only: no	icon only: yes
default
hover
pressed
focused
disabled
loading

Close X button

	sm	md	xl
default
hover
focused

Button delete

	md	lg	xl
default
hover
focused

Button utility

	xs	sm
default
hover
focused
disabled

Button group

Horizontal

Vertical

Split button

Primary + dropdown trigger. Toggle is square. Active state flips chevron.

Primary hierarchy

State	SM (36px)	MD (40px)	LG (48px)
default
hover
active (open)
focused
disabled

Secondary hierarchy

State	SM (36px)	MD (40px)	LG (48px)
default
hover
active (open)
focused
disabled

Inputs

Text fields with labels, hints, and validation states. 10 states × 3 sizes per component.

Input — Basic

Standard text input with all states.

state	md	lg	xl
default
hover
focused
typing
filled
disabled
read only
error
error-filled
error-focused

Input — With Icon

Input with leading search icon and trailing eye icon.

state	md	lg	xl
default
hover
focused
typing
filled
disabled
read only
error
error-filled
error-focused

Input — Prefix / Suffix

Input with text prefix and suffix add-ons.

state	md	lg	xl
default	https://.com	https://.com	https://.com
hover	https://.com	https://.com	https://.com
focused	https://.com	https://.com	https://.com
typing	https://.com	https://.com	https://.com
filled	https://.com	https://.com	https://.com
disabled	https://.com	https://.com	https://.com
read only	https://.com	https://.com	https://.com
error	https://.com	https://.com	https://.com
error-filled	https://.com	https://.com	https://.com
error-focused	https://.com	https://.com	https://.com

Input — Leading Dropdown

Input with a leading country-code dropdown selector.

state	md	lg	xl
default	US	US	US
hover	US	US	US
focused	US	US	US
typing	US	US	US
filled	US	US	US
disabled	US	US	US
read only	US	US	US
error	US	US	US
error-filled	US	US	US
error-focused	US	US	US

Textarea

Multi-line text input. Sizes: md and xl only (per Figma).

state	md	xl
default
hover
focused
typing	Typing value	Typing value
filled	Filled value	Filled value
disabled
read only	Read-only value	Read-only value
error
error-filled	Error value	Error value
error-focused	Error value	Error value

Label & Hint Text

Form labels (default & required) and hint/error messages.

LABELS

Default Label (md) Required Label (md) Default Label (xl) Required Label (xl)

HINT TEXT

This is a hint text to help user. This is an error hint text.

COMPLETE FORM GROUP

Email We'll never share your email.

Email Please enter a valid email address.

Misc Icons

Featured icon containers, status dots, and flag icons. Featured icons wrap Lucide icons in semantic color containers.

Featured Icon

	Stroke	Success	Warning	Error	Neutral
sm
md
lg
xl

.featured-icon .featured-icon-{sm|md|lg|xl} .featured-icon-{stroke|success|warning|error|neutral}

Dot

dot-sm (8px)

dot-md (10px)

dot-sm (green)

dot-sm (red)

dot-sm (yellow)

Flag

12

16

20

24

28

40

ENG

.flag .flag--{12|16|20|24|28|40} — use with .flag-image child for actual flag SVG

Checkbox

Selection controls in multiple sizes and states — full 5×9 matrix (state × checked-state × size).

Check (box only)

Pure checkbox boxes without labels. 5 states × 3 checked-states × 3 sizes = 45 variants.

state	unchecked			checked			indeterminate
state	sm	md	lg	sm	md	lg	sm	md	lg
default
hover
focused
error
disabled

Checkbox with label

Bootstrap 5 structure: .form-check > .form-check-input + .form-check-label. Size modifiers on wrapper.

SIZES

Small unchecked

Medium checked

Large checked

CHECKED STATES

Unchecked

Checked

Indeterminate

SPECIAL STATES

Disabled

Disabled checked

Error

Checkbox group

BS5 structure: .form-group + .form-label + .checkbox-group with stacked .form-check items.

DEFAULT

Notification preferences Select all that apply.

Email notifications

Push notifications

SMS notifications

ERROR

Accept terms You must accept to continue.

I accept the terms and conditions

I agree to the privacy policy

Radio

Single-select option groups with sm/md/lg sizes and 5 interaction states.

_Radio (circle only)

Bare radio circle without label. 5 states × 2 checked × 3 sizes = 30 combinations.

	UNSELECTED			SELECTED
	sm	md	lg	sm	md	lg
default
hover
focused
error
disabled

Radio button (with label)

Radio paired with label text using .radio-field wrapper.

SIZES

Small unchecked Medium selected Large selected

SELECTED STATES

Unselected Selected

SPECIAL STATES

Disabled Disabled + selected Error Error + selected

Radio button group

Group with label, hint text, and vertical radio list. Uses .form-group + .form-label + .form-text + .radio-group composition.

DEFAULT

Notification preference Choose how you want to be notified.

Email notifications SMS notifications Push notifications

ERROR

Payment method Select your preferred payment method.

Credit card Bank transfer PayPal

Please select a payment method.

Toggle

On/off switches for boolean settings. 4 states × 2 checked × 2 sizes = 16 variants. No error state (unlike checkbox/radio).

_Toggle base (switch only)

Pure switch track + thumb without labels. 4 states × 2 checked-states × 2 sizes = 16 variants.

state	unchecked		checked
state	sm	md	sm	md
default
hover
focused
disabled

Toggle with label

Toggle paired with label and supporting text. Size md = sm switch + 14px label. Size lg = md switch + 16px label.

Sizes

md — toggle me Supporting text for md toggle

md — initially checked Supporting text for md toggle

lg — toggle me Supporting text for lg toggle

lg — initially checked Supporting text for lg toggle

Disabled

Disabled unchecked (md) Supporting text — disabled

Disabled checked (md) Supporting text — disabled

Disabled unchecked (lg) Supporting text — disabled

Disabled checked (lg) Supporting text — disabled

Dropdown / Select

Select triggers (closed state) and dropdown menus. 7 states × 3 sizes for the trigger, plus contextual menus.

Select trigger (type=default)

The closed select input. BS5 class: .form-select. 7 states × 3 sizes = 21 variants.

state	md (default)	lg	xl
default	Select	Select	Select
hover	Select	Select	Select
focused	Select	Select	Select
active	Value	Value	Value
selected	Placeholder value	Placeholder value	Placeholder value
error	Select	Select	Select
disabled	Select	Select	Select

Select with label + hint

Full form group: label, select, hint text. Shows default, error, selected, and disabled states.

Label

Select

This is a hint text to help user.

Label

Placeholder value

This is a hint text to help user.

Label

Select

This is a hint text to help user.

Label

Select

This is a hint text to help user.

Label

Select

This is a hint text to help user.

Label

Select

This is a hint text to help user.

Dropdown menu (list)

All 7 dropdown item variants (text, header, divider, radio, checkbox, icon, flag) in md and xl sizes with default, hover, active, and disabled states.

Text items — all states (md)

Text items — xl size

Radio buttons (md)

Checkboxes (md)

Icon items (md)

Flag items (md)

Dropdown Select

Combined select trigger + dropdown menu. Shows how the form-select trigger and dropdown list work together as a complete component.

Basic select — 3 sizes

The closed select trigger paired with its dropdown menu. Sizes: md (default), lg, xl.

Md (default)

Lg

Xl

Selected state

A select with a pre-selected value. The .form-select-selected class applies primary text color.

States

Disabled, error, and with-label variants of the dropdown select.

Department Choose your team.

Department This field is disabled.

Department Please select a department.

Active (open) state

The select trigger with .is-active and the dropdown menu visible with .show. This is the state while a user is choosing a value.

Md — open

Xl — open with selection

Multi-select (checkbox) & single-select (radio)

Dropdown select with checkbox items for multi-select and radio items for single-select.

Multi-select (checkbox)

Single-select (radio)

Tabs

Tab navigation with underline and button-minimal variants. 2 styles × 2 sizes × 3 states × 2 current = 24 combinations.

Tab element — Underline

Individual tab items. Underline style: current=yes shows navy bottom border, hover on non-current previews the border.

state	md current=no	md current=yes	lg current=no	lg current=yes
default	Tab label	Tab label	Tab label	Tab label
hover	Tab label	Tab label	Tab label	Tab label
focused	Tab label	Tab label	Tab label	Tab label

Tab element — Button Minimal

Individual tab items. Button-minimal style: current=yes shows white bg + border + shadow-xs. Container has gray-50 bg.

state	md current=no	md current=yes	lg current=no	lg current=yes
default	Tab label	Tab label	Tab label	Tab label
hover	Tab label	Tab label	Tab label	Tab label
focused	Tab label	Tab label	Tab label	Tab label

Tab with Badge

Badge color switches: gray for non-current, navy for current.

Underline + badge

Overview 3

Analytics 12

Reports 5

Button minimal + badge

All 24

Active 8

Draft 3

Horizontal tabs — Assembled

Full tab bars with container. 4 combinations: 2 styles × 2 sizes.

Underline md

Overview

Analytics

Reports

Settings

Underline lg

Overview

Analytics

Reports

Settings

Button minimal md

All

Active

Archived

Draft

Button minimal lg

All

Active

Archived

Draft

Tabs with icons

Optional leading icon. 20px for md, 24px for lg.

Underline md + icons

Home

Users

Settings

Button minimal md + icons

Home

Users

Settings

Badges

Status indicators and categorical labels. 7 colors × 2 sizes × 2 variants = 28 combinations.

Basic variant

	md	lg
gray	Label	Label
navy	Label	Label
blue	Label	Label
yellow	Label	Label
green	Label	Label
red	Label	Label
violet	Label	Label

Dot variant

	md	lg
gray	Label	Label
navy	Label	Label
blue	Label	Label
yellow	Label	Label
green	Label	Label
red	Label	Label
violet	Label	Label

Avatars

User representations with images, icons, and online indicators. 2 types × 2 sizes.

Image type

	xs (24px)	sm (32px)
with indicator (active)
with indicator (default)

Icon type

	xs (24px)	sm (32px)
with indicator (active)
with indicator (default)

Avatar group

Overlapping stack

+3

	Close icon: No	Close icon: Yes
md	Label	Label
lg	Label	Label
2xl	Label	Label

Notifications

Toast overlays, message list items, and badges. 3 component sets, 17 variants total.

Notification (Toast)

breakpoint (desktop/mobile) × type (error/warning/success) = 6 variants. Mobile uses CSS media query — resize browser to <768px to see.

Interactive — JS Toast manager

Click to fire a real toast. Manager stacks them top-right by default, auto-dismisses after 5s, pauses on hover/focus, dismisses on close click or Escape on the X.

Static markup (for reference / mobile preview)

Nie udalo sie zapisac zmian

Sprawdz polaczenie i sprobuj ponownie.

Sprobuj ponownie

Czesc urzadzen jest offline

Akcja wykona sie tylko dla dostepnych urzadzen.

Pokaz liste

Eksport gotowy

Plik jest gotowy do pobrania.

Pobierz

Notification: Message

variant (warning/success/error/neutral) × isRead (yes/no) = 8 variants.

Unread (isRead=no)

Read (isRead=yes)

Warning

Placeholder text

1 dzien temu Oznacz jako przeczytane

Warning

Placeholder text

1 dzien temu

Success

Placeholder text

1 dzien temu Oznacz jako przeczytane

Success

Placeholder text

1 dzien temu

Error

Placeholder text

1 dzien temu Oznacz jako przeczytane

Error

Placeholder text

1 dzien temu

Neutral

Placeholder text

1 dzien temu Oznacz jako przeczytane

Neutral

Placeholder text

1 dzien temu

Notification: Badge

Size (sm/md/lg) = 3 variants. Small is dot-only, md/lg show number.

	sm (10px dot)	md (16px)	lg (20px)
Badge		3	12
Badge (high count)		99	142

Pagination

Page navigation controls. 3 variants: dropdown, buttons, simple. Button sizes: md, lg, xl.

_Pagination button

State (Default / Hover / Active / Focus) × Size (md / lg / xl) = 12 variants. Pill-shaped, font: Circular LL 500.

	Default	Hover	Active	Focus
md (36px)	1	2	3	4
lg (48px)	1	2	3	4
xl (56px)	1	2	3	4

variant=dropdown

Left: empty (229px). Center: 4 nav arrows (icon-only tertiary sm) + 5 page buttons. Right: Select (80px) + "liczba rekordów" label + value.

1

2

3

4

5

25

liczba rekordów value

variant=buttons

Left: "Poprzednia" link button (disabled, sm, arrow-left icon). Center: 5 page buttons. Right: "Następna" link button (default, sm, arrow-right icon).

Poprzednia

1

2

3

4

5

Następna

variant=simple

Left: empty (128px). Center: 4 nav arrows + 5 page buttons. Right: "liczba rekordów" label + value (128px).

1

2

3

4

5

liczba rekordów value

Breadcrumbs

Hierarchical navigation path. 2 component sets: _Breadcrumb button base (3 variants × 3 states) and Breadcrumbs (2–5 links).

_Breadcrumb button base

State (Default / Hover / Focused) × Variant (first / middle / current) = 9 variants. Border-radius: 6px, font: Circular LL 500 14px/20px, padding: 4px 8px.

	Default	Hover	Focused
first	Pulpit	Pulpit	Pulpit
middle	Label	Label	Label
current	Label	Label	Label

Breadcrumbs

Number of links: 2, 3, 4, 5. Layout: flex row, gap 2px, chevron-right 16×16 separator. First item = "Pulpit" (show icon=false).

Number of links: 5

Number of links: 4

Number of links: 3

Number of links: 2

Search

Regular & Subtle variants × md / lg / xl sizes × 5 states. 30 variants total.

Search

Regular — bordered with shadow-xs, rounded corners. Subtle — bottom border only, no radius.

	default	hover	focused	typing	filled
regular md
regular lg
regular xl
subtle md
subtle lg
subtle xl

Progress

Progress bar, Progress bar 2.0, and Card progress — per Figma spec.

Progress bar

Standard bar with percentage text. Sizes: md (8px track) and lg (10px track).

Size md — 0%

0%

Size md — 25%

25%

Size md — 50%

50%

Size md — 75%

75%

Size md — 100%

100%

Size lg — 0%

0%

Size lg — 25%

25%

Size lg — 50%

50%

Size lg — 75%

75%

Size lg — 100%

100%

Progress bar — Bootstrap 5 legacy markup

Two-element structure .progress + .progress-bar child (BS5 / Metronic compatibility). Used by ASP.NET Zero migrations so existing templates render with Antumo styling without markup rewrites. Supports .progress-xs/-sm/-md/-lg sizes and .bg-success/warning/danger/info/primary color classes on the child.

.progress (default = 8px, navy fill)

.progress.progress-xs (4px)

.progress.progress-sm (6px)

.progress.progress-md (8px)

.progress.progress-lg (10px)

.bg-success

.bg-warning

.bg-danger

.bg-info

.bg-primary

.progress-bar-striped

.progress-bar-striped.progress-bar-animated (BS5) / .active (BS3 alias)

ASP.NET Zero table cell — limit usage (side-by-side label + bar + %)

0 / 9999

0 %

Progress bar 2.0

Numeric display with color variants: brand, red, green.

variant=brand

042

variant=red

025

variant=green

085

Card progress

Card container with title, supporting text, and progress bar 2.0.

Title placeholder

Supporting text

065

Spinners

Circular loading indicators. 3 sizes (sm 20px · md 24px · 2xl 48px) × 3 variants (Brand · Error · Inverted). Error and Inverted only have sm + md.

Loader

Spinner with visible track circle + rotating arc. Brand = navy-600, Error = red-700, Inverted = white on dark.

	Error	Inverted
sm
md
2xl	N/A	N/A

Loading indicator

Composition: Loader 2xl brand + "Loading…" text (Label md, Circular LL, 500, 14px, #414651). Vertical layout, 16px gap.

Loading...

Skeletons

Content loading placeholders with shimmer animation. Base #e9eaeb (gray-200) → highlight #f5f5f5 (gray-100).

Text skeleton

3 height variants: sm (12px), md (16px, default), lg (20px).

size	preview
sm
md
lg

Text block

Multiple text lines with varying widths — skeleton-text-block wrapper.

Avatar skeleton

3 sizes: sm (32px), md (40px, default), lg (48px). All circular.

size	preview
sm (32px)
md (40px)
lg (48px)

Rectangle skeleton

Full-width image/content placeholder. 200px default height, border-radius 8px.

Card skeleton

Composite: card container with header (avatar + text) and content lines.

List-item skeleton

Repeatable row: avatar + two text lines. Border-separated.

Composition: Avatar + text

Common pattern — avatar alongside text block using skeleton-row helper.

Progress Steps

Vertical progress step list. Each step has a progress bar + content row (icon, label, hint). Figma ref: 1195:5887

_Step base

Individual step element. Status (Incomplete / Current / Complete) × Size (sm / md / lg) = 9 variants.

	Incomplete	Current	Complete
sm	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.
md	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.
lg	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.	Label Placeholder This is a hint text to help user.

Progress steps (assembled)

Assembled component. Number of steps (3/4/5) × Size (md/lg) = 6 variants. md uses _Step base sm; lg uses _Step base lg. Default: first step = Current, rest = Incomplete.

5 steps · md

Your details Please provide your name and email.

Company details A few details about your company.

Invite your team Start collaborating with your team.

Set preferences Customize your experience.

Review & confirm Check your setup before proceeding.

5 steps · lg

Your details Please provide your name and email.

Company details A few details about your company.

Invite your team Start collaborating with your team.

Set preferences Customize your experience.

Review & confirm Check your setup before proceeding.

4 steps · md

Your details Please provide your name and email.

Company details A few details about your company.

Invite your team Start collaborating with your team.

Review & confirm Check your setup before proceeding.

3 steps · md

Your details Please provide your name and email.

Company details A few details about your company.

Invite your team Start collaborating with your team.

Counter

Numeric input with increment/decrement controls. Round pill buttons reuse existing .btn classes.

_Counter base

4 active-button states × 3 sizes. Buttons: .btn .btn-primary .btn-icon-only (round pill, 999px radius).

	md (40px)	lg (48px)	xl (56px)
plus	0	0	0
both	2	2	2
minus	99	99	99
destructive	1	1	1

Counter (assembled with label)

Label + _Counter base. Layout: row, gap 24px. Sizes: lg (label 14px) and xl (label 18px).

	lg	xl
with label	Label 0	Label 0

Divider

Content divider with 2 types: Line (simple rule) and Text (centered label between lines).

Type = Line

Type = Text

OR

Tooltips

Contextual information on hover/focus. All tooltips forced visible for demo. 2 variants × 7 arrow positions + help icon.

Simple (no supporting text)

Padding: 8px 12px. Label md (14px/500). Arrow positions: none, top, topLeft, topRight, bottom, left, right.

arrow = none

arrow = bottom center

arrow = bottom left

arrow = bottom right

arrow = top center

arrow = left

arrow = right

With supporting text

Padding: 12px all sides. Title: Label md (14px/500/#fff). Supporting: Body sm (12px/400/#D5D7DA). Gap: 2px.

arrow = none

arrow = bottom center

arrow = bottom left

arrow = bottom right

arrow = top center

arrow = left

arrow = right

Help Icon

circle-help SVG icon 16×16, stroke 1.25px. Closed: gray-400 (#A4A7AE). Open: gray-500 (#717680) + tooltip.

open = no

open = yes

Slider

Range slider with dual thumb. 3 component layers: _Slider Handle, _Slider Control (range), Slider (assembled with label).

_Slider Handle

24×24 circle, white fill, 2px navy-500 border, shadow-sm. States: Default, Hover (visual = default), Focused (focus-ring-shadow-xs). Optional number label below (Label md, gray-700).

has Label = No, Default

has Label = No, Hover

has Label = No, Focused

has Label = Yes, Default

50

has Label = Yes, Hover

50

has Label = Yes, Focused

50

_Slider Control (Range Slider)

Dual-thumb range slider. Track: 8px gray-200, fill: navy-500, handles: 24px. Properties: Right control (25%/50%/75%/100%) × has Number (Yes/No) = 8 variants. Left handle always at 0%.

25%, has Number = No

50%, has Number = No

75%, has Number = No

100%, has Number = No

25%, has Number = Yes

25

50%, has Number = Yes

50

75%, has Number = Yes

75

100%, has Number = Yes

100

Slider (Assembled)

Full component: Label (md, required, help icon) + _Slider Control. Column layout, gap 12px, width 320px.

Assembled (25%, Number)

Label *

25

Text Elements

Label + Value pairs. 6 Figma variants: layout (horizontal/vertical) × variant (label+text / label+badge) × size (md/lg). Label = gray-500, Value = gray-900. Badge variant uses Badge component (basic, gray).

Horizontal — label + text

md (label 12px, value 14px)

label: value

lg (label 14px, value 18px)

label: value

Horizontal — label + badge

md (badge-md badge-gray)

label: Label

lg (badge-lg badge-gray)

label: Label

Vertical — label + text

md (gap 2px)

label: value

lg (gap 2px)

label: value