# posts.design

Source: https://posts.design/
Captured: 2026-09-13
Tags: editorial-media, landing, light, both, minimal, bento, calm, confident, elegant, trustworthy
Colors: #f4f5f4, #07080a, #63905f, #133fec, #cacfce, #abada8, #0b3b1f, #56504c
Type (body): Inter · 14px/20px · 400 — "See what 620+ brands actually ship to socials"
Type (small): Inter · 12px/16px · 500 — "Online"
Type (button): Inter · 14px/21px · 500 — "Recent"
Button (primary): "Recent" — fill #ebebeb, text #383838, radius 8px, border 0px, padding 7.68px 12px, height 47px, type 14px/500
Button (secondary): "Top launches" — text #525252, radius 8px, border 0px, padding 7.68px 12px, height 47px, type 14px/500
Radii: 24px (134), 9999px (92), 8px (11), 16px (2), 12px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/posts-design/hero.webp?v=58b3a73f
- Page crop (mid-1): https://media.lvly.design/library/posts-design/mid-1.webp?v=59d6aed2
- Page crop (mid-2): https://media.lvly.design/library/posts-design/mid-2.webp?v=fec0ddd1
- Hero (mobile): https://media.lvly.design/library/posts-design/mobile-hero.webp?v=7fb76c1c
- Full page (desktop): https://media.lvly.design/library/posts-design/full.jpg?v=d1ed39bb
- Full page (mobile): https://media.lvly.design/library/posts-design/mobile-full.jpg?v=fd2b5f39
- Clip preview (mp4): https://media.lvly.design/library/posts-design/video-7f9owy.preview.mp4?v=6ec206a1

posts.design is a curated masonry feed of the social graphics real companies ship, and the site's own chrome is engineered to disappear behind them. A Zinc near-white ground (#fafafa) carries a slim left sidebar — a plain wordmark, a live count in muted gray, Inter 14px nav items with thin monoline icons and a single soft tonal highlight on the active row — while the rest of the viewport is a three-column grid of 24px-radius tiles with no borders, no captions and no titles, each stamped only with a small circular brand-logo badge in its corner. The one piece of chrome with personality is the sidebar's subscribe card: a white rounded panel holding three stacked thumbnails, an italic serif tagline ("Best of social, curated") and a pill-shaped near-black button. Everything is neutral on purpose — black, grays and white — so the color comes entirely from the posts.

## Steal-worthy details

- Gallery chrome in pure neutrals (#fafafa ground, #171717 buttons, gray text) so every hue on the page belongs to the content, not the interface.
- Uniform 24px tile radius with zero borders and zero shadows; the tiles read as pinned cards through radius and the off-white gap alone.
- A single circular favicon badge overlaid in each tile's corner as the only attribution — no caption row, no metadata, no hover text.
- The live entry count ("• 750") sits beside the wordmark as a tiny muted dot-and-number, a quiet proof-of-freshness.
- Active nav item marked with a soft tonal fill (a shade darker than the ground), not a color or a bar.
- One italic serif line inside an otherwise Inter-only page, reserved for the newsletter card, gives the subscribe moment a touch of editorial voice.
- Full-height sticky sidebar with a hand-drawn-style monoline icon and a two-line value line ("See what 580+ brands actually ship") filling the empty middle instead of leaving dead space.

## Style recipe

Design a light-first gallery interface where the interface is silent and the content carries all color. Ground: #fafafa. Cards and panels: #ffffff. Primary action: solid #171717 with #fafafa text, 8px radius on standard buttons and 9999px pill for the hero action, 14px/600 Inter. Type: Inter throughout — 14px/20px regular body, 16px/24px for headings and nav, muted gray (#56504c-ish) for secondary text; permit exactly one italic serif line for a tagline or editorial moment. Layout: a fixed ~270px left sidebar with a stack of icon + label nav rows and a single tonal active state (a slightly darker neutral fill, no accent color, no indicator bar); a masonry grid of media tiles to the right with a consistent 24px radius, generous ~12px gutters, no borders, no shadows, no captions. Attribution lives in a 32px circular badge overlaid in a tile corner. Use hairline separators (#cacfce) sparingly between nav groups. Keep counters as small muted dot-and-number pairs beside labels. Motion: none beyond hover; let images and video autoplay do the work.