~/fozooni/design
Dark only
Available for work

Ahmad
Fozooni

~/ Full-stack engineer. Builds fast, boring software for the web — and occasionally writes about why boring wins.

01

Color

Hue 148 — deliberately between grass green (≈130) and emerald (≈162). Neutrals carry hue 152 at chroma 0.004–0.012, so the palette reads as one material rather than green stickers on gray card.

Signal — hue 148

50
#e0fce3
0.965 0.045 148
100
#c0f7c7
0.925 0.085 148
200
#8ced9b
0.865 0.145 148
300
#5bdb76
0.795 0.180 148
400
#40c460
0.725 0.180 148
500
#27ac4d
0.655 0.175 148
600
#148c3a
0.560 0.155 148
700
#0f6c2c
0.465 0.128 148
800
#084c1d
0.365 0.100 148
900
#043110
0.275 0.075 148
950
#021b06
0.195 0.052 148

Ink — hue 152

50
#f1f4f2
0.965 0.004 152
100
#e2e5e3
0.920 0.005 152
200
#cbcfcc
0.850 0.006 152
300
#aaafab
0.750 0.008 152
400
#8b918c
0.650 0.010 152
500
#6d746e
0.550 0.012 152
600
#4e554f
0.440 0.012 152
700
#343a35
0.340 0.012 152
800
#1f2520
0.255 0.012 152
850
#161b17
0.215 0.011 152
900
#0f1410
0.185 0.010 152
950
#080b09
0.145 0.008 152

Measured contrast — dark mode

ink-5017.89:1AAA
ink-3008.92:1AAA
ink-4006.14:1AA+
green-4008.70:1AAA
ink-950 on green-4008.70:1AAA

ink-500 is banned as text: on ink-950 it measures 4.10:1 and fails AA. It stays in the ramp for hairlines and disabled states only. There is no light palette to check — this site is dark only.

The green rule — signal, never surface

1px rule

Available

Status dot

fast, boring software

Accent text

02

Typography

Display

Space Grotesk

Hero, titles

Sans

Geist

Body, UI

Mono

JetBrains Mono

Paths, labels, code

display-xlAhmad
display-lSelected work
display-mBuilding things
titleA project title
body-lLead paragraph — sets up the section.
bodyBody copy. The default for prose at 68ch measure.
body-sSmall copy, captions, metadata.
labelSection label
microMicro label
03

Structure

Structure is drawn, not implied. Section boundaries are 1px rules. Cards do not float — depth comes from surface lightness, never shadow. Radius is 2px everywhere.

Indexed rule header — the core motif

01

About

02

Selected work

03

Writing

Surface ladder — no shadows

background

1px border · no shade

surface

1px border · no shade

surface-raised

1px border · no shade

Work rows — hairline separated, asymmetric

2025AtlasInternal mapping platformNext.js · Postgres · Encore2024MeridianRealtime pricing engineTypeScript · Bun · Redis2024KestrelObservability dashboardReact · Go · ClickHouse
04

Components

Buttons — nothing scales on hover

Links, badges, input

An inline link stays currentColor — only the underline strengthens on hover. No color jump.

AvailableTypeScriptPostgres

focus ring · green · 2px offset

Wordmark

~/fozooni~/fozooni~/fozooni

With the current location (§8.1)

~/fozooni/blog/why-boring-wins

Always text, never an image — selectable, searchable, sharp at any size. The caret blinks on a hard square wave (step-end, 1.06s, no fade) and sits tight at 0.1em — a fade or a wide gap stops it reading as a terminal.

Pointer affordance — if it clicks, it says so

Button

Inline link

Link

Checkbox + label

Disabled

Declared once globally in globals.css, covering native elements, Base UI primitives, and ARIA roles alike — so anything added later inherits it without being remembered. Disabled controls get not-allowed, text inputs keep a caret.

05

Motion

One entrance, used everywhere: opacity 0→1, y 12→0, 420ms, expo-out. Fires once. Everything on this page scrolled in that way — which is the point: you should have barely noticed.

instant

120ms

hover, press, focus

quick

220ms

small entrances

base

420ms

section entrances

slow

700ms

hero only

Exactly two ambient loops exist — the contour drift above and the status dot. Adding a third requires removing one. No parallax, no counters, no typewriter, no hover scale.