About this template

The design system on its own — colors, type, spacing and motion. Apply this look to a project you already have.

---
name: "Social Media Content Calendar"
colors:
  bubblegum: "#FF8FC7"
  sky: "#7CC8FF"
  butter: "#FFE17A"
  ink: "#1A1A2E"
  paper: "#FFFFFF"
  rule: "#DADBE5"
  secondary_ink: "#55566B"
typography:
  page_and_feature_titles: { family: "Bricolage Grotesque", weights: [600, 700, 800] }
  content_controls_and_tabular_figures: { family: "DM Sans", weights: [400, 500, 600, 700] }
spacing: "At 1440px use a 200px left rail, a 32px main inset, an 8px rhythm and a calendar spanning the remaining width. Page title 40px/1.05, feature title 28px, card titles 14px/1.25. Keep the entire first week and most of the next two visible within a 900px viewport. At 390px use 16px side insets and stack the agenda."
radius: "Use a 14px outer radius on the pink feature, 8px on actions and calendar tickets, and 4px on small chips. Square grid corners inside a fine bordered frame retain the printed-planner feel."
---

# Social Media Content Calendar — Design System

Apply this design system to an existing project. It describes the look and feel only; for the full site, use prompt.md.

## Colors
- **Bubblegum** `#FF8FC7` — Full next-post band, first campaign and its labels. Ink on pink.
- **Sky** `#7CC8FF` — Second campaign card fills, selected media and chart accents. Ink on blue.
- **Butter** `#FFE17A` — Third campaign cards and active drop slots. Ink on yellow.
- **Ink** `#1A1A2E` — Headlines, icons, card titles, focus outlines and filled primary action.
- **Paper** `#FFFFFF` — Canvas, panels and empty calendar cells.
- **Rule** `#DADBE5` — Fine grid, rail divider and neutral borders.
- **Secondary ink** `#55566B` — Captions, weekday metadata and inactive navigation on paper.

## Typography
- **Page and feature titles** — Bricolage Grotesque (OFL), weights 600/700/800. Self-host the font files.
- **Content, controls and tabular figures** — DM Sans (OFL), weights 400/500/600/700. Self-host the font files.

## Spacing & shape
- Spacing: At 1440px use a 200px left rail, a 32px main inset, an 8px rhythm and a calendar spanning the remaining width. Page title 40px/1.05, feature title 28px, card titles 14px/1.25. Keep the entire first week and most of the next two visible within a 900px viewport. At 390px use 16px side insets and stack the agenda.
- Radius: Use a 14px outer radius on the pink feature, 8px on actions and calendar tickets, and 4px on small chips. Square grid corners inside a fine bordered frame retain the printed-planner feel.

## Motion
- A focused ticket gains a 2px ink outline. Dragging lifts it with a small shadow. Only the active destination receives an inset outline.
- Slide the editor in over 150ms and retain the page underneath. Announce completed moves in a polite live region. With reduced motion, all states change immediately.

## Imagery
Use the five supplied studio photographs as the complete stationery shoot. A pink tape dispenser, green pencil cup, yellow pad, cobalt trays and pink binder clips have distinct silhouettes even at small sizes. The next-post band gets a large physical object shot. Use a few inline crop strips among colored calendar tickets and larger square contact prints in the library. Original app chrome uses simple functional icons and a small folded-paper glyph.

## Tone
Use plain US English and short, specific titles. Write like the maker who knows why the tray lip is rounded and why the tape roll lifts out.

---
— Prompt by VibeFather · https://vibefather.ai/t/social-media-content-calendar · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Make it yours

• A ceramics studio launching a seasonal collection: set the brand and cycle to your kiln opening, name three campaigns for glazes, process and studio life, and swap the five photographs for your own pots.
• A freelance photographer planning client work: rewrite the audience for small brands you shoot for, turn the campaigns into shoot types, and use the media contact sheet to see which images appear in more than one post.
• A bakery running a weekly menu: rename the cycle after your season, set campaigns for new bakes, behind the counter and customer stories, and move tickets when a bake slips a day.
• A solo marketer handing work to a freelancer: edit captions and schedule in the calendar, then export the CSV so the writer has the exact text and slots to work from.

Social Media Content Calendar: questions and answers