# designengineer.tools

Source: https://designengineer.tools/
Captured: 2026-09-13
Tags: other, landing, light, both, minimal, swiss, technical, calm, serious, confident
Colors: #fefefe, #d3d2d2, #aeaeaf, #929292, #717171, #d5e6f8, #504e4f, #afcefc
Type (h1): geistSans · 32px/normal · 600 — "Design Engineer Tools"
Type (h2): geistSans · 16px/normal · 500 — "Inspiration"
Type (body): geistSans · 14px/normal · 400 — "A list of useful tools for web-focused design engineers."
Radii: 3.2px (96)

## Images

- Hero (desktop): https://media.lvly.design/library/designengineer-tools/hero.webp?v=082aa1c6
- Page crop (mid-1): https://media.lvly.design/library/designengineer-tools/mid-1.webp?v=415c846b
- Page crop (mid-2): https://media.lvly.design/library/designengineer-tools/mid-2.webp?v=6f1d88a7
- Hero (mobile): https://media.lvly.design/library/designengineer-tools/mobile-hero.webp?v=121239dd
- Full page (desktop): https://media.lvly.design/library/designengineer-tools/full.jpg?v=9863dd31
- Full page (mobile): https://media.lvly.design/library/designengineer-tools/mobile-full.jpg?v=3d622675
- Clip preview (mp4): https://media.lvly.design/library/designengineer-tools/video-ao5jvn.preview.mp4?v=49e48f73

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.

## Steal-worthy details

- Hairline-ruled table of cells with **no fills** — `#d3d2d2`-ish 1px borders both between cells and around the whole block, so the grid reads as one sheet, not a deck of cards.
- Uneven cell widths (one category gets two columns of links) inside a strict row structure — variety without breaking the rule.
- Every link is favicon + text, favicons normalised to ~16px with a 3.2px radius (the single radius token on the page, used 96 times); the site owns no color and lets the logos supply all of it.
- Underlined links in near-black on white as the default state — old-web honesty; nothing pretends to be a button.
- Type in exactly three sizes: 32px/600 title, 16px/600 cell headings, 14px/400 links — Geist Sans throughout, normal tracking, no display flourishes.
- Generous outer margin (~240px gutter at 1440) so a dense grid still breathes; the density is inside the cells, not around them.

## Style recipe

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.