Design System & Engineering Spec

CerVer Visual Language

An editorial, high-contrast design system adhering to the product standards of Linear, Vercel, and Stripe.

Color Tokens

Restrained Palette

Near-black background (#0A0A0B) with 1px border elevations and a single restrained emerald accent (#10B981) for verification trust.

Background Page

--bg-page

#0A0A0B

Surface Card

--surface-card

rgba(255, 255, 255, 0.035)

Border Subtle

--border-subtle

rgba(255, 255, 255, 0.08)

Border Hover

--border-hover

rgba(255, 255, 255, 0.16)

Primary Accent

--accent

#10B981

Text Primary

--text-primary

#FAFAFA (100%)

Text Secondary

--text-secondary

rgba(250, 250, 250, 0.60)

Text Tertiary

--text-tertiary

rgba(250, 250, 250, 0.40)

Typography System

Optical Type Scale & Ratios

Fluid clamp() sizing with Inter Tight (display), Inter (UI), JetBrains Mono (code/metrics), and Instrument Serif (editorial italic).

Hero H1clamp(2.75rem, 6vw, 5.5rem)Weight: 600Track: -0.04emLead: 1.02

Issue, verify, and monetize digital certificates.

Section H2clamp(2rem, 3.5vw, 3.25rem)Weight: 600Track: -0.03emLead: 1.1

Engineered for institutional scale.

Subsection H3clamp(1.25rem, 1.8vw, 1.75rem)Weight: 600Track: -0.02emLead: 1.25

Normalized Vector 0–1000 Canvas Designer

Card Title1.125rem (18px)Weight: 600Track: -0.01emLead: 1.35

Instant QR Code Verification

Body Large1.125rem (18px)Weight: 400Track: -0.01emLead: 1.7

Turnkey multi-tenant infrastructure for universities, training academies, and solo educators.

Body Base1.000rem (16px)Weight: 400Track: -0.005emLead: 1.65

Upload your student roster to batch issue hundreds of signed credentials simultaneously.

Small / Meta0.875rem (14px)Weight: 500Track: 0Lead: 1.5

SHA256: e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855

Eyebrow / Label0.750rem (12px)Weight: 600 (UPPERCASE)Track: 0.12emLead: 1.4

ARCHITECTURAL CAPABILITIES

Button Text0.9375rem (15px)Weight: 500Track: -0.005emLead: 1.0

Launch Institutional Workspace

Reusable Primitives

Buttons, Cards & Eyebrows

40px default height buttons with 10px radius, inner highlight on solid variants, 1px subtle borders, and accessible focus rings.

Button Variants

Button Sizes

Eyebrows & Badges

Static Label

Live Status Indicator

Valid ✓