Build a Featured-Image Style Guide
One page that names your fonts, palette, logo spot, type zone, and export.
I designed covers for two years before I wrote any of it down, and every time a guest writer or a future me touched the blog, the covers drifted. The fix was not a 40-page brand book. It was one page.
A featured-image style guide is a single page that names your two typefaces, your palette in hex, your logo spot, your title zone, your background treatment, and your export settings - write it once and every cover after it is a fill-in-the-blanks job. That is the whole answer. The rest is what each line on that page should actually say.
This is the document, not the system. Keeping your covers consistent is about building the reusable template and the habit of swapping into it. This post is about the page that template is built from - the spec you can hand to anyone, or read yourself at midnight, and still produce a cover that looks like yours.
Write the values down
The test for whether a line belongs on the page is simple: can you write it as a name, a number, or a hex code? “Clean and modern” is not a rule. “Title in Archivo Black, 64px” is. A style guide that anyone can follow is one where nothing is left to taste in the moment.
So every line on this page is a value someone could read and reproduce without asking you a question. Six lines do the work. Name the typefaces, set the palette, fix the logo, fix the type zone, pick the treatment, lock the export. Write each one down with its actual number attached. That is the page.
The two typefaces, with weights
Name two faces and the exact weights you use, and stop there. A display face carries the title; a plain workhorse sans carries any supporting line. Two is enough for almost every cover you will make, and a third face is usually where a guide starts to wobble.
The weight is the part people forget, and it is the part that decides whether your title survives the shrink to a feed card. Thin weights die first when the image gets recompressed small, so write the weight into the spec alongside the family. “Title: Archivo Black. Subtitle: Inter SemiBold.” Now there is no decision left to make and no thin-weight title to regret.
The palette, in hex
Write three to four colors and give each one a hex code. A vague “navy and a warm accent” sends two people to two different navies; #0B1F3A sends them to the same one. Hex codes are the difference between a palette and a wish.
A tight palette covers more than you think:
| Slot | Role | Example |
|---|---|---|
| Brand 1 | the color a reader links to you | #0B1F3A |
| Brand 2 | the accent that leads on some covers | #F25C2A |
| Ink | near-black for type and scrims | #14110F |
| Paper | near-white for type on dark | #FAF7F2 |
Four slots, four hex codes, written on the page. Most covers use Paper for the title over a scrim and one brand color for the accent. The point of pinning the hex is that every cover relates to the last one because they are literally the same colors every time, pinned by the hex instead of eyeballed in the moment.
The logo spot and the type zone
Two lines, both about position, both fixed forever. Write the corner the logo lives in and its size in pixels, and write the zone the title lives in. “Logo: top-left, 120px wide. Title: bottom band, left-aligned, starts 80px from the edge.”
These two lines are where a reader’s eye learns your covers. When the logo is always top-left and the title always sits in a bottom band, the eye stops hunting and starts recognizing. Moving either one per post is the fastest way to make a consistent palette look accidental. Pin the position and let the words inside it change.
The background treatment, picked once
Name the one treatment you use and how you handle text over it. Full-bleed photo with a gradient scrim, a flat brand-color card, or a soft gradient - pick a single lane and write it down. A guide that allows all three is allowing none.
If your lane is photos, the spec has to say how text stays legible, because that is the part that breaks. Write the scrim into it: “Background: full-bleed photo, black gradient scrim at 40% under the title only.” That one line is the rule that keeps every photo cover readable, and the full method for text over a photo is worth reading once so the line you write is the right one. Then you never re-derive it; the page carries it.
The export recipe
The last line is the one most guides skip, and it is the one that decides whether your cover looks sharp or soft in the wild. Write the size, the scale, and the format. 1200×630 at 2x, exported as WebP.
That size is the share-and-OG card at 1.91:1, and one file at that size covers Facebook, LinkedIn, X, Slack, and Discord. X reads your og:image and center-crops it, so keep anything you cannot lose near the middle. The 2x is what makes it crisp on a retina screen - export at the pixel-doubled size and the cover stays sharp instead of going soft. WebP ships the same picture 25-34% smaller than JPEG with support across roughly 96% of browsers, so it is the safe default to write down. If you serve a separate in-article hero, add a second line for it at 1280×720, 16:9. The full breakdown of what size a cover should be sits behind that one number, and the OG card spec behind the share line.
The whole page on one screen
Here is the spec in full, the way it should read once it is written:
Title: Archivo Black, 64px. Subtitle: Inter SemiBold. Palette:
#0B1F3A,#F25C2A,#14110F,#FAF7F2. Logo: top-left, 120px. Title zone: bottom band, left-aligned. Background: full-bleed photo, 40% black scrim under the title. Export: 1200×630, 2x, WebP.
Eight lines. A guest writer can read that and make a cover that looks like yours without a single message to you, and that is the entire job of the document. The values are specific enough to be unambiguous and short enough to fit on one screen, which is the only length a style guide ever gets used at.
A quick checklist
Your style guide is done when each line reads as a value someone can reproduce:
- Two typefaces named with their weights, and nothing else gets used.
- Three to four colors, each with a hex code written down.
- The logo corner and size fixed in pixels.
- The title zone named and fixed across every post.
- One background treatment, plus the scrim or overlay rule if it is photos.
- The export recipe of 1200×630, 2x, WebP.
Lay it next to three of your recent covers. If every value on the page is visible in all three, the guide is real. If a cover breaks a line, either the cover was a mistake or the line was. Fix whichever one is wrong and the page gets truer.
The page is the start; the template is what makes it fast. Once your eight lines are written, build them into a reusable template so the next cover is just a swap of the title and the subject. I wrote this post’s guide first, then made its cover in Lede straight off those values - same fonts, same logo spot, new title. When you are ready, open the editor or start from a layout in the gallery, and let your one page do the deciding.