Rebuilt with real photos, container-scaled type, and cards that actually fit.
You were right to call out v0.5. The previous version had fixed-pixel type inside cards that were rendered at preview size, so headlines bled past the canvas. This rebuild uses container-relative units, so every card renders identically whether it's a 300px preview here or a 1080px export to Instagram. Photo cards now use real Unsplash imagery so the templates read like actual social posts.
The anatomy of a social card
Six zones · Same place, every timeSix zones in fixed positions. A masthead bar so the property is unmissable. A locale + date footer so a screenshot in five years still reads correctly. A kicker, a headline, an optional dek or byline. The photo zone, when used, is full-bleed under a gradient scrim.
Round Rock approves $80M jail expansion in a 4 to 1 vote.
The six zones
- 01Masthead bar. Wordmark left, centered context label, right-aligned issue or edition.
- 02Kicker. Mono uppercase desk or category. Rust on cream. Gold on dark.
- 03Headline. Sentence case. Fraunces 700. Balance-wrapped. The biggest type.
- 04Dek or byline. Optional. Fraunces italic dek, or mono byline.
- 05Foot bar. Locale left, date centered (rust), URL right.
- 06Surface. Cream, ink, bluebonnet, rust, or photo + scrim.
.surface is now a CSS container, and every font-size inside it uses cqi (container-inline units) instead of pixels. The cards render identically whether they're at preview scale or full export scale. No more headlines bleeding past edges.
Instagram feed — typographic cards
1:1 square · 1080×1080Type-driven cards for civic news, breaking moments, internal announcements, and pull-quotes. No photography needed. Strong typography does the entire job. The grammar is locked; the surface flexes.
The four type-driven flavors
Cream · Ink · Bluebonnet · Pull-quoteRound Rock approves $80M jail expansion in a 4 to 1 vote.
4 to 1 vote ends a year of debate over the jail bond.
The directory is now searchable by category and neighborhood.
"The math on $80M doesn't square with the growth we're seeing."
The four type-driven flavors
S-01 Cream civic — the default for any news story. S-02 Ink breaking — time-sensitive, gold accent. S-03 Bluebonnet now-live — product, network, or site announcements. S-04 Pull-quote — italic Fraunces headline in quotes, source name in the kicker.
When to pick which
News story → S-01. Time-sensitive → S-02. Internal launch → S-03. Editorial moment with one perfect quote → S-04. Vary across the week; the same flavor every day reads as robotic.
Big-number stat card
For civic accountability stories$80M
Total bond. Pays out over twenty-five years. About $34 per household per year.4 to 1
Commissioner Bell, the lone "no," cited population-growth math.Recipe
One stat at display size (~26% of card width per character). The number is the whole post. A short dek beneath gives context. No other type competes.
When to use
Bond amounts, vote tallies, capacity numbers, polling spreads, real-estate stats. The stat must be real and a key figure of the story — never invent a number to fit the template.
Photo posts with text overlay
Real photo · Brand grammar on topWhen the photo is the story — a hike, a restaurant opening, a Friday-night football moment — drop a real photo full-bleed, lay the gradient scrim on top so text is legible, and apply the same masthead + kicker + headline + foot bar. The point of these cards is the photo doing the emotional work and the text doing the editorial work.
Photo + scrim cards
Unsplash photos · Real imagery used in production tooFive new restaurants opened in Cedar Park this week, ranked.
Brushy Creek trail extension opens this weekend. We walked the new mile.
How a freshman quarterback became Leander's whole story this season.
Spring farmers market and live music on the Square this Saturday.
Recipe
Real photo full-bleed. A bottom-heavy dark-gradient scrim (0% top → 92% bottom) holds text legibility. Headline anchored bottom-left, masthead and foot bar are paper-colored. Photo credit chip lives just above the foot bar.
When to use
When the photo is the story. Restaurant reviews, trail openings, sports moments, market days, downtown features. Save photo cards for content that earns the photo; news headlines belong on cream.
Photo on top, text panel below — the "stop-scroll" combo
Image as backdrop, type panel pops forwardMedian home price in Round Rock crossed $480K this month.
Round Rock Coffee Co. has roasted on Main Street since 2014.
Recipe
Photo on one side, cream type panel on the other (top/bottom split or left/right split). Type panel reads as a "newspaper card" set against the photograph, which gives the type more weight than overlaying it on the image. Subtle rust rule between the two halves.
When to use
Real estate, business profiles, data-with-context posts, anything where the photo is supporting but the type carries the news. Often the highest-engagement format for the directory and the real-estate vertical.
Portrait feed (4:5)
1080×1350 · Premium feed real estateThe 4:5 portrait is the king of Instagram's feed. It takes up more vertical scroll than a square, which means more chances to stop a thumb. Use it for the day's lead story, photo-feature work, and the Friday-edition cover.
Three portrait variants
4:5 · 1080×1350Leander ISD reopens debate on the four-day school week.
A first read on the Tuesday meeting and the new parent survey.Brushy Creek trail extension opens this weekend. We walked the new mile.
Five things you need to know about Williamson County before the weekend.
No fluff. No ads. A four-minute read.Recipe
Same six zones; the taller canvas gives type more room to breathe. Headlines can run longer. The bottom-anchored photo card uses the scrim heavily because vertical photos often have busy upper thirds.
When to use
Lead story of the day. Photo features. Friday-edition cover. Long headlines that don't fit gracefully in a square.
The Friday-edition carousel — five slides, one story
Cover · Substance · CloseFive slides every time. Slide 1 is the cover (stops the scroll). Slides 2 to 4 deliver substance, one story each. Slide 5 is the close: takeaway plus a "save / subscribe" CTA. The carousel is the most-engaged-with format on Instagram; we use it for civic explainers, business roundups, and the weekly recap.
The Friday-edition carousel
5 × 4:5 portrait slidesFive things to know about Williamson County before the weekend.
A four-minute read.The jail-bond vote went 4 to 1, with one big wrinkle.
$80M total. $34 per household per year. Tuesday's crowd was bigger than the chamber.Leander ISD reopened the four-day-week debate.
Parents split 52 to 48 in the new survey. Board meets June 3.Five new restaurants opened in Cedar Park this week.
Barbecue, ramen, Filipino bakery, espresso, Tex-Mex. We ate at all five.Want this every Friday morning?
★ Link in bio. Full edition to your inbox at 7 AM. Free. No ads.The 5-slide structure
01 Cover — photo + hook + "SWIPE →". 02 to 04 Substance — three stories, same construction, different content. Mix surfaces (cream / photo). 05 Close — ink surface signals "done", with the CTA and the destination.
When to use
Friday recap, weekly civic explainer, monthly market roundup. Carousels reward depth — pick topics that earn five slides, not one stretched to fit.
Stories & Reels cover frames
9:16 · 1080×1920Stories live for 24 hours. Reels covers live forever on a profile grid. Same construction works for both. The rule: the cover must still read at a 110×195 thumbnail.
Four 9:16 covers
Mix photo and type-drivenA 4 to 1 vote. $80M. 460 new jail beds.
Tuesday's vote, in plain English.5
stories from this week, in three minutes. Swipe up.We walked the new mile so you don't have to.
Explained in 60 seconds. What $80M means for your tax bill.
Tap to watch.The vertical rule
Mast bar pinned top, foot bar pinned bottom — both reserved. The middle ~80% is yours. Big numerals and short headlines win in 9:16. If content needs more than a sentence, it belongs in a carousel, not a story.
Stories vs Reels covers
Story cards are disposable — push daily. Reels covers anchor a permanent grid — use deliberately, with rhythm (cream / cream / rust / photo / cream). The grid is itself a brand artifact.
TikTok / Reels covers in context
Inside a phone bezelOn-phone preview
9:16 cover inside a phone frameHow a freshman QB became Leander's whole story.
Two minutes. The throws. The story.Five new restaurants this week. Watch in 90 seconds.
Why your property tax went up again.
★ A 90-second tour of the math.Why these read clean on a phone
The cover starts loud (kicker), arrives at the headline, lands the wordmark in the same place every video. The mid-rule with star is a brand-grammar signature; even at thumb-scroll speed it lands as familiar.
The cover-frame rule
Design the cover frame first. Treat it as the most important still in the video. If the cover doesn't earn the tap, the video doesn't get watched.
LinkedIn, Facebook & share cards
191:100 · 1200×630 · og:imageThe aspect that runs the rest of the internet. Open Graph cards, LinkedIn share previews, X cards, Slack unfurls. Same construction, horizontally compressed. Auto-generated as og:image for every story.
Share-card templates
191:100 · The og:imageRound Rock approves a new $80M jail expansion in a 4 to 1 vote.
Five new restaurants opened in Cedar Park this week, ranked.
Recipe
Same six zones; the wider canvas gains a centered desk label in the masthead. The headline drops one size class because the wider canvas means longer lines fit naturally.
When to use
Every story page gets one of these as its og:image automatically — generated from kicker, headline, byline, and category. Cream is the default; photo version is used when a story has a hero image.
Newsletter header
The top of every Friday editionThe newsletter is the most-read surface in the network. The header below leans into newspaper-masthead grammar: vol/no row up top, full stacked wordmark, double rule, mono dateline, italic deck. The rest of the email runs as plain editorial copy in Source Serif.
Friday-edition newsletter masthead
Email-safe HTML · 600px wideFive things you need to know about Williamson County before the weekend. No fluff. No ads. About a four-minute read.
01 · CIVIC DESK
Round Rock approves a new $80M jail expansion in a 4 to 1 vote.
The vote came at the end of a four-hour commissioners' meeting that drew a standing-room-only crowd. Commissioner Bell, the lone "no," said the math didn't square with the growth he was seeing.
Read the full story →Leander ISD reopens the four-day-school-week debate.
Parents are split 52 to 48 in the new survey. The board meets again June 3. Here's what each side is saying.
Read the full story →Recipe
4px ink top stripe. Three-column mono vol/no/locale row, rust-center date. Stacked masthead: bluebonnet "WilCo", rust rule with star, italic "Guide" with rust underline. Italic Fraunces deck under a hairline. Stories follow as mono kicker → Fraunces 600 headline → Source Serif body → mono bluebonnet read-link.
When to use
Friday edition. Daily brief. Breaking news email. The masthead anchors the brand at the top of every send so the inbox is unambiguous.
Do & don't
Social hygieneWhat keeps the network recognizable
- Lead with the wordmark. Top-left masthead, every card, every aspect.
- Date and locale every card. Foot bar is non-negotiable. A screenshot ten years from now still reads correctly.
- Vary the flavor across the week. Mix S-01 standard, S-04 pull-quote, S-08 photo, S-12 portrait. The grid earns its rhythm.
- Use the carousel for depth. Five slides: cover, three substance, close with a CTA.
- Design the Reels cover first for video. The cover earns the tap.
- Use real photography. When the photo is the story, full-bleed + scrim. Stock photos for the directory only.
- Credit every photo. Mono uppercase chip just above the foot bar.
What breaks the social system
- Don't drop the masthead bar. Even when it eats a few px of headline real estate, the bar wins.
- Don't theme each post differently. The grid should read as one publication, not 50 freelance Canva designs.
- Don't write Title Case headlines. Sentence case everywhere.
- Don't drop emoji into the card. Captions are fine. The image stays clean.
- Don't gradient-fill a card. Solid surfaces only. Photo + scrim is the only allowed "shading."
- Don't put two kickers on one card. One kicker, one headline, one optional dek.
- Don't shrink the headline past the system minimum. If it doesn't fit, cut the line. A small headline is a sign the post should be a carousel.
Two chapters left
After social- Photography direction. Mood, palette, rules, examples of what we do and don't shoot.
- Sub-brand toolkit. The one-pager — how to launch Cedar Park Scoop, WilCo Families, or a new vertical using everything above.