The design system behind RicoFast

A template that looks good in the first screenshot is easy. A template that still looks good after you have replaced half the content is harder. That is the difference a design system makes.

This post walks through the decisions behind RicoFast’s design system: what we chose, what we rejected, and why.

Type - two fonts, one job each

Most SaaS templates pick a single sans-serif and call it a day. We use two fonts, and they have separate jobs:

Font	Role	Where
Instrument Serif	Display	Hero titles, section headlines, page H1s, and .font-brand only
Inter	Everything else	Body, navigation, labels, buttons, captions

Instrument Serif is the personality. It gives the template an editorial edge without making the interface feel precious. Inter is the work font, optimized for small-screen reading where most of the actual work happens.

The rule is enforced in global.css:

@theme {
  --font-brand: "Instrument Serif", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;
}

.font-brand {
  font-family: var(--font-brand);
  font-weight: 400;
}

Instrument Serif stays at weight 400. Heavy display weights make it clumsy, and restraint is part of the system.

Color - one accent, one canvas

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

--color-primary: #2d6dc3;    /* links, headings, CTA */
--color-accent: #fad13b;     /* badges and highlights, used sparingly */
--color-bg-primary: #fdfaf5; /* warm page canvas */

The canvas is the most opinionated choice. A warm #fdfaf5 instead of pure white makes the template feel designed without adding decoration.

Dark mode flips the canvas to #0b1220: a deep navy, not black. Pure black against a warm-white site feels abrupt; the navy 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 sections breathe without making spacing decisions feel random.

Borders - dashed, primary-tinted

Most templates default to solid neutral borders. RicoFast leans on dashed borders for dividers and quiet structure:

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

Dashed lines are softer. On a content-dense SaaS site with many sections, that matters.

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

Motion - subtle, purposeful, never decorative

Two animation systems coexist:

• AOS (Animate On Scroll) - used for scroll reveals such as data-aos="fade-up-sm".
• motion.js - reserved for orchestrated entrances, including the hero text stagger via AnimatedText.

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.

No section needs motion just because it looks empty. If motion 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 template look intentional. When you fork RicoFast, replace the hero copy, swap the primary color, and add new sections, the system still 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.

The full reference lives at docs/DESIGN.md. Read it once before your first major change; it is the cheat sheet for everything in the template.