Clarity — Social Templates

Screenshot any template. Edit text directly in-browser (click the text). All sized for platform specs.

How to use: Click any text to edit it live in-browser. Take a screenshot (Cmd+Shift+4 on Mac / Win+Shift+S on Windows) of the template you want. All templates are sized at 50% — screenshots will be crisp at 2x resolution on retina displays. For exact pixel specs, right-click → Inspect.
Quote Cards — 1080x1080
Clarity is downstream from action.
therealclarity.com
You will not think your way to a better life. You will act your way there.
therealclarity.com
The future belongs to the people who show up early.
therealclarity.com
Live fully. Build courageously. Share generously. Stay ahead.
therealclarity.com
Statement Posts — 1080x1350
Observation
The world does not have a content shortage. It has a filtration shortage.
clarity in · action out
Pattern
As AI makes output infinite, human curation becomes the bottleneck. Taste is the new moat.
clarity in · action out
Carousel Slides — 1080x1080

5 things I learned building in public

Swipe →
01

Ship before you're ready. Perfection is procrastination wearing a suit. The market teaches you faster than your notebook does.

1 / 5

Follow for more
signal,
less noise.

@THEREALCLARITY
Stories — 1080x1920
Daily Reminder
Stop planning.
Start building.
↑ Link
Question
What are you waiting for permission to start?
Reply
Signal
The people who thrive are the ones who built before the playbook existed.
↑ Link
Hot Takes — 1080x1080
Hot Take
Most "personal brands" are just people performing a personality they don't have offline.
Agree or disagree? →
Unpopular Opinion
Reading 50 books a year is useless if you never act on a single one.
Save this →
List Posts — 1080x1350
5 things nobody tells you about building in public
01
Nobody cares about your progress until you ship results
02
Consistency beats intensity every single time
03
Your first 100 posts will feel like shouting into a void
04
The audience you attract reflects the content you make
05
Ship it ugly. Ship it fast. Ship it now.
therealclarity.com
Technologies to learn in 2026 or get left behind
01
AI agents — they will do your job better than you
02
Prompt engineering — the new literacy
03
No-code/low-code — speed is the advantage
04
Voice cloning — your brand voice, automated
05
One-person companies — the future is lean
therealclarity.com
Before / After — 1080x1080
Before
Waiting for the perfect plan. Reading another book. Asking for permission. Overthinking every detail.
After
Shipping ugly MVPs. Learning by doing. Building in public. Trusting the process.
Which side are you on?
Stat Highlights — 1080x1080
The Math
97%
of people who "plan to start" never ship a single thing.
Stop planning. Start building.
AI Signal
10x
More content is created daily than 5 years ago. Curation is the new creation.
therealclarity.com
Thread / Tweet Cards — 1080x1080
Thread
1 / 8
I spent 6 months building the wrong thing. Here's what I learned about shipping fast.
Read the thread →
The world doesn't reward the smartest person in the room. It rewards the one who shipped first.
— CLARITY
Podcast Episode Cards — 1080x1080
New Episode
#01
Why clarity only comes after you start building
Most people wait for the plan before they act. But the plan only reveals itself to people who are already moving. Here's what I mean.
12:34
New Episode
#02
The technologies that will change everything by 2027
AI agents, voice cloning, one-person companies. What's hype and what's real. A breakdown of what to learn now.
18:07
Podcast Show Covers — 3000x3000 (Spotify / Apple)
CLARITY
/output
Compressed Thinking
CLARITY
/output
Compressed Thinking
CLARITY
/output
Compressed Thinking
CLARITY
/output
Compressed Thinking
Podcast Episode Covers — 3000x3000
01
Is technology the new religion?
CLARITY
EP 01
Is technology the new religion?
CLARITY
01
Is technology the new religion?
CLARITY
#01
Is technology the new religion?
CLARITY
Video Thumbnails — 1920x1080
I automated my entire content pipeline
How-To
Stop waiting. Start shipping.
Manifesto
Profile Pictures — Round (400x400 / 800x800)
Green border + C mark
Thin border + C mark
Solid green + C dark
CLARITY
C
Full name — border
CLARITY
C
Full name — solid green
C
Initial — border
Double ring + C
Dot — 3px border
Dot — 6px border
Dot — 10px border
Dot — 16px border
Dot — 24px border
Dot — 32px border
Big dot — 10px border
Big dot — 16px border
Dot — double ring
Small — green border
Small — solid green
Small — double ring
C
Small — initial
Twitter/X Banners — 1500x500
LinkedIn Banners — 1584x396

Build courageously.
Share generously.

Clarity is downstream
from action.

The future belongs
to builders.

/ Button Lab

Buttons & CTAs

Exploration surface for button treatments used across therealclarity.com, offer pages, and embedded CTAs. Mono type, weight 700, +0.08em tracking, uppercase — the variables are size, radius, fill, and weight of edge.

01 — Size scale mono / 700 / UPPER
XS · 10px
SM · 11px
MD · 13px
LG · 15px
XL · 17px
02 — Border radius 0 → pill · MD size
0px · square
2px · hairline
4px · soft
8px · rounded
999px · pill

// DEFAULT RECOMMENDATION — 0px. The system is square everywhere else; radii above 4px feel off-brand unless used intentionally.

03 — Fill variants hover for state
solid · lime
outline
ghost · link
dark · inverted
text · cream
brutalist
04 — Arrows & affordances hover reveals motion
trailing arrow
leading marker
with counter
icon square
icon pill
05 — States default · hover · disabled
default
hover (sim)
outline hover
loading
disabled
06a — On dark #0B0B0B
06b — On lime #D0FF00
07 — Block / full-width forms · modals · mobile
08 — Paired CTAs primary + secondary

// USE SOLID FOR THE ONE ACTION YOU WANT TAKEN. OUTLINE FOR EVERYTHING ELSE.

09 — Copy variations verb + noun · ≤ 4 words

— END / BUTTON LAB —

/ Design System v1

Clarity Visual Language

A high-contrast, terminal-grade aesthetic. Industrial typography, electric accent on near-black, monospaced labels. Built to read at thumbnail and stop the scroll. Every template above pulls from the tokens below — change a value, change the system.

01 — Color

A four-token palette. The single accent (#d0ff00 — electric lime) does all the heavy lifting: borders, callouts, inverted backgrounds. Never introduce a fifth hue.

— BG
Token
--bg
Hex
#0B0B0B
Use
Card backgrounds, inverted text on accent
— TEXT
Token
--text
Hex
#F5F5F0
Use
Primary body / headline copy on dark
— ACCENT
Token
--accent
Hex
#D0FF00
Use
Borders, labels, monospaced logo, inverts
— GRAY
Token
--gray / --dim
Hex
#888 / #444
Use
Subdued meta, source lines, secondary borders
02 — Typography

Two families. Inter carries every headline and body; JetBrains Mono handles all metadata, labels, logos, and numerical accents. The split creates the system's characteristic editorial-meets-terminal tension.

Clarity is downstream from action.
Family Inter Weight 900 Tracking -0.03em Case UPPER
— CLARITY / VAULT 003
Family JetBrains Mono Weight 700 Tracking +0.15em Case UPPER
03 — Type Scale

Eight steps. Headlines compress (negative tracking), labels expand (positive tracking). Body weight stays at 600+ — there is no "regular" in this system.

Display
CLARITY
64 / 900 / -0.04em
H1
Headline
48 / 900 / -0.03em
H2
Subhead
36 / 900 / -0.03em
H3
Statement
28 / 900 / -0.03em
Body L
Carousel paragraph copy.
20 / 600 / 0
Body
Default reading size.
16 / 600 / 0
Label
— LABEL / META
12 / 700 / +0.15em
Caption
SOURCE · CLARITY
10 / 700 / +0.10em
04 — Principles
/ 01
Stop the scroll
Maximum contrast, no gradients, no soft shadows. If it works at 80px wide, it works.
/ 02
One accent, no exceptions
The lime carries every visual hierarchy decision. Resist adding "just one more color."
/ 03
Type before image
Typography is the photograph. No stock imagery, no decorative illustration, no gradients-as-mood.
/ 04
Editorial meets terminal
Heavy display sans against monospaced metadata. The tension is the brand.
/ 05
Borders are structure
3px accent borders define every card. Rules separate footer meta from message. No rounded corners.
/ 06
Uppercase the message
All headlines, labels, and CTAs render uppercase. Mixed case is reserved for long-form body inside carousels only.
05 — Layout & Geometry
Borders

3px solid --accent on most cards. Variants drop the border entirely (minimal) or shift it to a single 6px left edge (side-accent).

Padding

48px on square cards, 40px on portraits, 32px on stories. Inner footers separate with a 2px rule + 14–16px breathing room.

Corners

Square. Always. border-radius: 0.

Spacing scale (px)
8
12
16
24
32
48
64
Aspect ratios

1:1 square (feed posts), 4:5 portrait (statement / list), 9:16 (stories / reels covers), 3:1 banners (X / LinkedIn).

06 — Design Tokens

Drop these into any new template to stay on-system.

/* CSS custom properties */
:root {
  /* color */
  --bg:     #0b0b0b;
  --text:   #f5f5f0;
  --accent: #d0ff00;
  --gray:   #888;
  --dim:    #444;

  /* type */
  --font-display: 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --w-display:   900;
  --w-body:      600;
  --w-mono:      700;

  /* geometry */
  --border:  3px solid var(--accent);
  --radius:  0;
  --track-display: -0.03em;
  --track-label:   0.15em;
}
07 — Do / Don't

Do

  • Set headlines in Inter 900, uppercase, with -0.03em tracking.
  • Use the lime accent for borders, labels, and one inverted card per set for variety.
  • Keep monospaced labels under 12px and tracked at +0.15em.
  • Treat the 3px border as a structural element — align footer rules to it.
  • Render exports at 2x for retina sharpness; screenshot at native size.
  • Let one big idea own each frame. Whitespace is part of the design.

Don't

  • Introduce gradients, drop shadows, or rounded corners.
  • Add a third color, a secondary accent, or photographic backgrounds.
  • Mix display weights below 800 — there is no thin or regular here.
  • Center-align body copy. Reserve centering for stat hero / CTA only.
  • Use sentence case in headlines. Long-form paragraphs in carousels are the only exception.
  • Stretch logos or reflow the monospaced wordmark — always CLARITY tracked at +0.10em.
08 — Voice & Copy
Tone

Declarative. Operator-grade. Short sentences. The system speaks in verdicts, not opinions: "Clarity is downstream from action." Not: "I think clarity might come from action."

Cadence

Headline ≤ 9 words. Statement ≤ 14. Carousel slides hold one idea each. CTA = verb + noun.

Wordmark

— CLARITY

Always rendered in JetBrains Mono, weight 700, tracked at +0.10em, in accent on dark or in dark on accent. Never in Inter. Never lowercase.

— END / SYSTEM v1.0 / CLARITY —