Skip to content
kc@kumarChandrachooda.com:~$ cd /design-system/blog && read --section="01 blog-topics" 0%
KC Design System — Marginalia / Green-bar

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 / greenbar Browse all 8 →

01

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.
topic — the tier-one navigation tile. Its ink wipe needs no neutralising: it only ever runs on :hover, and a skeleton has no pointer events to hover with.
02

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.
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.
Azure & DevOps 28 May 2026

A card component, fully assembled

Media, meta, title with the underline-grow hover, excerpt and a footer row.

Coming soon Preview Aug 2026

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.
Azure & DevOps 15 Apr 2026

The archive row, text-first and dense

Date, title, category and minutes - the compact sibling of the card.

Azure & DevOps 02 Mar 2026

A second row to show the list rhythm

Rows stack with hairline separators and a whole-row click target.

Record rows: the article row’s sibling, for a list of things in a workflow rather than a list of published documents. A record’s identifying facts vary — a series and a part, or a category, or who submitted it and how long ago — so they sit under the title in mono where a varying number of them costs no alignment, and the .ds-state takes the end of the row because the state is the reason anyone is reading the list.
flagship — the index's split card. The cover panel keeps .ds-flagship__media, so it disappears below 900px exactly where the real one does; the kicker's accent line stays solid, because it is chrome rather than content and it is what keeps the empty card recognisable.
card — the article card, in the real .ds-grid. The media panel inherits its ratio from the host, which is the reason to shelve skeletons in the component's own grid rather than a generic one: in .ds-grid--3 the same markup is 16/7 instead of 16/10, and the placeholder follows without being told. This is the shape loadMore() appends while the next page is in flight.
post-row — the dense list view. It invents no box: the real row is a top hairline and nothing else, and so is this.
03

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 Preview

The Series Still on the Bench

A drafts-only series: the card is inert until part 1 publishes.

+9 more series Browse all 12
Roadmap rows: _SeriesItems, the ordered part list from the series detail page. Published parts link; draft parts render as timed “coming soon” rows.
Part 1 06 May 2026 6 min read

A component library in Razor

Why partials plus mocked view models beat copy-pasted demo markup for a one-person design system.

Part 2 13 May 2026 5 min read

Mock the data, not the markup

A controller-supplied sample model keeps a showcase honest: the demo renders the exact partial production uses.

Part 3 Coming soon Preview ≈ 7 min read

One partial per component

Breaking a monolithic showcase view into per-section partials that a catalog drives.

Part 4 Coming soon Preview ≈ 6 min read

Shipping the showcase

Wiring the catalog, the demo model and the section partials together, and what the page costs to render.

series-card — the stacked sheets are kept. They are a box-shadow, so they cost no layout, and they are the one thing that says “this is multi-part” before a word of it has arrived. The label tab is the exception to shimmering every leaf: its folded-corner tail and the sweep are the same pseudo-element, so the tab gets its geometry back with --tab and drops .ds-label.
series-item — the numbered part row from a series page.
04

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
  1. A component library in Razor 6 min
  2. Mock the data, not the markup You are here 5 min
  3. One partial per component Coming soon Preview 7 min
  4. Shipping the showcase Coming soon Preview 6 min
View series page →
__item--none — a part the arc is expecting that nobody has written yet: dashed edge, italic title. The blog never draws one, because its map is built from the posts that exist; an arc built from a series’ intended shape has gaps in it. No specimen here on purpose — the row is only reachable through an app’s own partial, and a hand-typed copy of it would be the second copy this section exists to avoid.
skeleton — the in-post panel while the series is still being fetched. The map's <details> becomes a plain div, since a skeleton must not open.
05

Series pagenav

The series footer (_SeriesPagenav): previous and next parts numbered against the full roadmap. A reached end keeps a dashed placeholder so the surviving item holds its side of the grid.
Mid-series: previous and next both present, numbered against the full four-part roadmap.
At part 1: no previous, so a dashed placeholder holds the left cell and next keeps its side of the grid.
skeleton — the prev/next footer waiting. Note what it is not: the pagenav's own dashed --placeholder cell is a result — “the series ends here” — and borrowing it for a wait would say the opposite of what is true.
06

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.
Part 1 06 May 2026 6 min read

A component library in Razor

Why partials plus mocked view models beat copy-pasted demo markup for a one-person design system.

Part 2 13 May 2026 5 min read

Mock the data, not the markup

A controller-supplied sample model keeps a showcase honest: the demo renders the exact partial production uses.

Part 3 Coming soon Preview ≈ 7 min read

One partial per component

Breaking a monolithic showcase view into per-section partials that a catalog drives.

Part 4 Coming soon Preview ≈ 6 min read

Shipping the showcase

Wiring the catalog, the demo model and the section partials together, and what the page costs to render.

07

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.
skeleton — the shelf keeps its progress track and drops the fill: an empty track is the honest zero, and the real fill growing into it is the reveal the component already ships. The dismiss control keeps its 28px box so the card's right padding still makes sense, but loses the outline that made it read as pressable.
08

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 first. 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.

Coming soon Preview Aug 2026

First off the ladder

The nearest-dated scheduled post leads the roadmap strip.

Coming soon Preview Aug 2026

Second off the ladder

A weekly cadence means the strip usually spans a fortnight.

Coming soon Preview Aug 2026

Third off the ladder

The strip caps at three; the rest of the ladder stays backstage.

09

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.
Waiting — one of the three panels that close a post and open the index.
11

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 View
Load more: the centred button from _PostList, idle and in the is-loading state design-system.js applies while it fetches the next page into the grid.
12

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.

Markup

As rendered on the page behind this — captured, not transcribed.