Hivelinks HR — Design System

Toggle theme →

Colors

Background

#F1F3F7 / #0A0E1A

Surface

#FFFFFF / #111827

Primary (Accent)

#6B7FD8

Accent Light

#B8BFFF

Success

#10B981

Warning

#F59E0B

Danger

#EF4444

Border

229 231 235

Typography

Heading 1 — 4xl Bold

Heading 2 — 3xl Bold

Heading 3 — 2xl Semibold

Heading 4 — xl Semibold

Heading 5 — lg Medium

Heading 6 — base Medium

Body — Base size text for main content areas and paragraphs.

Small — Secondary text used for labels, captions, and helper content.

Caption — Tiny uppercase label

Buttons

Variants

Sizes

States

Full Width

Form Inputs

Default Input

With Helper

We'll never share your email.

With Error

This field is required.

With Icon

Password

Disabled

Textarea

0/200

Select

Agree to terms and conditions

Receive email notifications

Disabled checkbox

Indeterminate state

Badges

Variants

PrimarySuccessWarningDangerInfoNeutral

With Dot

ActiveInactivePending

Sizes

SmallMedium

Cards

Small Padding

Card with sm padding.

Medium Padding

Card with md padding (default).

Large Padding

Card with lg padding.

With Header Actions

This card has header actions and a footer slot.

Avatars

Sizes

Initials from Name

Skeletons

Text lines

Shapes

Tabs

Overview tab content.

Tooltips

Table

Live data

Name	Department	Status	Salary
Priya Sharma	Engineering	active	₹85,000
Rahul Nair	HR	active	₹65,000
Anita Rao	Finance	inactive	₹72,000
Vikram Patel	Engineering	active	₹90,000

Name	Department	Status	Salary
No employees found.

Modal

Hivelinks HR Design System — All components verified