Fine Thought

finethought.com.au

A solo creative-technologist portfolio styled as a code editor — a "fine-thought.js" filename tab, line-number gutters, a monospace face for 95% of text, and ASCII-art "guide" glyphs forming the entire visual texture of the page.

Design Portfolio Creative Technologist Portfolio niche

Design tokens

editorSurface

editorChrome

bodyGlyph

headline

stateMuted

subtleGrey

deepGrey

cursorAccent

wordmarkLight

lightBackground

display: neue-haas-grotesk-display (Adobe Typekit)
body: code-saver (Adobe Typekit)
mono: code-saver (Adobe Typekit)

Do / Don't

Reference it for

Browser-as-IDE conceit — a chrome bar with .js filename + window controls, line-number gutter, sidebar toggle + theme-switch icons top-right
ASCII-glyph guides as visual fabric — slash, asterisk, plus, dash, equals arranged into a fake-code background that doubles as a layout grid
Near-black rgb(40, 40, 40) editor surface with rgb(60, 60, 60) raised chrome panels (not pure black — sits warmer)
rgb(137, 137, 137) mid-grey body glyphs (994 hits — the texture-carrying colour)
rgb(234, 234, 234) near-white headline reserve — used only for the H1, never for body
rgb(174, 198, 246) powder-blue cursor accent — single chromatic note, 3 hits
code-saver monospace for 95% of all text — most monospace-heavy site in library
neue-haas-grotesk-display reserved for giant wordmark at 319.2px — single display moment

Do not copy

The "Fine Thought" wordmark or the "fine-thought.js" filename tab pattern verbatim
The code-saver Typekit licence (Adobe-owned) — substitute with JetBrains Mono / IBM Plex Mono
The neue-haas-grotesk-display Typekit licence — substitute with Inter Display / Söhne / open Neue Haas
The "Web engineer & creative coder" copy verbatim
The Nathan Leigh Davis personal brand framing
The Victoria, Australia geography signal unless the brand is genuinely there
The full ASCII-art texture unless the brand has the typographic restraint to carry it (most brands cannot)
The 319.2px display size at the brand's largest type — most products need 64-96px max

Signature moves

browser-as-IDE conceit

a chrome bar with a 'fine-thought.js' filename tab and window controls, a line-number gutter, and theme-switch plus sidebar-toggle icons frames the page as a code editor on a warm near-black rgb(40,40,40) surface.

ASCII-glyph fabric plus single giant wordmark

slash/asterisk/plus/dash/equals glyphs arranged into a fake-code background double as the layout grid, with mid-grey rgb(137,137,137) body glyphs and one giant display wordmark at 319.2px anchored bottom-right.

Related references

Almacantar

niche

Real Estate

an architecture-led property developer reduced to its barest, most confident form, full-bleed aerial London video on near-black, a single Albertus serif word-pair ("PLACES / PEOPLE"), almost no chrome, and a quiet fade-and-rise motion that lets the buildings carry everything.

Lanserring

flagship

Trades

a bespoke-joinery house that sells craft as heritage, warm sepia interiors and meadow photography under a high-contrast transitional serif, the brand reduced to a single fine line-drawn ring, with quiet WordPress structure and almost no visible motion furniture.

Lazy Eight

strong

Creative Studio

a gallery-minimal brand-studio portfolio where a near-white canvas, one large black-and-white image and a tiny "Explore ↓" are the entire first screen, image carries everything, type whispers, and a single classic link-blue is the only colour.

Leoleo Studio

niche

Creative Studio

French multidisciplinary studio that uses a totally achromatic black-on-white chrome and lets 3D render film carry every drop of colour, with cinematic 0.45s easeOutExpo transitions and a small cat-head logomark floating in a dark pill nav.