designengineer.tools

A single-page link directory that refuses to be anything more than a well-set table. On a white ground (#ffffff, palette 93% #fefefe) a plain 32px/600 Geist Sans title and one gray sentence of subtitle sit above a hairline-ruled grid of category cells — Inspiration, AI Code, Components, Web Utility, Desktop Utility, Video & Capture, Whiteboard, Organization, Fonts, Visual, Interface, Motion, Audio, Volumetric, 3D — each a 16px semibold heading over a column of 14px underlined links, every link led by a 16px favicon at 3.2px radius. There is no color of the site's own: the only chroma on the page belongs to the tools' favicons, which read as a scatter of confetti against otherwise pure grayscale type (#504e4f down to #929292). Cells are unequal in width — Inspiration spans two link columns — so the grid feels laid out by hand rather than by a component, and the hairline borders do all the structural work with no card fills, no shadows and no hover chrome beyond the underline. It is the reference-sheet aesthetic: dense, scannable, and content-first to the point of anonymity.

Build the page as one bordered sheet on a white #ffffff ground. Use Geist Sans (or Inter) at three sizes only: a 32px weight-600 page title with one 14–16px gray (#717171) subtitle beneath, 16px weight-600 section headings, and 14px weight-400 body links. Text color is near-black #504e4f–#2a2a2a; secondary text #929292. Lay content out as a CSS grid of cells divided by 1px #d3d2d2 hairlines with a matching 1px outer border, no cell backgrounds, no shadows, no rounded corners on containers; let cells span 1–2 columns for rhythm while rows stay aligned. Inside each cell: heading, 12px gap, then a vertical list of items at ~24px line pitch, each a 16px icon (radius 3.2px) plus label. Links are underlined by default in the text color, with the underline as the only affordance; hover may lighten to #717171. Use no brand accent at all — the page's color comes exclusively from third-party imagery (favicons, avatars, thumbnails). Keep a wide outer gutter (≥ 15% of the viewport) and tight internal spacing; collapse to a single column on mobile with the same hairline dividers between sections.