Kumar Chandrachooda - Design System

01

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

02

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

03

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

04

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, and its --tiles variant (the /ai gallery, the owner's decision 27, 8 Nov 2026) packs 13rem tiles 10px apart for .ds-card--tile, the square, still card.

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-6 .ds-col-start-4 — centred

Equal rows: the count lives on the row

Drag the frame’s corner. It is a viewport of its own, so the rows answer to the same media queries the pages do; the marks under it are where they turn.

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

.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

.ds-col-4 sibling

Gutters: flush · tight · default · loose

flush

tight

default

loose

One axis at a time: gutters are tokens

--ds-gutter-x tightened

--ds-gutter-y loosened

rows breathe

columns hug

Tiles (FutureChanges/DesignSystem/gallery-variants-docket.html): .ds-grid--tiles fits as many 13rem tracks as the row holds, 10px apart, and stacks on a phone on its own. Its cards are .ds-card--tile: square, dense and still, with a static accent-soft offset where a card would lift; --dashed is the "coming" edge.

Live

Search by meaning

The archive answers a question with the posts that mean it.

In your assistant

Ask the site

Your assistant reads the site's own records.

Coming

Check a CV claim

Waits on the claims half.

05

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="/assets/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: /assets/images/blog/hero-azure-deploy.svg
---

Flow with it.One system, every component.