# collectui.com

Source: https://collectui.com/
Captured: 2026-09-13
Tags: editorial-media, landing, light, both, minimal, bento, calm, friendly, trustworthy, confident
Colors: #fdfdfc, #d3d7da, #0d1418, #afb0b1, #cf9883, #717379, #8e8f93, #c16f55
Type (h1): Geist · 44px/52.8px · 600 · tracking -1.32px — "Daily User Interface Inspiration"
Type (h2): Geist · 24px/32px · 600 · tracking -0.96px — "Latest Designs"
Type (h3): Geist · 18px/27px · 600 — "Top Sponsors"
Type (body): Geist · 15px/22.5px · 500 · tracking -0.15px — "Subscribe to receive hand-picked websites and interfaces curated by top creative"
Type (small): Geist · 12px/18px · 600 · tracking -0.12px — "Home"
Type (button): Geist · 14px/20px · 500 — "Subscribe"
Button (primary): "Subscribe" — fill #101828, text #ffffff, radius 10px, border 0px, padding 0px 24px, height 40px, type 14px/500
Button (secondary): "Home" — text #000000, radius 10px, border 0px, padding 4px 8px, height 28px, type 14px/400
Radii: 10px (171), 14px (2), 9999px (2), 5px (2), 8px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/collectui-com/hero.webp?v=8b85b7d8
- Page crop (mid-1): https://media.lvly.design/library/collectui-com/mid-1.webp?v=70d0432b
- Page crop (mid-2): https://media.lvly.design/library/collectui-com/mid-2.webp?v=88d8e858
- Hero (mobile): https://media.lvly.design/library/collectui-com/mobile-hero.webp?v=2dfca21f
- Full page (desktop): https://media.lvly.design/library/collectui-com/full.jpg?v=690836dd
- Full page (mobile): https://media.lvly.design/library/collectui-com/mobile-full.jpg?v=58d83257
- Clip preview (mp4): https://media.lvly.design/library/collectui-com/video-s7fr27.preview.mp4?v=e8c4f395

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.

## Steal-worthy details

- Segmented pill toolbar: sibling pill buttons on a shared light plate, the active one flipped to solid #242424 with white text; a live "N online" pill with a green dot doubles as social proof.
- Inset-image cards: each gallery tile is a pale plate (10px radius) with the actual screenshot as a smaller rounded image centered inside it — the double frame makes wildly different thumbnails sit as one grid.
- Tag chips set in a monospaced uppercase micro-label (CSS, LIQUID GLASS, HEADER NAVIGATION) beside an avatar-only byline: a footer row that scans as metadata rather than copy.
- Sidebar category list: 16px icon + label rows, the active row a soft gray pill; a small red asterisk badge marks a featured category (Framer) without a color system.
- Subscribe capsule: a single 9999px-radius white field with the dark button fused inside its right edge, sitting alone under the headline.
- Floating profile card bottom-right: a gradient banner, overlapping circular logo, verified name, follower counts in bold tabular figures and a full-width blue "Follow on X" button — a Twitter-card pattern reused as an in-site widget.
- Headline as three short centered lines at 44px/600 with negative tracking, emoji dropped in mid-sentence.

## Style recipe

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.