Hello, I'm

Alex Nahas

Building things on the web.

Typography

Heading One

Heading Two

Heading Three

Heading Four

Body text — The quick brown fox jumps over the lazy dog. This paragraph demonstrates the base text size, line height, and measure. It uses text-wrap: pretty to avoid orphans and is capped at 60ch for comfortable reading.

Secondary small text for captions and metadata.

Color Palette

bg-raised

bg-sunken

accent

accent-hover

accent-subtle

border

text

text-secondary

Shadows

shadow-sm

shadow-md

shadow-lg

shadow-xl

Cards

Project Alpha

A web application built with vanilla web standards and modern CSS.

Astro CSS Web Components

Project Beta

Design system exploration with OKLCH colors and fluid typography.

Design OKLCH

Project Gamma

Something else entirely — proving the grid works with three items.

Cloudflare Edge

Prose Content

This section demonstrates the .flow utility for vertical rhythm in long-form content. Each element gets appropriate spacing based on its type — headings get extra space above them, and tight space below.

A subheading within prose

Following text has tighter spacing after a heading. The .flow class uses the lobotomized owl selector (* + *) with contextual overrides for heading elements.

This is a blockquote with the accent border on the inline start. It uses the terracotta accent color to add a warm visual anchor.

And a regular paragraph continues after the quote. The mark element uses the subtle accent background for highlighting. Here's some inline code and a link that goes nowhere but demonstrates the style.

// A code block
const greeting = 'Hello, world';
console.log(greeting);

Buttons

Spacing Scale

3xs

2xs

2xl