How This Site Was Built.

Concept & inspiration

Nomadic Owls describes itself as "obsessively curious" — a small studio that runs on its own experiments as much as client work. That energy reads as messy-but-intentional: zines, cut-and-paste flyers, corkboards with pinned index cards and Polaroids taped at odd angles. The brief called for exactly that: torn edges, stickers, tape, layered ephemera, bold clashing color. The structural gimmick I committed to was treating the whole one-pager as a desk collage — pinned notes for the three pillars, circular stamp badges for the six disciplines, and Polaroid-style cards for the three real client projects (Rentsy, Bali Destination Wedding, Non La Vietnam Tours).

Typography & color

Three fonts, each doing one job, self-hosted via @fontsource (no external font requests, no CLS from a late-loading Google Fonts stylesheet):

• Anton — the shouty display face for headlines and stamp text. It's condensed and heavy enough to survive being crammed onto a circular badge.
• Instrument Serif (italic) — the "handwritten caption" voice: section tags, Polaroid captions, pull quotes.
• Work Sans — body copy. It needed to stay legible at small sizes against a busy background, so it carries all the actual reading.

Palette is deliberately clashing: cream paper (#f7f1e3) as the base, hot pink (#ff3d81), acid green (#c4f042), and cobalt blue (#2b4bff), all held together by black ink linework — a 3–5px solid black border on almost every "physical" element (notes, stamps, Polaroids, buttons). The ink border is doing the same job a comic panel's inkline does: without it, four saturated colors next to each other on cream just looks noisy. With it, they read as separate cut-out objects.

The paper & collage techniques

A few CSS mechanisms carry the whole "physical desk" illusion:

• Torn edges between sections — an inline SVG component (TornDivider.astro) draws a jagged, deterministic (not randomly regenerated per build) polygon path and fills it with the color of the section below, so each section transition looks torn rather than cut with a straight ruler.
• Random-but-fixed rotation — every "pinned" element (notes, stamps, Polaroids) gets a small rotation via a CSS custom property (--rot) set per element in the markup, rather than randomized client-side. That keeps layout stable across reloads and means server-rendered HTML matches what ships — no hydration mismatch, no layout jump once JS loads.
• Settle-in scroll reveal — a small IntersectionObserver (in Layout.astro) adds an .in-view class the first time an element with the .reveal class crosses the viewport. The CSS transition uses cubic-bezier(0.34, 1.56, 0.64, 1), a spring curve with overshoot, so elements settle in like a piece of paper dropped onto a pinboard rather than sliding in a straight line.
• Sticker pop on hover — stamps and stickers use a short wiggle keyframe animation triggered on hover/focus, plus a scale and shadow change, so they feel like tactile stickers rather than flat images.

Generated imagery

Five images were generated with the gpt_image_2 model via the Higgsfield CLI, each isolated on a plain background so they could be composited freely against any section color:

1. Owl mascot (owl-mascot.png, 1:1) — prompt: "a playful collage-style illustration of a cartoon owl mascot, bold outlines, flat bright colors of hot pink and acid green and cobalt blue, sticker style, isolated on white background." Used as the header logo and a pinned hero sticker.
2. Torn paper texture (paper-tear.png, 4:3) — prompt: "torn edge of cream colored paper texture, photographed flat, soft shadow, isolated on white background." Used as a rotated decorative photo behind the manifesto quote.
3. Washi tape (washi-tape.png, 1:1) — prompt: "a roll of colorful washi tape texture in hot pink, acid green, and cobalt blue stripes and patterns, flat lay photography, isolated on white background." Cropped into small rotated strips (TapeStrip.astro) scattered across the hero, disciplines, and contact sections.
4. Magnifying glass sticker (sticker-magnifier.png, 1:1) — prompt: "a sticker illustration of a cartoon magnifying glass with bold black outlines, flat bright pink and blue colors, die-cut sticker style, isolated on plain white background." Pinned decoration in the disciplines section (nods to "Search Engine Marketing" / "fulfill search intent").
5. Lightning bolt sticker (sticker-bolt.png, 1:1) — prompt: "a sticker illustration of a cartoon lightning bolt with bold black outlines, flat acid green and hot pink colors, die-cut sticker style, isolated on plain white background." Pairs with the "Speed is user experience" belief and the automation discipline.

All five are served through Astro's built-in astro:assets pipeline (<Image /> / getImage()), which uses sharp at build time to re-encode to WebP and emit only the pixel sizes actually referenced in markup — nothing ships at its native 2048×2048 source resolution.

Honest tradeoffs

• Decorative stickers are hidden below 768px. The floating magnifying-glass and lightning-bolt stickers in the disciplines section are absolutely positioned against the section, and at phone widths there isn't reliably safe space for them without either overlapping the stamp grid or forcing extra height. Rather than fight that, they're simply not rendered on small screens (display: none under the mobile breakpoint). The core content — the six stamps — is unaffected; it's a deliberate scope-cut on ambient decoration, not a bug.
• The torn-edge dividers use one fixed jagged path, not per-instance randomness. A "real" collage would have a unique tear every time. Generating a new random SVG path per divider at build time was possible but would have made the page's DOM output nondeterministic between builds, which complicates any future visual diffing/testing. I chose one hand-tuned jagged path and vary only its fill color and vertical flip — a deliberate consistency-over-realism tradeoff.