design: white stock, a true red, and hyperref's palette on tags

The cream ground and the burgundy sat close enough in value that the page
read soft. Take the stock to near-white (#FCFCFA), the ink to #1A1A1A, and
the accent from burgundy to an actual red (#C5221F, 5.8:1) so links carry
the way coloured links carry in a paper.

Introduce three more accents named after hyperref's own link roles — url
blue, cite green, note amber, each over 4.5:1 on the new stock. Tag chips
cycle through all four and the citation markers in Publications set in
mono and in the cite colour, the way \cite renders under colorlinks. That
is where the green, blue, and yellow live; the red stays the site's voice.

Colours cycle with a chip's position, not a hash of its name. Hashing was
the first attempt and it clumped — one post came out green, blue, green,
green. Position guarantees an even run, and since tags are listed in the
same order everywhere, a tag still keeps its colour across views.

The share card, the favicon's inner diamond, the theme-color meta, and the
manifest follow the same palette.

Claude-Session: https://claude.ai/code/session_01S3mVZMgbynFxc2N874K9nH

Author: redcpp

public/favicon.svg

@@ -4,7 +4,7 @@
   "description": "Portfolio of Diego Said Anaya Mancilla — software engineer building production backend and full-stack systems.",
   "start_url": "/",
   "display": "standalone",
-  "background_color": "#FAF8F3",
+  "background_color": "#FCFCFA",
   "theme_color": "#1A1A1A",
   "icons": [
     {

public/site.webmanifest

@@ -45,7 +45,7 @@ const fontHref =
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
-    <meta name="theme-color" content="#FAF8F3" />
+    <meta name="theme-color" content="#FCFCFA" />
     <link rel="sitemap" href="/sitemap-index.xml" />
 
     {/* Open Graph */}

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import BaseLayout from './BaseLayout.astro';
 import { monthYearUpper, readTimeUpper } from '@/lib/format';
+import { tagClass } from '@/lib/tags';
 import 'katex/dist/katex.min.css';
 
 interface Props {
@@ -37,8 +38,8 @@ const { title, subtitle, excerpt, date, readMinutes, tags, slug } = Astro.props;
       <p class="text-[17px] text-muted mt-3 italic leading-relaxed">{subtitle}</p>
       <div class="flex flex-wrap gap-2 mt-4">
         {
-          tags.map((tag) => (
-            <span class="text-[12px] font-mono text-muted border border-rule px-2 py-0.5 rounded">
+          tags.map((tag, i) => (
+            <span class={`text-[12px] font-mono border px-2 py-0.5 rounded ${tagClass(i)}`}>
               {tag}
             </span>
           ))

src/layouts/BlogPost.astro

@@ -0,0 +1,32 @@
+/**
+ * Tag colours.
+ *
+ * The colour cycles with the tag's position in its list rather than with the
+ * tag's name. Hashing the name was the first attempt and it clumped: one post
+ * came out green, blue, green, green. Cycling by position guarantees an even
+ * spread and never puts two of the same colour side by side, and because tags
+ * are listed in the same order on every view, a given tag keeps its colour
+ * wherever it appears.
+ *
+ * The two lists are the same four colours in the same order: Tailwind classes
+ * for the pages, hex for the Open Graph card, which Satori renders without ever
+ * seeing the stylesheet. Keep them in step.
+ */
+
+/** Written out in full so Tailwind's scanner finds each class literally. */
+const TAG_CLASSES = [
+  'text-accent border-accent/30 bg-accent/5',
+  'text-url border-url/30 bg-url/5',
+  'text-cite border-cite/30 bg-cite/5',
+  'text-note border-note/30 bg-note/5',
+];
+
+const TAG_HEXES = ['#C5221F', '#185ABC', '#137333', '#B45309'];
+
+export function tagClass(index: number) {
+  return TAG_CLASSES[index % TAG_CLASSES.length];
+}
+
+export function tagHex(index: number) {
+  return TAG_HEXES[index % TAG_HEXES.length];
+}

src/lib/tags.ts

@@ -2,6 +2,7 @@
 import { getCollection } from 'astro:content';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import { monthYear, readTime } from '@/lib/format';
+import { tagClass } from '@/lib/tags';
 
 // Ascending by date, matching the order the hand-maintained POSTS array used.
 const posts = (await getCollection('blog')).sort(
@@ -33,8 +34,8 @@ const posts = (await getCollection('blog')).sort(
             </h2>
             <p class="text-[15px] text-muted mt-2 leading-relaxed">{post.data.excerpt}</p>
             <div class="flex flex-wrap gap-2 mt-3">
-              {post.data.tags.map((tag) => (
-                <span class="text-[12px] font-mono text-muted border border-rule px-2 py-0.5 rounded">
+              {post.data.tags.map((tag, i) => (
+                <span class={`text-[12px] font-mono border px-2 py-0.5 rounded ${tagClass(i)}`}>
                   {tag}
                 </span>
               ))}

src/pages/blog/index.astro

@@ -109,11 +109,27 @@ const SKILLS = [
   },
 ];
 
+// The reference marker is split out so it can set in mono and in the citation
+// colour, the way a paper's \cite renders under hyperref.
 const PUBLICATIONS = [
-  '[1] D.S. Anaya Mancilla et al. "VCF/Plotein: visualization and prioritization of genomic variants from VCF files." <em>Bioinformatics</em>, Oxford Academic, 2019.',
-  '[2] D.S. Anaya Mancilla et al. "ADR-47: The Case Against PACT xUSD Launch." xBacked DAO, 2022.',
-  '[3] D.S. Anaya Mancilla et al. "ADR-46: Vault Looping." xBacked DAO, 2022.',
-  '[4] D.S. Anaya Mancilla et al. "xBacked Litepaper v2.0." xBacked DAO, 2022.',
+  {
+    ref: '[1]',
+    citation:
+      'D.S. Anaya Mancilla et al. "VCF/Plotein: visualization and prioritization of genomic variants from VCF files." <em>Bioinformatics</em>, Oxford Academic, 2019.',
+  },
+  {
+    ref: '[2]',
+    citation:
+      'D.S. Anaya Mancilla et al. "ADR-47: The Case Against PACT xUSD Launch." xBacked DAO, 2022.',
+  },
+  {
+    ref: '[3]',
+    citation: 'D.S. Anaya Mancilla et al. "ADR-46: Vault Looping." xBacked DAO, 2022.',
+  },
+  {
+    ref: '[4]',
+    citation: 'D.S. Anaya Mancilla et al. "xBacked Litepaper v2.0." xBacked DAO, 2022.',
+  },
 ];
 
 const HONORS = [
@@ -231,7 +247,10 @@ const HONORS = [
       <h2 class="text-[22px] font-bold font-serif mb-6">Publications</h2>
       {
         PUBLICATIONS.map((entry) => (
-          <p class="text-[15px] leading-[1.7] mb-4 font-serif text-ink" set:html={entry} />
+          <p class="text-[15px] leading-[1.7] mb-4 font-serif text-ink flex gap-2">
+            <span class="font-mono text-[13px] text-cite shrink-0 pt-0.5">{entry.ref}</span>
+            <span set:html={entry.citation} />
+          </p>
         ))
       }
     </section>

src/pages/index.astro

@@ -4,6 +4,7 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import satori from 'satori';
 import { Resvg } from '@resvg/resvg-js';
+import { tagHex } from '@/lib/tags';
 
 /**
  * Build-time Open Graph images, one per route.
@@ -13,17 +14,18 @@ import { Resvg } from '@resvg/resvg-js';
  * Rendering here means each post gets a preview carrying its own title instead
  * of a single generic card.
  *
- * The card is the site's own palette and type: cream stock, serif title, mono
- * metadata. The burgundy colophon band across the foot is what carries it in a
- * feed — an all-cream card at thumbnail size reads as a blank rectangle.
+ * The card is the site's own palette and type: near-white stock, serif title,
+ * mono metadata, tags in the same four colours they wear on the site. The red
+ * colophon band across the foot is what carries it in a feed — an all-white
+ * card at thumbnail size reads as a blank rectangle.
  */
 
-const PAPER = '#FAF8F3';
-const INK = '#1F1D1A';
-const ACCENT = '#7B2D26';
-const MUTED = '#6B665E';
-/** Cream dimmed against the burgundy band, the counterpart of MUTED on paper. */
-const BAND_MUTED = '#DFC8C4';
+const PAPER = '#FCFCFA';
+const INK = '#1A1A1A';
+const ACCENT = '#C5221F';
+const MUTED = '#6B6B70';
+/** White dimmed against the red band, the counterpart of MUTED on paper. */
+const BAND_MUTED = '#F3C9C8';
 
 // Read from the project root, not import.meta.url: this module is bundled into
 // dist/.prerender during the build, so a relative URL would resolve there. The
@@ -41,8 +43,10 @@ const AUTHOR = 'Diego Said Anaya Mancilla';
 interface Card {
   title: string;
   subtitle: string;
-  /** Mono kicker above the title. Omitted where the title already says it. */
-  eyebrow?: string;
+  /** Plain mono kicker, for cards that have no tags to show. */
+  kicker?: string;
+  /** Post tags, each in the colour it carries on the site. */
+  tags?: string[];
   /**
    * Left half of the colophon band. Omitted on the home card, whose title is
    * already the name — the band would only repeat it.
@@ -57,7 +61,7 @@ export async function getStaticPaths() {
     {
       route: 'index',
       card: {
-        eyebrow: 'Software Engineer',
+        kicker: 'Software Engineer',
         title: AUTHOR,
         subtitle:
           'Production backend and full-stack systems. Portfolio, publications, and technical writing.',
@@ -75,7 +79,7 @@ export async function getStaticPaths() {
     ...posts.map((post) => ({
       route: `blog/${post.id}`,
       card: {
-        eyebrow: post.data.tags.slice(0, 3).join('  ·  '),
+        tags: post.data.tags.slice(0, 3),
         title: post.data.title,
         subtitle: post.data.subtitle,
         byline: AUTHOR,
@@ -114,7 +118,42 @@ function titleSize(title: string) {
   return 80;
 }
 
-function template({ title, subtitle, eyebrow, byline }: Card) {
+const eyebrowText = {
+  fontFamily: MONO,
+  fontSize: '21px',
+  letterSpacing: '0.14em',
+  textTransform: 'uppercase',
+};
+
+/** Tags keep their own colours; a plain kicker takes the accent. */
+function eyebrow({ kicker, tags }: Card) {
+  const row = (children: unknown[]) =>
+    h('div', { style: { display: 'flex', marginBottom: '30px' } }, ...children);
+
+  if (tags?.length) {
+    return row(
+      tags.flatMap((tag, i) => [
+        i > 0
+          ? h(
+              'div',
+              { style: { display: 'flex', ...eyebrowText, color: MUTED, padding: '0 14px' } },
+              '·',
+            )
+          : null,
+        h('div', { style: { display: 'flex', ...eyebrowText, color: tagHex(i) } }, tag),
+      ]),
+    );
+  }
+
+  if (kicker) {
+    return row([h('div', { style: { display: 'flex', ...eyebrowText, color: ACCENT } }, kicker)]);
+  }
+
+  return null;
+}
+
+function template(card: Card) {
+  const { title, subtitle, byline } = card;
   return h(
     'div',
     {
@@ -145,23 +184,7 @@ function template({ title, subtitle, eyebrow, byline }: Card) {
           padding: '0 84px',
         },
       },
-      eyebrow
-        ? h(
-            'div',
-            {
-              style: {
-                display: 'flex',
-                fontFamily: MONO,
-                fontSize: '21px',
-                color: ACCENT,
-                letterSpacing: '0.14em',
-                textTransform: 'uppercase',
-                marginBottom: '30px',
-              },
-            },
-            eyebrow,
-          )
-        : null,
+      eyebrow(card),
       h(
         'div',
         {

src/pages/og/[...route].png.ts

@@ -10,19 +10,19 @@
 
   body {
     font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
-    background-color: #FAF8F3;
-    color: #1F1D1A;
+    background-color: #FCFCFA;
+    color: #1A1A1A;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   :focus-visible {
-    outline: 2px solid #7B2D26;
+    outline: 2px solid #C5221F;
     outline-offset: 2px;
   }
 
   ::selection {
-    background-color: rgba(123, 45, 38, 0.18);
+    background-color: rgba(197, 34, 31, 0.15);
   }
 }
 
@@ -53,11 +53,11 @@
   /* Shiki renders <pre class="astro-code"> with an inline background from the
      theme; override it to the paper-toned block the site used previously. */
   .blog-article pre {
-    background-color: #F3F0E9 !important;
-    color: #1F1D1A;
+    background-color: #F6F6F3 !important;
+    color: #1A1A1A;
     padding: 1.25rem 1.5rem;
     border-radius: 0.5rem;
-    border: 1px solid #E3DED4;
+    border: 1px solid #E4E4E1;
     font-family: 'IBM Plex Mono', monospace;
     font-size: 14px;
     line-height: 1.7;
@@ -69,7 +69,7 @@
   .blog-article code {
     font-family: 'IBM Plex Mono', monospace;
     font-size: 0.875em;
-    background-color: #F3F0E9;
+    background-color: #F2F2EF;
     padding: 0.125rem 0.375rem;
     border-radius: 0.25rem;
   }
@@ -105,13 +105,13 @@
   }
 
   .blog-article a {
-    color: #7B2D26;
+    color: #C5221F;
     text-decoration: underline;
     text-underline-offset: 4px;
   }
 
   .blog-article a:hover {
-    color: #1F1D1A;
+    color: #1A1A1A;
   }
 
   /* KaTeX display blocks scroll rather than overflow the measure. */
@@ -132,12 +132,12 @@
   .blog-article th {
     font-weight: 600;
     text-align: left;
-    border-top: 1.5px solid #1F1D1A;
-    border-bottom: 1px solid #1F1D1A;
+    border-top: 1.5px solid #1A1A1A;
+    border-bottom: 1px solid #1A1A1A;
   }
 
   .blog-article tr:last-child td {
-    border-bottom: 1.5px solid #1F1D1A;
+    border-bottom: 1.5px solid #1A1A1A;
   }
 
   .blog-article th[align='right'],

src/styles/global.css

@@ -4,11 +4,17 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        paper: '#FAF8F3',
-        ink: '#1F1D1A',
-        accent: '#7B2D26',
-        muted: '#6B665E',
-        rule: '#E3DED4',
+        paper: '#FCFCFA',
+        ink: '#1A1A1A',
+        muted: '#6B6B70',
+        rule: '#E4E4E1',
+        // Named after hyperref's own link roles. Accent is the site's voice;
+        // the other three appear on tag chips and citation markers. Every one
+        // clears 4.5:1 on paper.
+        accent: '#C5221F',
+        url: '#185ABC',
+        cite: '#137333',
+        note: '#B45309',
       },
       fontFamily: {
         serif: ['"Source Serif 4"', 'Georgia', '"Times New Roman"', 'serif'],