3D & Hyperrealism

Also called: Hyperrealistic UI, 3D UI, Render style

UI that looks rendered in a 3D studio: glossy spheres and slabs, thick bevelled buttons, deep perspective and dramatic spotlight on a dark stage.

“Rendered 3D”Soft & DimensionalEra: 2021 → todayBoldTechyLuxuryPlayful

Open full screen ↗

3d-hyperrealism / landingEN

3d-hyperrealism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg22pxRadius xl30pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

rendered 3D objectsglossy spheresdeep perspective tiltdramatic spotlightextruded headline typethick bevelled buttonsrim light and reflectionsdark product stage

3D & Hyperrealism treats the screen as a dark product stage. Objects are shaded like real renders — specular highlights, rim light, bevelled edges, reflections and long contact shadows — and the layout leans into depth with perspective tilts, floating spheres and extruded headline type. Buttons are thick glossy keys that physically travel down when pressed. Saturated orange, cyan and violet light sources cut through near-black, giving a cinematic, premium, game-like energy.

Best for

Game launches, esports and tournament hubs
Hardware and product reveal pages
Collectibles, NFTs and reward stores
Bold app onboarding moments

Avoid for

Text-heavy reading or documentation
Low-end devices and data-saver contexts
Calm healthcare or government services

✓ Do

Light every object from one cool key light (top-left, rgba(150,165,255,.28)) plus up to three rim lights in orange #FF7A1A, cyan #38BDF8, violet #C084FC
Give buttons real thickness: a 6px darker "side" shadow that collapses on press
Use perspective (900–1400px) on hero objects, the showcase panel and the donut; card tilt only on hover
Keep body text on flat dark panels so it stays readable, except the single featured orange render card, which takes dark #1A0A00 text

✕ Don't

Don’t tilt forms, tables or long text
Don’t use flat, unshaded colour blocks — every object needs a highlight and a shadow
Don’t animate many 3D objects at once without prefers-reduced-motion
Don’t use more than three rim-light colours besides the cool key light

Not to be confused with

Skeuomorphism →Skeuomorphism dresses flat panels in everyday materials like leather and paper; 3D & Hyperrealism renders glossy abstract objects with perspective and dramatic light.Claymorphism →Claymorphism is matte pastel clay on a light page; 3D & Hyperrealism is high-gloss, high-contrast and staged on near-black.3D Product Preview →3D Product Preview is an interaction pattern (turntable, hotspots) for one product; 3D & Hyperrealism is a visual style applied to the whole UI.

On mobile

Keep one hero render per screen (an onboarding orb or a featured card) and render everything else as bevelled dark slabs. Thick 3D buttons feel great under the thumb; drop perspective tilts and big blurred shadows on scrolling lists to save GPU.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinUnbounded · 600/700/800

The quick brown fox

Heading · ThaiKanit · 600/700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinSora · 400/500/600

Clear words make shared decisions.

Body · ThaiK2D · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Kanit has the same wide, heavy, squared-off stance as Unbounded for extruded headlines, and K2D’s geometric techno shapes match Sora in body copy.

Colour palette

Design tokens

Radius	`sm 10px · md 14px · lg 22px · xl 30px · pill 999px`
Border	`1px`
Shadow	`inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 0 rgba(0,0,0,0.45), 0 22px 44px -16px rgba(0,0,0,0.85)`
Display	`clamp(2.6rem, 6vw, 5.4rem)`
Motion	`200ms cubic-bezier(.2,.9,.25,1.2)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · 3D & Hyperrealism (3d-hyperrealism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Sora:wght@400;500;600&family=Kanit:wght@600;700;800&family=K2D:wght@400;500;600&display=swap
 */
:root {
  --radius: 22px;
  --background: #07080F;
  --foreground: #F3F5FF;
  --card: #14172A;
  --card-foreground: #F3F5FF;
  --popover: #14172A;
  --popover-foreground: #F3F5FF;
  --primary: #FF7A1A;
  --primary-foreground: #1A0A00;
  --secondary: #38BDF8;
  --secondary-foreground: #04131D;
  --muted: #0E1020;
  --muted-foreground: #A7AED4;
  --accent: #0E1020;
  --accent-foreground: #F3F5FF;
  --destructive: #FB7185;
  --border: rgba(255,255,255,0.12);
  --input: rgba(255,255,255,0.12);
  --ring: #FF7A1A;
  --chart-1: #FF7A1A;
  --chart-2: #38BDF8;
  --chart-3: #C084FC;
  --chart-4: #34D399;
  --chart-5: #FBBF24;
  --sidebar: #14172A;
  --sidebar-foreground: #F3F5FF;
  --sidebar-primary: #FF7A1A;
  --sidebar-primary-foreground: #1A0A00;
  --sidebar-accent: #0E1020;
  --sidebar-accent-foreground: #F3F5FF;
  --sidebar-border: rgba(255,255,255,0.12);
  --sidebar-ring: #FF7A1A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · 3D & Hyperrealism (3d-hyperrealism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Sora:wght@400;500;600&family=Kanit:wght@600;700;800&family=K2D:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #07080F;
  --color-surface: #14172A;
  --color-surface-2: #0E1020;
  --color-text: #F3F5FF;
  --color-text-muted: #A7AED4;
  --color-primary: #FF7A1A;
  --color-on-primary: #1A0A00;
  --color-secondary: #38BDF8;
  --color-on-secondary: #04131D;
  --color-accent: #C084FC;
  --color-border: rgba(255,255,255,0.12);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;
  --color-chart-1: #FF7A1A;
  --color-chart-2: #38BDF8;
  --color-chart-3: #C084FC;
  --color-chart-4: #34D399;
  --color-chart-5: #FBBF24;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;
  --shadow-sm: inset 0 1px 0 rgba(255,255,255,0.14), 0 6px 14px -4px rgba(0,0,0,0.7);
  --shadow-md: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -2px 0 rgba(0,0,0,0.45), 0 22px 44px -16px rgba(0,0,0,0.85);
  --shadow-lg: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -3px 0 rgba(0,0,0,0.5), 0 40px 80px -24px rgba(0,0,0,0.9);
  --font-heading: "Unbounded", "Kanit", system-ui, sans-serif;
  --font-body: "Sora", "K2D", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · 3D & Hyperrealism (3d-hyperrealism). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Unbounded:wght@600;700;800&family=Sora:wght@400;500;600&family=Kanit:wght@600;700;800&family=K2D:wght@400;500;600&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0314,
            0.0588
          ],
          "hex": "#07080f"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0902,
            0.1647
          ],
          "hex": "#14172a"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0627,
            0.1255
          ],
          "hex": "#0e1020"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9608,
            1
          ],
          "hex": "#f3f5ff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6549,
            0.6824,
            0.8314
          ],
          "hex": "#a7aed4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.102
          ],
          "hex": "#ff7a1a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0392,
            0
          ],
          "hex": "#1a0a00"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7412,
            0.9725
          ],
          "hex": "#38bdf8"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0157,
            0.0745,
            0.1137
          ],
          "hex": "#04131d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.5176,
            0.9882
          ],
          "hex": "#c084fc"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff",
          "alpha": 0.12
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.8275,
            0.6
          ],
          "hex": "#34d399"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.4431,
            0.5216
          ],
          "hex": "#fb7185"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0.102
          ],
          "hex": "#ff7a1a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7412,
            0.9725
          ],
          "hex": "#38bdf8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.5176,
            0.9882
          ],
          "hex": "#c084fc"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.8275,
            0.6
          ],
          "hex": "#34d399"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 30,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.7
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": -4,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.45
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -2,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.85
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 22,
            "unit": "px"
          },
          "blur": {
            "value": 44,
            "unit": "px"
          },
          "spread": {
            "value": -16,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.5
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": -3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.9
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 40,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": -24,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Unbounded",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Sora",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "K2D",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.9,
      0.25,
      1.2
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!