fix: give each post type a unique domain color

Articles, notes, and bookmarks were all sharing amber, which defeats the purpose of per-type color identity. New complete color map (7 unique colors): - Articles: indigo (long-form writing) - Notes: teal (short posts) - Bookmarks: amber (saved links) - Likes: red (heart) - Replies: sky (conversation) - Reposts: green (sharing) - Photos: purple (visual) Updated across collection pages, blog.njk mixed view, recent-posts widget (now shows type-specific icons and colors for all 7 types), and design system documentation. Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-04-02 08:44:56 +02:00 · 2026-03-07 18:03:06 +01:00
parent 7d8b039ba7
commit db75bd05ea
5 changed files with 67 additions and 29 deletions
--- a/.interface-design/system.md
+++ b/.interface-design/system.md
@@ -29,19 +29,32 @@

 ## Domain Colors

-Every section of the site has a color identity. On domain pages, links, hover states, and card borders use the domain color instead of amber.
+Every post type and section has its own unique color identity. On collection pages, sparklines, card borders, icons, labels, hover states, and permalink links all use the domain color. No two post types share the same color.

-### Domain Map (complete — every page accounted for)
+### Post Type Colors (each unique — no sharing)

-| Domain | Tailwind color | Light text | Dark text | Pages |
-|--------|---------------|------------|-----------|-------|
-| **Writing** | amber (= accent) | amber-700 | amber-400 | `/blog/`, `/articles/`, `/notes/`, `/bookmarks/`, `/digest/`, `/news/`, `/categories/`, individual posts |
-| **Social** | rose | rose-600 | rose-400 | `/likes/`, `/replies/`, `/reposts/`, `/interactions/` |
+| Post Type | Tailwind color | Light text | Dark text | Icon | Pages |
+|-----------|---------------|------------|-----------|------|-------|
+| **Articles** | indigo | indigo-600 | indigo-400 | document | `/articles/` |
+| **Notes** | teal | teal-600 | teal-400 | chat bubble | `/notes/` |
+| **Bookmarks** | amber | amber-600 | amber-400 | bookmark | `/bookmarks/` |
+| **Likes** | red | red-600 | red-400 | heart (filled) | `/likes/` |
+| **Replies** | sky | sky-600 | sky-400 | reply arrow | `/replies/` |
+| **Reposts** | green | green-600 | green-400 | refresh arrows | `/reposts/` |
+| **Photos** | purple | purple-600 | purple-400 | camera | `/photos/` |
+
+Each color is applied consistently across: sparkline wrapper, card `border-l`, SVG icon, label text, title hover, and permalink link.
+
+### Section Colors (non-post-type pages)
+
+| Section | Tailwind color | Light text | Dark text | Pages |
+|---------|---------------|------------|-----------|-------|
+| **Blog** (mixed) | amber | amber-600 | amber-400 | `/blog/` (sparkline only — individual cards use their post-type color) |
 | **Code** | emerald | emerald-600 | emerald-400 | `/github/`, `/github/starred/` |
 | **Music** | purple | purple-600 | purple-400 | `/funkwhale/`, `/listening/` |
 | **Video** | red | red-600 | red-400 | `/youtube/` |
 | **Reading** | orange | orange-600 | orange-400 | `/blogroll/`, `/podroll/`, `/readlater/` |
-| **Neutral** | — (use accent) | — | — | `/` (home), `/about/`, `/cv/`, `/slashes/`, `/search/`, `/changelog/`, `/404` |
+| **Neutral** | accent (amber) | — | — | `/` (home), `/about/`, `/cv/`, `/slashes/`, `/search/`, `/changelog/`, `/404` |

 ### Brand Colors (hardcoded hex — not domain colors)

@@ -381,6 +394,6 @@ Reusable utility classes defined in `css/tailwind.css`:

 Audit findings — remaining gaps between this system and the current code:

-1. **Domain colors on section pages** — some pages still use generic accent instead of domain color for links, hovers, card borders
+1. ~~**Domain colors on section pages**~~ — ✅ Done: all 7 post-type collections + blog.njk mixed view + recent-posts widget use per-type colors
 2. **Active states** — add to buttons where appropriate
 3. **Consistent card hover** — some older templates use `hover:border-surface-400` instead of domain-colored border hover
--- a/_includes/components/widgets/recent-posts.njk
+++ b/_includes/components/widgets/recent-posts.njk
@@ -19,7 +19,7 @@
          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
        </svg>
        <div class="min-w-0">
-          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
+          <a href="{{ post.url }}" class="text-sm text-red-600 dark:text-red-400 hover:underline break-all line-clamp-1">
            Liked {{ likedUrl | replace("https://", "") | truncate(40) }}
          </a>
          <time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -34,7 +34,7 @@
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
        </svg>
        <div class="min-w-0">
-          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
+          <a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline line-clamp-1">
            {{ post.data.title or ("Bookmarked " + (bookmarkedUrl | replace("https://", "") | truncate(35))) }}
          </a>
          <time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -49,7 +49,7 @@
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
        </svg>
        <div class="min-w-0">
-          <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline break-all line-clamp-1">
+          <a href="{{ post.url }}" class="text-sm text-green-600 dark:text-green-400 hover:underline break-all line-clamp-1">
            Reposted {{ repostedUrl | replace("https://", "") | truncate(40) }}
          </a>
          <time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
@@ -73,14 +73,37 @@
        </div>
      </div>

-      {% else %}
-      {# Article / Note / other #}
-      <a href="{{ post.url }}" class="text-sm text-accent-600 dark:text-accent-400 hover:underline line-clamp-1">
-        {{ post.data.title or post.data.name or (post.templateContent | striptags | truncate(50)) or "Note" }}
+      {% elif post.data.title %}
+      {# Article #}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-indigo-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline line-clamp-1">
+            {{ post.data.title }}
          </a>
          <time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
            {{ (post.data.published or post.date) | dateDisplay }}
          </time>
+        </div>
+      </div>
+
+      {% else %}
+      {# Note #}
+      <div class="flex items-start gap-2">
+        <svg class="w-4 h-4 text-teal-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
+        </svg>
+        <div class="min-w-0">
+          <a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline line-clamp-1">
+            {{ post.templateContent | striptags | truncate(50) or "Note" }}
+          </a>
+          <time class="text-xs text-surface-500 block font-mono" datetime="{{ post.data.published }}">
+            {{ (post.data.published or post.date) | dateDisplay }}
+          </time>
+        </div>
+      </div>
      {% endif %}
    </li>
    {% endfor %}
--- a/articles.njk
+++ b/articles.njk
@@ -14,7 +14,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Articles</h1>
    {% set sparklineSvg = collections.articles | postingFrequency %}
    {% if sparklineSvg %}
-    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
+    <div class="flex-1 min-w-0 text-indigo-600 dark:text-indigo-400">{{ sparklineSvg | safe }}</div>
    {% endif %}
  </div>
  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
@@ -25,10 +25,10 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
  {% if paginatedArticles.length > 0 %}
  <ul class="post-list">
    {% for post in paginatedArticles %}
-    <li class="h-entry post-card border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
+    <li class="h-entry post-card border-l-[3px] border-l-indigo-400 dark:border-l-indigo-500">
      <div class="post-header">
        <h2 class="text-xl font-semibold mb-1 flex-1">
-          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-amber-600 dark:hover:text-amber-400" href="{{ post.url }}">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-600 dark:hover:text-indigo-400" href="{{ post.url }}">
            {{ post.data.title or "Untitled" }}
          </a>
        </h2>
@@ -52,7 +52,7 @@ permalink: "articles/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNu
      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
        {{ post.templateContent | striptags | truncate(250) }}
      </p>
-      <a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline mt-3 inline-block">
+      <a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline mt-3 inline-block">
        Read more &rarr;
      </a>
    </li>
--- a/blog.njk
+++ b/blog.njk
@@ -48,8 +48,10 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
      {% set borderClass = "border-l-[3px] border-l-sky-400 dark:border-l-sky-500" %}
    {% elif hasPhotos %}
      {% set borderClass = "border-l-[3px] border-l-purple-400 dark:border-l-purple-500" %}
+    {% elif post.data.title %}
+      {% set borderClass = "border-l-[3px] border-l-indigo-400 dark:border-l-indigo-500" %}
    {% else %}
-      {% set borderClass = "border-l-[3px] border-l-amber-400 dark:border-l-amber-500" %}
+      {% set borderClass = "border-l-[3px] border-l-teal-400 dark:border-l-teal-500" %}
    {% endif %}
    <li class="h-entry post-card {{ borderClass }}">

@@ -263,7 +265,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
      {# ── Article card (unchanged) ── #}
      <div class="post-header">
        <h2 class="text-xl font-semibold mb-1">
-          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-amber-600 dark:hover:text-amber-400" href="{{ post.url }}">
+          <a class="p-name u-url text-surface-900 dark:text-surface-100 hover:text-indigo-600 dark:hover:text-indigo-400" href="{{ post.url }}">
            {{ post.data.title }}
          </a>
        </h2>
@@ -287,7 +289,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
      <p class="p-summary text-surface-700 dark:text-surface-300 mt-3">
        {{ post.templateContent | striptags | truncate(250) }}
      </p>
-      <a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline mt-3 inline-block">
+      <a href="{{ post.url }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline mt-3 inline-block">
        Read more &rarr;
      </a>

@@ -315,7 +317,7 @@ permalink: "blog/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumber
        {{ post.templateContent | safe }}
      </div>
      <div class="post-footer mt-3">
-        <a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline">
+        <a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline">
          Permalink
        </a>
      </div>
--- a/notes.njk
+++ b/notes.njk
@@ -14,7 +14,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
    <h1 class="text-2xl sm:text-3xl font-bold text-surface-900 dark:text-surface-100">Notes</h1>
    {% set sparklineSvg = collections.notes | postingFrequency %}
    {% if sparklineSvg %}
-    <div class="flex-1 min-w-0 text-amber-600 dark:text-amber-400">{{ sparklineSvg | safe }}</div>
+    <div class="flex-1 min-w-0 text-teal-600 dark:text-teal-400">{{ sparklineSvg | safe }}</div>
    {% endif %}
  </div>
  <p class="text-surface-600 dark:text-surface-400 mb-6 sm:mb-8">
@@ -25,7 +25,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
  {% if paginatedNotes.length > 0 %}
  <ul class="post-list">
    {% for post in paginatedNotes %}
-    <li class="h-entry post-card border-l-[3px] border-l-amber-400 dark:border-l-amber-500">
+    <li class="h-entry post-card border-l-[3px] border-l-teal-400 dark:border-l-teal-500">
      <div class="post-header">
        <a class="u-url" href="{{ post.url }}">
          <time class="dt-published text-sm text-surface-500 dark:text-surface-400 font-medium font-mono" datetime="{{ post.date | isoDate }}">
@@ -48,7 +48,7 @@ permalink: "notes/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
        {{ post.templateContent | safe }}
      </div>
      <div class="post-footer mt-3">
-        <a href="{{ post.url }}" class="text-sm text-amber-600 dark:text-amber-400 hover:underline">
+        <a href="{{ post.url }}" class="text-sm text-teal-600 dark:text-teal-400 hover:underline">
          Permalink
        </a>
      </div>