How this site is built
I wanted this portfolio to have a very clean newspaper-y look and decided to work with Claude Code to build it quickly and explore its possibilities. I started with a simple MVP with links and built the internal pages later. I adapted the styling to have a bit more personality by including the yellow highlighter and red pencil where anyone can write or edit as a newspaper editor.
This site runs on its own small design system. Every color, size and space comes from one file of tokens, so changing a value there restyles the whole site. The token names are intentionally kept very simple, as there’s no need for multiple levels of definition. The swatches and sizes below are read live from that file, so they can’t drift from the real thing.
Principles
- Plain and light. Hand-written HTML, CSS and a little JavaScript. No framework and no build step.
- Sizes in rem. The whole layout grows with a visitor’s text-size setting, not only with page zoom. Hairlines stay in pixels.
- Scales with the screen. The design is sized for about 1600px, and from there everything grows together on larger monitors.
- Contrast first. Text and link colors are checked against the surfaces they sit on. The ratios below are calculated in your browser.
- Semantic names. Components use names like
--color-text-muted, never raw values, so a palette change is one edit.
Color
Surfaces
--color-bgThe page--color-bg-lightA card, like a sheet on the page--color-bg-raisedRaised areas
Text and links
--color-textBody text--color-text-mutedSecondary text--color-linkLinks, ink blue--color-link-hoverLink on hover--color-link-activeLink while pressed
Lines
--color-borderHairlines--color-border-strongHover border
Marks
--color-highlightThe yellow behind my portrait: section labels and selected text--color-pencilThe editor’s red pencil
Type
- Newsreader
--font-serifHeadings and the lead text, a newspaper serif - Inter
--font-sansBody text and interface - IBM Plex Mono
--font-monoSmall uppercase labels, like a token name or a spec
Scale
- Heading one
--fs-h1 - Heading two
--fs-h2 - Heading three
--fs-h3 - Lead text for the opening of a page
--fs-lead - Body text, for reading at length
--fs-body - Small text, for captions and notes
--fs-small - Tiny, for labels
--fs-tiny
Space
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8--space-9
Shape and motion
--radius--radius-lg
Motion is short and quiet: --dur-fast and --dur-slow on a single easing curve, and it switches off for visitors who ask their device for reduced motion.