Flux — Design Sandbox

Exploring typography, rhythm, and stream design for vincent.demeester.fr

§§Typography Specimen

§Heading Sizes

§Dropcap

Gardens can be very personal and full of whimsy or a garden can be a source of food and substance. This is my personal space on the World Wide Web. It is meant to be simple, modest and persistent — by persistent, it means that I am trying to not break URIs. The list below is a "selection" of some content.

§Small Caps

This website uses Tufte CSS as its foundation, taking cues from Edward Tufte's principles of data-ink ratio and information density. The HTML is semantic and the CSS is minimal.

§§Link Styles

Links are styled following Adactio's guidance: subtle underline offset, thin decoration, translucent color. Hover reveals full underline. Compare:

• Default styled link — text-underline-offset: 0.15em
• Thicker underline — text-decoration-thickness: 2px
• More offset — text-underline-offset: 0.3em
• Accent-colored underline — text-decoration-color: accent
• Dotted underline — text-decoration-style: dotted

§§Vertical Rhythm

All spacing derives from --lh (one line-height unit = 28.8px at 18px/1.6). Following Pawel Grzybek's approach with lh units, and Christian Tietze's CSS custom properties for consistency.

Paragraph spacing: 1lh (one line). Heading top margin: 2lh. This keeps text on a consistent baseline grid, which your eye perceives as calm and ordered even without consciously noticing it.

Butterick says: optimal line spacing is 120–145% of point size. We use 160% (1.6) — generous but not loose, good for long-form reading on screens.

§§Block Elements

§Blockquote — Standard

While not everybody has or works in a dirt garden, we all share a familiarity with the idea of what a garden is. A garden is usually a place where things grow.

Joel Hooks

§Blockquote — Epigraph

“The phrase “digital garden” is a metaphor for thinking about writing and creating that focuses less on the resulting “content”, and more on the process, care, and craft it takes to get there.”

Joel Hooks

§Blockquote — Pullquote

If everything is highlighted, nothing is highlighted.

Nikita Tonsky

§Blockquote — Nested / Multi-paragraph

Minimalism helps one focus on the content. Anything besides the content is distraction and not design.

‘Attention!’, as Ikkyu would say.

Gwern

§Code — Tonsky-style Syntax Highlighting

Following Tonsky’s principles: only 4 semantic categories get color. Strings (green bg), comments (warm bg), definitions (blue bg), and constants (purple text). Everything else stays default. No bold.

§Go

// Entry represents a single item in the flux stream.
// It can be a GitHub PR, a bookmark, a note, etc.
type Entry struct {
    ID     string    `json:"id"`
    Kind   string    `json:"kind"`
    Title  string    `json:"title"`
    URL    string    `json:"url"`
    Date   time.Time `json:"date"`
    Tags   []string  `json:"tags"`
    Body   string    `json:"body,omitempty"`
}

func NewEntry(kind string, title string, url string) *Entry {
    return &Entry{
        ID:    generateID(kind, url),
        Kind:  kind,
        Title: title,
        URL:   url,
        Date:  time.Now(),
    }
}

const (
    KindGitHubPR    = "github-pr"
    KindBookmark    = "bookmark"
    MaxRetries      = 3
    DefaultTimeout  = 30 * time.Second
    EnableCache     = true
)

§Python

import json
from pathlib import Path
from datetime import datetime

# Tonsky: comments deserve bright color.
# Good comments ADD to code.

class FluxAggregator:
    """Merge entries from all sources into a single feed."""

    def __init__(self, cache_dir: Path, max_entries: int = 500):
        self.cache_dir = cache_dir
        self.max_entries = max_entries
        self.sources: list[Source] = []
        self._last_run: datetime | None = None

    def generate(self) -> list[dict]:
        """Fetch from all sources, merge, deduplicate, sort."""
        entries = []
        for source in self.sources:
            new = source.fetch(since=self._last_run)
            entries.extend(new)

        # Sort reverse-chronological, deduplicate by ID
        seen = set()
        result = []
        for e in sorted(entries, key=lambda x: x["date"], reverse=True):
            if e["id"] not in seen:
                seen.add(e["id"])
                result.append(e)

        return result[:500]

§Nix

{ pkgs, lib, config, ... }:

let
  # Build the flux binary from source
  flux = pkgs.buildGoModule rec {
    pname = "flux";
    version = "0.1.0";
    src = ../.;
    vendorHash = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=";
  };
in {
  systemd.services.flux-generate = {
    description = "Generate flux stream";
    serviceConfig = {
      Type = "oneshot";
      ExecStart = "${flux}/bin/flux generate";
      User = "www";
    };
  };

  systemd.timers.flux-generate = {
    wantedBy = [ "timers.target" ];
    timerConfig.OnCalendar = "hourly";
    timerConfig.Persistent = true;
  };
}

§Callouts

§Table

§Figures & Images

§Standard figure with caption

§Margin figure (Tufte-style)

This paragraph has a margin figure floating next to it. The margin figure is a Tufte signature — small supporting images placed in the margin where the reader’s eye can find them without breaking the reading flow. They share the same space as sidenotes, so you should avoid placing both on the same paragraph.

The margin figure works especially well for small diagrams, icons, logos, or thumbnail images that support but don’t dominate the text. On narrow screens, it collapses inline.

§Bordered figure (framed)

§Screenshot (drop shadow)

§Full-width figure

§Figure grid — 2 columns

§Figure grid — 3 columns

§No caption (bare image)

§Lists — Marker Options

Pick a list marker style. Current is ✧ (white star).

• This is the current marker (✧ white star)
• A second item to see the rhythm
• And a third with a link and inline code

§Alternatives

• Reference mark (※)
• Japanese-influenced
• Unusual but elegant

• Hyphen bullet (⁃)
• Like a dash but shorter
• Understated

• En dash (–)
• Typographically clean
• Common in European typography

• Hedera (❧)
• Typographic fleuron
• Distinctive, bookish

1. Ordered lists stay numbered
2. Nothing fancy here
3. Just clean spacing

§§Tufte Sidenotes

Edward Tufte's distinctive style places supplementary information in the margin rather than in footnotes at the bottom of the page. This is a numbered sidenote. On wide screens, it floats in the right margin. On narrow screens, it becomes an inline block below the paragraph. The approach follows Gwern's sidenote analysis. This keeps the reader's eye on the page instead of bouncing back and forth. The idea is simple: if something is worth saying, say it nearby.

Margin notes are similar but unnumbered — useful for brief asides or contextual links.This is an unnumbered margin note. Kenneth Reitz calls this "margins are for thinking." These work beautifully with Tufte CSS and ox-tufte. They provide a visual rhythm to the page, filling what would otherwise be empty whitespace with relevant context.

A paragraph without sidenotes, for contrast. Notice how the text column stays at a comfortable reading width of about 640px (roughly 65 characters per line), which typographers consider optimal. Robert Bringhurst recommends 45–75 characters per line. We aim for ~65. This is also what Gwern targets. The margin area is a bonus, not a crutch.

§§Color Palette

Light mode draws from Daniel Miessler's warm parchment. Dark mode from Beat's stream. Both shift the same CSS variables.

§Accent Color Picker

Click a swatch to preview it as the accent color across the whole page — dropcaps, blockquote borders, callout labels, pullquotes, release cards, sidenote numbers, and § anchors all update live.

§Light Mode

§Dark Mode

import { Database } from 'bun:sqlite'

const db = new Database('mydb.sqlite', { create: true })

const query = db.query(`
  SELECT * FROM users WHERE name = ?
`)

console.log(query.all('vincent'))

§§Prose Example

This section demonstrates how a full article or journal entry would look with this design system. The warm background, serif body text, and generous line-height create a reading experience closer to a book than a typical blog. Every decision — from the font choice to the margin width — serves readability.

As I said in "Random thoughts after 2 years," I've been inspired by Joel's digital garden article. This space is inspired by a lot of other spaces, but adapted to my vision.

I really like the way Joel speaks about it: Joel Hooks, My blog is a digital garden, not a blog. This framing changed how I think about publishing online.

The phrase "digital garden" is a metaphor for thinking about writing and creating that focuses less on the resulting "content", and more on the process, care, and craft it takes to get there.

I think I've always struggled with the blog approach. I sometimes want to publish things that are not related to time. That can be true no matter when you read it. The opposite is true as well — some things are deeply temporal, like a TIL or a stream entry.

That's why the flux works alongside the garden: the garden holds evergreen pages; the flux captures the flow of time. Gwern makes a similar distinction with "tags" vs "essays." Some content is timeless reference, some is a snapshot of thinking at a moment.

§Technical Detail

The flux tool itself is simple Go. The core type is an Entry struct with a Kind discriminator. Each source implements a Fetch method:

// Source is the interface all flux providers implement.
type Source interface {
    Name() string
    Fetch(ctx context.Context, since time.Time) ([]Entry, error)
}

The aggregator merges entries, sorts by date, deduplicates by ID, and feeds the result to renderers (JSON Feed, Atom, HTML template). No framework. No JavaScript. Just static files deployed via rsync.