Welcome to the master guide for the brand's visual identity, voice, tone, and technical implementation. This interactive document ensures consistency across all web content and development work.
Bridging the gap between storytelling/creativity and technology/business.
Our voice is authentic, experimental ("Tinkerer"), and playfully cynical. We embrace the "messy process" of creativity.
"Voice is the sound of your inner world." — Read more
Action-Oriented & Experimental. Focus on building, shipping, and exploring "rabbit holes". We value the process of figuring things out over polished perfection.
"Built with 🥲 by me."
Witty & Self-Deprecating. "Sometimes serious. Sometimes not." We use humor to deflate pretension and make complex topics accessible (e.g., "Flowers Are Just Tiny Trees").
Professional but Approachable. Deep knowledge of Content Strategy, SaaS, and PLG, but explained simply. "Bridging the gap between storytelling and ROI."
Click any color card to copy its Hex code.
Bold ideas, built with tinkering spirit.
The quick brown fox jumps over the lazy dog.
Thinking deeply, writing authentically.
Tinkering with the future.
Precision meets accessibility in functional design.
Great stories deserve a typeface that stays out of the way.
Building a roadmap for your brand's voice and growth strategy.
Hover or tap to see it in action:
[[Neo-Brutalism|Design Trend|A style characterized by high contrast, bold colors, and intentional rawness.]]
[[Term|Label|Explanation|position]]
These elements are wrapped in .post-content.gh-content to mirror actual blog post
rendering.
This is a standard paragraph with bold text, italic text, and a text link. It demonstrates the body font size and line height used in articles.
Heading 2 is the primary sub-section header. It should be bold and commanding.
Heading 3 is used for sub-points. It is slightly smaller but still distinct.
Heading 4 is used for minor subdivisions.
Standard blockquote for emphasis:
"The medium is the message. This comes from the standard Ghost markdown quote."
Alternative blockquote (Pull Quote):
"This is an alternative blockquote style, often used for pull quotes or highlighting key takeaways."
Inline code snippet example.
// Code block example
function helloWorld() {
console.log("Hello Ghost!");
}
Our content is driven by "Thinking & Tinkering"—the intersection of strategy and hands-on experimentation.
Deep Dives & Experiments. Going deep on obscure topics, "unhinged" experiments (e.g., AI poetry, Instagram bots), and learning in public.
Navigating Modern Work. Honest takes on freelancing vs. full-time, building "career security" (not job security), and the reality of creative work.
The Inner World. Personal essays on happiness, meaning, and the psychology of creativity. "Voice is the sound of your inner world."
Playful Cynicism. Deflating tech pretension, satirical projects (Starbucks Order Generator), and finding the funny in the mundane.
How we write is just as important as what we write. Our voice is the "Smart Friend".
Start with a story, a frustration, or a personal observation. Connect emotionally before pivoting to the topic.
Bridge the personal story to the broader lesson or "business stuff". Why does this matter to the reader?
Don't just philosophize. Give the reader something they can do, try, or think about differently right now.
Default for body and long titles. Used for blog post titles, descriptions, and paragraphs. It feels conversational, approachable, and easier to read at length.
Reserved for UI elements. Used for short labels, navigation links, sidebar items, and buttons. It signals a "destination" and provides a clean, formal break from content.
We use specific aspect ratios for blog hero images to ensure consistency across the card grid.
Our hero images are more than just decoration—they are the "hook" of the article.
We combine disparate elements (vintage diagrams, modern type, textures) to create a "tinkerer's workbench" aesthetic. High contrast, gritty textures, and unexpected juxtapositions.
Never use unedited Unsplash/stock photos. Always layer, texture, or treat them to match the brand aesthetic.
Animations follow "liquid" physics with overshoot and wobble.
Subtle floating animation.
Used for error/attention.
Compound interaction. Main Header sticks to top (0px). Filter Subnav sticks below it (~68px). Both use a rounded "docked" aesthetic.
Hover to Dock
Used for elements appearing with force.
Standard interaction state.
Elements stretch/morph on interaction.
Complex interactions with state.
assets/css/screen.css: Global styles & varsdefault.hbs: Layout wrapper & scriptspost.hbs: Single post templatecustom-brand-kit.hbs: This style guideWe follow a strict "No-Framework" policy. Styles are defined semantically or via utility classes prefixed with `kg-` (Ghost defaults).
:root {
--font-display: 'League Spartan', sans-serif;
--color-brand: #ffc107;
--spacing-gutter: 2rem;
}