Skip to content
ع

Design components

Every piece the Gates screens are built from, in one place, live and in all its states, in Arabic and English. Screens are assembled from these pieces only, so the look stays one everywhere.

94 components
01

Identity

Logo, colour, type, corners, shadows and motion.

On a light background

Logo
GatesGuest & gate managementGatesGuest & gate managementGates

On a dark background

Logo tone=dark
GatesGuest & gate managementGates

The mark alone

GatesMark

The gate’s arch, the barrier arm lowered, and the signal light above it.

The Syrian visual identity’s colours

pineal · aramos · mulbrys · coast

The four official colour palettes as published on the Syrian Arab Republic’s visual identity portal. Every colour in the system comes from them; the dark surface shades are derived from Pineal.

Pineal

pineal-900

#126e70

pineal-600

#52b5ab

pineal-300

#9ee5dc

pineal-100

#d9fffa

Aramos

aramos-900

#8c7f6d

aramos-600

#cbbba0

aramos-300

#e5dcc3

aramos-100

#f7f4f0

Mulbrys

mulbrys-900

#421a2a

mulbrys-600

#705163

mulbrys-300

#896a7d

mulbrys-100

#dbc8d4

Coast

coast-900

#495760

coast-600

#83949b

coast-300

#bfced6

coast-100

#e7eff2

Deep Pineal — the dark surfaces

brand-*

brand-950

#072325

brand-900

#0b3133

brand-800

#0e4245

brand-700

#126e70

brand-600

#2c8784

Pineal — the accent

accent-*

accent-700

#0e5a5c

accent-600

#126e70

accent-500

#1d8c88

accent-400

#52b5ab

accent-100

#d9fffa

Verdict colours — allow · warn · deny

go · look · stop

go

#1a7f3c

look

#9a5a05

stop

#c2303b

go-bright

#35c46a

look-bright

#f2a516

stop-bright

#f0505c

go-soft

#e5f6ea

look-soft

#fff3dc

stop-soft

#fdeced

Neutrals

ink · muted · line · canvas

ink

#18262c

muted

#495760

line

#e5e0d4

canvas

#f7f4f0

surface

#ffffff

Type scale

IBM Plex Sans Arabic · IBM Plex Mono

Page title

26 / 700

Section title

18 / 600

Body text on screens, in IBM Plex Sans Arabic, which carries Arabic and Latin in one rhythm.

14 / 400

Secondary text and dates

12 / 400

Codes: card and plate numbers · 04A1 3BC2 7F59 80 · 512834

Mono 13

Corners and shadows

rounded-xl · 2xl · 3xl · shadow-*

xl · card

2xl · raised

3xl · overlay

glow

go
look
stop

Motion

animate-scan · ripple · ping

Scan line

Reader ripple

Live

Live pulse

02

Basics

Buttons, badges, record states and avatars.

Buttons

Button

Sizes and states

Icon buttons

IconButton

Badges

Badge
Standing passTemporary missionSenior visitorsTechniciansVisitorsN13

Record states

StatusChip
InsideExpectedLeftDid not comeCancelled
InsideInside

Avatars and portraits

Avatar · Portrait
WKBDMSFY+2

A fixed drawn portrait per name in the prototype; the guest’s real photo replaces it in the build.

Tooltips and shortcut keys

Tooltip · Kbd
/ SearchEnter AllowEsc Cancel
03

Forms

Every field the coordinator or the director types into.

Guest name

Field · Input · SearchSelect · Textarea

Used to reach him if the time changes

Search pick list

SearchSelect

Every choice of more than three options, or whose values come from the data, is picked by searching. Dynamic values are searched on the server as you type.

Searches the server by name, national number, plate or card

A fixed list — searched locally

Visit options

Checkbox · RadioGroup
Visit kind

Switches

Switch

Search

SearchInput · SegmentedControl
/

Upload the guest’s photo

FileDropzone

Drag and drop files here or

JPG or PNG — up to 5 MB each

Two-step verification code

OtpInput
04

Data display

Cards, tables, tabs, timelines and empty states.

Content card

Card · CardHeader · CardBody · KeyValueList

Content card

A header and a body — nothing third

Every card in the system has a header carrying the title and actions, and a body carrying the content.

Gate
North gate
Arrived
09:52
Host
Eng. Hani Al-Sheikh
Purpose
Network equipment review

Page header

PageHeader

Visits

Upcoming visits as they arrived in the internal app, and the standing passes.

Tabs

Tabs

Today’s visits appear here.

Timeline

Timeline

  1. The coordinator registered the visit

    08:14
    From the director’s office message

  2. Arrived at the North gate

    09:52
    The card was read and the plate camera matched

  3. Entry allowed

    09:52
    Recorded by Ghiath Al-Ali

  4. Left

    12:40
    All his equipment left with him

Registering a guest

Stepper · Progress

  1. Identity

  2. Photo

  3. 3

    Vehicles

  4. 4

    Card

Today’s visits that came72%
72%

The guest card

GuestCard (preview)
The formation — LatakiaGuest card

Eng. Wassim Al-Khatib

Employee on a temporary mission

Homs formation

Card number

04A1 3BC2 7F59 80
Carries a cardNeeds an escortEquipment declared

Data table

DataTable · FilterBar · Pagination
State
Eng. Wassim Al-KhatibHoms formationInside
Basel DeebTartus formationExpected
Dr. Mazen SuleimanGeneral administration — DamascusLeft
Fadi YoussefAl-Sahel Air ConditioningDid not come
Alaa HasanVisitorLeft
Yazan IbrahimHama formationCancelled

Showing ⁦1–6⁩ of 148

Empty state

EmptyState

Nobody is inside right now

Everyone who came in today has left. Every guest with an entry will show here.

Loading skeleton

Skeleton · SkeletonCard
05

Feedback & overlays

System messages, dialogs, the side drawer and menus.

System messages

Alert

This visit needs an escort

The IT department was told to send an escort to the gate.

Passage recorded

Eng. Wassim Al-Khatib came in through the North gate.

The gate is working offline

Passages are kept on the laptop and sent when the link returns.

Dialogs

Dialog · ConfirmDialog

Side drawer

Drawer · DropdownMenu

Toasts

ToastButton · useToast
06

Charts

Dashboard and report indicators — always Latin digits.

Inside now

StatTile

Inside now

37

Passages today

214

+8.2%vs previous period

Visits expected today

46

31 / 46

Open alerts

3

−25%vs previous period

Flow through the day

LineChart
  • In
  • Out
0204060060708091011121314151617181

Entries this week

BarChart
0100200300182SatSat: 182205SunSun: 205214MonMon: 214196TueTue: 196221WedWed: 221160ThuThu: 16034FriFri: 34

Guests by category

DonutChart
Standing pass: 61Temporary mission: 38Technicians: 24Senior visitors: 9Visitors: 16

148

guests

  • Standing pass6141.2%
  • Temporary mission3825.7%
  • Technicians2416.2%
  • Senior visitors96.1%
  • Visitors1610.8%

Arrived on time

Gauge

86%

Arrived on time

07

Gate components

The pieces only this system has: the entry verdict, the guest card, the vehicle plate, camera frames…

Entry verdict — on a page

VerdictPanel

Entry allowed

A visit for today 10:00 – 13:00 · IT department

Needs an escort

Warning — your call

His visit is from 14:00 — he arrived four hours early

Outside the visit window

Entry refused

This card was revoked on 2026-10-02 by the technical director

Revoked card

Entry verdict — on the gate console

VerdictPanel tone="dark" size="lg"

Entry allowed

A visit for today 10:00 – 13:00 · IT department

Warning — your call

His visit is from 14:00 — he arrived four hours early

Outside the visit windowVehicle not theirs

Entry refused

This card was revoked on 2026-10-02 by the technical director

Revoked card

The verdict signal and its badges

SignalLights · VerdictBadge
AllowWarnDenyAllow

Direction and connection

DirectionBadge · ConnectionPill
InOut
OnlineOffline7 waiting to sendSyncing
OnlineOffline7 waiting to send

Every flag a passage can carry

FlagChip
Revoked cardNo visit registeredOutside the visit windowFace does not matchVehicle not theirsVehicle with no passageEquipment does not matchRecorded offlineConflict after syncAllowed despite warningNeeds an escortSensitive visitAlready recorded insideGate out of service

The card reader

NfcReader

Card read

Click the reader to step through its states.

The guest card

GuestCard · CardNumber
The formation — LatakiaGuest card

Dr. Mazen Suleiman

Senior visitor

General administration — Damascus

Card number

0491 E0C3 5D2A 7F
The formation — LatakiaGuest card

Basel Deeb

Employee with a standing pass

Tartus formation

Card number

04C7 719A A23B 81
Revoked

04A1 3BC2 7F59 80

Syrian vehicle plates

PlateTag
سورياSYحمص512834
سورياSYطرطوس740219سورياSYاللاذقية381605سورياSYحماة226981
سورياSYحمص512834سورياSYدمشق100457

Camera frames

CameraFrame · SceneArt
North — plate
North — under the vehicle
North — face
No signalThe camera lost its link to the system
South — face

The passages log

PassageItem

Eng. Wassim Al-Khatib

Employee on a temporary missionNorth gateGhiath Al-Ali

Allow09:52

Fadi Youssef

Outside the visit windowAllowed despite warning

Outside technician or contractorSouth gateHussam Issa

«The host called and confirmed the new time»

Warn09:31

Basel Deeb

Revoked card

Employee with a standing passNorth gateGhiath Al-Ali

Deny09:14

Yazan Ibrahim

Recorded offline

Employee with a standing passSouth gate

Allow08:47

Inside now

PresenceCard

Eng. Wassim Al-Khatib

Employee on a temporary mission

IT department

Since 09:52 · N1Inside for 1h 34m
Escort: Nizar Kassem

Dr. Mazen Suleiman

Senior visitor

Director’s office

Sensitive visit
Since 10:05 · N1Inside for 1h 21m

Alaa Hasan

Non-employee visitor

Human resources

Since 07:40 · S1Inside for 3h 46m
Past his expected exit

Gate status

GateStatusCard

South gate

S1
Offline7 waiting to send

Inside

15

In today

83

Out today

68

On duty

Hussam Issa

  • LPR
  • FACE
Open the gate console

Service gate

S2
Out of service
  • LPR

The visit window on the day’s rail

VisitWindow
06:0010:00 – 13:0020:00

Within the window · Now 10:08

06:0014:00 – 16:0020:00

Arrived early · Now 10:08

06:0008:00 – 09:3020:00

Outside the window · Now 10:08

The visit message as the system read it

ParsedMessage
Message from the internal app

Director’s office — internal app

Good morning, please admit Eng. Wassim Al-Khatib next Sunday at 10:00 am to visit the IT department; his host is Eng. Hani Al-Sheikh. He comes in his own car, 512834 Homs.

08:14

GuestDayTimeDepartmentHostVehicle

Declared equipment

EquipmentList

  • Laptop

    Serial number: DL-5420-8XK2

    Inside

  • Tool bag

    Left with him

  • External hard drive×2

    Serial number: WD-2TB-77310

    Stayed inside

  • Measuring device

    Left later

Category rules

CategoryRules

Standing pass

Carries a card

Technicians

Carries a cardNeeds an escortEquipment declared

Visitors

No cardNeeds an escortSensitive

Audit log integrity

ChainSeal

Chain intact

Every row is sealed and nothing was altered

Chain broken

A row whose seal does not match the one before — review it

Console clock

LiveClock

10:0800

2026-10-17

10:0800

2026-10-17

08

Frames

The frame each screen lives in: the back office with its sidebar, and the dark gate console.

The gate console — frame

ConsoleFrame
GateNorth gateN1Online

10:0800

2026-10-17

ع

Hold the card to the reader

or search by name or plate number

/

Eng. Wassim Al-Khatib

Employee on a temporary mission

Homs formation

سورياSYحمص512834

Entry allowed

A visit for today 10:00 – 13:00 · IT department

Needs an escort
LPR
UVSS
FACE
/SearchEnterAllowF8Allow despite warningEscDeny

Frames

AppShell

The back office is the frame you see around this page right now: a dark collapsible sidebar, a top bar with search, gate status and alerts, and the person menu — which, in the prototype, previews the screens as each role.