When this fits
Use this system when the work itself should dominate: portfolios, exhibitions, catalogs, and project galleries. The interface supplies orientation without competing with the images.
Composition
Use a strong featured image or a deliberate opening grid. Keep metadata aligned beneath its image, not floating unpredictably over it. Choose two or three image ratios that fit the work and repeat them consistently. Preserve a clear distinction between a project and one image within it.
Typography
Use neutral sans-serif text: 36–56px page headings, 18–22px project names, and 13–15px metadata. Keep text contrast high enough to read without hover. A project title is content, not a decorative caption that can disappear on a phone.
Components and meaning
Use a narrow neutral palette and fine rules. Give individual artworks or screenshots their own color; do not apply an arbitrary monochrome filter to flatten the collection. Respect image focal points and distinguish a crop from a missing asset.
Interaction details
Link the full project card through one accessible target when appropriate. Keep save and other secondary actions separate so they do not trigger navigation. Give missing images and empty search results useful states. Avoid loading an interactive iframe for every grid item.
Responsive and output behavior
At narrow widths, reduce columns before shrinking images or text. Keep filtering within reach and preserve the selected category when a user returns from a project. A masonry layout should not scramble keyboard or reading order.
Motion and difficult states
Use subtle image and underline transitions. Avoid large zooms on hover, continuous carousels, or scroll motion that hides the work. Check thumbnails at actual display density and verify every project link and image credit.
Visual signature
Use a dark image-dominant composition with a narrow editorial rail and generous project imagery. Pair a geometric display face with restrained body text. The specimen uses 14px base text, 40px controls, and square edges. The project image occupies most of the main region; descriptions and navigation frame it instead of competing with it. Preserve crop intent and keep artwork labels outside busy image areas.
Apply the system
Read the existing project design instructions and the actual target screen before editing. Treat tokens.css as a starting vocabulary; map it into existing semantic tokens rather than adding a competing theme. Follow the user’s chosen palette, platform, and framework when they differ from this example. Do not change business logic, authentication, navigation destinations, or data behavior merely to reproduce the preview.
Open preview.html to inspect the system’s composition and component relationships. The preview is a visual specimen with sample content, not a complete application. Adapt the relationships to the user’s real content rather than copying its sample records.
Verify the result
Inspect the real output at its intended size and at a narrow viewport where applicable. Check text wrapping, alignment, contrast, focus, hover, selected, disabled, loading, empty, and error states. Exercise the primary action and its return path. For slide files, inspect every exported page and preserve editability. Report what was changed and actually verified; do not claim a visual preview proves a working backend.
Dropdown controls
Use styled, accessible dropdown menus that belong to the chosen design system. Style the opened option list as well as the trigger; do not expose an OS-native select popup. Include a selection checkmark, hover/focus/disabled states, arrow-key navigation, typeahead, Escape/outside dismissal, and viewport-bounded positioning. Reuse the project’s accessible select primitive. Preserve labels, values, form validation, reset behavior, and change events. For a small fixed quantity, a labeled radio group or stepper can be clearer than a dropdown.