collectui.com

CollectUI is a design-inspiration gallery that dresses itself as a quiet, near-monochrome app shell: a warm off-white ground (#fdfdfc), Geist at 600 with tight −1.32px tracking for a centered three-line headline, and every surface — nav pills, the search field, the sidebar's active row, the 10px-radius cards — rendered as a white or pale-gray plate with a hairline and almost no shadow. The only saturated color on the page is a soft coral (#cf9883 / #c16f55) that leaks in from the thumbnails; the site's own accent is the near-black #242424 of the "Home" pill and the Subscribe button, so the curated work carries all the color and the chrome stays neutral. A floating top bar of segmented pills (Home · Designers · Categories · Trending · a green "17 online" presence dot) reads like a macOS toolbar, the left sidebar is a long icon-plus-label list of categories, and the grid is a three-up bento of tall cards each holding one design as a rounded inset image on a tinted plate, with mono-uppercase tag chips and an avatar "Design by" byline in the footer row. Emoji inline in the headline (🧺 🧙🏻‍♀️) are the one playful note against an otherwise disciplined tool-like surface.

Build a light, tool-like interface on an off-white ground of #fdfdfc with white (#ffffff) plates for cards, fields and toolbars, separated by 1px hairlines in #d3d7da–#e5e7e9 and, at most, a barely-there shadow. Type is Geist throughout: display 44px / weight 600 / −0.03em tracking / 1.2 line-height, body 15px / 400 / 1.6, micro labels 11–12px uppercase monospaced with +0.04em tracking. Text colors: #0d1418 primary, #717379 secondary, #8e8f93 tertiary. The accent is near-black #242424 — use it for the single primary button and the active segment, white text on top; never introduce a brand hue, let content imagery supply color. Radii: 10px on cards, chips and buttons, 9999px only on the search field, input capsule and avatars. Controls are small: 32px tall pills with 4px 12px padding and 12px/600 labels, grouped as segmented siblings on one shared plate. Compose pages as a fixed top toolbar, a 200px left rail of icon+label rows (active row = soft gray pill), and a 3-column card grid with 16px gutters where each card is a tinted plate holding a smaller rounded image inset by ~24px, a metadata footer row of chips left and an avatar byline right. Allow one playful gesture only — an emoji inside the headline or a coloured status dot — and keep everything else neutral and even.