Style · 14
Neumorphism Neumorphism = a soft extruded surface where the element, its highlight, and its shadow share one hue.
Soft extruded UI. Same hue for surface and shadow.
Preview North Player Widgets Settings Search tracks Add widget Soft extrude. Same hue. One extruded player. Controls inset. The page is not rubber.
Play
Same hue 3:12 Soft extrude 2:48 Inset peak 4:01 Open settings 1:20 EQ
Low Inset, same hue.
Level
Peak No black drop shadow.
Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
BUILD
- Build a complete Neumorphism player / widget product homepage. Not a card, not an isolated navbar, not a full-page rubber sheet, not a settings app, not tabs.
- Domain from Use on: Players and Widgets. Settings is a destination line, not this homepage.
STYLE
- Neumorphism: soft extrude, low contrast, same-hue shadows
- Ground #E8E8ED. Outer shadow #C8C8D0, highlight #FFFFFF. Cards 22px radius
- Type #1D1D1F. CTA is extruded same-hue, not a flat #0071E3 hero. Plus Jakarta Sans. No Inter
LAYOUT
- Container max-width 960px — a product page, not a 1440 marketing wall
- Finished player home: separate Player / Widgets / Settings links, search, Add widget
- Extrude only: top nav, the main player, inset EQ tiles, track list. Page background and footer stay flat #E8E8ED
SECTIONS
1. Player widget: "Soft extrude. Same hue." Cover block plus two inset level bars. CTA Play
2. Track list of four titles with times
3. Two inset widgets: EQ Low and Level Peak
4. Three-column quiet footer (not extruded): Player / Widgets / Legal
INTERACTION
- Hover insets the control (inner #C8C8D0 / #FFFFFF). transform: none. No 2px lift. No black drop-shadow
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- No black drop-shadow. No navy. Do not inflate the whole page into one extruded slab
- Do not output only a headline plus two empty cells
MOTION
- Press: shadow flips from raised to inset with scale(0.98), 160ms ease-out.
- Release: 200ms. Slower on the way out than in.
- No spring. Soft surfaces should not bounce.
- prefers-reduced-motion: shadow change only.
Preview Specimen
Neumorphism Soft extruded UI. Same hue for surface and shadow.
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Neumorphism card. Not a page, not a dashboard.
STYLE
- Same-hue surface #E8E8ED. Outer shadow #C8C8D0 and highlight #FFFFFF (8px 8px 16px / -8px -8px 16px)
- Card radius 22px. Title #1D1D1F, body #6E6E73. Continue uses the same #E8E8ED extrude, type #1D1D1F — not a flat blue pill as the hero material
LAYOUT
- One extruded card: kicker SPECIMEN, title, summary, one primary button
- No black drop-shadow under the card
INTERACTION
- Hover is inset press: transform none, inner shadows #C8C8D0 / #FFFFFF. Not a 2px lift
CONSTRAINTS
- Same hue only. No black drop-shadow float. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to same-hue extrude — not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Neumorphism button row only: Continue (solid extrude), Save, Skip. Not a card, not a page.
STYLE
- All three sit on #E8E8ED with 4px same-hue outer shadow #C8C8D0 and highlight #FFFFFF
- Type #1D1D1F. No flat #0071E3 fill as the material — the extrusion is the material
LAYOUT
- One horizontal row of extruded controls
INTERACTION
- Hover inset press, transform none. Not a lift
CONSTRAINTS
- Same-hue inner/outer shadows. No drop-shadow float, no purple, no Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button — do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Neumorphism site navbar only. Not tabs, not a page.
STYLE
- Soft extruded bar on #E8E8ED, same-hue 6px shadows. Wordmark North #1D1D1F
- Links #6E6E73. Open is an extruded control, not a flat blue fill
LAYOUT
- Single horizontal chrome. No panel
INTERACTION
- Open inset on hover. Bar does not lift
CONSTRAINTS
- Same hue #E8E8ED / #C8C8D0 / #FFFFFF. No black float, no purple, no Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation — not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Neumorphism Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Unselected tabs: extruded #E8E8ED chips. Selected tab is already inset (pressed)
- Panel: 22px radius, same-hue outer extrude, type #1D1D1F / #6E6E73
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open
INTERACTION
- Hover on unselected also goes inset, transform none — never a float. Selected stays inset
CONSTRAINTS
- Inset press, not lift 2px. Same hue only. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs — do not keep default shadcn look
What is Neumorphism? Neumorphism extrudes the surface. Both highlight and shadow must share the surface hue.
Elements Soft extrude Low contrast Same-hue shadow Put this word in the prompt.
Copy Prompt BUILD
- Build a complete Neumorphism player / widget product homepage. Not a card, not an isolated navbar, not a full-page rubber sheet, not a settings app, not tabs.
- Domain from Use on: Players and Widgets. Settings is a destination line, not this homepage.
STYLE
- Neumorphism: soft extrude, low contrast, same-hue shadows
- Ground #E8E8ED. Outer shadow #C8C8D0, highlight #FFFFFF. Cards 22px radius
- Type #1D1D1F. CTA is extruded same-hue, not a flat #0071E3 hero. Plus Jakarta Sans. No Inter
LAYOUT
- Container max-width 960px — a product page, not a 1440 marketing wall
- Finished player home: separate Player / Widgets / Settings links, search, Add widget
- Extrude only: top nav, the main player, inset EQ tiles, track list. Page background and footer stay flat #E8E8ED
SECTIONS
1. Player widget: "Soft extrude. Same hue." Cover block plus two inset level bars. CTA Play
2. Track list of four titles with times
3. Two inset widgets: EQ Low and Level Peak
4. Three-column quiet footer (not extruded): Player / Widgets / Legal
INTERACTION
- Hover insets the control (inner #C8C8D0 / #FFFFFF). transform: none. No 2px lift. No black drop-shadow
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- No black drop-shadow. No navy. Do not inflate the whole page into one extruded slab
- Do not output only a headline plus two empty cells
MOTION
- Press: shadow flips from raised to inset with scale(0.98), 160ms ease-out.
- Release: 200ms. Slower on the way out than in.
- No spring. Soft surfaces should not bounce.
- prefers-reduced-motion: shadow change only.