This is Inspo
The best websites, handpicked weekly. Only the exceptional ones make it in.
Everything you need to find better ideas and build websites that stand out.
Go find the details that make your next project stand out. We'll keep adding new ones every week.
The best websites, handpicked weekly. Only the exceptional ones make it in.
Press F anytime. Filter by element, section, interaction, or industry. Combine filters to narrow things down.
Real transitions, buttons, and sections as paste-ready code. The details that make sites unforgettable.
Copy for AI gives ChatGPT or Claude everything they need. Prefer to build it yourself? Get Code opens the guide.
Discover 334+ examples from real websites.
Couldn't load more items. Refresh the page or sign in again.
One great detail is all it takes to change a project. Find yours. New ones added every week.
The goal isn't to copy what you see. It's to train your eye, find better ideas faster, and make stronger design decisions when you start your next project.
334+ handpicked examples of brutalist website design from real production websites, with layouts, typography, animation and interaction details organized so you can compare approaches fast.
Open several examples and compare the decisions that repeat. The patterns that survive different brands and layouts are usually the ones worth adapting to your own project.
The more exceptional interfaces you study, the easier it becomes to recognize the spacing, hierarchy, motion and interaction choices that make a website feel considered.
Over time, those decisions become instinct, so you can move from a blank page to a strong direction faster.
Full-site galleries are useful when you need broad direction. But finding one strong navigation, footer or transition means opening and scanning site after site.
Details organizes the exact parts, so you can compare relevant approaches in minutes instead of searching for hours.
Yes, as references, not templates. Study what makes an idea work, combine it with other references, and adapt it to the project's own content and brand.
Great work is not copied from one source. It is assembled from many good decisions.
Probably. One useful layout or interaction can save hours of searching and help turn an average project into one that feels considered.
Pro gives you the full library and everything added each week.
Add to board
Manage the identity connected to your Details account.
Permanently remove your Details account and its associated data.
Review your personal plan and any Team access attached to your account.
Browse the latest Details releases with Starter access.
Manage shared access, seats, and the people you work with.
Invite teammates to save inspiration together, share boards, and add comments in one workspace.
Handpicked from the most original, high-end design on the web. Now available directly to your AI.
See how it worksTell your AI what you’re working on and get relevant, handpicked references.
Explore, refine and choose the idea that fits your project.
Let your AI turn the direction you chose into something built for your project.
Choose your client and we'll show you exactly how to connect it.
Run this once in a terminal to register Details for your user account.
claude mcp add details --scope user --transport http https://api.details.so/mcp Start Claude Code, enter the command below, then choose Details.
/mcp Choose Authenticate and sign in to your Details account in the browser.
Return to Claude Code and start searching Details.
In Cursor, open Settings → Tools & MCP and choose New MCP Server. Use global settings for every project, or project settings for one workspace.
Paste this configuration into your mcp.json file and save it.
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
} Back in Tools & MCP, find Details, choose Connect, and approve access in the browser.
Details is now available to Cursor in the scope you selected.
Run this once in a terminal to register the remote server.
codex mcp add details --url https://api.details.so/mcp Run the login command to open Details authorization in your browser.
codex mcp login details Sign in to Details, review the request, and choose Continue.
Return to Codex. Start a new session if it was already open during setup.
From the chat input, open the add menu, choose MCPs, then select Add MCP.
Name the connection Details and paste the remote server URL.
https://api.details.so/mcp Select OAuth when prompted, then sign in and approve Details access.
Details is now available from your v0 chat.
Open the integrations or MCP area in your AI client.
Create a remote HTTP MCP server named Details and paste this address.
https://api.details.so/mcp Use OAuth when available, then sign in and approve access to Details.
The Details tools should now appear in your client.
Handpicked from the most original, high-end design on the web. Now available directly to your AI.
See how it worksTell your AI what you’re working on and get relevant, handpicked references.
Explore, refine and choose the idea that fits your project.
Let your AI turn the direction you chose into something built for your project.
Choose your client and we'll show you exactly how to connect it.
Run this once in a terminal to register Details for your user account.
claude mcp add details --scope user --transport http https://api.details.so/mcp Start Claude Code, enter the command below, then choose Details.
/mcp Choose Authenticate and sign in to your Details account in the browser.
Return to Claude Code and start searching Details.
In Cursor, open Settings → Tools & MCP and choose New MCP Server. Use global settings for every project, or project settings for one workspace.
Paste this configuration into your mcp.json file and save it.
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
} Back in Tools & MCP, find Details, choose Connect, and approve access in the browser.
Details is now available to Cursor in the scope you selected.
Run this once in a terminal to register the remote server.
codex mcp add details --url https://api.details.so/mcp Run the login command to open Details authorization in your browser.
codex mcp login details Sign in to Details, review the request, and choose Continue.
Return to Codex. Start a new session if it was already open during setup.
From the chat input, open the add menu, choose MCPs, then select Add MCP.
Name the connection Details and paste the remote server URL.
https://api.details.so/mcp Select OAuth when prompted, then sign in and approve Details access.
Details is now available from your v0 chat.
Open the integrations or MCP area in your AI client.
Create a remote HTTP MCP server named Details and paste this address.
https://api.details.so/mcp Use OAuth when available, then sign in and approve access to Details.
The Details tools should now appear in your client.
This will delete and all the items saved in it. Items saved to other boards are not affected.