A card component, fully assembled
Media, meta, title with the underline-grow hover, excerpt and a footer row.
KC Design System — Sketch / Sketch
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 / Sketch
Blog components
Topic tiles
The blog index's tier-one navigation
(_TopicCard): a bold tile per
topic with its article and series tally, plus the dimmed “coming soon”
state for a topic whose posts are all still drafts.
Azure & DevOps
A Topic Still in Drafts
Blog components
Post cards
Rendered by the same shared partials the blog composes its pages from
(_PostFeature, _Post, _PostCardSoon)
over sample data supplied by the showcase controller — what you see is the live
component, not a copy of its markup.
_Post emits every
field once and the container decides which are shown: a card grid renders the article
card, a .ds-post-list
collapses the same markup to the dense row.
Flagship:
_PostFeature,
the dominant split card that leads the blog index.
Featured
Designing with tokens, shipping with partials
How one CSS file and a handful of Razor partials keep the resume and the blog looking like the same site.
Card & coming-soon card:
_Post in a card grid, and
_PostCardSoon.
The soon card dims via explicit colors and stays inert until the draft
preview switch unlocks it.
The post that is not out yet
Draft posts render as dimmed, unlinked roadmap cards until their day arrives.
Archive rows: the same
_Post partial inside a
.ds-post-list row
context — one partial, two presentations; the container decides
which fields show.
The archive row, text-first and dense
Date, title, category and minutes - the compact sibling of the card.
A second row to show the list rhythm
Rows stack with hairline separators and a whole-row click target.
Blog components
Series components
The stacked-sheet series card, its “coming soon” sibling, the “+N more”
browse-all closer and the ordered roadmap rows
(_SeriesCard, _SeriesCardSoon, _SeriesCardMore, _SeriesItems),
rendered from mocked series data. The soon variants gain a Preview chip and
click-through when the draft preview switch is on.
The series rail:
_SeriesCard stacked-sheet look,
_SeriesCardSoon for a series that
exists only as drafts, and the
_SeriesCardMore browse-all closer.
Series · 2 parts
A Component Library in Razor
Turning one site's visual language into components both the resume and the blog compose from.
Coming soon · 2 parts
The Series Still on the Bench
A drafts-only series: the card is inert until part 1 publishes.
Roadmap rows:
_SeriesItems,
the ordered part list from the series detail page. Published parts link;
draft parts render as timed “coming soon” rows.
A component library in Razor
Why partials plus mocked view models beat copy-pasted demo markup for a one-person design system.
Mock the data, not the markup
A controller-supplied sample model keeps a showcase honest: the demo renders the exact partial production uses.
One partial per component
Breaking a monolithic showcase view into per-section partials that a catalog drives.
Shipping the showcase
Wiring the catalog, the demo model and the section partials together, and what the page costs to render.
Blog components
Series map
The in-post “you are here” panel
(_SeriesMap): a native
<details> whose summary is
the progress strip and whose body lists the full arc — published parts link,
drafts wait as “coming soon”, and exactly one row is current. Post pages
render it closed; JS opens it into the left rail on wide viewports.
Expanded arc: part 2 of 4 is
current (“You are here”), parts 3–4 are drafts waiting as
“coming soon”. The summary carries the progress fill; the closer
links to the series page.
Series Part 2/4 A Component Library in Razor
- A component library in Razor 6 min
- Mock the data, not the markup You are here 5 min
- One partial per component Coming soon 7 min
- Shipping the showcase Coming soon 6 min
Blog components
Lesson progress
The reader's own completion layer over the series roadmap: the
seriesProgress module injects a
“Mark as read” toggle on every published row, checks the part number
off, and keeps the hero fraction and hairline fill bar at done/total. State is
per reader in localStorage
(kc:series:<slug>:done),
so the demo below is live — mark a row to see the done state; draft rows
never get a toggle.
Row states: published parts carry the
“Mark as read” toggle — unread until pressed, then checked off and
muted; draft parts stay plain “coming soon” rows with no toggle. The
progress header appears once anything is marked, and the series card
(in the section above) picks up its “N of M read” footer echo.
A component library in Razor
Why partials plus mocked view models beat copy-pasted demo markup for a one-person design system.
Mock the data, not the markup
A controller-supplied sample model keeps a showcase honest: the demo renders the exact partial production uses.
One partial per component
Breaking a monolithic showcase view into per-section partials that a catalog drives.
Shipping the showcase
Wiring the catalog, the demo model and the section partials together, and what the page costs to render.
Blog components
Continue-reading card
The blog's memory: while a post is read, the
continueReading module records
kc:reading:last (title, series
part, scroll percent), and the overview and topic heroes turn it into this card
— title link, percent hairline and a dismiss that forgets the post —
composed into the opener's right column
(.ds-page-hero__aside)
rather than costing a section of its own. A read finished past 90%, or checked
off in the lesson progress set, clears itself. The demo mount seeds its entry
inline so the filled state always shows.
Filled state: kicker, the post title
linking back to where reading stopped, series part and percent in the meta row, a
hairline fill at the recorded percent, and the dismiss control. On the blog index
the mount renders hidden and is removed when there is nothing to resume, so an
empty shelf never costs layout.
Blog components
Publish roadmap strip
The blog index's forward ladder
(_UpcomingStrip): the next
three scheduled posts as “coming soon” cards under the “On the
press” kicker, soonest date first. Rendered entirely server-side from the
upcoming index; when nothing is scheduled the section does not render at all.
Preview behaviour is inherited from
_PostCardSoon — titles
click through when the draft preview switch is on, sit inert otherwise.
The forward ladder: the
“On the press” kicker over the next three scheduled posts as
_PostCardSoon
cards, soonest date first. Server-rendered from the upcoming index; the
month labels and the linked-in-preview / inert-in-production behaviour
come from the card, not the strip.
On the press
Already on the schedule — the next articles off the publish ladder, nearest date first.
First off the ladder
The nearest-dated scheduled post leads the roadmap strip.
Second off the ladder
A weekly cadence means the strip usually spans a fortnight.
Third off the ladder
The strip caps at three; the rest of the ladder stays backstage.
Blog components
Author card
The sign-off on every post (_AuthorCard):
the periwinkle KC monogram beside a short bio. Static by design — one
author, no model.
The sign-off: monogram avatar,
eyebrow, name and bio in one bordered row. A photo avatar swaps in via
.ds-author__avatar
without the monogram modifier, desaturated until hover.
Blog components
List controls
The paging furniture of every listing: the Cards/List view switch — the tab
strip's --display mode
at the end of a chip row, holding the reader's choice in
localStorage so no link
has to carry it and switching costs a class toggle rather than a round trip —
and the centred load-more button that dims to its
is-loading state while a page
fetches.
View switch: the tab strip in its
--display mode
(_Tabs, replacing the old
_ViewToggle chips) -
it sits at the right end of a chip row on the archive and topic pages.
The strip below is inert scenery: the live one, wired by key to the
reader's stored preference, is on those pages. See the Tabs section
under Core for the full component.
Everything in Azure & DevOps
Blog components
Category shelf
One shelf of the series index (_CategoryShelf):
a topic kicker over its rail of stacked-sheet series cards, repeated per topic
down the page.
One shelf: the topic kicker
over its _SeriesRail
of stacked-sheet cards. The series index repeats this per topic, most
recently active series first.
Azure & DevOps
Series · 2 parts
A Component Library in Razor
Turning one site's visual language into components both the resume and the blog compose from.