Logo lockups
#logoHorizontal, vertical and emblem — on approved backgrounds
01
Identity & logo
The official mark from the identity guide (the Kingdom's map in earth strata with the golden lamp). We replaced the mountain logo from the early mockups with the approved mark; its grey adapts to light and dark surfaces while the gold stays untouched.
02
Color
The four approved colors (Teal Deep · Terracotta · Gold Warm · Sand) are extended into full UI scales with semantic tokens for light and dark. The guide's rule: 75% primary, 20% complementary, 5% highlight.
Color scales
#palette★ = the guide's exact value. Click any swatch to copy.
Teal
Primary — trust & depth
Terracotta
Actions & calls to action
Gold
Highlight only — max 5%
Sand
Warm surfaces & backgrounds
Stone
Corporate greys for text
Usage ratio & strata
#ratioThe strata bar doubles as a signature section divider
75% Teal
20%
5%
Semantic status colors
#semanticStatus never relies on color alone — each has an icon and text
Success / active
Warning / in review
Danger / rejected
Info / new
03
Typography
The guide specifies Lyon Arabic for headings and Diodrum Arabic for text — both licensed. The system is wired for them (they take over once license files are supplied); open substitutes are shown now: Noto Naskh Arabic and IBM Plex Sans Arabic.
Type scale
#type-scaleDisplay 2XL · 60
Our minerals, our future's energy
Display XL · 48
A professional community for mining
Display LG · 36
A membership for every stage
Display MD · 28
My recent requests
Title · 18 / 600
Professional details
Body · 16
Join a community of specialists, students and experts in mining and earth sciences, and grow your career.
Small · 14
At least 8 characters including letters and numbers.
04
Signature elements
Elements drawn from the guide that give the platform its own character: contour “transformation lines” taken from the logo's strata, the radial gradient (gold → terracotta → teal), the gold light seam, and the approved photo filters.
Transformation lines + gold seam
#contoursLines draw in on appear, then drift very slowly. Stops automatically with reduced-motion.
Together for a more prosperous future
Our wealth, made by its people
Gold dust — the chosen ambient effect
#ambientGold mineral particles drifting and glinting. Used on dark surfaces: hero, admin banner, side nav, membership card, next-step panel and success moment. Move the pointer over them.
Over photography
On deep teal
Calm for workspaces
Gradients
#gradientsEarth glow
Earth dusk
Sand paper
Photo filters
#photo-filtersFrom the guide's “Filters” page — they harmonize any photo with the brand. Current photos are temporary from Wikimedia Commons.
05
Motion language
Calm and confident: elements settle like layers of earth, never bounce playfully. Horizontal motion follows reading direction. Motion explains a change of state; decorative motion is very slow. Reduced-motion is always respected.
Motion lab
#motion-labInteraction moments
Durations — press play
fast · 160ms
Micro feedback: hover, select
base · 240ms
Menus, tabs, tooltips
slow · 400ms
Content entry, step transitions
deliberate · 700ms
Key moments: activation, success, card
Direction-aware transition (RTL/LTR)
STEP 1/3
Personal details
Springs
Principles to agree on
#motion-principles- Enter: fade + rise 12px with ease-out
- Exit is a third faster than enter
- Lists: 40–60ms stagger between items
- Numbers count up only on first appearance
- No bounce in forms and tables
- No motion that blocks or delays interaction
06
Buttons & actions
Primary (teal) for the main step, terracotta for join/renew/pay calls to action, gold reserved for exceptional moments.
Button variants
#buttonsPLT-04
Variants
Sizes & states
On dark surfaces
07
Form fields
Clear label, an example for sensitive fields, a positive error under the field wired to screen readers, and a counter for long text.
Text inputs
#inputsAPP-02IAM-01
From your profile
10 digits starting with 1 (citizen) or 2 (resident) — e.g. 1XXXXXXXXX
Complete the address, like name@domain.com
+966
We'll send a verification code
At least 8 characters with letters and numbers
52/300
Verified via Nafath
Selects, autocomplete & dates
#selectsReference data via autocomplete instead of free text, and a Gregorian picker showing Umm al-Qura Hijri under every day.
APP-02PRF-03PLT-01
Search registered employers or add a new one
Choices
#choicesAPP-02NTF-05SEC-08
Checkbox & consent
Preference switches
Single choice — list
Single choice — cards
View toggle & filter chips
OTP verification
#otpPaste anywhere, SMS autofill, a gentle shake on error, and a resend countdown.
IAM-03
Enter the code sent to +966 55 ••• 4567
2
7
4
1
Error summary & autosave
#form-errorsAfter a submit attempt: a summary linking to each field, focus moves to the first error. The autosave indicator always reassures.
APP-02APP-03
Saved · 3s ago
2 fields need your attention
Document upload
#uploadDrag & drop, camera, or attach an already-verified document from “My documents” in one tap. Try uploading or press the buttons.
APP-04PRF-05MOB-05
Drag & drop your file here, or
PDF, JPG, PNG · up to 10 MB
degree-certificate.pdf
320 KB · Uploaded
photo.jpg
Larger than 10 MB — try compressing the image
08
Navigation & shell
Full portal shell: public header, role-based side nav (member/staff), top bar with ⌘K global search, and indicators that always answer: where am I, what's done, what's next.
Public header
#public-headerTransparent over hero imagery and solid for inner pages
PUB-01
Portal shell: side nav + top bar
#portal-shellClick menu items to see the moving indicator. Click the search box or press ⌘K for global search.
HOM-05STF-02STF-04
Home
Press ⌘ K to find any member, request or invoice
Admin dashboard — control room
#admin-dashboardStaff side nav (permission-filtered) with the welcome banner: drifting site photo, gold dust reacting to the pointer, system health and today's numbers.
STF-01STF-02ADM-17
My work
Staff nav — expanded & collapsed
#staff-navCalm gold dust behind the nav — non-interactive so it never distracts from work
STF-02
Steppers
#steppersThe line fills in reading direction. A step with a problem is clearly marked.
APP-02APP-07
- Personal
- Professional
- Documents
- 4Review
- 5Submit
Vertical — for long forms
- 4
- 5
Tabs
Breadcrumbs, pagination, menus
#wayfindingPLT-04STF-07
Showing 17–24 of 64
FAQ accordion
#accordionPUB-12SUP-06
Right after your application is approved — you'll get a payment link and a task on your dashboard. Your membership activates as soon as payment succeeds.
09
Statuses & badges
One source for every status: same name, color and icon everywhere — tables, notifications and member pages.
Status dictionary
#status-badgesAPP-07LIF-07PLT-04
DraftSubmittedNewUnder reviewNeeds correctionAwaiting approvalAwaiting paymentActiveApprovedCompletedVerifiedIn graceExpiring soonOverdueRejectedSuspendedRevokedCancelledExpiredPendingPaidRefundedFailedRegisteredWaitlistedAttendedIn progressAwaiting your replyResolvedClosed
Sizes & dot style for dense tables
ActiveActiveActiveUnder reviewOverdue+3 CPDMP
10
Data display
KPI cards count up on appear, charts draw in progressively, and the table supports search, sort, bulk selection, columns and density.
KPI cards
#kpisSTF-01RPT-01
Approved this month
0
12%vs last month
In review
0
8%vs last week
Need correction
0
Overdue
0
Charts
#chartsRPT-01RPT-02
Requests by category
64
total
- Mining Practitioner28%
- Graduate22%
- Student20%
- Geology Practitioner18%
- Fellow12%
New requests — last 12 weeks
78%
14%
91%
96%
Work surface: table, kanban board & record sheet
#tableOne filtered list feeds everything: clickable insight strip, saved views (save your own), quick & advanced filters with live counts, collapsible grouping, sticky header and pinned columns, drag-to-resize and reorderable columns, Shift multi-sort, expandable row previews, inline reassignment, a drag-and-drop kanban board, live arrivals and keyboard shortcuts (press ?).
REV-02REV-04REV-10STF-07
Status breakdown26 in this view
Rows
Showing 1–8 of 26
Request timeline
#timelineWhat the member sees: understandable events with dates; the current one gently pulses.
APP-07REQ-009
Awaiting final approval
With the approval committee
Recommended for approval
Reviewer: Sara Al-Otaibi
You uploaded the requested document
A document correction was requested
The experience letter isn't stamped by the employer. Please upload a stamped copy.Application received
Avatars & groups
ناخعSO
سفمخ+2
Review team today
3 online · 12 requests distributed
- ساسارة العتيبي5 requests
- فافهد القحطاني4 requests
- مامنى الدوسري3 requests
2
days to decide
4h
first support reply
4.7
event rating
Lucide icons with a uniform stroke — aligned with the assets handoff's “simple line icons” direction
11
Feedback & UI states
Every UI state is designed explicitly: loading, empty, error, offline, session expiry, partial success. Confirmation only for consequential actions; toasts are never the only carrier of important errors.
Alerts & banners
#alertsPLT-04NTF-09
The applicant is notified automatically
When the status changes, an email and SMS are sent.
3 CPD hours approved
Added to your current cycle balance.
Your membership expires in 18 days
Renew before Sep 30 to keep your number and hours.
Payment couldn't be completed
The bank declined (insufficient funds). Nothing was charged.
Scheduled maintenance
Online payments unavailable Friday 2:00–4:00 AM.
You're offline — showing saved data. Changes will sync when you're back online.2 pending
Toasts
#toastsFor quick confirmations only, with undo where possible.
PLT-04
Dialogs & sheets
#overlaysREV-03REV-08IAM-12
Loading, empty & error states
#statesPLT-04
Skeleton ·
Empty
No upcoming registrations
Register for a course or event and it will appear here with reminders.
Error
Couldn't load certificates
A temporary error on our side. Your data is safe.
No results
Try other words or clear filters.
You don't have access to this page
If you believe this is a mistake, contact your administrator.
12
Platform components
Components specific to the Mining Association: membership card, categories, events, tasks, documents, payments, public verification, certificates and CPD. These are the moments users remember.
Digital membership card
#membership-cardMove the pointer over it for tilt and gold sheen; click to flip and reveal the signed QR (works offline).
LIF-02MOB-03PUB-09
Active member
MPMining Practitioner
Noura Ahmed Al-Ahmad
نورة أحمد الأحمد
Member no.
SMA-MP-004812
Since
2024/10
Valid until
2027/09/30
Verify membership
Scan to verify validity and status. The code works offline — it is digitally signed.
SMA-MP-004812
Last synced: today 9:41 AM
Card status
Membership category cards
#category-cardsThe five categories from the mockups, with a brand-filtered photo and compare option.
PUB-02PUB-03
Student
ST
Mining & earth-science students
Annual fee · Free
Mining Practitioner
MP
For professionals in mining operations
Annual fee · SAR 750
Professional Fellow
PF
For leaders and senior experts
Annual fee · SAR 1,500
Event & course cards
#event-cardsTRN-02PUB-07
10
Oct 2026
Applied geology fundamentals
Online
+6 CPD34 seats available
SAR 350 · free for members
02
Nov 2026
Future of Mining in the Kingdom forum
Riyadh, Saudi Arabia
+8 CPDOnly 6 seats left
SAR 1,200
15
Dec 2026
Safety in open-pit operations
Dammam
+4 CPD18 seats available
SAR 450
Task center & task cards
#tasksEverything waiting on the member, prioritized; each task opens the exact screen.
HOM-02APP-08
Complete a document in your application
UrgentThe reviewer asked for a stamped experience letter
Due in 12 days
Pay for the event
Your seat at the forum is held for 24 hours
Hold ends 10:00 PM
You need 12 more CPD hours
140 days left — 3 courses match your gap
Rate the “Mine safety” workshop
Required to issue your attendance certificate
Quick links
Request “next step” panel
#next-stepAnswers instantly: who owns it now? what do I do? when to expect a decision?
APP-07REQ-009
MEM-2026-004812
Mining Practitioner membership
Action needed from you
The reviewer requested a stamped experience letter. Upload it and review resumes immediately.
Deadline: 12 days
CRD-PMP-2026-00091
Credential — Professional Mining Engineer
With the Association — nothing needed from you
The credentials team is reviewing your file and references.
Expected decision: Oct 14 (3 working days)
Document cards (My documents)
#documentsPRF-05
IMG
National ID copy
Uploaded Mar 12 · 450 KB
Verified
PDF
BSc — Mining Engineering
Used in 2 requests
Verified
PDF
Professional license
No. 44-1290
VerifiedExpires in 21 days
PDF
Experience letter — Ma'aden
Awaiting staff check
Under review
Money & audit summaries
#paymentsAmount, VAT and total before redirecting to the gateway. Audit shows before/after values.
PAY-02SEC-05
Mining Practitioner fee (1 year)SAR 750.00
Early renewal −10%−SAR 75.00
VAT (15%)SAR 101.25
TotalSAR 776.25
After payment, your membership, card and invoice are issued instantly.
madaVISAMastercard Pay
Sara Al-Otaibi edited application data
2026/09/26 · 11:20
- Years of experience:
5→6 - Employer:
Manara→Ma'aden
CPD progress
#cpdApproved vs required, pending shown separately, and the split by activity type with caps.
CPD-06
0/30
approved hours
+3 pending
By activity type140 days left in cycle
- Association courses10
- Events & conferences6/12
- Coursera / Udemy4/8
- Self-study2/6
Renewal readiness
#renewalEvery blocker has a direct action — press them to watch the list complete and enable renew.
LIF-05CRD-08
Renewal readiness
2 items blocking renewal
2/4
Profile is up to date
Updated 2 months ago
CPD hours for this cycle
22 of 30 hours
Professional license is valid
Expires in 21 days
No outstanding balance
No pending invoices
Public verification
#verificationA clear result with minimum data — no ID, no mobile. A revoked certificate shows “revoked”, never “not found”.
PUB-09PUB-10CRD-07
Valid & active membership
N. Ahmed Al-Ahmad
Mining Practitioner · MP · valid until Sep 30, 2027
Checked at 2026/10/06 · 14:32
Digital certificate
#certificateBranded template with a unique non-sequential number and verification QR — designed for A4 landscape print.
CRD-06
The Mining Association certifies that
Noura Ahmed Al-Ahmad
has fulfilled the requirements of the professional credential
Professional Mining Engineer
Certificate no.: CERT-2026-7KQ4M9XD
Issued: 2026/10/06
Valid until: 2029/10/05
Success moment
#successReserved for big moments: submission, activation, credential issued.
APP-06LIF-01
Your application was submitted
MEM-2026-004812
Our team will review it in about 3 working days and keep you posted.