DEV Community

Cover image for The Swatch Deck — a reusable DEV.to theme kit for color posts
Ali Badshah
Ali Badshah

Posted on

The Swatch Deck — a reusable DEV.to theme kit for color posts

#writing #markdown #css #design

 

DEV.to strips <style> tags and inline style="" attributes, so you cannot paint a div pink and call it a day. What you can do is let images carry the color and let fenced code blocks carry the texture. Two rules make it work: images are block-level on DEV, so anything that must sit side by side goes in a table row; and a divider is a single wide bar, not four small ones.

 

Section divider bar in vivid teal

🧱 The eight blocks

# Block What it does Renders on DEV?
1 Cover band 1000×420 PNG, palette + title ✅
2 Palette band one-row table, one colour per cell ✅
3 Color rule one wide 1000×10 bar instead of --- ✅
4 Swatch table color + HEX + RGB + HSL + contrast ✅
5 Code tab filename line above a fenced block ✅
6 Diff block red/green "before → after" ✅
7 Terminal block a console fence for a shell look ✅
8 Collapsible the details liquid tag for long code ✅
— <style>, inline style attributes, <script> sanitized away 🚫

 

Section divider bar in vivid magenta

1 · Palette band — use a table row, not a line of images

This is the mistake worth learning from. DEV renders every article image as a block element, so four
images on one line do not butt together into a bar — they stack vertically down the page.

- ![a](url)![b](url)![c](url)![d](url)      ← stacks vertically on DEV
+ | `#0F172A` | `#00F5D4` | `#F15BB5` | `#9B5DE5` |
+ | :--: | :--: | :--: | :--: |
+ | ![a](url) | ![b](url) | ![c](url) | ![d](url) |
Enter fullscreen mode Exit fullscreen mode

Table cells are the reliable way to force horizontal layout, and you get the hex codes as a header row
for free:

#0F172A #00F5D4 #F15BB5 #9B5DE5
navy swatch #0F172A vivid teal swatch #00F5D4 vivid magenta swatch #F15BB5 indigo swatch #9B5DE5

The URL shape is placehold.co/{W}x{H}/{background}/{textColor}.png. Passing the same hex twice hides
the auto-generated size label, so you get a clean solid block. dummyimage.com/120x56/0f172a/0f172a.png
is a drop-in fallback if placehold.co is ever down.

 

Keep swatches at 120×56 or smaller inside tables — four columns of 210px overflow the article width
on mobile.

🚧 Trap — the same rule applies inside a cell. Four images in one cell stack too. One colour per
cell, always.

 

Section divider bar in indigo

2 · Color rule — one wide bar

A divider wants to be a single image, for exactly the same reason:

![Section divider bar in vivid teal](https://placehold.co/1000x10/00F5D4/00F5D4.png)
Enter fullscreen mode Exit fullscreen mode

It scales down to any screen width, and it beats a grey --- for keeping the article's palette present.

 

Section divider bar in vivid teal

3 · Swatch table

Swatch HEX RGB HSL On #0F172A Role
navy swatch #0F172A #0F172A 15, 23, 42 222° 47% 11% — Base
vivid teal swatch #00F5D4 #00F5D4 0, 245, 212 172° 100% 48% 12.76:1 ✅ Primary
vivid magenta swatch #F15BB5 #F15BB5 241, 91, 181 324° 84% 65% 5.87:1 ✅ Accent
indigo swatch #9B5DE5 #9B5DE5 155, 93, 229 267° 72% 63% 4.33:1 🟡 Support

 

Section divider bar in vivid magenta

4 · Code tabs — five looks for five jobs

Give each block a tab line right above it. The bold monospace filename plus an em-dash caption reads like an editor tab and visually separates one code look from the next.

 

tokens.css ⌁ the source of truth

:root {
  --color-surface: #0F172A;
  --color-primary: #00F5D4;
}
Enter fullscreen mode Exit fullscreen mode

tailwind.config.js ⌁ the framework mirror

module.exports = {
  theme: { extend: { colors: { palette: { surface: '#0F172A' } } } },
};
Enter fullscreen mode Exit fullscreen mode

patch ⌁ before → after, in red and green

- background: #1e1e1e;
- color: #cccccc;
+ background: var(--color-surface);
+ color: var(--color-primary);
Enter fullscreen mode Exit fullscreen mode

terminal ⌁ no syntax highlighting, all vibe

$ npx palette-tokens 0F172A 00F5D4 F15BB5 9B5DE5
✔ wrote tokens.css   (4 custom properties)
✔ wrote tokens.json  (4 design tokens)
Enter fullscreen mode Exit fullscreen mode

data ⌁ machine-readable

{
  // one palette, four tokens
  "surface": "#0F172A",
  "primary": "#00F5D4"
}
Enter fullscreen mode Exit fullscreen mode

 

Section divider bar in indigo

5 · Liquid tags worth using

💡 Click to expand a collapsible

 

Long snippets, alternate framework versions and "the boring full config" belong in here so the article keeps its rhythm.

$surface: #0F172A;
$primary: #00F5D4;
Enter fullscreen mode Exit fullscreen mode 



{% details Summary text %} hidden content {% enddetails %}

{% embed https://codepen.io/your/pen %}
{% katex inline %} L = 0.2126R + 0.7152G + 0.0722B {% endkatex %}
Enter fullscreen mode Exit fullscreen mode

 

Section divider bar in vivid teal

6 · Front matter template 

---
title: "Your title — max ~60 chars for the card"
published: false
description: "One sentence, 120-160 chars, shows up in the feed and in OG cards."
tags: css, webdev, design, beginners
canonical_url: https://your-site.com/original-post
series: "Color for Developers"
---
Enter fullscreen mode Exit fullscreen mode

🧪 Lab note — tags is a maximum of four, comma separated, no #. cover_image looks best at exactly 1000×420. Keep published: false until the preview looks right, then flip it.

 

Section divider bar in vivid magenta

7 · Generate all of it

Every band, table and token block in this series came out of one script:

$ python3 tools/palette_kit.py swatches \
    --name "Neon Diner Harmony" --slug neon-diner-harmony \
    --colors 0F172A 00F5D4 F15BB5 9B5DE5
Enter fullscreen mode Exit fullscreen mode

The palettes used in these examples come from ColorFiind — 34,000+ named palettes with HEX codes, CSS variables and downloadable swatch images on every page.

 

Browse colour palettes

Top comments (0)