Amelia Wattenberger — Expressive personal portfolio hero
Hero · personal-publishing
Other · personal-publishing
A spacious text-first writing index contrasting small uppercase category labels with larger stacked editorial links.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: Amelia Wattenberger — Minimal writing index
colors:
canvas: '#FFFFFF'
primary: '#0F2B3D'
body-ink: '#0F2B3D'
typography:
heading:
fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple
Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
fontSize: 14px
fontWeight: 400
lineHeight: 20px
body:
fontFamily: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
fontSize: 24px
fontWeight: 600
lineHeight: 32px
---
## Overview
A spacious text-first writing index contrasting small uppercase category labels with larger stacked editorial links. Isolated component selected with `div.py-20`; the screenshot contains its measured bounds, not the entire page. Inspected 2026-10-05.
## Colors
White is the primary canvas, dark blue-black supports body text, and green-black lettering anchors the name. Bright cyan belongs to the flower artwork; project images introduce their own palettes. Tokens are sampled computed colors; descriptive accent colors are visual observations, not measured hex values.
## Typography
Measured heading/label sample: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", 14px, weight 400, leading 20px. Supporting sample: Parclo, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif, 24px, leading 32px. These are local computed samples, not a universal type scale. Artwork and child spans may differ from their parent styles.
## Layout
Keep two consecutive groups, current thinking and previous writing, with generous separation. Links stay in a simple vertical flow on both inspected widths; do not convert them into thumbnail cards. Desktop screenshot: 1440 × 1496px at a 1440px viewport. Mobile evidence: 390 × 1688px at a 390px viewport. Breakpoint thresholds are not inferred from two observations.
## Elevation & Depth
The main composition is flat and airy. Project screenshots create visual texture rather than a uniform elevated card system.
## Shapes
Expressive heavy serif lettering contrasts with a scalloped circular badge and mostly rectangular project imagery. Do not replace the custom name treatment with a generic UI heading.
## Components
Small uppercase group labels and stacked text links. Maintain the hierarchy between quiet category labels and article titles; hover states were not independently verified.
## Do’s and Don’ts
Preserve the reference-specific hierarchy, wrapping and spacing described above. Use original copy and assets when adapting. Keep links keyboard-accessible with visible focus. Do not infer animations, hover states or hidden menus from this static capture. No full accessibility audit was performed.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.