Building squarepostlabs.com

Every studio needs a home. We built ours in a single focused sprint, and the result is the site you’re reading right now. Here’s what we used, what we learned, and what’s coming next.

The Stack

We chose Astro 5 as the foundation - it outputs zero JavaScript by default, which is exactly right for a mostly-static marketing site. Add Tailwind v4 for utility styles via the Vite plugin (not the deprecated Astro integration), and deploy to Cloudflare Pages via the @astrojs/cloudflare adapter.

// astro.config.mjs - the whole configuration
import { defineConfig } from 'astro/config';
import cloudflare from '@astrojs/cloudflare';
import tailwindcss from '@tailwindcss/vite';
import mdx from '@astrojs/mdx';

export default defineConfig({
  site: 'https://squarepostlabs.com',
  integrations: [mdx()],
  markdown: {
    shikiConfig: {
      theme: 'css-variables',
      wrap: true,
    },
  },
  adapter: cloudflare(),
  vite: {
    plugins: [tailwindcss()],
  },
});

The css-variables Shiki theme is the key to branded syntax highlighting. Instead of hardcoded colors, Shiki outputs CSS custom property references that we override in global.css.

Design System

We call it Amber Forge - a dark-first design system built around a warm amber accent against deep navy backgrounds. All color, spacing, and typography decisions flow through CSS custom properties.

/* Amber Forge - core tokens */
:root {
  --bg-primary: #0a0b0f;
  --bg-secondary: #12131a;
  --text-primary: #e8e9ed;
  --text-secondary: #9496a8;

  /* The amber */
  --accent: #d4a054;
  --accent-bright: #e8b86d;
  --accent-dim: #a07a3a;

  /* Shiki maps directly to these */
  --astro-code-token-keyword: var(--accent);
  --astro-code-token-function: var(--accent-bright);
}

The result: every code block on the site uses the same amber palette as the UI itself. No jarring color switches between prose and code.

Fonts are self-hosted variable fonts - Fraunces for display headings, DM Sans for body, JetBrains Mono for code and labels. The variable format means one file covers all weights.

What is Next

The blog pipeline is live. Next: contact form via Resend, analytics via PostHog, and eventually a content feed for product build logs. We ship incrementally - the site exists before it’s complete.

If you’re building something, we’d like to hear about it. More soon.