What UI Morphisms are included in this theme engine?

The engine includes full Light and Dark paired variants for Skeuomorphism (physical tactile realism & bevels), Neumorphism (extruded soft surfaces with opposing dual shadows), Glassmorphism 2.0 (frosted translucent panels with optical blur), Claymorphism (inflatable 3D squishy geometry with dual inner shadows), and Neo-Brutalism (bold pop colors with hard solid offset shadows).

How does the built-in Light and Dark mode pairing work?

Every morphism and theme belongs to a matched aesthetic family. Toggling between Light and Dark mode automatically activates the counterpart within that same family (e.g., Claymorphism Light to Claymorphism Dark, Neumorphism Light to Neumorphism Dark). In System mode, it tracks the user's OS prefers-color-scheme in real time.

How do I import these CSS themes via CDN?

Add a single stylesheet link: and activate any theme via .

Universal Theme Engine & Modular UI Studio — 26+ Pure CSS Morphisms & Developer Themes

touch_app

Buttons & Interactive Controls

Interactive Tokens

Form Controls & Inputs

Accessibility

Bento Grid & Information Architecture

Modular

Weekly Token Efficiency

98.4%

+14.2% from last cycle

Active Design Presets

22

Morphisms & Developer Themes

CSS Architecture Tier

Tier 3

Primitives → Semantic → Component

analytics

Live Telemetry & Component Activity

fiber_manual_record 99.98% Uptime

speed 14.2k req/sec verified_user Edge Guard Active memory 41% Buffer

rocket_launch

1-Line CDN Quick Start

Zero Dependencies

Drop all 22 theme presets and design token primitives into any web project, HTML page, or framework with zero build tools:

<!-- 1. Include Universal Theme Engine via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/North-Abyss/ui-themes@main/dist/universal-themes.min.css">

<!-- 2. Activate any of the 22 themes -->
<html data-theme="material3">

Works in Vanilla HTML, React, Vue, Svelte, Astro, Angular, and Next.js.

notifications

Status Badges & Alerts

Live Feedback

toll Active Token task_alt Build Passed hourglass_top High Quota error Intercepted

// Current active theme CSS binding
<html data-theme="material3">

developer_board

Custom Component Sandbox

Playground

Your Custom Component Appears Here

Use the UI Modular Studio to edit this live sandbox or any component on the page in real time!

Google Material 3