Post Templates

01 — Quote / Statement

The best interfaces are the ones you don't notice.

@yourhandle

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0f0f0f 0%,#1a1a2e 50%,#16213e 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:120px;
  font-family:'Space Grotesk',sans-serif">

  <div style="font-size:72px;font-weight:600;line-height:1.25;
    letter-spacing:-1px;color:#f0f0f0;max-width:780px">
    The best interfaces are the ones you don't notice.
  </div>

  <div style="margin-top:48px;font-size:20px;font-weight:400;
    letter-spacing:3px;text-transform:uppercase;color:#666;
    font-family:'Inter',sans-serif">
    @yourhandle
  </div>

</div>

02 — Big Number / Stat

Year in Review

47%

of users complete onboarding in under 2 minutes

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0d0d0d 0%,#1a0a2e 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:120px;font-family:'Inter',sans-serif">

  <div style="font-size:18px;font-weight:500;letter-spacing:4px;
    text-transform:uppercase;color:#555;margin-bottom:32px">
    Year in Review
  </div>

  <div style="font-family:'Space Grotesk',sans-serif;font-size:220px;
    font-weight:700;line-height:1;letter-spacing:-6px;
    background:linear-gradient(135deg,#e0e0e0 0%,#888 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent">
    47%
  </div>

  <div style="margin-top:32px;font-size:28px;font-weight:300;
    color:#777;max-width:500px;line-height:1.5">
    of users complete onboarding in under 2 minutes
  </div>

</div>

03 — Announcement

Now Live

We just shipped something new.

March 2026

@yourhandle

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0a0a0a 0%,#0f1923 50%,#0a0a0a 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:100px 120px;font-family:'Inter',sans-serif">

  <div style="font-size:18px;font-weight:500;letter-spacing:4px;
    text-transform:uppercase;color:#4a9eff;opacity:0.7">
    Now Live
  </div>

  <div style="font-family:'Space Grotesk',sans-serif;font-size:88px;
    font-weight:700;line-height:1.1;letter-spacing:-2px;color:#f5f5f5">
    We just shipped something new.
  </div>

  <div style="display:flex;justify-content:space-between;align-items:flex-end">
    <div style="font-size:18px;color:#555;letter-spacing:1px">March 2026</div>
    <div style="font-size:18px;color:#444">@yourhandle</div>
  </div>

</div>

04 — List / Tips

Things I stopped doing.

01Chasing perfection before shipping

02Saying yes to every meeting

03Building features nobody asked for

04Comparing timelines with others

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,#0e0e0e 0%,#1a1a1a 40%,#0e1a0e 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:100px 120px;font-family:'Inter',sans-serif">

  <div style="font-family:'Space Grotesk',sans-serif;font-size:52px;
    font-weight:600;color:#e8e8e8;margin-bottom:64px">
    Things I stopped doing.
  </div>

  <div style="display:flex;align-items:baseline;gap:24px;margin-bottom:36px">
    <span style="font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:600;color:#3a3a3a;min-width:32px">01</span>
    <span style="font-size:32px;color:#b0b0b0;line-height:1.4"><strong style="color:#e0e0e0;font-weight:500">Chasing perfection</strong> before shipping</span>
  </div>

  <div style="display:flex;align-items:baseline;gap:24px;margin-bottom:36px">
    <span style="font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:600;color:#3a3a3a;min-width:32px">02</span>
    <span style="font-size:32px;color:#b0b0b0;line-height:1.4"><strong style="color:#e0e0e0;font-weight:500">Saying yes</strong> to every meeting</span>
  </div>

  <!-- Add more items as needed -->

</div>

05 — Centered Statement

Reminder

Done is better than perfect.

Stop polishing. Start shipping. The feedback loop is where the magic happens.

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#111 0%,#1a1520 50%,#111 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:140px;font-family:'Inter',sans-serif">

  <div style="font-family:'DM Sans',sans-serif;font-size:26px;font-weight:300;
    letter-spacing:6px;text-transform:uppercase;color:#555;margin-bottom:40px">
    Reminder
  </div>

  <div style="font-family:'Space Grotesk',sans-serif;font-size:80px;font-weight:700;
    line-height:1.15;letter-spacing:-2px;color:#f0f0f0;max-width:700px">
    Done is better than perfect.
  </div>

  <div style="margin-top:40px;font-size:24px;font-weight:300;
    color:#666;max-width:480px;line-height:1.6">
    Stop polishing. Start shipping. The feedback loop is where the magic happens.
  </div>

</div>

06 — Before / After

Before

10 tools, 5 dashboards, no clarity

After

One system, one source of truth

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0c0c0c 0%,#181218 100%);
  display:grid;grid-template-columns:1fr 1px 1fr;align-items:center;
  padding:140px 100px;gap:80px;font-family:'Inter',sans-serif">

  <div style="display:flex;flex-direction:column;gap:28px">
    <div style="font-size:20px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:#555">Before</div>
    <div style="font-family:'Space Grotesk',sans-serif;font-size:54px;font-weight:600;line-height:1.25;color:#555;text-decoration:line-through;text-decoration-color:#444">10 tools, 5 dashboards, no clarity</div>
  </div>

  <div style="height:50%;background:linear-gradient(180deg,transparent,#444,transparent)"></div>

  <div style="display:flex;flex-direction:column;gap:28px">
    <div style="font-size:20px;font-weight:600;letter-spacing:5px;text-transform:uppercase;color:#4a9eff;opacity:0.7">After</div>
    <div style="font-family:'Space Grotesk',sans-serif;font-size:54px;font-weight:600;line-height:1.25;color:#f0f0f0">One system, one source of truth</div>
  </div>

</div>

07 — Carousel Intro

Thread

5 lessons from building in public for a year.

Swipe →

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#0a0a0a 0%,#0a1628 60%,#0a0a0a 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px;font-family:'Inter',sans-serif">

  <div style="font-size:18px;font-weight:500;letter-spacing:4px;
    text-transform:uppercase;color:#4a9eff;opacity:0.5;margin-bottom:28px">
    Thread
  </div>

  <div style="font-family:'Space Grotesk',sans-serif;font-size:76px;
    font-weight:700;line-height:1.1;letter-spacing:-2px;color:#f0f0f0;max-width:700px">
    5 lessons from building in public for a year.
  </div>

  <div style="margin-top:64px;font-size:18px;letter-spacing:3px;
    text-transform:uppercase;color:#444">
    Swipe &rarr;
  </div>

</div>

08 — Warm Quote

Simplicity is not the absence of complexity. It's the result of working through it.

— @yourhandle

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0f0d0a 0%,#1a1510 50%,#0f0d0a 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px;font-family:'DM Sans',sans-serif">

  <div style="width:60px;height:3px;background:linear-gradient(90deg,#c9956b,transparent);margin-bottom:56px"></div>

  <div style="font-size:64px;font-weight:400;line-height:1.35;color:#c8c0b8;max-width:840px">
    <span style="color:#e8ddd0;font-weight:500">Simplicity</span> is not the absence of complexity. It's the result of working through it.
  </div>

  <div style="margin-top:64px;font-size:24px;letter-spacing:3px;color:#5a5045;font-family:'Inter',sans-serif">
    &mdash; @yourhandle
  </div>

</div>

09 — Light / Clean

Thought

Ship early. Learn fast. Fix forward.

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#fafafa 0%,#f0ece4 50%,#fafafa 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:120px;font-family:'Inter',sans-serif">

  <div style="font-size:16px;font-weight:500;letter-spacing:5px;
    text-transform:uppercase;color:#b0a090;margin-bottom:40px">
    Thought
  </div>

  <div style="font-family:'Space Grotesk',sans-serif;font-size:68px;
    font-weight:700;line-height:1.15;letter-spacing:-2px;color:#1a1a1a;max-width:800px">
    Ship early. Learn fast. Fix forward.
  </div>

  <div style="margin-top:56px;font-size:18px;color:#999;letter-spacing:2px">
    @yourhandle
  </div>

</div>

10 — Bold Color Gradient

Build what matters.

Everything else is noise.

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:#0a0a0a;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:120px;font-family:'Inter',sans-serif">

  <div style="font-family:'Space Grotesk',sans-serif;font-size:96px;font-weight:700;
    line-height:1.1;letter-spacing:-3px;
    background:linear-gradient(135deg,#ff6b6b 0%,#ffa86b 50%,#ffd93d 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent">
    Build what matters.
  </div>

  <div style="margin-top:36px;font-size:24px;font-weight:300;color:#555;max-width:600px;line-height:1.5">
    Everything else is noise.
  </div>

</div>

11 — Diagonal Split

New Chapter

Something exciting is coming.

March 2026 — @yourhandle

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:#f5f0eb;display:flex;flex-direction:column;justify-content:flex-end;
  padding:100px 120px;font-family:'Inter',sans-serif">

  <!-- Dark diagonal top -->
  <div style="position:absolute;top:0;left:0;right:0;height:50%;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    clip-path:polygon(0 0,100% 0,100% 70%,0 100%)"></div>

  <div style="position:absolute;top:120px;left:120px;font-family:'Space Grotesk',sans-serif;
    font-size:28px;font-weight:500;letter-spacing:4px;text-transform:uppercase;
    color:rgba(255,255,255,0.6)">
    New Chapter
  </div>

  <div style="position:relative;z-index:1;font-family:'Space Grotesk',sans-serif;
    font-size:72px;font-weight:700;line-height:1.1;letter-spacing:-2px;color:#1a1a1a;max-width:700px">
    Something exciting is coming.
  </div>

  <div style="position:relative;z-index:1;margin-top:40px;font-size:18px;color:#999;letter-spacing:1px">
    March 2026 &mdash; @yourhandle
  </div>

</div>

12 — Oversized Word

Focus

"the center of interest or activity"

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0a0a0a 0%,#1a0a2e 50%,#2d1b4e 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:80px;font-family:'Inter',sans-serif">

  <div style="font-family:'Space Grotesk',sans-serif;font-size:200px;font-weight:700;
    line-height:0.9;letter-spacing:-8px;text-transform:uppercase;
    background:linear-gradient(180deg,#e0e0e0 0%,#444 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent">
    Focus
  </div>

  <div style="margin-top:48px;font-size:22px;font-weight:300;color:#888;
    max-width:500px;line-height:1.6;font-style:italic">
    "the center of interest or activity"
  </div>

</div>

13 — Light Cream / Editorial

Vol. 01

The hardest part of building a product isn't writing the code. It's knowing what not to build.

@yourhandle

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#faf8f5 0%,#f2ebe0 100%);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:100px 120px;font-family:'DM Sans',sans-serif">

  <div style="font-size:14px;font-weight:500;letter-spacing:5px;
    text-transform:uppercase;color:#c4a882;font-family:'Inter',sans-serif">
    Vol. 01
  </div>

  <div style="font-size:44px;font-weight:400;line-height:1.45;color:#2a2a2a;max-width:800px">
    The hardest part of building a product isn't writing the code. It's <em style="font-style:italic;color:#8a6e4e">knowing what not to build.</em>
  </div>

  <div style="font-size:18px;color:#bbb;letter-spacing:2px;font-family:'Inter',sans-serif">
    @yourhandle
  </div>

</div>

14 — Neon Glow

Launch day.

After 6 months of building in silence, we're finally live.

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:#050505;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;padding:120px;font-family:'Inter',sans-serif">

  <div style="font-family:'Space Grotesk',sans-serif;font-size:80px;font-weight:700;
    line-height:1.1;letter-spacing:-3px;color:#00ffaa;
    text-shadow:0 0 80px rgba(0,255,170,0.2)">
    Launch day.
  </div>

  <div style="margin-top:48px;font-size:32px;font-weight:300;color:#555;
    max-width:600px;line-height:1.5">
    After 6 months of building in silence, we're finally live.
  </div>

</div>

15 — Asymmetric / Off-Grid

03

Lesson Learned

Your first version should embarrass you.

If it doesn't, you waited too long to ship.

<div style="width:1080px;height:1080px;position:relative;overflow:hidden;
  background:linear-gradient(170deg,#f7f5f2 0%,#ede8e0 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:80px;font-family:'Inter',sans-serif">

  <!-- Watermark number -->
  <div style="position:absolute;top:60px;right:80px;font-family:'Space Grotesk',sans-serif;
    font-size:280px;font-weight:700;line-height:1;color:rgba(0,0,0,0.04);letter-spacing:-10px">
    03
  </div>

  <div style="position:relative;z-index:1;max-width:650px">
    <div style="font-size:15px;font-weight:500;letter-spacing:4px;
      text-transform:uppercase;color:#c4a882;margin-bottom:28px">
      Lesson Learned
    </div>
    <div style="font-family:'Space Grotesk',sans-serif;font-size:64px;font-weight:700;
      line-height:1.1;letter-spacing:-2px;color:#1a1a1a">
      Your first version should embarrass you.
    </div>
    <div style="margin-top:28px;font-size:22px;font-weight:300;color:#888;line-height:1.5">
      If it doesn't, you waited too long to ship.
    </div>
  </div>

</div>