A card component, fully assembled
Media, meta, title with the underline-grow hover, excerpt and a footer row.
KC Design System v1
One source of truth
One source of truth
for how this site looks.
Every token below was distilled from the existing resume design (Inter typography,
ink-black 2px borders, the periwinkle accent) and is now expressed as CSS custom
properties in design-system.css.
The resume and the blog are both built from these parts.
Tokens
Color
Core neutrals carry the layout; the two accents are used sparingly: lines, links, hovers. Semantic colors exist only for callouts and feedback.
--ds-ink#000000
--ds-ink-soft#2E353B
--ds-text-secondary#595959
--ds-text-muted#8F8F8F
--ds-chip-bg#E5E5E5
--ds-hairline#ECECEC
--ds-accent#7371FC
--ds-accent-soft#A594F9
--ds-surface-dark#202020
--ds-surface-code#141414
--ds-success#2F9461
--ds-warning#B7791F
Tokens
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
Tokens
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
Core
Identity details
The accent line and kicker reproduce the rotated section labels of the slideshow; the notched label chip comes from the “Hello” tab on the about page.
Section kicker
Small kicker
Hello
Featured
Core
Buttons & chips
The solid button wipes to grey with a pop, like the original btn-black; the periwinkle accent is the primary/brand button, hovering to charcoal to match highlight-button-magenta; the ghost outline skew-fills ink, mirroring salv-down-cv-btn.
Core
Page hero & statline
Every listing page opens the same way: kicker, an oversized black title, a light lead and the mono .ds-statline counters whose pulsing dot marks the live count. Pages compose the pieces per surface — a breadcrumb above, chips or search below — so the hero is a pattern, not a partial.
The listing-page opener:
kicker, title, lead and the mono statline with its pulsing live-count dot.
Each page assembles these pieces directly — the series index adds a
breadcrumb above, the archive adds search below.
Blog
Notes on cloud & data architecture, .NET engineering and the practice of shipping software, written from the field, with the code to back it up.
- 4 topics
- 3 series
- 18 articles
Core
Breadcrumb
The trail under a page hero (.ds-breadcrumb): periwinkle separators, hover-accent links and an aria-current ending that never links to itself.
The trail: links back up the
hierarchy, ds-breadcrumb__sep
separators, and the current page as plain text carrying
aria-current="page".
Core
Badges & pills
The status vocabulary in one place: notched sheet labels, the “coming soon” pills, the draft-preview chip, date pills, the colour-coded role pills from the project cards and the tech chips. Grey consistently means “not yet”; periwinkle means live, featured or in focus.
Sheet labels:
.ds-label with its notched-tab fold.
Base ink for identity, accent for live series, grey for series still in drafts.
Hello
Series · 4 parts
Coming soon · 2 parts
Status pills: the roadmap vocabulary.
.ds-card__soon-pill on coming-up cards,
.ds-series-item__soon-label on roadmap rows,
and the _PreviewBadge chip that appears
only when the draft preview switch is on.
Coming soon
Coming soon
Preview
Date pills:
.ds-timeline__date on the employment rail,
.ds-cert__date on certification cards
(with a muted prep variant for in-progress ones).
July 2021 – Aug 2022
July 2021
In preparation
Role pills & tech chips:
.ds-project__role--* colour-codes the
project cards so the filter row doubles as a legend;
.ds-tech-chip lists the key stack.
Architect
Lead
Developer
R&D
C#
Azure Functions
Terraform
Core
Empty state
The quiet placeholder (_EmptyState) when a topic or a filtered archive has nothing to show: accent line, a muted message, an optional hint and an optional onward link.
Message only: how a topic page
reads when everything under it is still in drafts.
Message, hint & link: the
archive's no-results form, with a way back out of the dead end.
Try a different search or filter.
Clear search and filters
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, _PostCard, _PostRow, _PostCardSoon) over sample data supplied by the showcase controller — what you see is the live component, not a copy of its markup.
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:
_PostCard 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:
_PostRow,
the dense text-first list used by the archive and topic pages.
The archive row, text-first and dense
A second row to show the list rhythm
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 shelf
The blog index's memory: while a post is read, the continueReading module records kc:reading:last (title, series part, scroll percent), and the index turns it into this shelf — title link, percent hairline and a dismiss that forgets the post. 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 switch (_ViewToggle) at the end of a chip row, and the centred load-more button that dims to its is-loading state while a page fetches.
View toggle: the real
_ViewToggle partial
over anchor urls - it sits at the right end of a chip row on the archive
and topic pages.
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.
Resume components
Project card
A compact case study (.ds-project): a scannable face — role pill, name, outcome headline, key stack — over a structured <details> deep-dive. Role is colour-coded so the filter row doubles as a legend: Architect ink, Lead accent, Developer accent outline, R&D violet. R&D cards can carry a “read the series” link to the matching blog tag.
Architect
Document Generator
Built a centralised document-generation platform on Azure, validating policy data with InRule across products.
C#
.NET Core 6
Azure Functions
Terraform
Read the case study
- Context
- Multiple products each needed to generate documents from policy information, with no shared way to validate that data.
- What I did
- Spearheaded a new microservice and stood up the Azure environment with Terraform, centralising InRule validation.
- Outcome
- One service now serves document generation across products, with infrastructure reproducible from code.
Resume components
Headings, quotes & leads
The panel openers of the homepage deck: the accent-block heading, the 4px ink bar quote and the periwinkle-tinted lead paragraph that introduces a panel.
A heading with an accent block.
The 4px ink bar quote, used to set the tone of a slide.
The lead paragraph: periwinkle-tinted supporting copy that introduces a panel.
Resume components
Feature cards & stats
.ds-feature: a black circle scales from the corner to fill the card on hover, flipping the content white (origin: service-card-wrap). .ds-stat-row numbers count up when scrolled into view via data-count.
Problem solving
My compass for navigating the complexities of technology.
Design
Blending aesthetics and functionality into digital masterpieces.
6Years experience
15Projects
7Certifications
Resume components
Education & timeline
.ds-edu draws its border in from the centre on hover, the title underline growing with it (origin: eduction-card). .ds-timeline is the employment rail.
University of Leeds
MSc Advanced Computer Science
2022 – 2023
JSS Academy of Technical Education
B.Tech, Computer Science
2012 – 2016
-
July 2021 – Aug 2022
Accenture · Senior Platform Engineer
Microservice architecture and cloud deployment.
-
Dec 2017 – June 2021
Imaginea · Senior Software Engineer
Built and shipped web applications on the cloud.
Resume components
Info list & notecard
The about-panel pair: a .ds-info-list definition table and the violet .ds-notecard with its “Hello” tab.
- Name
- Kumar Chandrachooda
- Location
- United Kingdom
- City
- Leeds
Hello
Short history
A Cloud & Data Architect & Microsoft platform engineer. The notecard carries the biographical blurb on the about panel.
Resume components
Certification card
.ds-cert: badge, title, date and an expandable <details> body. Used inside the certifications carousel.
Microsoft Certified: Azure Solutions Architect Expert
Azure Solutions Architect Expert
July 2021About this certification
Expertise crafting cloud and hybrid solutions across Compute, Network, Storage, Monitoring and Security.
Resume components
Deck chrome
The homepage deck's identity pieces: the floating panel card, the rotated title rail, the “01 / 03” slide number and the pulsing indication arrow. The chrome only engages under ds-deck-on, so this demo is a static miniature rebuilt from the same tokens.
The deck in miniature: the
floating panel card on the grey stage, the rotated title rail down the left
edge, the “01 / 03” slide number and the pulsing indication
arrow. On the homepage these are
.ds-panel__card,
.ds-panel__title,
.ds-slidenum and
.ds-indicator,
styled only while the deck is engaged — this is a token-faithful
approximation, not the live component.
Article blocks
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.
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 |
Article blocks
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."
Article blocks
Diagrams
A fenced ```mermaid block in Markdown renders to an SVG diagram on a
framed, centered panel, themed to the brand palette (periwinkle accents,
charcoal ink, the system sans). 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
Article blocks
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 reference1
links down to the list at the foot of the article. Inline runs support
struck text, inserted text, H2O, x2,
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. ↩
Article blocks
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.
Motion
Motion & the slide experience
The original slideshow ideas live on here, rebuilt natively: no jQuery, no owl-carousel, no AOS. Every effect is progressive enhancement and switches off under prefers-reduced-motion. The homepage is a six-panel deck; this guide and the blog are ordinary scrolling documents.
Scroll reveal. Add
data-ds-reveal to fade-and-rise
an element into view, or data-ds-reveal="stagger"
on a container to cascade its children.
Reveal one
Cascades in as the row enters the viewport.
Reveal two
A beat later than its neighbour.
Reveal three
And later still, a gentle stagger.
Carousel. A scroll-snap track
(.ds-carousel, optionally
--peek) with generated prev/next
controls and a position counter. Used for skill groups and certifications.
Panel one
Swipe, drag, or use the controls below.
Panel two
Snaps cleanly to each item.
Panel three
Counter tracks position.
Panel four
Buttons disable at the ends.
| Effect | Hook | Origin |
|---|---|---|
| Transform-paged deck (vertical panels) | .ds-deck > .ds-deck__track > .ds-panel | cd-slideshow |
| Horizontal sub-slides | .ds-substrip > .ds-sub | cd-marginal-nav |
| Floating content card | .ds-panel__card | .content |
| Rotated vertical title rail | .ds-panel__title | .slide-title |
| Slide number | .ds-slidenum | .slide-number |
| Pulsing direction arrows | .ds-indicator | .cd-single-step |
| Letter-by-letter title | .ds-letters | anime.js ml3 |
| Page loader (once per session) | .ds-loader | banter-loader |
| Two-ball cursor | auto (fine pointer) | .cursor__ball |
| Dark header on scroll | .ds-header.is-scrolled | .salva-header.sticky |
Reference
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
---