KC Design System — Sketch / Flow
Rough it out.
Rough it out.
One system, every component.
The sketch style redraws the system freehand in
design-system-sketch.css:
handwriting type, wobble borders, sticky-note labels and marker highlights,
everything a degree or two off square. Same components, same markup —
the notebook the classic skin was ruled up from.
Design style
Specimen
One card, re-inked and re-shaped by whatever the two columns say.
Primary
chip
Set — Sketch / Flow
Foundations
Color
Core neutrals carry the layout; accents are used sparingly: lines, links,
hovers. Colour is the palette axis of the theme engine: Classic keeps ink
and periwinkle, Sketch draws in marker red, yellow and blue on paper, and
the Flow palette — Deep Ocean and Tidal Blue warmed by Ivory Sand and
Golden Dune — can re-ink either style. Semantic colors exist only for
callouts and feedback. Every swatch is a token, so components restyle by
palette, not by hand.
Flow palette — the seas
--ds-flow-abyss#0C2E3D · Abyss
--ds-flow-deep#154C56 · Deep Ocean
--ds-flow-tidal#1B6D7F · Tidal Blue
--ds-flow-bright#186784 · Bright Sea
--ds-flow-mist#9CB7C7 · Sky Mist
--ds-flow-ash#5A7381 · Blue Ash
--ds-flow-midnight#1F2D33 · Midnight
--ds-flow-atmospheric#D5E0E3 · Atmospheric
Flow palette — the sands
--ds-flow-ivory#FFF4E5 · Ivory Sand
--ds-flow-dune#D9B382 · Golden Dune
--ds-flow-dune-pale#DAC6B6 · Dune Pale
--ds-flow-dune-deep#9A7C65 · Dune Deep
Sketch palette — marker on paper
--ds-sk-paper#FFFDF6 · Paper
--ds-sk-ink#2B2B2B · Ink
--ds-sk-red#E05C4B · Marker Red
--ds-sk-yellow#FFF3A8 · Marker Yellow
--ds-sk-pink#FFD8D2 · Highlighter
--ds-sk-blue#4477C4 · Marker Blue
--ds-sk-blue-line#7AA4E0 · Dashed Line
--ds-sk-pencil#8D8D8D · Pencil (decorative)
Semantic tokens — in the active style & palette
--ds-inkthemed
--ds-text-secondarythemed
--ds-text-mutedthemed
--ds-chip-bgthemed
--ds-hairlinethemed
--ds-accentthemed
--ds-accent-softthemed
--ds-surface-darkthemed
--ds-surface-codethemed
--ds-successthemed
--ds-warningthemed
--ds-dangerthemed
Foundations
Typography
Inter everywhere, weights 200–900. The scale maps one-to-one onto the sizes
already used across the resume (14, 16, 18, 20, 24, 30, 34, 46, 64).
--ds-text-5xl / 900Display
--ds-text-4xl / 900Post title
--ds-text-2xl / 700Section heading
--ds-text-xl / 700Card title
--ds-text-md / 400Body copy: the reading size for articles, 18px on a 30px rhythm.
--ds-text-sm / 500Meta, captions and supporting text.
--ds-font-monovar(--ds-font-mono) for code
Foundations
Spacing, borders & radii
A 4px-base spacing scale. Borders are the signature: 2px solid ink. Radii come in
exactly three sizes, lifted from the original cards (5), chips (10) and buttons (12).
--ds-space-2 · 8px
--ds-space-4 · 16px
--ds-space-5 · 24px
--ds-space-6 · 32px
--ds-space-7 · 48px
--ds-space-8 · 64px
radius-sm · 5px
radius-md · 10px
radius-lg · 12px
Foundations
Grid & layout
Arrangement is systematic now, in three layers. A container from the ladder
(.ds-container with
--narrow,
--wide and
--fluid steps) caps the width;
a row divides it — the fixed 12-column grid
(.ds-grid-12 +
.ds-col-*) for deliberate spans,
or an equal-column row (.ds-cols-2/3/4/6)
where the count lives on the row and the cells carry nothing; cells span tracks and may nest
a fresh row inside themselves.
.ds-col-md-* re-spans at tablet
width and everything stacks on phones unless a
.ds-col-sm-* says otherwise;
gutters are the --ds-gutter-x/y
tokens, retunable per row or per axis. Three breakpoint tiers govern it all
— full compositions above 991px, tablet re-spans to 991px, phones at 640px —
and cells can align (.ds-self-*,
row --top/--center/--bottom) and
reorder (.ds-order-first/last)
independent of the markup. An auto row
(.ds-cols-auto) sizes cells to
their content; the fluid auto-fill grid
(.ds-grid)
stays for card rails where the item count is unknown.
The container ladder
.ds-container--narrow · caps at 920px
.ds-container · caps at 1240px
.ds-container--wide · caps at 1440px
.ds-container--fluid · every pixel, padding kept
Inside this demo the wider steps clamp to the demo’s own width — the labels carry the true caps. All steps share the same side padding, so content never touches the viewport edge.
The 12 tracks
1
2
3
4
5
6
7
8
9
10
11
12
Composed spans
.ds-col-7 — lead content
.ds-col-5 — rail
.ds-col-4
.ds-col-4
.ds-col-4
.ds-col-6 .ds-col-start-4 — centred
Equal rows: the count lives on the row
.ds-cols-3 child
no class needed
thirds all round
.ds-cols-4
quarters
halves on tablet
stacked on phones
.ds-cols-6
.ds-cols-md-3
.ds-cols-sm-2
sixths here
thirds on tablet
pairs on phones
Auto row: cells size to their content
.ds-cols-auto
natural width
wraps
chip runs, button groups, meta clusters
same gutter tokens
Alignment: row modifiers & .ds-self-*
tall cell
sets the row
sets the row
.ds-self-start
.ds-self-center
.ds-self-end
Whole rows align with .ds-grid-12--top / --center / --bottom;
without a modifier, cells stretch to the row.
Order: presentation over source
written first — .ds-order-last
written second — sits centre
written last — .ds-order-first
Nested rows
.ds-col-8 hosting its own .ds-grid-12
nested .ds-col-6
nested .ds-col-6
.ds-col-4 sibling
Gutters: flush · tight · default · loose
flush
flush
flush
flush
tight
tight
tight
tight
default
default
default
default
loose
loose
loose
loose
One axis at a time: gutters are tokens
--ds-gutter-x tightened
--ds-gutter-y loosened
rows breathe
columns hug
Foundations
Using the system
Add design-system.css and the
ds-page body class, then compose. Posts are plain Markdown
files in /Posts with a small front-matter block. Drop a file in, and it’s published.
<link rel="stylesheet" href="/css/design-system.css">
<body class="ds-page">
<article class="ds-card">...</article>
</body>---
title: My next post
summary: One sentence that earns the click.
date: 2026-06-12
category: Azure & DevOps
tags: azure, dotnet
hero: /images/blog/hero-azure-deploy.svg
---