Design system inventory

Typefaces

Two families self-hosted in public/fonts/. Mona Sans is declared but not currently exposed as a utility.

Type scale

Two custom scales (gh = display headings, gf = form/body). Standard Tailwind sizes (text-xs … text-2xl) are also available but not listed here.

Color

Every color token defined in the @theme block. Stage-color scales map directly to StageBadge labels (WIP → pink, napkin → green, etc.).

Shadows

Custom layered shadows (base color rgba(209,209,197,...)) override Tailwind's defaults.

⚠ Flagged for review. These are the current values — quality of output is a known concern; retire / rework before reusing.

Radius & spacing

Only one of each is defined beyond Tailwind defaults.

Gradient utilities

Class-based decorative gradients defined outside @theme (so they're plain CSS classes, not Tailwind tokens).

Components used on project pages

Walking down ProjectLayout.astro and the components it renders.

• ProjectLayout

  src/layouts/ProjectLayout.astro

  Full-bleed hero with animated canvas gradient, metadata grid (purpose, share, stage/authors, tech/tags), content grid body, updates list, related posts grid.

• Gradient

  src/components/Gradient.tsx

  React canvas-driven gradient for project hero background. Takes `colors[]` from project frontmatter (falls back to `[#6366F1, #F9A8D4]`).

• AuthorCard

  src/components/AuthorCard.astro

  Author row: avatar from `github.com/{handle}.png`, display name from the `people` collection, links to `/people/{handle}/`.

• StageBadge

  src/components/StageBadge.astro

  Maps `project-stages/*.md` frontmatter value → label + Tailwind colorpair (e.g. WIP → pink-100/pink-600).

• ShareIcons

  src/components/ShareIcons.astro

  Social share icons (Bluesky, X, LinkedIn, copy link) in the project hero.

• ProjectUpdateCard

  src/components/ProjectUpdateCard.astro

  Individual update in the project page's updates section. Same Card wrapper as other feed cards.

• PostCard

  src/components/PostCard.astro

  Rendered for each related post at the bottom of project pages. Long + micro variants, with optional `linkUrl` badge.

• AuthorLink

  src/components/AuthorLink.astro

  Thin avatar+handle link used inside AvatarStack and in author rows on updates.

• TagList

  src/components/TagList.astro

  Horizontal row of tag links (`/tags/{tag}/`) with a duotone phosphor tag icon.

Components used on post pages

From PostLayout.astro. Micro vs long post is signaled by the presence of linkUrl.

• PostLayout

  src/layouts/PostLayout.astro

  Narrow (max-w-3xl) prose layout. Header: facepile of AuthorLinks + FormattedDate. Title size toggles on `isMicroPost` (text-2xl vs text-4xl). Optional hero image rendered with Astro `<Image>`. Body is the MDX `<Content />` slot.

• AuthorLink

  src/components/AuthorLink.astro

  Avatar + handle pair; the facepile in the post header overlaps them with `-ml-2`.

• FormattedDate

  src/components/FormattedDate.astro

  Thin `<time>` wrapper. `format="full"` (default) → `Mar 14, 2026`; `format="short"` → `Mar 14`.

• Callout

  src/components/Callout.astro

  Prose callout block with optional phosphor duotone icon, gray left border, light gray fill. Used inside MDX content.

Shared components & utilities

Used across home / index / detail pages.

• Header

  src/components/Header.astro

  Top nav with NextOctocat logo, centered nav (Projects/Posts/People), right-side SocialLinks.

• Footer

  src/components/Footer.astro

  Copyright line + SocialLinks.

• BaseHead

  src/components/BaseHead.astro

  Sets `<title>`, meta description, OG tags, and imports the global stylesheet.

• FeedColumn / PostFeed / ProjectFeed

  src/components/FeedColumn.astro, PostFeed.astro, ProjectFeed.astro

  Column variants used on the homepage to aggregate posts & project updates into a mixed feed or a single-collection feed.

• ActiveProjectsSidebar

  src/components/ActiveProjectsSidebar.astro

  Homepage right-column listing of active projects (filtered by `metadata.isActive`).

• MasonryGrid

  src/components/MasonryGrid.astro

  CSS-columns masonry wrapper used to lay out mixed card sizes.

• AvatarStack

  src/components/AvatarStack.astro

  Overlapping row of AuthorLink avatars. `size` prop: `sm` (28px) | `md` (32px, default).

• TabSwitcher

  src/components/TabSwitcher.astro

  Tab UI primitive (not currently used on the visible homepage — surfaced here for completeness).

• SocialLinks

  src/components/SocialLinks.astro

  Row of social icons (Mastodon, Bluesky, X, Discord).

• Card

  src/components/Card.astro

  Shared wrapper currently used by every content card (PostCard, ProjectCard, ProjectUpdateCard, TalkCard). Nested outer/inner structure works around a CSS columns box-shadow clipping bug.

• Gradient utilities

  src/styles/global.css (.blob-1 / .blob-2 / .blob-3 / .terminal-bg / .gradient-border-* / .gradient-divider-*)

  Decorative gradient utility classes — used for hero blobs, badge borders, and the homepage section divider.

Content grid

.content-grid wraps project page bodies. It centers a ~40em main column by default and offers named breakout classes for wider content. Breakpoints: below 1280px → 3-column fallback; above → 7-track named grid.