Skip to content
Olusegun Olayinka

Colophon

Notes on how this site was made.

The type, the color, the stack, the trade-offs. If you got here from the console — hello. If you found this from the footer mark — also hello. Either way, what follows is the kind of detail I'd want on a site I was thinking about hiring.

Source
github.com/olayis
Hosted on
Vercel · Edge
Type
Fraunces & Inter
Built by
Me · 2026

Type · /01

Fraunces & Inter paired.

Display · Fraunces

Variable serif by Phaedra Charles, Flavia Zimbardi & David Jonathan Ross. Optical sizing, soft contrast, real italic.

Aa Bb

The frontend is where the company meets the user. Get it right and trust compounds; get it wrong and nothing else matters.

  • Regular · weight 400
  • Italic · the only emphasis I use
  • Display sizes · clamp() across viewports for fluid scale

Text · Inter

Variable sans by Rasmus Andersson. Excellent on screen, exceptional at small sizes, neutral by design.

Aa Bb

Inter carries the running text, the meta, the micro-labels. It stays quiet so the display face and the editorial palette can do the talking.

  • Regular400
  • Medium500
  • Semibold600

Color · /02

The editorial palette.

A warm off-white inspired by uncoated paper, a quiet ink black, a burnt-orange accent borrowed from old print marks. Light is the default; dark mirrors it with equal restraint.

Light

  • Background#f4f1ecPage background, surfaces
  • Foreground#111111Body text, headlines
  • Muted#756f64Secondary text, meta
  • Subtle#ebe6dfHover states, soft fills
  • Border#d9d2c6Hairlines, dividers
  • Accent#c7522aItalic emphasis, highlights

Dark

  • Background#0f0e0cPage background, surfaces
  • Foreground#f4f1ecBody text, headlines
  • Muted#968d7dSecondary text, meta
  • Subtle#1a1815Hover states, soft fills
  • Border#2a2620Hairlines, dividers
  • Accent#e07a4fItalic emphasis, highlights

Stack · /03

What's under the hood.

Code & runtime

  • Next.js 16App Router, React Server Components, Turbopack
  • React 19useActionState, useFormStatus
  • TypeScript 5.7strict + noUncheckedIndexedAccess + exactOptionalPropertyTypes
  • Tailwind CSS v4@theme tokens, oklch palette, no plugins
  • MDXProject case studies as Markdown + React
  • ZodSchema validation for siteConfig and content frontmatter
  • ResendTransactional email for the contact form
  • SharpAVIF/WebP/JPEG image optimization at build time
  • LucideIcon system
  • next-themesOS-aware light/dark switching

Tools

  • FigmaEditorial design system, type explorations
  • GitHubSource control and the back-of-house
  • VercelHosting, edge functions, preview deployments
  • NamecheapRegistrar for olusegunolayinka.com

Principles · /04

What I won't compromise on.

  • /01

    WCAG AA, baked in

    Semantic HTML, focus rings, contrast targets, motion-reduced fallbacks — wired in from the first commit, never bolted on after.

  • /02

    Lighthouse 95+ across all categories

    Performance, accessibility, best practices, and SEO. The number is a baseline, not a victory.

  • /03

    No CLS, no jank

    Images use intrinsic dimensions, fonts swap without layout shift, animations honor prefers-reduced-motion.

  • /04

    Single source of truth

    Zod-validated siteConfig + MDX content. Copy lives next to the work, not in a database.

Credits · /05

With thanks to the inspirations.

A short list of sites whose work shaped the early direction of this one. None of the layout was copied; the taste was borrowed.

Built end-to-end by Olusegun Olayinka, with patience from family and the quiet encouragement of the lagos sun.

— /end

If this is the kind of detail you care about, we should talk.

Get a tailored quoteOr just say hello →