Neomorphism Glass Neon

Vulppi UI

Design system built for the Vulppi ecosystem. Dark surfaces, neomorphic depth, glass overlays, and neon accents reserved for interaction.

Principles

Each visual layer has a clear function.

▣

Neomorphism

Volume, surface and tactile depth. The base of every component.

80%

◈

Glass

Depth, layer separation and floating panels. Never on every block.

15%

✦

Neon

Focus, interaction, energy and brand signature. Only where action exists.

Components

Browse by category.

Tokens

Foundation

Color palette, shadows, glow, blur, typography and motion.

View →

Buttons

Sprint 2

Primary, secondary, ghost, danger, icon-only. All interaction states.

View →

Inputs

Sprint 2

Text input, textarea, select, checkbox, radio, switch.

View →

Primitives

Sprint 3

Field, avatar, indicator and kbd. The smallest semantic building blocks.

View →

Cards

Sprint 2

Standard, glass, interactive, stats. Where all three styles meet.

View →

Badges & Chips

Sprint 2

Status indicators, tags and removable chips.

View →

Rules

What keeps this aesthetic from becoming noise.

Glow only where action exists — hover, focus, active, CTA.

Never blur surfaces smaller than 48px.

Neomorphism must be discrete — subtle relief, not dramatic.

Glass works on overlays and panels, not every block.

focus-visible must be functional above aesthetic.

Muted text must never fall below 4.5:1 contrast.

States matter more than variants — quality over quantity.