KeyLink design system

Internal

Polaris-pattern component kit built on --p-* design tokens and Tailwind v4.

Buttons

Badges & status

NeutralInfoSuccessAttentionWarningCritical

ActivePendingIn walletNot claimedSuspendedRevokedExpiredSimulated

Provider healthyDegradedOfflineNot configured

Room 304Main entranceGym

Banners

Prototype environment

Wallet passes and door readers are simulated. Nothing here touches real hardware.

Access key issued

The magic link was delivered to the guest's email.

Provider latency is elevated

The mock access provider is configured with 2000 ms of artificial latency.

This link has expired

Ask the front desk to resend your access pass.

This pass preview is simulated. A production Apple Wallet pass requires an Apple Developer certificate.

Interactive (modal · toast · popover)

Form controls

Guest name

The magic link is sent to this address.

Phone

Enter a valid phone number

Grant type

Valid fromEurope/Madrid

Valid untilEurope/Madrid

Send the link nowDelivered to the in-app outbox in this prototype.

Active credentials

+3 today

Attempts today

112

94% allowed

Denied today

Most common: outside schedule

Sparkline (7-day access attempts)

Tabs

IndexTable

Guest	Doors	Validity	Status
Alex Morgan	Room 304Gym	Jul 4 – Jul 7, 11:00	Active
Jamie Chen	Room 219	Jul 7 – Jul 9, 11:00	Pending
Riley Kim	Room 118	Jul 1 – Jul 5, 11:00	Revoked

3 access grants

DataTable (capability matrix excerpt)

Provider	Apple Wallet key	Google Wallet key	QR / barcode	API issue/revoke
Mock provider	Simulated	Simulated	Yes	Yes
dormakaba	Supported hotel systems	Check provider	Check	Check
Salto	Supported systems	Check provider	Check	Check

Description list

Guest: Alex Morgan
Room: 304
Valid until: Jul 7, 11:00 (Europe/Madrid)
Wallet: In wallet

Empty state

No access grants yet

Issue your first digital key and the guest will receive a secure magic link.

Skeletons

Collapsible

Troubleshooting

Open this link on your phone. Your pass becomes active at check-in and expires automatically at checkout.