Colophon

How this site was made.

Every detail here was chosen on purpose: the type, the color, the geometry, and the small moments of motion. This page is a note on the thinking behind them.

Typography

Four typefaces, each with a job.

Newsreader is the voice of the site: an editorial serif for titles, letters, and the name on the homepage. Switzer handles reading text with quiet clarity. Chivo Mono marks dates, labels, and small details, like annotations on a drawing. Halibut appears where a display face is needed.

Newsreader · The quick brown fox jumps over the lazy dog

Switzer · The quick brown fox jumps over the lazy dog

Chivo Mono · The quick brown fox jumps over the lazy dog

Color

Ivory, ink, and one blue.

The palette is deliberately small. A warm ivory background, near-black ink for type, logo navy for structure, and a single blue (#5A7D9A) for every moment of interaction, from the cursor to the liquid in the letters.

Ivory

#F8F7F4

Surface

#EFEDE7

Ink

#1C2120

Navy

#2C3E50

Blue

#5A7D9A

Light blue

#7395AE

Geometry

A mark built from three shapes.

The AAD logo is two equilateral triangles and a half circle: the triangles are the two A’s, and the D is a semicircle on a square. Those same triangles build the name on the homepage, and the 60 degree angles quietly guide the grid beneath it.

Pattern

A lattice from architecture.

The faint diagonal lattice behind the homepage is drawn from mashrabiya, the carved wooden screens that filter light in traditional architecture. It stays almost invisible until the cursor passes, and then it catches the blue.

Motion

Small moments, never noise.

Motion is used to make the site feel alive and responsive: the signature that writes itself, the skyline that follows Houston’s time of day with the Williams Tower beacon always on, photographs that scatter into pixels, and pages that dissolve into one another. Everything respects reduced-motion settings.

Built with

Framer, and a collaborator.

Designed and built in Framer, with custom code components for every interactive piece. Planned, written, and refined in conversation with Claude by Anthropic. Hosted at armandharani.com.

Contact