How the catalog works

What this catalog is

The DEPO demo album collects every design page we tried for DEPO — home pages, editorial layouts, 3D scenes, whole-site decks — as one post each. A post shows the page's full screenshot, the prompt it was made from, the fonts and colours it uses, the code it is built with and anything borrowed from elsewhere. Open the demo opens the live page in a new tab.

Why it exists

• Compare directions side by side instead of digging through folders: every demo, its idea and how it looks, in one place.
• Keep the knowledge: the prompt, the libraries and the decisions stay next to each page, so a good idea can be picked up again months later.
• Decide together: everyone can give a demo a score from 1 to 10 and leave a comment.
• Try design languages on real markup: the catalog itself can be worn in the style of any demo (below).

Using the catalog

• Categories at the top filter the list; Per page sets how many posts a page shows (?view=5, ?view=20 …).
• A post can sit in more than one category (Background study is under Cinematic and UI kits); its card then shows every category it belongs to.
• One background for many demos: /bg/ is the background study with its settings open. Pick a preset or tune it and press Use for all demos: every demo with the DEPO green background (the Connect demos, demo1–4) then draws it. The list under the button says which demos follow it; untick one to give it back its own background. Demos that edit their own background (demo20, demo30) are never changed.
• Read the post opens one demo: the screenshot (click it to see the whole page), the doc, the rating and the comments.
• Rating: pick a number from 1 to 10 and press Rate. One vote per person and demo, and it is final; your browser remembers it for a year (after that you may vote again).
• Comments: no sign-up — just your name and the text. The name is remembered on this device and filled in next time.
• "Suits a site for …" tags: on a post, say what kind of website the design would fit — fashion magazine, photographer portfolio, model agency … A tag can be several words. Click a tag that is already there to agree (click again to take it back), or type your own. The list page shows every tag with the number of demos; click one to see only those demos.
• Accounts: Sign up in the top bar for a free account — your comments then carry it (marked "signed in") and you need not type your name. Your account holds your name, password, and how comments open for you (oldest / newest / best rated, signed-in only).
• Comment rating: ▲ / ▼ under a comment says it helped or not (click again to take it back). Above the comments: show everyone, only signed-in people or only guests, and the order.
• MCP server: creators and viewers can connect their AI agent to the album — it reads every demo and its rules, and a creator's agent can send new demos for the admins to publish. How: the MCP guide.

Trying on styles

This page has one HTML and many stylesheets. Every demo comes with a catalog style written in its design language — the same fonts, colours and signature details — so the whole catalog can be seen "as if it were" that demo. Nothing else changes: the same posts, links and forms.

• Pick a style in the style bar at the top (default, demo1 … demo19, and the styles people uploaded, named u-…).
• The address of the current look is shown there: Copy it and send it — whoever opens it sees the catalog in that style. In the address it is ?style=demo7 (or simply ?style=7).
• The style stays with you while you move around the catalog (categories, pages, posts).

How a style is put together

A look is made of a main stylesheet plus add-ons for blocks added to the catalog later:

The page loads the default add-ons first (_rate.css, _tags.css, _tools.css — neutral, they take the colours and fonts of whatever is around them), then the main style, then the style's own add-ons if it has them. So anything you write in your style wins over the defaults, and a style's own add-on replaces the default completely.

Make your own style

1. Start from a style you like. Choose it in the style bar and press Download this style — you get its main stylesheet. The links next to it (+ demo7_rate.css …) are its add-ons; open them too if you want your rating and comments to look the same way.
2. Edit the file in any text editor. Keep the class names (the hooks, listed below) — they are what the page offers to style. Change anything else: layout, type, colours, spacing, decoration. The empty elements .deco--1 … .deco--3 are there for ornaments.
3. Want rating, tags and comments in your look? Paste the rules from the add-on into the end of your file and change them: your file is loaded after the defaults, so your rules win.
4. Upload it: style bar → Upload your own style → a name (lower-case letters, digits, hyphens) and your .css file. The page switches to it at once; it is now in the list as u-yourname for everyone.
5. Share it: press Copy in the style bar and send the address. Uploading again under the same name replaces your earlier version.

Tips

• Fonts: put @import url("https://fonts.googleapis.com/css2?family=…"); at the very top.
• Pictures: use the album's own images, e.g. url("/_img/photos/photo-07.jpg") (magazine covers) or /_img/site/first-page/… (portraits).
• Check the list and a post, on a wide screen and on a phone (the page must not scroll sideways), and press Tab through the page to see that the focus is visible.
• Limits: one file, plain CSS, up to 300 KB. No JavaScript — the page's own script does the rest.

Rules of a good style

• Its own idea, not a recolour: change the composition of the list (grid, single column, spreads, index rows, a wall …), not only the colours.
• Both views: the list and the post, including the doc (headings, tables, quotes, code), the rating, the comments, the screenshot dialog and the empty / error messages.
• Usable: readable contrast, visible keyboard focus, links that look like links, the style URL readable and Copy easy to find, works from 360 px to 1920 px wide.
• Calm motion: if something moves, respect "reduce motion" in the system settings.

Class hooks — the reference

Every element of this page has one of these classes; your style can use all of them.

The full-page screenshot (.post__zoom img) can be very tall: clip it (max-height + overflow: hidden) and let the dialog show the whole image.