---
version: "alpha"
name: "Findit"
description: "Real estate website: a white page, pale grey cards, black type and black pill buttons, with Yellow only for stars and markers."
colors:
  ink: "#000000"
  body: "#333333"
  grey: "#747474"
  surface: "#F2F4F7"
  white: "#FFFFFF"
  star: "#FFA800"
  danger: "#FF2244"
  ink-50: "rgba(0, 0, 0, 0.5)"
  ink-10: "rgba(0, 0, 0, 0.1)"
  ink-05: "rgba(0, 0, 0, 0.05)"
  ink-03: "rgba(0, 0, 0, 0.03)"
  white-80: "rgba(255, 255, 255, 0.8)"
  white-10: "rgba(255, 255, 255, 0.1)"
  primary: "{colors.ink}"
  on-primary: "{colors.white}"
  neutral: "{colors.white}"
  on-surface: "{colors.ink}"
  on-surface-variant: "{colors.body}"
  outline: "{colors.ink-10}"
  error: "{colors.danger}"
typography:
  display:
    fontFamily: "Manrope"
    fontSize: "72px"
    fontWeight: 600
    lineHeight: 1.2
  h1:
    fontFamily: "Manrope"
    fontSize: "54px"
    fontWeight: 500
    lineHeight: 1.2
  h2:
    fontFamily: "Manrope"
    fontSize: "42px"
    fontWeight: 500
    lineHeight: 1.2
  h3:
    fontFamily: "Manrope"
    fontSize: "36px"
    fontWeight: 500
    lineHeight: 1.2
  h4:
    fontFamily: "Manrope"
    fontSize: "28px"
    fontWeight: 500
    lineHeight: 1.2
  h5:
    fontFamily: "Manrope"
    fontSize: "24px"
    fontWeight: 500
    lineHeight: 1.2
  h6:
    fontFamily: "Manrope"
    fontSize: "20px"
    fontWeight: 500
    lineHeight: 1.2
  big-paragraph:
    fontFamily: "Manrope"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: 1.4
  paragraph:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: 1.4
  small-paragraph:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.4
  menu:
    fontFamily: "Manrope"
    fontSize: "16px"
    fontWeight: 500
    lineHeight: 1.2
  button:
    fontFamily: "Manrope"
    fontSize: "15px"
    fontWeight: 600
    lineHeight: 1.2
  label:
    fontFamily: "Manrope"
    fontSize: "14px"
    fontWeight: 500
    lineHeight: 1.2
  small-button:
    fontFamily: "Manrope"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: 1.2
  tiny:
    fontFamily: "Manrope"
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
rounded:
  card: "10px"
  pill: "50px"
spacing:
  gutter: "30px"
  gutter-phone: "15px"
  gutter-tablet: "20px"
  section-padding: "100px"
  section-padding-phone: "60px"
  section-padding-tablet: "80px"
  content-max: "1200px"
  header-height: "78px"
  header-height-phone: "65px"
  header-height-tablet: "70px"
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "38px"
  button-secondary:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "38px"
  button-white:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "38px"
  button-shadow:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: "10px 16px"
    height: "38px"
  tab-button:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.small-button}"
    rounded: "{rounded.pill}"
    padding: "8px 16px"
  tab-button-hover:
    backgroundColor: "{colors.grey}"
    textColor: "{colors.white}"
  tab-button-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
  chip-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.tiny}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
  chip-light:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.tiny}"
    rounded: "{rounded.pill}"
    padding: "6px 12px"
  property-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: "20px"
  benefit-card:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.card}"
    padding: "20px"
  agent-arrow:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    rounded: "{rounded.pill}"
    size: "24px"
  highlight-chip:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    typography: "{typography.paragraph}"
    rounded: "{rounded.pill}"
    padding: "12px 16px 12px 12px"
  input-field:
    textColor: "{colors.ink}"
    padding: "12px"
    height: "40px"
  submit-button:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.white}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    height: "40px"
  submit-button-pressed:
    backgroundColor: "{colors.body}"
  newsletter-form:
    backgroundColor: "{colors.white}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    height: "52px"
---

# Findit Design System

> The design tokens and style rules of **Findit**, a website template by Marcframe (live Framer site: https://findit.framer.website). Read it before you build or change a page so new work matches the template. The front matter holds the exact values; the sections below say where and how to use them. Format: [DESIGN.md](https://github.com/google-labs-code/design.md), spec version `alpha`.

## Overview

Findit is a website template for real estate: property listings with filters, cities and categories, agents, a blog, and forms to book a visit or list a property. It should feel clean, open and trustworthy: lots of white space between sections, large photos, and tidy cards that show the facts of a property at a glance.

The look is built from very few parts. The page is White; cards and tinted sections use the pale grey Background (#F2F4F7); type is Black, with Body (#333333) for paragraphs and Grey (#747474) for menu links, icons and small facts. There is no colour accent: every call to action is a Black pill with White text, and chips and tab buttons are pills too. Yellow (#FFA800) appears only in rating stars, timeline markers and the chosen radio. Photos and cards have 10px corners; a Black section and the Black footer give the contrast.

Everything is set in Manrope: headings at weight 500 (the display title at 600), paragraphs at 400, buttons at 600. Motion is soft and quick: springs of 0.4 s, button labels that roll up on hover, card photos that grow slightly, and a menu underline that grows from the left.

## Colors

- **Black (#000000)** — `ink`, `primary`, `on-surface`. Headings, buttons, dark surfaces.
- **Body (#333333)** — `body`, `on-surface-variant`. Paragraphs.
- **Grey (#747474)** — `grey`. Menu links, icons, secondary text.
- **Background (#F2F4F7)** — `surface`. Cards, tinted sections.
- **White (#FFFFFF)** — `white`, `on-primary`, `neutral`. White.
- **Yellow (#FFA800)** — `star`. Rating stars.
- **Danger (#FF2244)** — `danger`, `error`. Form error.
- **Ink 50 (rgba(0, 0, 0, 0.5))** — `ink-50`. Black 50.
- **Black 10 (rgba(0, 0, 0, 0.1))** — `ink-10`, `outline`. Play button fill.
- **Black 05 (rgba(0, 0, 0, 0.05))** — `ink-05`. Hairline borders.
- **Ink 03 (rgba(0, 0, 0, 0.03))** — `ink-03`. Black 03.
- **White 80 (rgba(255, 255, 255, 0.8))** — `white-80`. White 80.
- **White 10 (rgba(255, 255, 255, 0.1))** — `white-10`. White 10.
- **Gradient `hero`:** `linear-gradient(180deg, rgba(245,245,245,0.5) 0%, rgba(245,245,245,0.5) 75%, #FFFFFF 100%)`. Home hero background (Cultured 50 fading to white).

Semantic names in the front matter point at these colours: `primary` → `ink`, `on-primary` → `white`, `neutral` → `white`, `on-surface` → `ink`, `on-surface-variant` → `body`, `outline` → `ink-10`, `error` → `danger`.

## Typography

**Manrope, sans-serif.**

Font sizes change at the breakpoints (phone / tablet from 810px / desktop from 1200px); the front matter gives the desktop size. Line height is a multiple of the font size.

| Token | Size (phone / tablet / desktop) | Line height | Weight | Letter spacing | Use |
|---|---|---|---|---|---|
| `display` | 38px / 50px / 72px | 1.2 | 600 | — | Display 1 |
| `h1` | 34px / 42px / 54px | 1.2 | 500 | — | Heading 1 |
| `h2` | 30px / 34px / 42px | 1.2 | 500 | — | Heading 2 |
| `h3` | 28px / 32px / 36px | 1.2 | 500 | — | Heading 3 |
| `h4` | 24px / 26px / 28px | 1.2 | 500 | — | Heading 4 |
| `h5` | 20px / 22px / 24px | 1.2 | 500 | — | Heading 5 |
| `h6` | 18px / 19px / 20px | 1.2 | 500 | — | Heading 6 |
| `big-paragraph` | 18px | 1.4 | 400 | — | Big Paragraph |
| `paragraph` | 16px | 1.4 | 400 | — | Medium Paragraph |
| `small-paragraph` | 14px | 1.4 | 400 | — | Small Paragraph |
| `menu` | 16px | 1.2 | 500 | — | Menu |
| `button` | 15px | 1.2 | 600 | — | Button (Framer: Buton) |
| `label` | 14px | 1.2 | 500 | —, uppercase | Label — section labels |
| `small-button` | 13px | 1.2 | 600 | — | Small Button |
| `tiny` | 12px | 1.2 | 400 | — | Tiny — card chips |

## Layout

Three layouts: phone below 810px, tablet from 810px, desktop from 1200px. Spacing tokens without a suffix are the desktop values; `-tablet` and `-phone` give the smaller screens where they differ.

| Token | Phone / tablet / desktop | Use |
|---|---|---|
| `gutter` | 15px / 20px / 30px | Page side padding |
| `section-padding` | 60px / 80px / 100px | Section top and bottom padding |
| `content-max` | 1200px | Maximum content width (inside the gutters) |
| `header-height` | 65px / 70px / 78px | Height of the fixed header bar, and of the spacer under it |

Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding`. Cards in a grid are 20px apart: three columns on desktops, two on tablets, one on phones for properties, agents and posts; the city grid has rows 30 apart. Inside a card the padding is 20px and the blocks are 10 or 20 apart. The header is fixed to the top, `header-height` tall, with a spacer of the same height under it.

## Elevation & Depth

Findit is mostly flat: depth comes from fills, White sections against pale grey Background cards, and a Black section and the Black footer for emphasis. Two shadows exist. `header` sits under the fixed header bar. `soft` is a layered shadow used only on small floating parts: the Shadow button (the hero's main action), the highlight chips and the hero label's icon circle. Lines are 1px Black 10 (`ink-10`) on light surfaces and White 10 (`white-10`) on dark ones.

- **`soft`:** `box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.05), 0px 0px 20px 0px rgba(0,0,0,0.05), 0px 4px 4px 0px rgba(0,0,0,0.03), 0px 6px 6px 0px rgba(0,0,0,0.05), 0px 10px 10px 0px rgba(0,0,0,0.1)`. Black 05/03/10 layered shadow: Shadow button, floating labels, hero label icon.
- **`header`:** `box-shadow: 0px 1px 42px 0px rgba(0,0,0,0.05)`. Header bar.

## Shapes

Photos, cards and the video have 10px corners; buttons, chips, tabs and labels are pills; form fields have small corners (radius 4).

- **`card` (10px):** Cards, images, video.
- **`pill` (50px):** Buttons, chips, labels.

## Motion

Reduced motion: the tickers (the testimonial rows) stand still and nothing slides or grows, while state changes may still fade.

- **`spring-soft`** — spring (duration 0.4 s, bounce 0). Button text flip, card image zoom, tabs, video, accordions, header menu.
- **`spring-button`** — spring (duration 0.4 s, bounce 0.2). Menu link underline, hamburger.

## Components

Component tokens below use the exact values of the template. Variants with a suffix (`-hover`, `-pressed`, `-focus`, `-open`) only list what changes.

- **`button-primary`** (Button (Primary / Secondary / White / Shadow)). The Black pill, with a 1px border inside in the fill colour. Hover: the label moves up out of view while an identical copy rises from below (`spring-soft`); the colours never change.
- **`button-secondary`** (Button (Primary / Secondary / White / Shadow)). Transparent, with Black text and a 1px Black border inside: "Book a visit" next to the hero's main action.
- **`button-white`** (Button (Primary / Secondary / White / Shadow)). The White pill, on Black sections.
- **`button-shadow`** (Button (Primary / Secondary / White / Shadow)). As the Black pill, with the `soft` shadow, which it keeps on hover.
- **`tab-button`** (Tab button (Default / Active)). A tab in a tab list, or a filter chip on the property pages. Colours ease over 0.4 s; a tab that stops being active returns to Default at once.
- **`tab-button-hover`** (Tab button (Default / Active)).
- **`tab-button-active`** (Tab button (Default / Active)). The current tab or filter; no hover.
- **`chip-dark`** (Chip (dark / light / surface)). A property's category on its photo ("Houses").
- **`chip-light`** (Chip (dark / light / surface)). A property's type on its photo ("Sell" or "Rent"), 5px after the category chip.
- **`property-card`** (Property card (Complete / Simple)). A 350px photo with the two chips 20px in from its top left, then the location (Grey), the title in `h6`, the Beds / Baths / Sqft figures, a Black 10 line, and the agent with the price in `h6`. Hover: the photo grows to 105%. The card is not one link: photo, title, chips, location and agent each link on their own.
- **`benefit-card`** (Benefit card (Horizontal / Vertical)). A number ("01.", `h4`) in a 75px column, then the title in `h5` and the text in `paragraph`, Body; on phones the number sits above.
- **`agent-arrow`** (Agent card). The round arrow at the right of an agent card; it turns 45° when the card is hovered.
- **`highlight-chip`** (Highlight chip). A White pill with the `soft` shadow: a Black 22px circle with a White check, then the label 10px to its right.
- **`input-field`** (Form field). Filled Black 05 (`ink-05`) with a 1px Black 10 border inside, radius 4, 16px text; the label (`small-paragraph`, Body) sits 10px above. Required fields use the browser's own check; there is no custom focus or error style.
- **`submit-button`** (Submit button). A form's Send button; it fills its column (240px wide in the contact form). Hover: a translucent Body fill (0.2 s). While sending, a 20px White spinner turns in place of the label; after a send it reads "Thank you", after a failed send the Danger red text sits on a 15% Danger fill.
- **`submit-button-pressed`** (Submit button). Pressed: a Body fill (#333333).
- **`newsletter-form`** (Newsletter form). The footer's e-mail field in a White pill (16px text, Black 50 placeholder) with a 40px Black round button holding a White arrow at its right. Sending shows the spinner, success a check, and the texts are announced to screen readers only.

Other components of the template, described in its spec: Menu link (Default / Active), Hamburger (Default / Close), Logo, Icon, Section label, Section title (split / center / stack), Breadcrumbs, Divider, City card, Process step, Testimonial card, Post card (Simple), Fact list (dark / light), Team card, Hero video (Default / Play), Ticker, Timeline, Accordion item (Open / Close), Property filter (Desktop / Tablet / Tablet Open / Phone / Phone Open), Carousel, Radio group, Detail list, Contact list, YouTube embed, Rich text.

## Do's and Don'ts

- Do use Black pills with White text for calls to action; White pills on Black sections.
- Do make buttons, chips, tabs and labels pills, and photos, cards and the video 10px rounded.
- Do put cards on the pale grey Background on White sections, and White cards on Background sections.
- Do use Body for paragraphs and leads, Grey for menu links, icons and the small facts on property cards, and Black for titles.
- Do draw lines and borders as 1px Black 10 on light surfaces and White 10 on dark ones.
- Do keep Yellow for rating stars, timeline markers and the chosen radio.
- Do animate hovers with `spring-soft` (0.4 s, no bounce): button labels roll up and card photos grow to 105%.
- Don't add a colour accent or new colours; the calls to action are Black.
- Don't use shadows on cards; `soft` belongs to the Shadow button, the highlight chips and the hero label, and `header` to the header bar.
- Don't change a button's colours on hover (the label rolls instead).
- Don't use Danger for anything but a failed form send.
- Don't mix fonts: Manrope is the only family.

## Source

Every value here was measured from the published Findit template (https://findit.framer.website); when this file and the live site disagree, the site is right.

Demo photos (Unsplash) and the hero video (Pexels) are placeholders and not part of the design system.