---
id: "2115775217025073260"
source: https://x.com/kail_designs/status/2115775217025073260
author: "Kailash (@kail_designs)"
media: "video, 3188x2160, 54.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Dark Curated Design Resource Directory

## Summary
A dark, text-first resource directory for learning design, shown in a browser window over a sunset landscape wallpaper: a large sentence-case hero, mono section labels, two-column link lists, book cover grids and article cards. A good model for a calm, editorial link library that relies on type hierarchy instead of decoration.

## Style
- Theme: dark (near-black page, white type)
- Mood: calm, editorial, curated, studious
- Tags: resource-directory, link-list, monospace-labels, book-grid, editorial, minimal, dark-mode
- Category: Landing page, Typography

## Palette
| Role | Hex |
|---|---|
| Page background | #141414 |
| Browser chrome | #242726 |
| Divider grey | #424446 |
| Secondary text | #747C88 |
| Primary text | #EDEDED |
| Selection blue | #4A78C9 |
| Wallpaper sky | #D6C39E |
| Wallpaper hills | #223916 |

## Typography
- Hero: geometric grotesque, regular (400), sentence case, three lines, leading about 1.1 and tracking -0.02em; about 9% of the frame height in the zoomed shot. Closest free: Manrope 400 or Outfit 400.
- Labels (nav, section names, list group names): monospace, 11px, slight tracking, white or grey. IBM Plex Mono 400.
- Link lists: sans 13px regular in light grey with thin underlines on hover.
- Book and article captions: 9px sans, title in white, author in grey.

## Layout
- 3188x2160 (about 1.48:1). The site sits in a dark browser window centred over a landscape wallpaper, with about 2% margins.
- Content is a single narrow column (about 640px) starting slightly left of centre.
- Hero: logo glyph plus three mono nav links, the big headline, then a small outlined button with 6px radius.
- Sections: a mono label, a short grey paragraph, a full-width 1px divider, then link lists in two columns about 160px apart with 12px row gaps.
- Book grids: 3 columns of covers about 72x96px with 12px gaps and captions under each; article cards 2 columns with 4:3 thumbnails.
- No shadows inside the site; everything is flat on #141414.

## Elements
- Hero headline with a native blue text selection highlight over the first two lines.
- Nav: a circular slashed logo mark and three mono links, one with a small arrow.
- Section blocks: Basics, Design Foundations, Theory and Principles and more, each with a label and two columns of links.
- Book cover grid: colourful real-world-style covers acting as thumbnails, with title and author.
- Article cards: thumbnails (handwritten notes, comic panel, gradient planet, yellow text poster, pink glow, UI collage) with titles.
- Status bar URL preview at the bottom-left of the window when hovering links.

## Motion
- 2.2s: zoomed tight on the hero while text is selected.
- 11.9s: zoomed on a section as the cursor hovers a mono label.
- 21.7s: the view zooms out to the full browser window (scale about 1.8 to 1, 800ms ease-in-out).
- 31.5s to 51.1s: smooth scrolling through book grids and article cards (about 500ms per wheel step, ease-out).
- Hover states fade in about 150ms. The recording is linear, not a loop.

## Rebuild it
1. Page: `bg-[#141414] text-neutral-100` with a `max-w-[640px] mx-auto px-6` column.
2. Hero: `text-6xl font-normal tracking-tight leading-[1.1]` in Manrope, followed by a `rounded-md border border-neutral-700 px-3 py-1.5 font-mono text-xs` button.
3. Sections: a `font-mono text-xs text-neutral-400` label, a paragraph, an `hr` in #424446, then `grid grid-cols-2 gap-x-40 gap-y-3` links.
4. Book grid: `grid grid-cols-3 gap-3` with `aspect-[3/4]` covers and two caption lines.
5. Add Motion `whileInView={{ opacity: 1, y: 0 }}` from `y: 12` with a 0.4s ease-out and a 0.04s stagger per link.
6. Customise `::selection` to #4A78C9 so highlighted text matches.

## Generation prompt
A dark minimalist design resource website in a browser window floating over a sunset landscape wallpaper with green hills: a large light sentence-case headline, small monospace section labels, two neat columns of underlined links, grids of colourful book covers with captions and article thumbnails; calm, editorial, curated, high readability, no brand names.