UNVIM Design System

Visual reference for all design tokens and UI components — unvim.css

Color Tokens

Brand

navy
#0B2545
navy-light
#1a3a6b
navy-dark
#071a33
sky-blue
#2B7CE9
sky-light
#5b9fee
sky-dark
#1a5dbf
gold
#C9A84C
gold-light
#d9c07a

Gray Scale

gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

Semantic / Status

success
success-light
warning
warning-light
danger
danger-light
info
info-light

Typography

text-xs (11px) The quick brown fox jumps over the lazy dog
text-sm (13px) The quick brown fox jumps over the lazy dog
text-base (15px) The quick brown fox jumps over the lazy dog
text-lg (17px) The quick brown fox jumps over the lazy dog
text-xl (20px) The quick brown fox jumps over the lazy dog
text-2xl (24px) The quick brown fox jumps
text-3xl (30px) The quick brown fox
text-4xl (36px) UNVIM Clearance

Weights

Regular (400) Medium (500) SemiBold (600) Bold (700)

Status Badges

Request Statuses

Draft Submitted Under Review Pending Info Approved Rejected Cancelled Expired On Hold Resubmitted

General Purpose

Primary Secondary Success Warning Danger Info Neutral

Sizes

Small Default Large

Dot Variant

Active Pending Rejected Under Review

Buttons

Variants

Sizes

Icon Buttons

States

Cards

Default Card

New

This is a standard card component with a header, body, and optional footer. Used for grouping related content.

Flush Card

ItemStatus
Request #001Approved
Request #002Under Review
Request #003Pending Info

Highlighted Card

Has a left accent border in sky-blue. Used for featured or active items.

Stat Cards

142
Total Requests
87
Approved
34
Pending Review
12
Rejected
58
Active Users

Alerts

Success! Your clearance request has been submitted successfully.
Attention. Some required documents are missing. Please review before submitting.
Error. Request could not be processed. Please contact support.
Information. The review window is open Monday–Friday, 08:00–17:00 Sana'a time.
Notice. All clearance requests are subject to UNVIM security verification protocols.

Form Controls

This field supports up to 255 characters.
This field is required.
Looks good!

Checkbox & Radio

Table

Clearance Requests

# Organisation Type Submitted Status Actions
CLR-2024-001 UNHCR Yemen Road Movement 2024-01-15 Approved
CLR-2024-002 WFP Operations Air Clearance 2024-01-18 Under Review
CLR-2024-003 MSF International Vessel Movement 2024-01-20 Pending Info
CLR-2024-004 Oxfam Yemen Road Movement 2024-01-22 Rejected

Avatar

AK
JD
UN
RM
AD
TM
OK

Breadcrumb

Page Header

Clearance Requests

Manage and track all active clearance requests

Empty State

No requests found

There are no clearance requests matching your current filters. Try adjusting your search or create a new request.

Spinner / Loading

Divider

Content above

Content below

Or continue with

Content below labelled divider

Blade Components <x-ui-*>

All components are anonymous Blade components in resources/views/components/ui/.

x-ui-button