SystemSpecs
System v0.1

The SystemSpecs design system.

Tokens, brand, primitives, patterns. One system, three layers — re-skinnable across SystemSpecs Holdings subsidiaries with token swaps alone.

Section 01

Foundations.

Tokens — color, type, spacing, radius, motion.

Accent

accent.default

accent.default-hover

accent.emphasis

accent.subtle

Brand teals

brand.teal (deep)

brand.teal.light

brand.teal.pale

Sampled from the parent dot motif. Use accent-* in UI; these are for marks.

Extended palette

brand.forest

brand.forest.deep

brand.gold

brand.cream

Marketing surfaces and celebration moments. Sampled from the SystemSpecs ecosystem.

Surface

bg.canvas

bg.surface-raised

bg.surface-muted

bg.inverse

Text

text.primary

text.secondary

text.muted

Feedback

feedback.success

feedback.warning

feedback.danger

feedback.info

Typography

text-display-2xlInfrastructure
text-display-xlInfrastructure
text-display-lgInfrastructure
text-display-mdInfrastructure
text-heading-1Section heading
text-heading-2Section heading
text-heading-3Card title
text-body-lgLede paragraph
text-bodyBody paragraph
text-body-smSecondary body
text-captionCaption
text-overlineOverline

Plus Jakarta Sans drives display; Geist drives body; Source Serif 4 carries editorial pull-quotes and lede passages.

Spacing

1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px

Responsive scale

How tokens scale across breakpoints.

Mobile · 375

Display
36px
Section heading
24px
Body
16px
Section gap
96px

Tablet · 768

Display
44px
Section heading
30px
Body
18px
Section gap
128px

Desktop · 1280

Display
56px
Section heading
30px
Body
18px
Section gap
160px

The PageHeading title clamps to display-md on mobile, display-xl on tablet, display-2xl on desktop. Sub-tier sizes scale similarly.

Radius

sm

md

lg

xl

2xl

pill

Elevation

shadow-e1

shadow-e2

shadow-e3

shadow-e4

Motion

duration-instant
80ms
duration-fast
160ms
duration-base
220ms
duration-slow
360ms
duration-slower
520ms
Section 02

Brand.

Wordmark, mark, icons.

Wordmark

SystemSpecs
SystemSpecs

Mono — uses the white asset so the dot motif keeps its teal hues.

Dot mark

Icons

  • ArrowRight
  • ArrowUpRight
  • ChevronDown
  • Menu
  • Close
  • Check
  • Info
  • Alert
  • Lock
  • Building
  • Government
  • Bank
  • Network
  • Code
  • Card
  • Wallet
  • Document
  • Users
  • Award
  • Shield
  • LinkedIn
  • Twitter
  • Mail
  • Phone
Section 03

Primitives.

Buttons, fields, tabs, accordions, skeletons.

Button

Trailing arrows live inside their own circular chip, flush with the right inner padding. On hover the chip translates diagonally and lifts — internal kinetic tension without disturbing the surrounding layout.

<Button trailingIcon={<ArrowUpRight size={14} />}>Talk to sales</Button>
Default linkSubtleStandalone CTA

Card

Outline

Default surface.

Raised

Subtle elevation.

Flat

Inside tinted sections.

Field

We only contact about this enquiry.
Include country code.

Badge

NeutralAccentSuccessWarningDangerInfo

Tabs

Overview panel.

Accordion

Skeleton

Checkbox

Radio

Select

Tooltip

Hover or focus a trigger to surface a 12px caption tooltip. Sides cycle top/bottom/right/left depending on viewport room.

Dialog

Three sizes — 480/560/720px. Single 24px radius, no nested chrome. ESC + scrim-click + circular ghost close all dismiss.

Section 04

Patterns.

Composed assemblies of the primitives.

Globe

Cobe-powered. Drag to rotate; auto-rotates when idle.

Globe in context

Same asset, four surfaces. No backdrop pattern — the globe carries the visual itself.

Web hero · 16:9

SystemSpecs

Africa’s payment, government, and financial infrastructure.

Coverage across Nigerian financial centers.

Social card · 1.91:1

SystemSpecsEst. 1992

Africa’s payment, government & financial infrastructure.

systemspecs.com.ngLearn more

Banner · 728 × 90

SystemSpecs

Infrastructure that institutions trust

Learn more

Fixed 728×90 leaderboard. Static dotted globe for crisp rendering at 90px.

Newsletter · 600 wide

SystemSpecs

Quarterly notes from the infrastructure team.

What we shipped this quarter, in three minutes.

Read the issue

Background patterns

Three motion loops. Loop 01 ships six frozen frames for static surfaces (banners, social exports, email). Loops 02 and 03 are live-only.

Loop 01 · Diagonal sweep

live

Loop 02 · Dot ripple

live only

Loop 03 · Vertical drift

live only

Hero atmosphere · braille (reactive)

cursor-aware

The atmosphere that ships on the homepage hero. Move your cursor over the surface — the braille texture pushes away from the pointer.

Footer atmosphere · Loop 1 (reactive)

cursor-aware

The reactive Loop 1 sweep used inside the marketing footer. Same canvas physics as the hero atmosphere but warped to the footer’s espresso surface.

Team grid

Compact card for full-team grids. Use when 15+ people would make the leadership card feel disorganized.

Demola IgbalajobiSTSL

Demola Igbalajobi

MD, STSL

’Deremi AtandaRemita

’Deremi Atanda

MD, Remita

Udo NgeleHM

Udo Ngele

MD, HumanManager

Fela Bank-OlemohWAD

Fela Bank-Olemoh

MD, WhataDeal

Ahabue BorhaOps

Ahabue Borha

Operations

Anu OyeleyeEng

Anu Oyeleye

Engineering

Etereigho OzakpoRisk

Etereigho Ozakpo

Compliance

Leke OgunbanwoProduct

Leke Ogunbanwo

Product

Uche ObiofumaBanking

Uche Obiofuma

Banking

Kehinde LawansonBoard

Kehinde Lawanson

Director (Board)

Hero

A headline that names the position.

One sentence of proof — group lineage and scale.

Talk to salesView solutions

Proof bar

Proof, not promises

0 yrs

In Nigerian fintech

0+

Federal MDAs served

Tier-1

Banks integrated

0

Awards in 24 months

Solution card

Banking

Integration patterns and payment infrastructure for tier-1 Nigerian banks.

Proof

Tier-1 bank deployments in production

Explore

E-Government

TSA-adjacent infrastructure deployed across federal MDAs since the early 2000s.

Proof

Federal MDA track record

Explore

Community

White-label wallet infrastructure for cooperatives and schemes.

Proof

Cooperatives across multiple states

Explore

Enterprise Software

Custom development with dedicated teams.

Proof

Multi-year enterprise engagements

Explore

Product card

Pouchii

Pouchii

Digital wallet and aggregation API.

PROOF

Live with integration partners

Visit Pouchii →
FundACause

FundACause

Crowdfunding for Nigerian causes.

PROOF

Best Crowdfunding Platform 2022

Visit FundACause →
Monicenta

Monicenta

SaaS for cooperatives and contributory schemes.

PROOF

Operating with multiple cooperatives

Visit Monicenta →

Capability strip

Capability

What we build.

Thirty years inside Nigerian fintech and federal e-government. We build, run, and integrate the components below.

  • Virtual accounts on CBN-licensed institutions
  • Payment aggregation across categories
  • Federal e-budgeting and warranting
  • Identity, KYC, onboarding
  • Crowdfunding and contributory rails
  • Custom enterprise software

Group block

Group

Part of SystemSpecs — operating since 1992.

SystemSpecs

SystemSpecs Holdings Limited · Operating since 1992.

Leadership card

Dr. Ernest Ndukwe, OFR

Chairman, Board of Directors

Dr. Ernest Ndukwe, OFR

OFR · Telecoms policy

Dr. John Obaro

Founder & Group MD

Dr. John Obaro

Founder · 30+ yrs in fintech

Demola Igbalajobi

MD, STSL

Demola Igbalajobi

Chartered accountant · IBM-trained PM

’Deremi Atanda

MD, Remita Payment Services

’Deremi Atanda

25+ yrs digital finance

Insight card

Press

SystemSpecs Technology Solutions receives NECA Excellence Award.

NECA · 2024
Press

The 30-year fintech group quietly powering Nigeria's payment stack.

TechCabal · 2026
Case study

Integrating Pouchii's wallet API into a tier-1 bank in 9 weeks.

Case study · 2025

Segmented CTA

Pathways

Find the team that matches your buying motion.

Section header

What we build

Capability across rails, identity, and public sector.

Thirty years inside Nigerian fintech and federal e-government. The patterns below are how subsequent sections of every marketing page introduce themselves.

See all capabilities

Stat pill

Tier-1 banks14
F
I
R
Federal MDAs40+
Years live32

Capability block

Real-time payment rails

Direct integration with CBN-licensed switches and tier-1 commercial banks.

  • NIP, NEFT, and instant transfer rails
  • Virtual account orchestration
  • mTLS over HTTPS, signed requests

Identity & KYC

Layered identity orchestration over BVN, NIN, and documentary KYC.

  • BVN + NIN verification
  • Liveness + selfie match
  • Sanctions and PEP screening

Code sample

virtual-accounts.ts
import { client } from '@systemspecs/payments';

const account = await client.virtualAccounts.create({
  customerId: 'cus_01HX9YZ',
  bankCode: '011',
  // Optional metadata flows through to settlement reports.
  metadata: { reference: 'INV-2026-04-22' },
});

console.log(account.accountNumber); // → 9100000123
Issue a CBN-aligned virtual account against a customer record.

Timeline

  1. 1992

    Origin

    SystemSpecs founded.

    Nigerian software house built around enterprise payroll.

  2. 2003

    Payments

    Remita launches.

    Payment platform that would later carry the federal Treasury Single Account.

  3. 2012

    TSA

    TSA appointment.

    Selected as the federal Treasury Single Account collection rail.

  4. 2022

    Restructure

    Group restructure.

    Holding company formed; Technology Solutions Limited carved out as the build arm.

  5. Today

    Three subsidiaries, one platform.

    STSL builds. Remita runs. HumanManager and Whatadeal sit alongside as group ventures.

Newsletter CTA

Insights

Insights from the people building the rails.

A monthly note on payments, public-sector technology and the systems that move money in Africa. No noise.

One email a month. Unsubscribe in one click.

Form lives borderless on the canvas. Inline validation; success state replaces the form with a confirming caption.

Contact form

Banking enquiry

Audience-aware: extras shift per route (banking, government, fintech, community, enterprise, partners, press, careers). Submit is a stub here — the success state appears after a 600ms delay.

SystemSpecs

Live nav with the morphing hamburger, scroll-frost (tries to mount above 80px scroll), and pill-button right-rail.

Squircle dark surface with the reactive Loop 1 atmosphere. Move your cursor inside the footer to push the sweep.

Section 05

Motion & interactions.

Live animation surfaces — atmospheres, reveals, hover micro-motions.

Hero with reactive atmosphere

Cursor-aware atmosphere over the hero canvas.

Move the cursor across the hero. The braille texture pushes away from the pointer and the sweep tilts — same physics that ships on the live homepage.

Talk to salesExplore solutions

The default Hero ships with atmosphere on; atmosphereReactive wires the canvas to the cursor. Pages with a globe leave reactivity off (the visual already responds).

Reveal system

Card 1

Cascading entry.

Each card carries a --stagger index — IntersectionObserver flipsdata-revealed and the CSS transition fires with a 60ms-per-card delay.

Card 2

Cascading entry.

Each card carries a --stagger index — IntersectionObserver flipsdata-revealed and the CSS transition fires with a 60ms-per-card delay.

Card 3

Cascading entry.

Each card carries a --stagger index — IntersectionObserver flipsdata-revealed and the CSS transition fires with a 60ms-per-card delay.

Replay the reveals on this whole page without reloading. Useful for previewing entry choreography.

Hover micro-motions

Section 06

Page compositions.

How the components assemble into the routes that ship — abbreviated previews.

Developers strip

Developers

The API surface, in two minutes.

Issue a virtual account, watch a webhook, reconcile against a settlement file.

Open the docs
terminal
curl -X POST https://api.stsl.ng/v1/accounts \
  -H "Authorization: Bearer $STSL_KEY" \
  -d '{"customerId":"cus_01HX9YZ","bankCode":"011"}'

Contact strip

Contact

Talk to the banking team.

Tier-1 references, integration patterns, and procurement docs available after a short qualification.

hello@stsl.ng+234 (0)1 271 0511

Banking enquiry