The design system behind AmazingBoards

A product that looks good in the first screenshot is easy. A product that still looks coherent after you have added a dozen boards, a marketplace of extensions, and a busy AI panel is harder. That is the difference a design system makes.

This post walks through the decisions behind the AmazingBoards design system - the one that keeps the app and this marketing site feeling like the same product. What we chose, what we rejected, and why. The marketing site itself is built with Astro, Tailwind, AOS, and motion.js, so a few of these notes touch that stack honestly.

Type - one font, two voices

Most SaaS interfaces pick a font per surface and let them drift apart. We use one family — Plus Jakarta Sans — and give it two clearly separated voices:

Voice	Role	Where
Extrabold, tight tracking	Display	Hero titles, section headlines, page H1s, and .font-brand only
Regular/medium	Everything else	Body, board labels, card text, navigation, buttons

The display voice is the personality: heavy, confident, tightly tracked. The regular voice is the work font, optimized for the small, dense text of cards and labels where most of the actual work happens. Because both are the same family, the whole product reads as one system.

The rule is enforced in global.css:

@theme {
  --font-brand: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
}

.font-brand {
  font-family: var(--font-brand);
  font-weight: 800;
  letter-spacing: -0.025em;
}

Display type stays at weight 800 with tight tracking. Everything else stays regular — the contrast between the two voices is the system.

Color - one accent, one canvas

The full palette has thirty-plus tokens, but the core identity comes from three colors:

--color-primary: #0967b3;    /* links, CTA, accent phrases */
--color-accent: #28bdb1;     /* teal — badges and highlights, used sparingly */
--color-bg-primary: #f9fafb; /* cool, near-white page canvas */

The canvas is the most opinionated choice. A cool #f9fafb instead of pure white keeps large sections calm and lets white cards read as distinct surfaces - important when a board is already full of colorful cards and labels.

Dark mode flips the canvas to #14181f: a deep blue-gray, not black. Pure black against a near-white app feels abrupt; the blue-gray sits in the same hue family as the primary blue, which makes the transition feel intentional.

Spacing - base 4, no surprises

Everything is a multiple of 4px:

4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96, 128

Sections usually use py-16 md:py-24. Cards use p-6 for compact layouts or p-10 when they need more air. The page max-width is 1200px, and inner content is 800px.

These numbers are not arbitrary. They create a rhythm that lets boards, lists, and panels breathe without making spacing decisions feel random.

Borders - clean, quiet structure

AmazingBoards uses solid, light neutral borders for dividers and card edges — clean lines that give structure without drawing attention:

<div class="w-full border-b border-neutral-200"></div>

On a dense board with many lists and cards, quiet edges matter. Shadows do the depth work, borders just define the shape.

Cards use a subtle primary/10 tint so even the edges carry a hint of brand color.

Motion - subtle, purposeful, never decorative

On the marketing site, motion is limited to gentle scroll reveals:

• AOS (Animate On Scroll) - used for scroll reveals such as data-aos="fade-up-sm".
• Text and headings render immediately — no staggered word-by-word entrances. Content is readable the moment it’s on screen.

The rules are simple:

• Use 200-300ms for interactions and 400-800ms for scroll reveals.
• Prefer transform and opacity over layout properties.
• Use data-aos-once="true" when the element should reveal only once.
• Every animation should communicate entrance, state change, or feedback.

In the app itself, the same restraint applies to card drags, list reordering, and panel transitions: motion confirms what just happened. If it does not explain or confirm something, it should be removed.

Why all of this matters

A design system is a series of small constraints that make a product look intentional. As AmazingBoards grows - new board views, more extensions, a richer AI panel - the system holds because the underlying decisions about type pairing, spacing rhythm, and motion vocabulary are doing the heavy lifting.

You do not have to be a designer to ship a designed product. You just have to avoid breaking the system - and keep the small, consistent constraints that make everything feel like one tool.