Playbook · January 2025

The Calm Form Stack

How we designed Formlite to feel like a premium editorial publishing tool—without the clutter.

By Formlite Team · 8 min read

The Problem with Modern Form Builders

Most form builders follow the same playbook: pack in every feature imaginable, create complex dashboards with nested menus, and charge premium prices for enterprise-grade functionality that 90% of users never touch.

We took a different approach. Formlite is intentionally minimal—not because we couldn't build more features, but because we believe the best tools get out of your way.

Design Philosophy: Editorial First

When designing Formlite, we drew inspiration from editorial publishing tools like Notion, Linear, and Arc—products that feel like they were crafted with care, not assembled from design system components.

Design Principle

"Every pixel should serve a purpose. If we can remove something without losing clarity, we remove it."

Typography Matters

We use Satoshi for UI elements and PP Editorial New for headlines. This combination creates a warm, sophisticated feel that stands out from the typical tech product aesthetic.

  • Large, confident font sizes (48px+ for headlines)
  • Generous line heights (1.6 for body text)
  • Warm neutral colors (#2D2D2A instead of pure black)
  • Thoughtful spacing (64px+ between sections)

The Technical Stack

Behind the calm exterior is a carefully chosen technical stack optimized for speed and developer experience:

Frontend

  • • Next.js 16 (App Router)
  • • TypeScript
  • • Tailwind CSS 4
  • • Framer Motion

Backend

  • • Supabase (PostgreSQL)
  • • Stripe (Payments)
  • • Resend (Email)
  • • Vercel (Hosting)

Why This Stack?

We chose tools that prioritize developer experience and ship fast. Next.js gives us SSR for SEO, Supabase handles auth and database with minimal config, and Stripe is the gold standard for payments.

Features We Deliberately Left Out

Sometimes what you don't build is just as important as what you do build. Here are features we consciously decided against:

Drag-and-Drop Builder

Too slow. Our click-to-add approach is 3x faster for most use cases.

Complex Conditional Logic

Adds cognitive overhead. Most forms don't need it. We'll add it later for Pro users.

Payment Collection in Forms

Scope creep. If you need payments, use Stripe Checkout directly or try Typeform.

Performance Optimizations

A calm interface means nothing if it's slow. Here's how we ensure Formlite stays fast:

  • Auto-save with debouncing (500ms) to reduce database writes
  • Optimistic UI updates for instant feedback
  • Server-side rendering for SEO pages
  • Image optimization with Next.js Image component
  • Lazy loading for form preview components

What's Next

We're continuously refining the experience. Upcoming improvements include:

  • Custom domains for Pro users (Q1 2025)
  • Advanced analytics dashboard (Q1 2025)
  • Simple conditional logic (Q2 2025)
  • Team workspaces (Q2 2025)

But we'll only add features that align with our core principle: calm software for teams who value taste.