The Webverse design system as drop-in CSS tokens and utility classes. Halftone dots, CMYK ghost shadows, comic-panel borders, spider-web motifs.
Pulled from the live brand running on coverturn.com.
<!-- The whole system in one line -->
<link rel="stylesheet" href="https://unpkg.com/@ishmaelmccalla/webverse/src/webverse.css" />
<h1 class="wv-cmyk-shadow">A headline that prints.</h1>
<div class="wv-panel wv-panel-skew-left">A comic-panel card.</div>
<button class="wv-button">Read my lease</button>A small, opinionated, drop-in CSS system that gives any page the Webverse aesthetic — comic-book printing meets editorial typography. Three files:
tokens.css— colour, typography, layout custom properties on:rootutilities.css— seven classes for the seven Webverse design elementswebverse.css— both at once
Plus index.js exports the same token values for JS/TS contexts (theme objects, CSS-in-JS).
The Webverse identity is built from seven repeatable design moves. Each ships as a class.
| Element | Class | What it does | |
|---|---|---|---|
| 1 | Halftone dots | .wv-halftone |
Ben-Day dot texture for backgrounds |
| 2 | CMYK misregistration | .wv-cmyk-shadow |
3-plate ghost shadow on headlines |
| 3 | Spider-web pattern | .wv-web-bg |
Subtle radial-conic web background |
| 4 | Comic panel border | .wv-panel |
3px ink stroke + offset hard shadow |
| 5 | Crosshatch texture | .wv-crosshatch |
Diagonal-pen texture |
| 6 | CMYK offset divider | .wv-cmyk-divider |
A 4-plate horizontal rule |
| 7 | Speed lines | .wv-speed-lines |
Repeating orange motion stripes |
Plus two extras:
.wv-button— the magnetic-glitch CTA with -1° rotation, hard teal shadow, hover lift.wv-section-dark— the deep-purple Webverse dark palette as a section background
git clone https://github.com/ishmaelmccalla/webverse.git
cd webverse
# That's it — it's pure CSS + JS. No build step.Or fetch the raw files via unpkg:
<link rel="stylesheet" href="https://unpkg.com/@ishmaelmccalla/webverse/src/webverse.css" />/* Colour: brand */
--wv-orange: #FF6B00; /* primary, CTAs, energy */
--wv-ink: #111111; /* text, premium */
--wv-teal: #00D4AA; /* accent, sparingly */
/* Colour: dark Webverse (use instead of flat black) */
--wv-void: #0a0520;
--wv-deep-purple: #150a30;
--wv-ink-purple: #1a0e3a;
/* Colour: CMYK ghost — ONLY as text-shadow, never UI */
--wv-ghost-pink: #FF1493;
--wv-ghost-cyan: #00E5FF;
/* Type */
--wv-font-display: 'Big Shoulders Display', system-ui, sans-serif;
--wv-font-body: 'Inter', system-ui, sans-serif;
--wv-font-ui: 'Space Grotesk', system-ui, sans-serif;Full list in src/tokens.css.
import { colors, typography } from '@ishmaelmccalla/webverse';
const theme = {
primary: colors.orange,
fontFamily: typography.display,
};I designed the Webverse from a blank page in 2026 as the brand for CoverTurn, the AI-native agency I founded. After applying it across two production sites, eight client demos, and a dozen marketing surfaces, the system locked. Open-sourcing it because the design moves transfer to anyone wanting comic-book-meets-editorial energy without rebuilding from scratch.
MIT · 2026 Ishmael McCalla