Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>Section PlateNew to Visual Studio Code? Get it now.
Section Plate

Section Plate

dang-w

|
3 installs
| (0) | Free
A warm technical-plate theme in two variants — engineering drawing grammar for your editor.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Section Plate

A warm technical-plate colour theme for VS Code, in two variants, derived from the SECTION design system used on danwalsh.co.

Variants

Name Ground Character
Section Plate Light light Warm paper ground.
Section Plate Dark dark Dark ground — the plate under a dark lamp.

Both variants are keyed: functions, constants and numbers carry their own slate hue, and classes, types and interfaces carry their own verdigris hue, on top of the three accents and four ink weights. The two differ only in ground, not in philosophy — switching between them changes the light, not the information.

An earlier draft shipped a third, doctrinal variant that set functions, types and plain variables all in ink, separated only by weight. It passed every automated check the shipped variants pass, but it was dropped after real use: with types and plain variables identical in both colour and weight, ordinary code took more reading than it should. The keyed treatment was the clearer of the two in practice, so it became the theme rather than an alternative to it — a judgement call from working in both, not something a contrast check could settle.

Dark is also the more faithful of the two variants to the real hexes used on the site: on a dark ground the accents pass contrast at their true site values, with no darkening needed.

Section Plate Light

Section Plate Light — a TypeScript file on the warm paper ground

Section Plate Dark

Section Plate Dark — the same file on the dark ground

Colour verification

Every colour used as text is checked against the surface it actually sits on, by scripts/check-contrast.mjs, which runs as the last step of npm run verify and exits with a non-zero status on any failure. npm run verify is the project's required pre-package step. The floor is 4.5:1 (WCAG AA for body text). Per variant, the sweep covers 22 syntax token rules against editor.background, 42 UI foreground keys against their own paired background key, and all 16 ANSI terminal colours against terminal.background — 80 pairings per variant, 160 across the two variants. A UI *.foreground key can only be checked automatically when VS Code defines a matching *.background key for it; keys without that pairing (including the base foreground key, which has no background counterpart at all) are not part of this automated count.

Two ANSI keys are named exemptions, not exceptions to the rule: terminal.ansiBlack and terminal.ansiBrightBlack. These are the dim terminal roles, meant by design to sit close to the terminal background rather than stand out from it. Excluding those 4 checks (2 keys × 2 variants) leaves 156 pairings checked, 0 below 4.5:1 — the result npm run verify reports today, and re-derived fresh from the built theme files on every run rather than hand-counted.

Structural colours — construction lines, rulers, indent guides, whitespace, hairline borders — are not text, and this sweep does not check them against 4.5:1. They sit far below that floor by design: they are marks on the sheet, not text, and spec-level rule 3 (construction lines carry the plate feel) puts them there deliberately.

Known limitation

The site this theme is derived from renders its paper as a CSS dot-grid texture. VS Code has no equivalent — editor.background is a single flat colour, not an image — so the editor cannot reproduce that texture. The theme carries the plate character through construction lines (indent guides, rulers, whitespace, bracket-pair guides, all in a hairline ink) and through zone fills for the current line and selection instead. The result is plainer than the website. It is not meant to look like a screenshot of the site.

Palette

Light grounds and inks

Role Hex Applied to
paper #fff8e7 editor.background
paper-zone #f5f0e6 sidebar, panel, inactive tabs, current-line highlight
desk #e9e2d0 activity bar, title bar, status bar
border #d8d0bd all chrome dividers
ink-1 #2a2a2a body text, primary foreground — 13.56:1
ink-2 #555555 punctuation, secondary UI text — 7.04:1
ink-3 #7a7165 comments, dimmed labels — 4.53:1
ink-3-chrome #6b6255 the same weight, for text on desk/paper-zone — 4.64:1 on desk
ink-4 #c9c1b0 indent guides, rulers, whitespace, hairlines
shadow #000000 widget/scrollbar shadows, always at low alpha

Text accents (light): Active #c43c00 (4.97:1) · Metadata #8f5f00 (5.21:1) · Alert #c42818 (5.41:1) Mark accents (light): Active #ff4f00 · Metadata #f0a300 · Alert #e03020 Code hues (light): slate #3f6a86 (5.48:1) — functions, constants, numbers · verdigris #43705f (5.33:1) — classes, types, interfaces

Text accents and mark accents differ on purpose. The site's accent hexes are designed as marks — thick strokes and large labels — and fail contrast when set as small syntax text on a cream ground. Where an accent is used as text (keywords, strings, errors) the theme uses the darkened text-accent value. Where an accent is used as a mark (cursor, active tab rule, active line number, focus border, small badge fills with no text on them) it keeps the true site hex.

Dark grounds and inks

Role Hex Applied to
editor #1d1c1a editor.background
chrome-1 #191817 sidebar, panel
chrome-2 #161514 activity bar, title bar
status #232220 status bar
border #2e2c29 all chrome dividers
ink-1 #ede4d3 body text — 13.49:1
ink-2 #a89f92 punctuation, secondary UI — 6.52:1
ink-3 #8a8279 comments — 4.50:1
ink-4 #3a3835 indent guides, rulers, hairlines
shadow #000000 widget/scrollbar shadows, always at low alpha

Accents (dark): Active #ff4f00 (5.17:1) · Metadata #f0a300 (8.06:1) · Alert #e8503f (4.58:1) Code hues (dark): slate #7fa8c4 (6.73:1) · verdigris #8fc4ae (8.66:1)

On the dark ground the accents need no correction — Active and Metadata are the exact site hexes, and Alert is lifted slightly from #e03020 for text legibility.

The light variant's code hues do not survive the move to a dark ground — #3f6a86 scores 2.93:1 and #43705f scores 3.02:1 on #1d1c1a, both below the 4.5:1 floor. The dark variant uses its own pair instead: the dark ANSI blue and cyan, the same way the light pair is the light ANSI blue and cyan — in both variants the code hues are exactly the terminal's own blue and cyan lifted into the editor, so the palette stays closed rather than growing a fourth hue.

Recommended font

Section Plate is designed around Geist Mono — the same face used for annotation in the SECTION plates the palette comes from. It is free under the SIL Open Font License 1.1.

"editor.fontFamily": "Geist Mono, ui-monospace, monospace",
"editor.fontLigatures": false

Ligatures are off by design. An engineering drawing is relentlessly literal, and ligatures hide what was actually typed.

Alternative: Martian Mono — wider and more mechanical, the closest of the open monos to plotter lettering. JetBrains Mono and IBM Plex Mono also pair well. All are SIL OFL 1.1.

The theme does not set your font — editor.fontFamily is yours to control.

Colour philosophy

The theme follows the governing rule of the SECTION specification it is drawn from:

Colour is earned — it appears because it carries meaning, not as decoration. The majority of the drawing is monochrome (dark marks on light ground). Warm accents punctuate.

Three accents, each with one fixed role — orange for what is active or changing now, amber for metadata (strings, constants), red for faults. Everything else structural is ink, at one of four weights. Nothing is coloured because it looks good; a colour appears because it means something specific, in every variant, every time.

Lineage and credits

Section Plate's palette is original work, derived from the author's own SECTION technical-plate design system built for danwalsh.co, and is independently licensed under MIT. No code, file structure or palette selection is taken from any prior theme: its colour-key set was generated fresh against Microsoft's published theme-colour reference, not copied from an existing theme file.

Two individual hex values do coincide with the GPL-licensed Faulty Schematics — #555555, a plain mid-grey, and #ff4f00, the standard colour International Orange, which appears independently in the author's own SECTION specification. Individual colour values are not copyrightable expression; the selection and arrangement of a palette is, and there is no resemblance there.

It sits alongside two sibling themes in the same family, sharing a lineage of visual idea rather than of code or palette:

  • Faulty Schematics, by RuinedMachine (Ema0) — GPL-3.0, light ground.
  • Amber Schematic, by Dan Walsh, an adaptation of Faulty Schematics — GPL-3.0, dark ground, warm-everything: every syntax token is a caramel or tan, colour used decoratively across the whole grammar.

Section Plate is not a fork or a derivative of either. It inverts Amber Schematic's own philosophy — near-neutral body text, colour only where it carries meaning — while sharing the same technical-plate family resemblance.

Licence

MIT. See LICENSE.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft