themx

About themx

themx is a curated catalog of web design trends and styles. Each theme includes visual previews, color palettes, typography recommendations, and key characteristics that define the style.

Use the prompt builder to describe your project, target users, tech stack, and desired components. The generated prompt includes exact style tokens, layout rules, interaction requirements, and library mappings. Copy it into your preferred coding assistant or download a design document.

How to Use

  1. Search by name or tag, or filter by category, design type, use case, and reference year
  2. Save favorites in this browser and select two themes to compare
  3. Open a theme and try its buttons, navigation, and form in desktop or mobile preview
  4. Describe your project and choose your framework, UI library, task, and components
  5. Add optional layout, effect, and color-mode layers to the base theme
  6. Include optional skill references and choose a UI prompt, document prompt, DESIGN.md, or AGENTS.md section
  7. Copy or download the output, and save or export the setup to use it again
  8. Choose a library mapping when downloading CSS or JSON tokens
  9. Download a design bundle with the prompt, documents, tokens, optional filter, and setup

Categories

  • Minimalist — Clean, whitespace-heavy, typography-focused
  • Bold — High contrast, thick borders, attention-grabbing
  • Elegant — Refined, luxurious, sophisticated effects
  • Playful — Fun, colorful, experimental layouts
  • Corporate — Professional, structured, widely adopted

Design Types

A visual style defines the overall appearance. A visual effect defines surface treatments such as blur and shadows. A layout pattern defines content arrangement. A color mode defines a palette. A design system defines component conventions.

You can combine these types. Optional layers apply in this order: layout pattern, visual effect, color mode. Each layer overrides values only in its scope. The base typography stays the same. Live previews and exports show the combined tokens. The sample preview is a component demonstration, not a complete implementation of every design system or effect.

Reference years are catalog labels for exploring styles. They do not identify when a style was invented. Favorites are saved locally in this browser.

Astra uses a space-themed dashboard composition with a single orbital diagram. Galaxy uses large display type and an asymmetric cosmic composition for portfolios and brand pages. Their orbital motion is optional and respects reduced motion.

Library mappings target Tailwind CSS 4 and daisyUI 5. shadcn/ui is available for Next.js and React (Vite). Previews offer inventory, product, and portfolio examples with custom controls, compiled daisyUI styles, or React shadcn/ui components. These are sample screens with local interactions.

Reference examples include runnable demos, desktop and mobile screenshots, recorded prompts, source, and browser checks. They show one agent-produced implementation that was corrected during verification. They are not a benchmark of AI models.

Supporting skill selections provide references for your coding agent; they do not install skills. Saved prompt setups stay in this browser.