Creative North Star: “The Considered Object”
The site should feel like a carefully made object in the classic Apple tradition: stylish, elegant, mostly minimal, and precise in the details. Nothing is there without a reason. Warm off-white paper and near-black ink carry almost everything. A single signal colour appears in a few exact places: the active nav underline, the current affiliation, venue tags, the accent line under each year, and the underline beneath the site owner’s name. Because it is rare, those few places stand out.
Structure comes from typography and hairlines, not boxes. A geometric grotesk sets names and headings, a neutral sans carries the reading, and a monospace face handles small metadata (dates, handles, repo names, venues) so it reads as data. Pages are long single columns, up to 1060px wide, with calm, generous air between sections. All spacing is on a quarter-rem grid. Lists are hairline-ruled ledgers. Cards appear only where an item has an image or is code.
Nothing moves on hover. Interaction shows only as colour: borders warm, text turns to the accent, and the nav underline draws in. The only motion is a brief rise-in of the hero when the page loads. Light and dark mode keep exactly the same hierarchy, and each mode has its own accent. The coral is a deliberate, open nod to Aleph Alpha and the dark-mode mint a nod to Kolibri. They are personal references to current work, not corporate branding.
Key Characteristics:
Warm, slightly yellowed neutrals with one hot accent. Coral and rust in light mode, mint in dark mode.
--fs-accent / --global-theme-color). Used for links, the hero affiliation, venue tag text, the brand-mark letters, contact and repo arrows, focus rings, and hover text. 6.2:1 on paper.--global-hover-color).The One Signal Rule. Each mode has exactly one accent hue: coral/rust in light, mint in dark. Never introduce a second accent hue, and never show the light accent in dark mode or the reverse.
The Two-Weight Accent Rule. The bright accent (Coral, Mint Bright) draws marks: lines, dots, underlines, borders, and tints. The text accent (Rust, Mint) carries every word. Always use the --fs-coral and --fs-accent variables so both modes follow automatically; never hardcode accent hex values.
The Acknowledged Nod Rule. Coral nods to Aleph Alpha and mint to Kolibri. They stay a colour reference only: never use an Aleph Alpha logo, wordmark, or anything that makes the site look like an official company page.
Display Font: Space Grotesk (with Inter, -apple-system) Body Font: Inter (with -apple-system, BlinkMacSystemFont, Segoe UI) Label/Mono Font: JetBrains Mono (with ui-monospace, SF Mono, Menlo)
Character: A geometric grotesk at weight 600 with tight tracking at large sizes gives names and headings an engineered calm. Inter carries the reading quietly at default tracking, and JetBrains Mono frames metadata as precise data. All three load from Google Fonts in _config.yml.
.post-title).font-style: normal).The Three Voices Rule. Grotesk names things, sans explains things, mono labels things. Mono never sets a sentence, and the grotesk never sets a paragraph.
The No-Shouting Rule. No uppercase and no bold above 600 anywhere. Hierarchy comes from size, family, and the Ink/Graphite contrast.
A single centred column, max_width: 1060px, with 20px side gutters, under a fixed, translucent navbar (64px body offset). The home page opens with a two-column hero: text and photo at 1.45fr : 0.85fr with a 3rem gap, vertically centred. The hero’s action row holds the Publications and Contact buttons, then a hairline separator, then the social icons in Graphite. On phones the icons drop to their own line without the separator.
Sections are separated by 4.25rem. Each section opens with a section head: the heading, a hairline stretching across the remaining width, and an optional mono “View all →” link at the end. Lists are ledgers: rows separated by 1px hairlines, with 1rem padding for news, 1.25rem for publications and contact rows. News rows use a two-column grid with a fixed 7.6rem mono date column. The News archive groups by year in a 6.5rem label column, and Publications groups by year with a short accent line under each year. Repositories use a two-column card grid with 1rem gaps. Events and Teaching use al-folio’s card grid.
Responsive behaviour: at ≤767.98px the hero stacks (photo max 420px), the repo grid becomes one column, and publication previews cap at 250px. At ≤575.98px, date columns move above their text and contact rows wrap, with the handle on its own line.
The Quarter-Rem Rule. Every padding, margin, and gap is a multiple of 0.25rem (0.125rem only for hairline-tight offsets). No values like 0.38rem or 1.15rem.
The Hairline Ledger Rule. Text-led lists (news, publications, contact) are rows divided by hairlines, never boxed. Cards are reserved for image-led items (events, teaching) and for repositories.
The system is strictly flat. Depth comes only from the tonal step between Paper and Surface and from 1px hairlines. No surface carries a shadow, at rest or on hover, and there are no gradients or glows. Two functional exceptions exist: the floating back-to-top button, and the focus halo on the search field.
box-shadow: 0 6px 20px rgba(20, 20, 15, 0.14)): the back-to-top button only.box-shadow: 0 0 0 3px Coral Soft): the search field on focus.The Flat-Always Rule. Surfaces never lift. Hover is colour only: a border warms toward coral, text turns accent, or a fill tints Coral Soft. Nothing translates, scales, or gains a shadow.
Gently rounded, never bubbly, and no pills. Containers (cards, repo cards, the portrait, banners) use 14px. Controls and inner panels (buttons, the search field, publication previews, the open abstract, the slides frame) use 10px. Link chips use 8px, the brand monogram box 7px, and venue tags 6px. Thin accent bars (nav underline, year accent line) use 2px. Every border is a 1px hairline; venue tags have no border at all. Images get a hairline border and are slightly desaturated (saturate(0.88)), returning to full colour on hover.
The component character is “quiet until touched”: neutral at rest, with the accent arriving on hover or focus as colour, never as movement.
_data/venues.yml carries URLs only). Award tags get an accent border.The section heading in the grotesk, followed by a hairline that runs to the right edge, ending in an optional mono “View all →” link in the accent. It opens every section on the home page.
A mono date column in Graphite, then a single line of news text that starts with an emoji marker, with hairline rows. The archive groups by year, with the year in the grotesk and a mono count underneath in the accent.
Full-width hairline rows: the network name in the grotesk with an icon in Graphite, the handle in mono, and a trailing accent “→”. On hover the name and icon turn accent; nothing moves.
A Surface card with the repo name in mono, a description in Graphite, and a mono meta row with a coral language dot and icons. An accent “→” sits in the top-right corner. On hover the border warms and the name turns accent.
_sass/_custom.scss, which loads last, rather than forking al-folio partials, and record any forked include in .al-folio-overrides.yml.--fs-accent, --fs-coral, --fs-accent-soft, --global-*, --fs-hairline-strong) so light and dark mode stay in sync.cubic-bezier(0.22, 0.61, 0.36, 1), staggered 0.05s), state changes in 0.18s, the nav underline in 0.22s, and theme cross-fades in 0.35s, all neutralised under prefers-reduced-motion.