Design — Findit HTML

How the styling works

The pages are styled with Tailwind CSS classes written in the HTML (class="rounded-full px-4 py-2.5 bg-ink text-white"). assets/css/style.css contains exactly the classes the pages use, generated from src/css/style.css.

That means two kinds of change:

Change	Rebuild the stylesheet?
Move, copy or delete elements; use classes that already appear somewhere in the site	No
Change a colour, a font, a breakpoint; use a class that appears nowhere yet (say mt-7)	Yes

Rebuilding the stylesheet

Once, install the tools (needs Node.js 20 or newer):

npm install

Then, after a change:

npm run build:css      # one build
npm run watch:css      # rebuilds on every save while you work

Both write assets/css/style.css. The build scans every .html file and assets/js/main.js for classes, so a class you add anywhere is picked up. Upload the new style.css with your pages.

Colours

In src/css/style.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 becomes a class (bg-ink, text-grey, bg-surface). Change the values, rebuild, and the whole site follows. Keep text on its background at a contrast of at least 4.5:1 so it stays readable.

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, rebuild, and use bg-accent or text-accent on the elements you want.

The menu and footer links change colour on hover, and the script animates that, so the two colours are also written in the HTML (data-motion='{"rest":{"color":"#747474"},"hover":{"color":"#000000"}}'). If you change --color-grey or --color-ink, replace #747474 and #000000 in those attributes across the files too.

Logo and icons

assets/images/logo.svg is the logo in the header and the footer; icon.svg and apple-icon.png in the root folder 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.

The interface icons in the pages are inline SVG (Phosphor). To use another one, open it on phosphoricons.com, copy its SVG and paste it where the old one is; icons take their colour from the text around them.

Fonts

Manrope ships in assets/fonts/manrope-variable.woff2 and is declared at the top of src/css/style.css:

@font-face { font-family: "Manrope"; src: url("../fonts/manrope-variable.woff2") format("woff2"); font-weight: 200 800; … }
:root { --font-manrope: Manrope, "Manrope fallback: Arial", sans-serif; }

To use another font: put its .woff2 file in assets/fonts/, change the @font-face (font-family and src) and the first name in --font-manrope, then rebuild. Fonts from Google Fonts can be downloaded as files with https://gwfh.mranftl.com so they are served from your own domain, which is faster and needs no consent banner.

Sizes and spacing

Text sizes are classes with a phone value first and the tablet (md:) and desktop (lg:) values after: text-[30px] md:text-[34px] lg:text-[42px]. Spacing uses Tailwind’s scale — 4 px per step, so p-5 is 20 px, gap-10 is 40 px — or exact values in brackets (py-[50px]).

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

Components

style-guide.html shows every button, form field, card, slider and section with its name. To reuse one, copy its markup from there or from the page that shows it. Elements with data-… attributes (data-accordion, data-tab-filter, data-property-filter, data-hero-video, data-motion, …) are wired to the site script — keep those attributes when you copy them.

Motion

Hover effects, sliders, tickers, accordions, filters and the hero video are all in assets/js/main.js and respect the visitor’s “reduce motion” setting. The two testimonial rows on the home page and the About page move at a speed set on each ticker in the HTML (the animation-duration in its style attribute; a smaller number is faster).