Welcome Section

0a. Welcome Card

Full-width horizontal card at the top of the Home dashboard. Two-column grid: 376px left (greeting + subtitle + progress) and 1fr right (3-stat grid). No border-right on the left column. Left column uses no divider — only the stat columns use border-left.

PropertyTokenResolved
background--color-bg-surface#FFFFFF
border--border-default1px solid #E2E8F0
border-radius--radius-lg14px
box-shadow--shadow-sm0 2px 6px rgba(0,0,0,0.06)
padding--space-5 --space-820px 32px
grid-template-columns—376px 1fr
heading font-size--text-3xl24px — Bold
subtitle color--color-text-secondary#64748B
progress track bg--color-gray-200#E2E8F0
progress fill--color-success-green#10B981
progress height—6px
stat label size--text-2xs10px — Bold, uppercase, tracking-wider
stat value size--text-4xl32px — Bold, tabular-nums
stat meta size--text-sm12px — color-text-muted
stat col border-left--border-defaultfirst child: none
👋

Hey, Wojciech!

Here's a snapshot of your student loan portfolio.

$9,382 paid $19,380 remaining
Outstanding Balance $28,762 across 4 loans
Next Payment $0 COVID forbearance active
Interest Rate 4.53% weighted average

Buttons

2a. Primary Button

Main action button. Used for primary CTAs.

PropertyTokenResolved
padding--space-2 --space-58px 20px
height--space-1040px
background--color-brand-500#1A56DB
color--color-text-inverse#FFFFFF
border-radius--radius-md10px
font-size--text-base14px
font-weight--weight-semibold600
Default
Hover
Disabled

2b. Ghost Button

Secondary/outline button for secondary actions.

PropertyTokenResolved
background--color-bg-surface#FFFFFF
border--border-default1px solid #E2E8F0
color--color-text-primary#0A1929
height--space-1040px
border-radius--radius-md10px
Default
Hover

2c. btn-pay-primary (disabled) & btn-pay-ghost (active)

Payment card button pair rendered on a blue (brand gradient) background. btn-pay-primary is the "Pay Now" slot — shown in disabled state (gray bg) when no payment is due. btn-pay-ghost is the "Custom Pay" action — always enabled, brand-500 background with brand-400 border.

PropertyTokenResolved
btn-pay-primary bg (disabled)--color-gray-200#E2E8F0
btn-pay-primary color--color-text-muted#94A3B8
btn-pay-ghost bg--color-brand-500#1A56DB
btn-pay-ghost border1px solid --color-brand-400#4B78F5
btn-pay-ghost color--color-text-inverse#FFFFFF
height--space-1040px
border-radius--radius-md10px
font-weight--weight-semibold600

2e. Simulator Outline Button

Branded outline button linking to the loan simulator tool.

PropertyTokenResolved
background--color-bg-surface#FFFFFF
border--border-default1px solid #E2E8F0
color--color-brand-500#1A56DB
height--space-1040px
border-radius--radius-md10px
Default

Badges & Status

3a. Status Pills

Small uppercase pill badges indicating status. Used on loan rows and activity items.

PropertyTokenResolved
padding--space-1 --space-24px 8px
border-radius--radius-full9999px
font-size--text-2xs10px
font-weight--weight-bold700
letter-spacing--tracking-wider0.07em
Active
ACTIVE
Paid
PAID
Pending
PENDING
Overdue
OVERDUE
Received
RECEIVED

3b. Payment Card Badge ("On Track")

Status badge inside the payment gradient card indicating the account is current.

PropertyTokenResolved
bg--color-bg-success#ECFDF5
color--color-text-success#047857
padding--space-1 --space-24px 8px
border-radius--radius-full9999px
font-size--text-2xs10px
On Track

3c. Loan Number Badge

Numbered badge identifying each loan in the loans table.

PropertyTokenResolved
width/height--space-832px
border-radius--radius-sm6px
bg--color-bg-brand#EEF2FF
color--color-text-brand#1343B8
font-weight--weight-semibold600
font-size--text-sm12px
1 2 3

Inputs

4a. Search Input

Global search field in the topbar. Contains a leading magnifying glass icon.

PropertyTokenResolved
height--space-1040px
width—340px
padding0 --space-3 0 --space-80 12px 0 32px
background--color-bg-surface#FFFFFF
border--border-default1px solid #E2E8F0
border-radius--radius-sm6px
font-size--text-sm12px
Focus border--color-border-brand#1A56DB
Focus shadow—0 0 0 3px rgba(26,86,219,0.12)
Default
Focus

Panels & Cards

5a. Panel Shell

Base card container used throughout the dashboard. Has a header (title + optional action link) and content area.

PropertyTokenResolved
background--color-bg-surface#FFFFFF
border-radius--radius-md10px
box-shadow--shadow-xs0 1px 2px rgba(0,0,0,0.05)
header padding--space-4 --space-516px 20px
header border-bottom--border-default1px solid #E2E8F0
panel-title font-size--text-xl18px
panel-title color--color-brand-900#051550
panel-link color--color-brand-500#1A56DB
Recent Payments View All

5b. Payment Card

Main payment due card using the brand gradient. Two states: Action Required (warning alert pill) and Autopay Enabled (success pill). Buttons shown on a blue background swatch — btn-pay-primary (disabled gray) and btn-pay-ghost (active blue).

PropertyTokenResolved
background--gradient-brandlinear-gradient(29.56deg…)
border-radius--radius-md10px
padding--space-832px
width—400px
eyebrow font-size--text-2xs10px — Bold, uppercase, tracking-wider
eyebrow color—rgba(255,255,255,0.8)
amount font-size--text-5xl38px — Bold, tabular-nums
amount font-family--font-headingInter
badge (on track)--color-bg-success / --color-text-successpill: success colors
alert (action req)—rgba(255,255,255,0.12) bg, warning-100 icon
autopay-on bg—rgba(255,255,255,0.12), border rgba(255,255,255,0.2)
btn-pay-primary (disabled)--color-gray-200 / --color-text-mutedgray bg, muted text
btn-pay-ghost (active)--color-brand-500 / --color-brand-400brand bg, brand border
button height--space-1040px
button border-radius--radius-md10px
State 1 — Action Required
Total Payment Due
$0.00
On Track
Action Required: Auto Pay confirmation needed.
Next payment due: Feb 1, 2026
State 2 — Autopay Enabled
Total Payment Due
$0.00
On Track
Auto Pay is enabled. Next payment on Feb 1, 2026.
Payments suspended — COVID forbearance active

5c. Simulator Card

Loan simulator promotional card. Light blue background with TOOLS label, title, body, and CTA buttons.

PropertyTokenResolved
background--color-bg-brand#EEF2FF
border-radius--radius-md10px
padding--space-6 --space-724px 28px
title font-size--text-2xl20px
title color--color-gray-800#1E293B
body color--color-text-secondary#64748B
Tools
Loan Repayment Simulator

Explore how extra payments or different repayment plans could reduce your total interest and shorten your loan term.

Read More

Loan Rows

6a. Active Loan Row

A single loan entry in the My Loans panel. Shows numbered badge, loan name/APR, balance, and status pill.

PropertyTokenResolved
padding--space-3 --space-512px 20px
gap--space-312px
border-bottom--border-subtle1px solid #F1F5F9
badge bg--color-bg-brand#EEF2FF
badge color--color-text-brand#1343B8
badge size--space-832px
name font-size--text-base14px
name weight--weight-medium500
meta font-size--text-sm12px
meta color--color-text-secondary#64748B
amount font-size--text-base14px
Active Loans
Paid in Full
1
Direct Loan – Unsubsidized
3.73% APR
$4,500.00 ACTIVE
2
Federal Direct PLUS
6.28% APR
$8,320.00 ACTIVE
3
Private Student Loan
5.15% APR
$0.00 PAID

Activity Items

7a. Recent Payments Panel

Payment history panel with panel-title-h2 (blue ph-info icon) and three activity item variants: Pending, Received, and default (no status icon bg). Activity right: status pill on the left, amount on the right within a fixed 160px column.

PropertyTokenResolved
panel-title-h2 size--text-xl18px — Semibold, color-brand-900
info icon color--color-brand-500#1A56DB
activity padding--space-3 012px 0
activity border-bottom--border-subtle1px solid #F1F5F9
icon size--space-832px circle
pending icon bg--color-warning-50#FFFBEB
pending icon color--color-warning-500#D97706
received icon bg--color-success-50#ECFDF5
received icon color--color-success-500#059669
date font-size--text-sm12px — color-text-secondary
source font-size--text-base14px — Medium, color-text-primary
activity-right width—160px — pill left, amount right
amount font-size--text-base14px — Medium, tabular-nums
status font-size--text-2xs10px — Bold, uppercase, tracking-wider

Recent Payments

View All
Jan 1, 2022
Auto Pay
PENDING $1,000.00
Dec 1, 2021
Auto Pay
RECEIVED $1,000.00
Nov 1, 2021
Manual Pay
RECEIVED $500.00

Notifications

Notification Panel

Floating notification panel (400px wide). Header shows title + unread count. A "TODAY" section divider separates temporal groups. Unread items use brand-50 bg; read items use white. Unread dot sits inline with the timestamp. Actions are text links, not buttons. Source: Figma node 112-4404.

PropertyTokenResolved
panel shadow--shadow-lg0 8px 24px rgba(0,0,0,.12)
panel radius--radius-md10px
header padding--space-4 --space-616px 24px
panel title size--text-xl18px
panel title weight--weight-semibold600
count color--color-text-secondary#64748B
section header bg--color-bg-subtle#F1F5F9
section label size--text-xs12px — Bold, uppercase, tracking-wide
mark-all color--color-brand-500#1A56DB — Medium weight
item padding--space-4 --space-616px 24px
item gap--space-312px
unread item bg--color-bg-brand#EEF2FF
avatar size--space-936px — with semantic border
avatar (warning) bg--color-bg-warning#FFFBEB
avatar (warning) border--color-warning-100#FDE68A
avatar (danger) bg--color-bg-danger#FEF2F2
avatar (danger) border--color-danger-100#FECACA
content gap--space-14px
title size--text-base14px — Semibold, gray-900
time size--text-2xs10px — Regular, text-secondary
unread dot size—8px — inline with time, brand-500
body size--text-sm12px — Regular, text-secondary, leading-relaxed
action link size--text-xs12px — Semibold, brand-500 — text link, no border
Notifications 2
Today
Auto Pay Confirmation Required
Just now

Auto-Pay hasn't been re-confirmed since the COVID-19 suspension ended. Re-enable to avoid missing a payment.

Enable Auto-Pay →
National Emergency Forbearance Active
3 hrs ago

Your loans are under COVID-19 national emergency forbearance. Payments are suspended and no interest is accruing.

Confirm Auto Pay → Opt Out
IDR Renewal Due - Action Required
1 day ago

Your Income-Driven Repayment plan renewal is due. Failure to renew may result in significantly higher payments.

Renew at StudentAid.gov →

Icons

9a. Icon Reference

All Phosphor Icons used in the Neuron portal, shown at three sizes (24px, 20px, 16px). Library: @phosphor-icons/web@2.1.1. Syntax: <i class="ph ph-{name}"></i>

Icon class 24px 20px 16px
ph-house
24
20
16
ph-credit-card
ph-chart-donut
ph-files
ph-wrench
ph-lifebuoy
ph-bell
ph-chat-circle-dots
ph-user
ph-caret-down
ph-magnifying-glass
ph-info
ph-warning
ph-check-circle
ph-x
ph-sign-out
ph-caret-right
ph-clock-countdown