Design — Findit Next.js

The look comes from a small set of tokens. Change a token and every page, component and state follows — you rarely need to touch a component.

See everything first

Run npm run dev and open http://localhost:3000/style-guide. It shows the colours, text styles, buttons, form fields, cards and every other component with its name. When you want to know what a change will affect, look there.

Colours

src/design-system/theme.css:

@theme {
  --color-ink: #000;       /* headings, buttons, dark surfaces */
  --color-body: #333;      /* paragraphs */
  --color-grey: #747474;   /* menu, icons, secondary text */
  --color-surface: #f2f4f7; /* cards and tinted sections */
  --color-cultured: #f5f5f5; /* the soft gradient behind the home hero */
  --color-star: #ffa800;   /* rating stars */
  --color-danger: #ff2244; /* form errors */
}

Each name becomes a Tailwind class: bg-ink, text-grey, bg-surface. Swap the hex values for your own palette and the whole site changes. Keep enough contrast between text and its background — at least 4.5:1, or the site becomes hard to read.

Findit is black and white with one soft grey: there is no accent colour. To add one, define --color-accent: #0f766e; in the same block and use bg-accent, text-accent where you want it — for example in src/design-system/components/actions/Button.tsx.

Faded blacks and whites are opacity modifiers on the same colours: bg-ink/5, border-ink/10, text-white/80. They follow the palette when you change --color-ink.

Logo

public/images/logo.svg is the logo in the header and the footer, and src/app/icon.svg and src/app/apple-icon.png are the icons in the browser tab and on a phone’s home screen. Replace the three files, keeping the names. The logo is shown at 93 × 30 px on desktop (78 × 25 px on phones), so draw it in that proportion, about 3:1. Its description for screen readers is the label in src/design-system/components/brand/Logo.tsx.

Fonts

The template loads Manrope through next/font in src/app/layout.tsx:

const manrope = Manrope({ variable: "--font-manrope", subsets: ["latin"] });

To use another Google font, import it by name from next/font/google and keep the variable name:

import { Inter } from "next/font/google";
const manrope = Inter({ variable: "--font-manrope", subsets: ["latin"] });

For a font you have licensed yourself, use next/font/local and point it at the files in src/app/fonts/. Next.js serves the font from your own domain either way, so there is no request to Google at runtime.

Text styles

src/design-system/tokens/text.ts holds the sizes, weights and line heights, named after the design:

display, h1, h2, h3, h4, h5, h6
bigParagraph, paragraph, smallParagraph
menu, button, smallButton, label, tiny

Each is a set of Tailwind classes. The headings have the phone size first and the tablet (md:) and desktop (lg:) sizes after: h2: "text-[30px] md:text-[34px] lg:text-[42px] leading-[1.2] font-medium". Paragraphs, labels and buttons are the same at every size. Change the numbers here rather than in the components, and headings stay consistent across the site.

Use them as className={text.h2} or combine: className={cn(text.h6, "text-grey")}.

Breakpoints

Three sizes, set in theme.css:

	Width	Tailwind prefix
Phone	below 810 px	(none)
Tablet	810–1199 px	md:
Desktop	1200 px and up	lg:

Motion

src/design-system/tokens/motion.ts holds the springs and the reveal used by buttons, cards, tabs, the header menu, accordions and the hero video. Lower duration for a snappier feel, or raise bounce for a livelier one. The speed of the two testimonial rows is the speed prop (pixels per second, 20 by default) on <Ticker> in src/components/sections/TestimonialsSection.tsx. Every animation respects the visitor’s “reduce motion” setting.

Rounded corners, spacing, shadows

These are Tailwind classes on the components (rounded-2xl, px-5, gap-10). Tailwind’s scale is 4 px per step, so p-5 is 20 px. Change them where you see them; the style guide shows the result immediately.

Components

src/design-system/components/ — buttons, cards, form fields, the ticker and carousel, the icons. Its README lists every component next to the design it comes from. The sections that make up a page are one level up, in src/components/sections/, and are listed in Pages and sections.

Icons

The icons are Phosphor shapes stored as path data in src/design-system/components/icons/paths.ts, and <Icon name="bed" /> draws one in the current text colour. To add one, open the icon on phosphoricons.com, copy the SVG, take the d="…" of its <path>, and add a line:

"my-icon": "M128,24A104,104,0,1,0,…",

Then use <Icon name="my-icon" className="size-5" />. Paths use a 256 × 256 grid, which is what Phosphor exports. An icon with several shapes takes a list of paths: "my-icon": ["M…", "M…"].