Uverus Design System

Colour

All v1 products use a warm neutral base. The brand accent colour is product-specific and overrides --brand and --brand-2 per product.

--ink

#111110

--ink-2

#2B2A26

--muted

#7C796F

--line

#E5E2DA

--stone

#D7D1C2

--bone

#FAFAF7

--bone-2

#F2F1ED

--paper

#FFFFFF

--green

#3C7D63

--brand

per-product

Token	Value	Usage
--ink	#111110	Primary text, dark backgrounds, dark buttons
--ink-2	#2B2A26	Secondary text, hover states on dark elements
--muted	#7C796F	Captions, labels, placeholder text, icons
--line	#E5E2DA	Borders, dividers, input outlines
--bone	#FAFAF7	Page background, light button fill on dark surfaces
--bone-2	#F2F1ED	Subtle card surface, nav link hover
--paper	#FFFFFF	Card background, form fields, modals
--green	#3C7D63	Success states, positive indicators
--brand	per-product	Primary accent — each product overrides this token

Brand overrides by product: Uverus (corporate), Banking, Pay, and Payments all use #FF3333. Uverus Health uses #D94040 (deeper crimson). Override --brand and --brand-2 in the product CSS root.

Typography

Three typefaces. Geist handles all UI text; Instrument Serif provides display-level serif accents; Geist Mono for mono labels and code.

--font-sans
Geist

The quick brown fox

--font-display
Instrument Serif

The quick brown fox

--font-mono
Geist Mono

The quick brown fox 01234

Hero
clamp(40–72px)
fw 600

Hero heading

H1
clamp(32–60px)
fw 600

Page heading

H2
clamp(24–40px)
fw 400

Section heading

Lead
clamp(16–18px)

Lead paragraph — slightly larger body text for subheadings and hero descriptions.

Body — 15px

Regular body copy. Default size across all products, line-height 1.65, font-sans.

Small — 14px

Small text for labels, captions, nav links, and secondary UI.

Mono label

Uppercase mono label

Serif italic accent

Build something great.

Layout

All products use a shared container and responsive padding. Max-width is the same across all sites.

Token / Class	Value	Notes
--max-w	1240px	Maximum content width — applies to .wrap and all constrained containers
--px (desktop)	40px	Horizontal padding on .wrap at > 640px
--px (tablet)	24px	Override at max-width: 860px
--px (mobile)	20px	Override at max-width: 540px
.wrap	max-width: 1240px; margin: 0 auto; padding: 0 40px	Standard page content wrapper
--r-md	8px	Button and input border-radius
--r-xl	16px	Card border-radius
--r-2xl	24px	Large card / modal border-radius

Components

All components are pure CSS classes from components.css. No JavaScript dependencies.

Buttons — border-radius 8px, height 38px default

.btn-dark .btn-outline .btn-ghost .btn-brand

Small Small outline Small ghost

Large dark Large outline

HTML

<!-- Primary -->
<a class="btn btn-dark" href="...">Get started</a>

<!-- On dark background -->
<a class="btn btn-bone" href="...">Get started</a>
<a class="btn btn-ghost-white" href="...">Learn more</a>

<!-- Size modifiers: .btn-sm, .btn-lg -->

Eyebrow — 28px line + uppercase mono text

For everyday life

Payment infrastructure

HTML

<!-- HTML / plain sites -->
<div class="section-eyebrow mono-label">For everyday life</div>

<!-- React / JSX -->
<div className="eyebrow">For everyday life</div>

<!-- CSS: ::before draws the 28px horizontal line -->

Cards

.card-border

Feature card

Bordered card on paper background. Default for features, pricing, content.

.card-elevated

Elevated card

Adds box-shadow. For testimonials, call-outs, highlights.

Dark section — full-bleed CTA pattern

Get started today

Ready to build on Uverus?

All products use this pattern for their bottom CTA and footer sections.

.btn-bone .btn-ghost-white

HTML pattern

<section style="background: var(--ink);">
  <div class="wrap">
    <!-- eyebrow, heading, description -->
    <a class="btn btn-bone btn-lg">Primary CTA</a>
    <a class="btn btn-ghost-white btn-lg">Secondary</a>
  </div>
</section>

Patterns

Recurring structural patterns shared across all Uverus product sites.

Navigation — sticky, 3-column grid, bone/88% backdrop

Detail	Value
Height	60px
Background	rgba(250,250,247,0.88) + backdrop-filter blur(14px)
Layout	3-column grid: brand left · nav links center · CTAs right
Border	border-bottom: 1px solid var(--line)
Nav link active/hover	color var(--ink), background var(--bone-2), border-radius 6px

Footer — dark, 3-column grid + bottom bar

Detail	Value
Background	var(--ink)
Main grid	grid-template-columns: 2fr 1fr 1fr; padding: 56px 40px 40px
Brand text colour	rgba(250,250,247,0.9)
Tagline colour	rgba(250,250,247,0.35)
Column heading	font-mono 10px / rgba(250,250,247,0.3)
Link colour	rgba(250,250,247,0.45) → rgba(250,250,247,0.9) on hover
Bottom bar divider	border-top: 1px solid rgba(250,250,247,0.08)
Copyright + attribution	font-mono 11px / rgba(250,250,247,0.25)
Attribution format	Uverus Technologies · Abuja, Nigeria — only "Uverus Technologies" is a link

Section eyebrow — line + mono label pattern

Detail	Value
Line width	28px
Line height	1px
Line colour	currentColor (inherits from text)
Text	font-mono, 11px, letter-spacing 0.1em, uppercase
Text colour (light bg)	var(--muted)
Text colour (dark bg)	rgba(250,250,247,0.45)
Gap between line and text	12px

CSS files

Three files, composable. Import in order: tokens → base → components.

File	Contents
tokens.css	All CSS custom properties: colour tokens, typography variables, type scale (clamp values), spacing, radii, shadows, layout (--max-w, --px), easing
base.css	Reset, body defaults, .wrap layout helper, section utilities (.section, .section-sm, .section-lg), type utilities (.text-hero, .text-h1, .text-h2, .text-h3, .text-lead, .mono-label, .serif-accent), eyebrow pattern (.eyebrow, .section-eyebrow)
components.css	Navigation (.site-nav, .nav-inner, .brand, .nav-links, .nav-ctas, mobile drawer), buttons (.btn, .btn-dark, .btn-outline, .btn-ghost, .btn-brand, .btn-bone, .btn-ghost-white, size modifiers), cards (.card, .card-border, .card-elevated), tags (.page-tag, .badge), forms (.form-field, .form-input, .form-label, .form-textarea, .form-select, .form-submit), dark section (.section-dark), footer (.site-footer, .footer-main, .footer-bottom, .footer-copy)

Import order (HTML)

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="components.css">
<!-- Then override --brand / --brand-2 for your product -->