KC Design System — Marginalia / Sketch

Read it in the margins.
One system, every component.

The marginalia style typesets the system as a book in design-system-marginalia.css: Alegreya at reading weight, a drop cap on the opening line, cards ruled above and below instead of boxed, and notes hung off an accent rule. Same components, same markup — with glosses.

Reading in an unnamed pair — marginalia / sketch Change theme Browse all 8 →

Prose, quotes & callouts

Everything below renders from Markdown on blog posts. Blockquotes take the 4px ink bar from the original single-post page; callouts are authored as :::note / :::tip / :::warning containers. Outside prose a callout takes its tone as a class (--success, --warning, --danger, and --neutral, neither, since IU-p1), and (the /ai gallery, the owner's decision 27, 8 Nov 2026) --panel holds a demo's answer while --step draws one compact line of a run.

Body copy with a hyperlink, some bold emphasis, inline var x = 42; code, a Ctrl + K shortcut and a highlight.

The details are not the details. They make the design.

Charles Eames

Notes carry supporting context the reader can safely skip.

Tips are shortcuts: the thing you wish you had known first.

Warnings flag the failure modes that only show up in production.

Square accent markers on unordered lists
Comfortable 8px spacing between items

Token	Value	Source
--ds-accent	#7371FC	.text-magenta
--ds-border	2px solid ink	.salv-blog-wrap
--ds-radius-md	10px	.nav-tag-item

The remark is not a blockquote and the difference is the point. A prose blockquote is a literary device, set large and quiet, chosen by an author to make a point. This is a record: somebody said a thing in an app and the screen is showing it back, small, attributed and timestamped. The quote is white-space: pre-wrap, which is the whole reason it is a component — those are a person’s own line breaks, and collapsing them would be a quiet edit of their words.

Kumar asked for changes 20 Aug 22:33

The second section needs the numbers in it. Everything else reads well.

It is yours again — edit below and submit when you are ready. Nothing was rejected and nothing was lost.

The callout's success tone and its two words, and the band (identity-ui-cleanup-docket.html, IU02 to IU04, IU19). --success is the tone prose already has as a tip; __tag is the state word as an outcome line draws it, on the deep tone; __title a bold line; --inline sets the callout into a form or a section. A done line carrying data-ds-toast-lift is lifted into a toast when script runs (the Toast section). The band, .ds-band, is not a callout: a ruled, tinted sentence with no frame.

done

Revoked the session on Firefox · Lisbon; one other device is still signed in.

refused

That is the last way in; add another before removing it.

Signed in, as a Reader.

The address is not verified yet. A link is in the inbox whenever it is wanted.

waiting

Submit the draft for review? It waits for the author.

Signed in, with no role yet.

The address is not verified yet. A link is in the inbox whenever it is wanted.

step 1 · plan

Read the draft and plan three fixes

interrupt · consequential step

Submit the draft for review?

kill switch

Halted. Nothing further runs.

Re-attribution is not anonymisation of the writing itself: a post that names a place still names it.

This store does not survive a restart.

The export has everything the site holds about the account.

A note in the accent tone.

Code blocks

Fenced code gets a framed block on the #141414 canvas: language label, one-click copy, and a brand-tuned syntax theme (Prism). C#, PowerShell, YAML, Bash, SQL, JSON, TypeScript and Razor ship by default.

public sealed record DesignToken(string Name, string Value)
{
    // Tokens are immutable; the system changes by versioning, not mutation.
    public static DesignToken Accent { get; } = new("--ds-accent", "#7371FC");

    public override string ToString() => $"{Name}: {Value};";
}

$tokens = Get-Content './design-system.css' |
    Select-String -Pattern '--ds-[\w-]+(?=:)' -AllMatches |
    ForEach-Object { $_.Matches.Value } |
    Sort-Object -Unique

Write-Output "The design system defines $($tokens.Count) tokens."

Diagrams

A fenced ```mermaid block in Markdown renders to an SVG diagram on a framed, centered panel, themed to the active palette (tidal blue and golden dune under Flow; periwinkle on the classic skin). The library loads lazily and only on pages that contain a diagram; if it ever fails to load, the raw source stays readable. Flowcharts, sequence, pie, xychart, block and radar diagrams are supported.

flowchart LR
    A[Write Markdown] --> B{mermaid fence?}
    B -- yes --> C[Render SVG]
    B -- no --> D[Framed code block]
    C --> E[Themed diagram]

pie showData title Discipline weights
    "Specification" : 35
    "Context" : 25
    "Harness" : 20
    "Verification" : 20

Markdown extras

The full Markdig pipeline is wired up. GitHub-style alerts (> [!NOTE]), LaTeX math ( $x$ inline, $$…$$ block, rendered with KaTeX), footnotes, definition lists, strike/insert/sub/sup, abbreviations and citations all render to the system style. Emoji shortcodes (:rocket: → 🚀) and smart typography (straight quotes become curly, -- an en dash) are on too.

Note

GitHub alert syntax maps to the same look as the :::note callouts.

Important

The important variant uses the periwinkle accent.

Caution

Caution maps to the danger token.

Inline math like $E = mc^2$ sits in the text, while block math is centered on its own line:

\[\int_0^\infty e^{-x^2}\,dx = \frac{\sqrt{\pi}}{2}\]

A footnote reference¹ links down to the list at the foot of the article. Inline runs support ~~struck text~~, inserted text, H₂O, x², an HTML abbreviation and a cited source.

Greenfield: A new system built without the constraints of prior work.
Brownfield: Work that must integrate with an existing, live codebase.

Footnotes render smaller, with a top rule and a back-link. ↩

Media blocks

Figures take an uppercase caption with the small accent line. Plain YouTube or MP4 links in Markdown become responsive 16:9 embeds automatically. Image pairs can opt into a two-column gallery.