Design - serpcompany/serp-monorepo GitHub Wiki

Our websites and apps are built on the Nuxt UI component library.

We do not want to overthink design. We just want to use the design that is available out of the box as much as possible.

However, no component library has everything you need, so the key is to be able to combine the components that are there to create page "page sections" / "blocks" / "templates" / etc. needed for UX & SEO purposes.

What are "page sections"?

In component-library parlance, a page section or block is a self-contained, higher-level UI building-block that is made up of other components - a distinct "section" or "pattern". Think “hero banner,” “cards grid,” “feature list,” “testimonial slider,” etc.

Each block implements the markup, styling and behavior for the "page section".

If there is no existing block/template for a page that we need, we should create by assembling existing NuxtUI components.

When in doubt, look to these websites for design inspiration of how to assemble components together to create the blocks / page sections / templates we need:

• github.com (and its design system primer.style)
• f6s.com (directory style site built on nuxt - very similar features/functionality to ours)
• playbooks.com (simple, but alot of components and patterns we actually need)
• ollama.com (for its simplicity -- lets not over style anything)
• openalternative.co (simple, but alot of components and patterns we actually need)
• chatbotkit.com (alternative "simple" design)