Design Glossary

A dictionary of curated visual tokens and techniques used throughout the showcase. Add them directly to your prompt cart.

Aesthetics

9 Terms

glassmorphism

Glassmorphism

A UI style featuring completely or partially transparent frosted glass-like panels, colorful gradient backgrounds, and subtle light borders.

"styled with modern Glassmorphism (using backdrop-filter blur, white semi-transparent backgrounds, and subtle glowing inset borders)"

brutalist

Brutalist

Raw, unpolished aesthetics often characterized by system fonts, high-contrast colors, visible borders, and absence of gradients or soft shadows.

"styled with a Brutalist aesthetic (using harsh thick borders, high contrast colors, system fonts, and removing all soft shadows/gradients)"

saas

Modern SaaS

Polished, functional, and highly legible. Often uses lots of whitespace, subtle grayscales, and highly refined typographic hierarchies (like Vercel or Linear).

"designed with a premium Modern SaaS look (like Vercel or Linear, using polished typography, ample whitespace, and subtle gray borders/shadows)"

cyberpunk

Cyberpunk

Neon colors (cyan, magenta, yellow) on dark backgrounds, glitch effects, scanlines, and high tech elements.

"styled with a Cyberpunk aesthetic (dark mode, neon cyan and magenta accents, glitch effects, terminal-like fonts)"

editorial

Editorial / Print

Inspired by magazines and newspapers. Features large elegant serif typography, dense columns, and carefully cropped full-bleed imagery.

"designed like a high-end Editorial Magazine (using elegant Serif fonts for headings, multi-column reading layouts, and sharp dividers)"

claymorphism

Claymorphism

Soft, inflated 3D elements that look like clay. Features double inner shadows (top light, bottom dark) and rounded corners.

"styled with Claymorphism (fluffy, pillowy 3D buttons using light inner shadows on the top-left and dark inner shadows on the bottom-right)"

neo-brutalism

Neo-Brutalism

Modern brutalism. Hard stark black shadows (no blur), solid bright background colors, and thick black borders on everything.

"styled with Neo-Brutalism (thick solid black borders, flat bright pastel colors, and harsh unblurred black drop shadows for depth)"

retro-terminal

Retro Terminal

DOS/CLI inspired. Pure black background, monospace bright green or amber text, ASCII art borders.

"styled like a Retro Terminal (pure black background, bright green monospace fonts, completely removing box shadows and curves)"

air-max

Airy & Minimal

Extreme minimalism taking cues from Swiss design. Massive negative space, zero borders, light grays, and perfect alignment.

"designed with extreme Airy Minimalism (massive padding/negative space, no visible borders, using layout and typography purely for structure)"

Layout Structures

7 Terms

Bento Grid bento

A layout system dividing the screen into asymmetric, rounded boxes (resembling a bento box) to organize distinct features or data.

Dashboard Sidebar sidebar

A classic application layout featuring a persistent left (or right) sidebar for navigation, with the main content area filling the remaining space.

Split Screen split-screen

Screen is split perfectly 50/50 vertically. Often used for login pages or comparing two distinct concepts.

Masonry Grid masonry

Items of varying heights are placed in columns without strict row alignment, minimizing vertical gaps (like Pinterest).

Horizontal Scroll horizontal-scroll

Content overflows horizontally instead of vertically. Great for timelines, galleries, or showcasing steps.

Z-Pattern Layout z-pattern

Guides the users eye in a Z-shape (left-to-right, diagonal down, left-to-right). Standard for marketing landing pages.

Off-canvas Drawer sidebar-drawer

A panel that slides in from the edge of the screen, overlaying the main content. Used for filters, details, or mobile menus.

Interactions

7 Terms

Spring Physics physics

Animations driven by physical properties (mass, stiffness, damping) rather than rigid bezier curves, creating a highly natural, organic feel.

Micro-interactions animated

Small, functional animations that provide visual feedback, such as a button shrinking slightly when clicked or icons transforming.

Parallax Scrolling parallax

Background elements move at a different speed than foreground elements while scrolling, creating an illusion of depth.

Magnetic Buttons magnetic-buttons

Buttons that slightly pull towards the users cursor when the mouse approaches, giving a sticky, tactile feel.

Scroll Reveal scroll-reveal

Elements smoothly fade and translate into view as they intersect the viewport during scrolling.

Custom Cursor Tracker cursor-tracker

A stylized element (e.g. a glowing orb or circle) that follows the users mouse instead of the default hardware cursor.

Seamless Page Transitions page-transition

Animating the exit of the current page and entry of the next page to prevent jarring flashes.

CSS Techniques

7 Terms

Fluid Typography fluid-typography

Using CSS clamp() to smoothly scale font sizes relative to the viewport width, eliminating the need for complex media queries.

Container Queries container-queries

Styling components based on the size of their parent container (using @container) rather than the entire viewport.

Backdrop Filter backdrop-filter

Applying graphical effects such as blur or color shifting to the area immediately behind an element (crucial for glassmorphism).

Text Gradients text-gradient

Using background-clip: text to mask a gradient strictly to the shape of typography.

The :has() Pseudo-class has-selector

The CSS parent selector. Styling a parent element based on its children, unlocking complex state changes without JS.

CSS Subgrid css-grid-subgrid

Allowing child elements to participate in the grid sizing defined by their parent, ensuring perfect alignment across nested components.

CSS Variables Theming css-variables-theme

Defining all colors and spacings as CSS variables (--var) scoped to the root or a data-theme attribute for instant theme switching.