Styling system

The site is styled with vanilla-extract : styles are written in TypeScript files ending in .css.ts, compiled to static CSS at build time, with class names generated as am-<hash> (the identifier scheme is set in next.config.ts and mirrored in the Storybook and Vitest configs).

Design tokens

src/config/styles/themes/theme.css.ts is the single place for the design tokens.

Colors: themeColors exposes the palette as named tokens (primary, secondary, accent, text, background, and a gray-100 to gray-1000 scale). The look is navy on a light neutral background.
Breakpoints: breakpoints.tablet (768px), breakpoints.desktop (1024px), breakpoints.largeDesktop (1440px) and breakpoints.maxDesktop (1920px), each usable as a media-query key.
Spacing and radius: space and borderRadius.
Typography: four font families are injected as CSS variables by src/app/layout.tsx: --app-font-heading (Italiana), --app-font-body (Prompt), --app-font-display (Saira) and --app-font-label (Smooch Sans).

Sprinkles

sprinkles (exported from the same file) is a typed set of utility properties for responsive layout, color and typography. A style can mix it with plain vanilla-extract rules:


import { style } from "@vanilla-extract/css";
 
import { breakpoints, sprinkles, themeColors } from "@/config/styles/themes/theme.css";
 
export const PageShellStyle = style([
  sprinkles({ display: "flex", flexDirection: "column", gap: { mobile: "3xl", tablet: "4xl" } }),
  { paddingTop: "clamp(6.5rem, 14vw, 10rem)" },
]);

The page shell

Secondary pages (/about, /experience/[slug], /skills/[skill], /resume) share src/partials/PageShell. It provides:

PageShell: the back link and the vertical rhythm, inside the app Container, which supplies the main landmark and the footer.
PageHeader, PageBody, MetaList, PageLead, PageSection, PageProse, PageHighlights, PageLinkList, PageSectionLink and PageAdjacentNav.

It also exports hairline and focusRing, so a page that needs its own layout can still share the rules and focus treatment. The look is quiet and editorial: an Italiana title over a navy rule, copy in a restrained measure, and thin rules instead of cards.

Print

The /resume page has a print stylesheet in src/app/resume/Resume.css.ts: the site chrome is hidden, type is compacted, and rows avoid page breaks, so Save as PDF gives a clean two-page document on US Letter or A4.

Motion and accessibility

Motion respects prefers-reduced-motion: the landing hero does not pin and nothing moves when it is set.
Interactive elements keep a visible focus ring, and pages keep a single h1 with ordered headings.