diff --git a/.interface-design/system.md b/.interface-design/system.md new file mode 100644 index 0000000..a46f728 --- /dev/null +++ b/.interface-design/system.md @@ -0,0 +1,93 @@ +# Design System — rmendes.net + +## Direction: Workshop Terminal + +**Feel:** A well-configured terminal in a warm room. Structure is precise and technical. Warmth comes from surfaces and content, not decorative color. Color is signal, not decoration. + +**Signature:** Chromatically quiet at rest, vivid in context. The base is warm monochrome. Color enters when content demands it — music pages glow purple, code pages pulse emerald, social feeds carry brand colors. You feel the shift as you navigate between worlds. + +## Intent + +**Who:** Visitors to a DevOps engineer's personal site — peers, recruiters, fellow IndieWeb enthusiasts, RSS subscribers. They're reading, browsing, discovering. + +**What:** Read posts, explore interests, follow feeds, understand who this person is. + +**How it should feel:** Like opening a well-used notebook in a workshop. Technical precision meets personal warmth. Not corporate, not cold, not decorative. + +## Surfaces — Warm Stone + +Warm neutral tones. Not yellow — just not cold. The difference is felt, not seen. + +| Token | Light | Dark | Role | +|-------|-------|------|------| +| 50 | `#faf8f5` | — | Canvas background | +| 100 | `#f4f2ee` | — | Card surfaces | +| 200 | `#e8e5df` | — | Borders, dividers | +| 300 | `#d5d0c8` | — | Strong borders | +| 400 | `#a09a90` | — | Muted/placeholder text | +| 500 | `#7a746a` | — | Secondary text | +| 600 | `#5c5750` | — | — | +| 700 | `#3f3b35` | — | Dark text secondary | +| 800 | `#2a2722` | — | Card surfaces (dark) | +| 900 | `#1c1b19` | — | Canvas (dark) | +| 950 | `#0f0e0d` | — | Deepest dark | + +## Text Hierarchy + +| Level | Light | Dark | Usage | +|-------|-------|------|-------| +| Primary | surface-900 `#1c1b19` | surface-50 `#faf8f5` | Headlines, body | +| Secondary | surface-600 `#5c5750` | surface-400 `#a09a90` | Supporting text | +| Muted | surface-400 `#a09a90` | surface-600 `#5c5750` | Metadata, timestamps | +| Faint | surface-300 `#d5d0c8` | surface-700 `#3f3b35` | Disabled, decorative | + +## Interactive — Accent (Warm Amber) + +Default interactive color for generic links, CTAs, focus rings. Terminal amber warmth. + +| Weight | Value | Usage | +|--------|-------|-------| +| 400 | `#fbbf24` | Dark mode links, hover states | +| 500 | `#f59e0b` | — | +| 600 | `#d97706` | Light mode links, buttons | +| 700 | `#b45309` | Light mode hover | + +## Domain Colors + +Each section of the site owns its chromatic identity. These override accent on their respective pages. + +| Domain | Tailwind Color | Pages | +|--------|---------------|-------| +| Writing/Blog | amber (= accent) | blog, articles, notes, homepage | +| Code/GitHub | emerald | github, repo widgets | +| Music | violet | funkwhale, listening, last.fm | +| Bluesky | `#0085ff` | social-activity bluesky tab | +| Mastodon | `#a730b8` | social-activity mastodon tab | +| Bookmarks | amber | bookmarks page | +| Likes | rose | likes page | +| Replies | sky | replies page | +| Reposts | emerald | reposts page | +| Photos | violet | photos page | +| RSS/Podcasts | orange | podroll, subscribe, RSS links | +| CV | neutral (no accent) | cv page | + +## Typography + +- **Body:** Inter — clean, technical sans-serif +- **Metadata:** `font-mono` for dates, timestamps, stats, version numbers +- **Headlines:** Inter bold, tight tracking + +## Depth Strategy + +**Borders only.** No drop shadows. Low-opacity warm borders define surfaces. Hierarchy comes from surface color shifts, not elevation effects. + +## Spacing + +Base: 4px (Tailwind default). No custom scale needed. + +## Dark Mode + +- Surfaces invert (dark warm canvas, lighter warm cards) +- Domain colors use their 400-weight for dark mode (lighter/brighter) +- Borders use warm low-opacity rgba +- No shadows in either mode diff --git a/_includes/components/blog-sidebar.njk b/_includes/components/blog-sidebar.njk index 1b83057..a3b2bca 100644 --- a/_includes/components/blog-sidebar.njk +++ b/_includes/components/blog-sidebar.njk @@ -72,7 +72,7 @@ class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }" > -
+
{# Panel #} -
+ class="w-full px-3 py-2 border border-surface-300 dark:border-surface-600 rounded-lg bg-surface-50 dark:bg-surface-700 text-surface-900 dark:text-surface-100 placeholder-surface-400 focus:outline-none focus:ring-2 focus:ring-[#a730b8] focus:border-transparent text-sm"> diff --git a/_includes/components/funkwhale-stats-content.njk b/_includes/components/funkwhale-stats-content.njk index bfdef89..b7123a2 100644 --- a/_includes/components/funkwhale-stats-content.njk +++ b/_includes/components/funkwhale-stats-content.njk @@ -1,19 +1,19 @@ {# Stats Summary Cards #} {% if summary %}
-
+
{{ summary.totalPlays or 0 }} Plays
-
+
{{ summary.uniqueTracks or 0 }} Tracks
-
+
{{ summary.uniqueArtists or 0 }} Artists
-
+
{{ summary.totalDurationFormatted or '0m' }} Listened
@@ -26,7 +26,7 @@

Top Artists

{% for artist in topArtists | head(5) %} -
+
{{ loop.index }} {{ artist.name }} {{ artist.playCount }} plays diff --git a/_includes/components/homepage-sidebar.njk b/_includes/components/homepage-sidebar.njk index 02afd05..c9931a8 100644 --- a/_includes/components/homepage-sidebar.njk +++ b/_includes/components/homepage-sidebar.njk @@ -61,7 +61,7 @@ class="widget-collapsible mb-4" x-data="{ open: localStorage.getItem('{{ widgetKey }}') !== null ? localStorage.getItem('{{ widgetKey }}') === 'true' : {{ defaultOpen }} }" > -
+