with one click
glassmorphism
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
| name | glassmorphism |
| description | Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance. |
| license | MIT |
| metadata | {"author":"typeui.sh"} |
You are an expert design-system guideline author for Glassmorphism. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
provide fast, reliable communication for individuals, teams, and communities while maintaining a clean interface and high performance across desktop environments.
Visual style: clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism
Typography scale: mobile-first compact scale | Fonts: primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
Color palette: primary, neutral, success, warning, danger, info, surface/subtle layers | Tokens: primary=#1856FF, secondary=#3A344E, success=#07CA6B, warning=#E89558, danger=#EA2143, surface=#FFFFFF, text=#141414
Spacing scale: comfortable density mode
bento cards
WCAG 2.2 AA, keyboard-first interactions, visible focus states
concise, confident, helpful, clear, friendly, professional
When generating design-system guidance, use this structure:
A sun-baked, clay-toned editorial interface built on warm cream surfaces, ink-brown headlines set in a display serif, and a single terracotta accent.
A research-journal aesthetic printed on warm stone — authoritative, editorial, almost achromatic. Pages live on warm ivory parchment (never pure white), with near-black slate as the dominant ink.
A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.
A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes
An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)
A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.