Templates

Production-ready screens

Copy a screen, paste it into your app, ship it. Every template is real components — themed by one brandprint, RTL-ready, light/dark.

Mode Direction

Onboarding

Welcome / Sign in

The very first screen: an ambient, gently-looping backdrop, the brand lockup, a bold mixed-weight promise, and the animated <npt-cta> primary action (a slow sheen sweep + nudging arrow) over a secondary "log in". Everything re-skins with the brand and pauses under reduced-motion.

Mobile · welcome / sign in
Neptune

Banking that
moves with you.

One account, every currency — send, spend and save across borders, beautifully.

Get started I already have an account 
<!-- Ambient backdrop + animated call to action -->
<div class="welcome">
  <!-- brand lockup + bold promise -->
  <npt-cta arrow>Get started</npt-cta>
  <npt-cta variant="tonal">I already have an account</npt-cta>
</div>

Get started

The first screen: an <npt-onboarding> hero — media, a mixed-weight headline, progress dots and a primary call to action — paired with a home screen on the new floating <npt-dock> with a selected card.

Mobile · onboarding + premium shell
Your money, everywhere you are.
Get started I already have an account

Your cards · tap to select

<npt-onboarding eyebrow="Neptune Odyssey" steps="3" active-step="0"
  supporting="Open an account in minutes.">
  <div slot="media"><!-- image / illustration --></div>
  <span slot="headline">Your money, <b>everywhere you are.</b></span>
  <npt-button slot="cta" variant="filled">Get started</npt-button>
</npt-onboarding>

<!-- Floating bottom navigation -->
<npt-dock>
  <npt-dock-item label="Home" active><npt-icon name="home"></npt-icon></npt-dock-item>
  <npt-dock-item label="Cards"><npt-icon name="card"></npt-icon></npt-dock-item>
  <npt-dock-item label="Pay"><npt-icon name="qr-code"></npt-icon></npt-dock-item>
  <npt-dock-item label="Profile"><npt-icon name="user"></npt-icon></npt-dock-item>
</npt-dock>

<!-- Selected card -->
<npt-card-art selected scheme="Visa" holder="LINA ATIYA" last4="4821" expiry="08/27"></npt-card-art>

Auth / Login

Brand lockup, a phone or IBAN field, then a one-time-code step — login flowing into OTP verification.

Sign-in → verify
N

Welcome back

Sign in to your account

Send code

Enter the 6-digit code sent to your phone

Verify & continue Resend code 
<!-- Auth / Login → OTP -->
<div class="scr-lockup">
  <span class="scr-mark">N</span>
  <div><h1>Welcome back</h1><p>Sign in to your account</p></div>
</div>

<npt-text-field label="Mobile number" value="+218 91 234 5678" placeholder="+218 .."></npt-text-field>
<npt-iban-field label="IBAN (optional)" country="LY" value="LY83002048000020100120361"></npt-iban-field>
<npt-button variant="filled">Send code</npt-button>

<npt-divider></npt-divider>

<p>Enter the 6-digit code sent to your phone</p>
<npt-otp-input length="6" value="3915"></npt-otp-input>
<npt-button variant="filled">Verify &amp; continue</npt-button>
<npt-button variant="text">Resend code</npt-button>

KYC / Onboarding

Identity capture and liveness placeholders, the account-tier limit meter, a progress stepper and a primary CTA.

Verify your identity

Verify your identity

We need a clear photo of your ID and a quick selfie.

National ID / passport

Tap to capture the front of your ID Front captured

Liveness selfie

Center your face
Your documents are encrypted and checked against the issuing authority. This usually takes under a minute. Continue 
<!-- KYC / Onboarding -->
<npt-stepper steps="Identity,Selfie,Review" active="1"></npt-stepper>

<h1>Verify your identity</h1>
<p>We need a clear photo of your ID and a quick selfie.</p>

<div class="scr-capture">
  <npt-icon name="card-add" size="30"></npt-icon>
  <span>Tap to capture the front of your ID</span>
  <npt-status-chip status="success">Front captured</npt-status-chip>
</div>

<div class="scr-capture selfie">
  <npt-icon name="face-id" size="30"></npt-icon>
  <span>Center your face</span>
</div>

<npt-limit-meter label="Account tier" value="40" amount="Tier 2 of 3"></npt-limit-meter>
<npt-alert tone="info" title="Why we ask">Your documents are encrypted…</npt-alert>
<npt-button variant="filled">Continue</npt-button>

Banking app

Retail dashboard

The home screen: app bar, a hero balance, quick actions, two metric tiles with a sparkline, a transactions list and bottom navigation.

Mobile · home
Recent activity See all 
<!-- Retail dashboard (mobile) -->
<npt-app-bar title="Good morning, Sami">
  <npt-icon-button slot="leading" label="Profile">
    <npt-avatar initials="SA" size="sm" label="Sami"></npt-avatar>
  </npt-icon-button>
  <npt-icon-button slot="trailing" variant="tonal" label="Search">
    <npt-icon name="qr-code" size="20"></npt-icon>
  </npt-icon-button>
</npt-app-bar>

<npt-balance-card hero label="Available balance" amount="12,480.50" currency="LYD" account="•••• 4821"></npt-balance-card>

<npt-quick-actions style="--npt-quick-actions-cols:4">
  <npt-quick-action label="Send"><npt-icon slot="icon" name="arrow-right" size="24"></npt-icon></npt-quick-action>
  <npt-quick-action label="Top up"><npt-icon slot="icon" name="cash-stack" size="24"></npt-icon></npt-quick-action>
  <npt-quick-action label="Pay"><npt-icon slot="icon" name="qr-code" size="24"></npt-icon></npt-quick-action>
  <npt-quick-action label="Swap"><npt-icon slot="icon" name="swap-exchange" size="24"></npt-icon></npt-quick-action>
</npt-quick-actions>

<npt-stat-card label="Spending" value="1,940" unit="LYD" delta="-8.2%">
  <npt-sparkline slot="chart" points="8,6,7,5,6,4,3"></npt-sparkline>
</npt-stat-card>

<npt-transaction-row title="Salary" subtitle="Today · Transfer" amount="+3,200.00" currency="LYD" credit></npt-transaction-row>
<npt-transaction-row title="Coffee Bar" subtitle="Yesterday · Card" amount="-4.50" currency="LYD"></npt-transaction-row>

<npt-nav-bar>
  <npt-nav-item label="Home" active><npt-icon name="chart-line" size="22"></npt-icon></npt-nav-item>
  <npt-nav-item label="Cards"><npt-icon name="card-add" size="22"></npt-icon></npt-nav-item>
  <npt-nav-item label="Pay"><npt-icon name="qr-code" size="22"></npt-icon></npt-nav-item>
  <npt-nav-item label="More"><npt-icon name="more-horizontal" size="22"></npt-icon></npt-nav-item>
</npt-nav-bar>

Cards

A swipeable card carousel (the selected card carries an accent ring), freeze/limits controls, a spend meter, the saved-cards list with scheme brand marks, and an add-card tile.

Mobile · cards
Your cards

Saved cards

Add a new card 
<!-- Cards -->
<npt-card-art variant="virtual" holder="SAMI A. NOURI" last4="4821" expiry="08/29" scheme="VISA">
  <span slot="brand"><npt-brand-mark name="visa" height="22"></npt-brand-mark></span>
</npt-card-art>

<npt-card-controls></npt-card-controls>
<npt-limit-meter label="Monthly card spend" value="62" amount="620 / 1,000 LYD"></npt-limit-meter>

<npt-card-row interactive label="Everyday Visa" last4="4821" scheme="VISA">
  <span slot="brand"><npt-brand-mark name="visa" height="20"></npt-brand-mark></span>
</npt-card-row>
<npt-card-row interactive label="Savings Mastercard" last4="2207" scheme="MASTERCARD">
  <span slot="brand"><npt-brand-mark name="mastercard" height="20"></npt-brand-mark></span>
</npt-card-row>

<npt-add-card>Add a new card</npt-add-card>

<!-- Or build the brand mark in JS: -->
<script>el.innerHTML = Neptune.brandMarkSvg("visa", { height: 20 });</script>

Transfer flow

Three stages — Amount, Review, Done — with the amount input, a method row and beneficiary tile, the review summary with a total, and a success hero.

Mobile · send money

You send

To

Method

Review transfer

Review & confirm

Transfers can't be reversed once sent.
Back Confirm & send
Done View receipt 
<!-- Transfer flow: Amount → Review → Done -->

<!-- 1 · Amount -->
<npt-stepper steps="Amount,Review,Done" active="0"></npt-stepper>
<npt-amount-input currency="LYD" value="1250.00"></npt-amount-input>
<npt-beneficiary-tile name="Mona Karim" account="•••• 4821" favorite></npt-beneficiary-tile>
<npt-method-row title="Instant transfer" subtitle="Arrives in seconds" recommended>
  <span slot="icon"><npt-icon name="swap-exchange" size="18"></npt-icon></span>
</npt-method-row>

<!-- 2 · Review -->
<npt-stepper steps="Amount,Review,Done" active="1"></npt-stepper>
<npt-transfer-review
  rows='[{"label":"To","value":"Mona Karim"},{"label":"Amount","value":"1,250.00 LYD"},{"label":"Fee","value":"0.00 LYD"}]'
  total="1,250.00" currency="LYD" total-label="Total to pay"></npt-transfer-review>

<!-- 3 · Done -->
<npt-stepper steps="Amount,Review,Done" active="2"></npt-stepper>
<npt-success title="Transfer sent" message="1,250.00 LYD is on its way to Mona Karim.">
  <npt-button slot="actions" variant="filled">Done</npt-button>
  <npt-button slot="actions" variant="text">View receipt</npt-button>
</npt-success>

Wallet home

A payment-led wallet: balance, Add money / Send / Request actions, recent merchants, a scan-to-pay panel and a reward voucher.

Mobile · wallet
Wallet

Recent

Scan to pay 5% back on your next 3 wallet payments. 
<!-- Wallet home (payment-led) -->
<npt-balance-card hero label="Wallet balance" amount="845.20" currency="LYD"></npt-balance-card>

<npt-quick-actions style="--npt-quick-actions-cols:3">
  <npt-quick-action label="Add money"><npt-icon slot="icon" name="cash-stack" size="24"></npt-icon></npt-quick-action>
  <npt-quick-action label="Send"><npt-icon slot="icon" name="arrow-right" size="24"></npt-icon></npt-quick-action>
  <npt-quick-action label="Request"><npt-icon slot="icon" name="arrow-left" size="24"></npt-icon></npt-quick-action>
</npt-quick-actions>

<npt-merchant-row name="Corner Grocery" category="Groceries" amount="-42.00" currency="LYD" time="14:32"></npt-merchant-row>
<npt-merchant-row name="Refund · Marketplace" category="Shopping" amount="+18.00" currency="LYD" time="Yest." pending></npt-merchant-row>

<npt-qr-pay amount="42.00" currency="LYD" merchant="Scan a merchant code to pay">
  <span slot="qr"><npt-icon name="qr-code" size="120"></npt-icon></span>
  <npt-button slot="action" variant="filled">Scan to pay</npt-button>
</npt-qr-pay>

<npt-voucher-card title="Cashback reward" value="−5%" code="WALLET5" expiry="Exp 31 Dec">
  5% back on your next 3 wallet payments.
</npt-voucher-card>

Corporate

Corporate approvals (web)

A desktop console: side navigation, a page header, the maker-checker approvals queue, a bulk-payment batch with required approvals, and an audit trail.

Web · back office
console.neptune.ly/approvals
3
Filters Approve all

Pending batch

Submit batch

Audit trail

<!-- Corporate approvals (web) -->
<npt-side-nav>
  <npt-side-nav-item label="Approvals" active>
    <span slot="icon"><npt-icon name="success-check" size="20"></npt-icon></span>
    <npt-badge slot="leading" tone="primary">3</npt-badge>
  </npt-side-nav-item>
  <npt-side-nav-item label="Payments">…</npt-side-nav-item>
</npt-side-nav>

<npt-page-header title="Approvals" subtitle="Maker-checker queue · 3 awaiting your decision">
  <npt-button slot="actions" variant="tonal">Filters</npt-button>
  <npt-button slot="actions" variant="filled">Approve all</npt-button>
</npt-page-header>

<npt-approval-item title="Vendor payment — Atlas Supplies" amount="48,200.00" currency="LYD"
  maker="Made by Omar F." status="pending"></npt-approval-item>

<npt-batch-card filename="payroll-jun.csv" totalamount="1,204,800.00" currency="LYD"
  payeecount="312" requiredapprovals="2" validated="308" warnings="3" errors="1">
  <npt-button slot="action" variant="filled">Submit batch</npt-button>
</npt-batch-card>

<npt-audit-row actor="Layla B." action="approved payment" target="#PAY-3192" time="14:02"></npt-audit-row>