Design — Findit Astro

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:4321/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.astro.

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

src/assets/images/logo.svg is the logo in the header and the footer, and public/icon.svg and public/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.astro.

Fonts

Manrope is loaded through Astro’s Fonts API in astro.config.mjs:

fonts: [
  {
    provider: fontProviders.google(),
    name: "Manrope",
    cssVariable: "--font-manrope",
    weights: ["200 800"],
    styles: ["normal"],
    subsets: ["latin"],
    fallbacks: ["sans-serif"],
  },
],

Change name to another Google font and keep cssVariable as it is — the rest of the site uses that variable. Astro downloads the files at build time and serves them from your own domain, so nothing is requested from Google while someone reads your site. For a font you have licensed yourself, use the local provider as described in Astro’s fonts guide; the variable name stays the same.

If a font has no variable version, list the weights you use (weights: [400, 500, 700]) instead of the range.

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 class={text.h2} or combine: class={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; the behaviour itself is in src/design-system/scripts/ (one small file per interaction: accordion.ts, carousel.ts, hover.ts, hero-video.ts, …). 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.astro. Everything 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" class="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…"].