Sign-in screens

Every flow and state from the Taifa sign-in design, running live in desktop and phone frames. Use it to see what a person sees at each step, and which logo motion and toast go with it.

Read this first

These are design previews from the 13 October 2026 design export. They are not screenshots of the live sign-in UI.

Each flow is tagged:

• Partly built: the live UI already does the core of it, and the layout shown is the target.
• Design only: nothing like it is built yet.

Names, emails, phone numbers and amounts in the previews are made up.

How to use the previews

1. Each flow plays its own walkthrough. Press Pause to stop on a state.
2. Click a step dot, or a step in the list, to jump to that state.
3. Switch Light or Dark at the top. It changes every preview.
4. If you reduce motion, nothing autoplays and every logo shows the still mark. You can still step through each flow.

Play all Restart all

Light Dark

Desktop flows

Six flows at 1200 by 760, the size of a laptop browser window.

1a

Classic

Email first, finish with a passkey

Partly built

1/5 · Enter email Play Restart

Sign in · Taifa Identity

Taifa Identity Help

Sign inUse your Taifa Identity to continue to Huduma Portal

Email or phone

name@example.com

Continue

or

Sign in with passkey New to Taifa? Create an identity

When it appears

The default page when an app sends someone to Taifa Identity and this browser remembers no account.

In the live UI

The live sign-in page asks for a username or email with a password, then a verification code, or offers a passkey. The email-first layout is the design target.

1. 1 Enter emailThe card opens with the Rise mark. The field is focused and empty.
2. 2 TypingThe person types an email. Continue becomes active as they type.
3. 3 PasskeyThe browser asks for a passkey. Fingerprint plays while it waits for the device.
4. 4 VerifyingThe issuer checks the passkey response. Trace shows work in progress.
5. 5 Signed inCapture plays, a toast confirms, and the bar fills before the app takes over.

1b

Welcome back

Saved accounts, with the last-used one on top

Partly built

1/4 · Choose account Play Restart

Sign in · Taifa Identity

Welcome backChoose an account to continue to Huduma Portal

AW

Amina WanjiruLast used

a.wanjiru@taifa.go.kePasskey · 2 hours ago

AW

Amina WanjiruWork

amina.w@ministry.go.keEmail code · 3 days ago

Use another account

Not you? Manage accounts on this device

When it appears

When this browser remembers one or more Taifa accounts.

In the live UI

The live page offers "Continue as" when a Taifa session is already open in the browser. A list of saved accounts is design only.

1. 1 Choose accountRemembered accounts are listed. The last-used one is marked.
2. 2 SelectThe person picks the top account. A spinner replaces the chevron.
3. 3 PasskeyA greeting asks for the passkey used last time.
4. 4 VerifiedVerified plays with a welcome toast, then the app continues.

1c

Split brand

Method picker, then a phone approval with number matching

Design only

1/4 · Methods Play Restart

Sign in · Taifa Identity

Sign inChoose how you'd like to confirm it's you.

PasskeyLast used

Fingerprint, face or screen lock

Taifa appApprove on Pixel 8

Email a codea.w•••••@taifa.go.ke

Trouble signing in? Get help

When it appears

When an account has more than one sign-in method and the person chooses one.

In the live UI

Phone approval and number matching are not built. The live UI offers password with a code, or a passkey.

1. 1 MethodsMethods are listed strongest first, with the last-used one marked.
2. 2 Select appThe person chooses the Taifa app.
3. 3 Number matchA number shows here and on the phone. Dial waits. The request expires in two minutes.
4. 4 ApprovedThe phone approved. Capture plays and sign-in continues.

1d

QR handoff

Scan with the Taifa app, confirm on the phone

Design only

1/3 · Scan Play Restart

Sign in · Taifa Identity

Taifa Identity

Sign in with your phone

1. 1Open the Taifa app
2. 2Tap Scan to sign in
3. 3Point your camera at this code

Refreshes in 0:24Sign in another way

When it appears

When someone signs in on a shared or new computer using their phone.

In the live UI

QR sign-in and the Taifa phone app are not built.

1. 1 ScanA QR code with three short steps. The code refreshes every 30 seconds.
2. 2 ScannedThe phone scanned the code. The browser waits for Approve on the phone.
3. 3 ApprovedThis browser is now signed in as the person on the phone.

1e

SSO handoff

Partner app to Taifa, consent, and back

Partly built

1/4 · Redirect Play Restart

Sign in · Taifa Identity

HPHuduma Portal Sign in

HP

Taking you to Taifa IdentityHuduma Portal uses Taifa Identity to sign you in. Your password is never shared with the portal.

When it appears

When a partner app uses Taifa Identity to sign people in.

In the live UI

The redirect and return are how OIDC sign-in works today. A consent component exists, but the live flow does not show a consent step.

1. 1 RedirectThe app hands off to Taifa Identity. Federate links the two marks.
2. 2 ConsentThe app asks for details. Required items are ticked. Optional ones can stay off.
3. 3 ReturningTaifa sends the person back to the app.
4. 4 In appSigned in inside the app, with toasts for the sign-in and what was shared.

1f

Step-up check

Re-verify before sensitive data unlocks

Design only

1/4 · Locked Play Restart

Sign in · Taifa Identity

PayrollOctober 2026 · Ministry of Health

Net payKES 184,250

PAYEKES 41,830

BankKCB ••4417

Basic salary162,000.00

House allowance48,600.00

Commuter allowance16,000.00

Download payslip (PDF)Download

Confirm it's youPayslips need a fresh check. You last verified 3 hours ago.

Use passkeyLast usedUse another method

When it appears

When a signed-in person opens something sensitive and their last strong check is too old.

In the live UI

This screen is design only. The rule behind it is real: sensitive changes require recent strong authentication.

1. 1 LockedThe content is blurred behind a prompt. Locked shows why.
2. 2 PasskeyTouch the sensor. Fingerprint waits for the passkey.
3. 3 UnlockedUnlock plays. No new prompt for 15 minutes.
4. 4 RevealedThe content is shown and a badge marks the fresh check.

Phone flows

Four flows at 390 by 800, the size of a typical phone.

1g

Passkey first

Phone, native passkey sheet

Partly built

1/4 · Start Play Restart

9:41

Sign in to TaifaOne identity for government and partner services.

Last used on this phone Continue with passkey Other ways to sign in By continuing you agree to the Terms and Privacy notice.

When it appears

On a phone that already holds a passkey for this account.

In the live UI

Passkey sign-in exists in the live UI. The phone layout and system sheet styling are the design target.

1. 1 StartPasskey is the main button, marked as last used on this phone.
2. 2 Passkey sheetThe system passkey sheet slides up with Fingerprint.
3. 3 VerifyingThe sheet shows Verifying with Trace.
4. 4 DoneSigned in. Verified plays.

1h

One-time code

Phone, wrong code, then a match

Partly built

1/5 · Code sent Play Restart

9:41

Enter the codeWe sent a 6-digit code to +254 7•• ••• 412

Didn't get it? Resend in 0:42 Verify

When it appears

When a code is sent to the person and they mistype it once.

In the live UI

The live UI accepts a code from an authenticator app (TOTP). Codes sent by text message are not built.

1. 1 Code sentSix empty boxes. A toast says where the code went.
2. 2 TypingThe person types the code. The focused box is highlighted.
3. 3 Wrong codeThe boxes shake and turn red. A toast says how many tries are left.
4. 4 RetypingThe person enters the right code.
5. 5 VerifiedThe code matched. Verified plays.

1i

Continue as

Phone, one-tap sheet inside a partner app

Partly built

1/3 · Account sheet Play Restart

9:41

HPHuduma

Karibu

Renew driving licence

Track an application

Book an appointment

Sign in with Taifa Identity

Huduma will receive your name and verified email.

AW

Amina WanjiruLast used

a.wanjiru@taifa.go.ke

AW

Work accountamina.w@ministry.go.ke

Continue as Amina

When it appears

Inside a partner app, when the person already has a Taifa session on the device.

In the live UI

"Continue as" exists in the live UI for an open session. The in-app sheet is the design target.

1. 1 Account sheetA sheet lists accounts and says what the app will receive.
2. 2 Signing inThe button shows Trace while signing in.
3. 3 Signed inThe app greets the person by name.

1j

New device

Phone, approve from a trusted device

Design only

1/4 · ID number Play Restart

9:41

Sign in on a new deviceEnter your national ID number. We'll ask a device you trust to approve.

National ID number

This device: Safari on iPhone · Nairobi Continue

When it appears

When someone signs in on a device Taifa has not seen before.

In the live UI

Trusted-device approval is not built.

1. 1 ID numberThe person is asked for their national ID number.
2. 2 TypingThey type it. Continue becomes active.
3. 3 ApproveRequests go to their trusted devices. Dial waits.
4. 4 ApprovedApproved. The person is offered a passkey for next time.

Motion used in sign-in

The logo moves only at key moments:

• Rise when a screen first appears.
• Fingerprint while waiting for a passkey.
• Dial or Trace while waiting for a phone or a check.
• Denied on an error.
• Capture or Verified on success.

See every state on Logo motion, and every toast on Toasts.