DESIGN.md · Free

Findit design system

Real estate website: a white page, pale grey cards, black type and black pill buttons, with Yellow only for stars and markers.

The style

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.

Colours

Black#000000ink · primary · on-surfaceHeadings, buttons, dark surfaces.
Body#333333body · on-surface-variantParagraphs.
Grey#747474greyMenu links, icons, secondary text.
Background#F2F4F7surfaceCards, tinted sections.
White#FFFFFFwhite · on-primary · neutralWhite.
Yellow#FFA800starRating stars.
Danger#FF2244danger · errorForm error.
Ink 50rgba(0, 0, 0, 0.5)ink-50Black 50.
Black 10rgba(0, 0, 0, 0.1)ink-10 · outlinePlay button fill.
Black 05rgba(0, 0, 0, 0.05)ink-05Hairline borders.
Ink 03rgba(0, 0, 0, 0.03)ink-03Black 03.
White 80rgba(255, 255, 255, 0.8)white-80White 80.
White 10rgba(255, 255, 255, 0.1)white-10White 10.

Typography · Manrope

display
72px · 600 · 1.2Findit
h1
54px · 500 · 1.2Findit
h2
42px · 500 · 1.2Findit
h3
36px · 500 · 1.2Findit
h4
28px · 500 · 1.2Findit
h5
24px · 500 · 1.2Findit
h6
20px · 500 · 1.2Build a site that feels designed
big-paragraph
18px · 400 · 1.4Build a site that feels designed
paragraph
16px · 400 · 1.4Build a site that feels designed
small-paragraph
14px · 400 · 1.4Build a site that feels designed
menu
16px · 500 · 1.2Build a site that feels designed
button
15px · 600 · 1.2Build a site that feels designed
label
14px · 500 · 1.2Build a site that feels designed
small-button
13px · 600 · 1.2Build a site that feels designed
tiny
12px · 400 · 1.2Build a site that feels designed

Corners

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

Parts

Get startedGet startedGet startedGet started

chip darkchip lighthighlight chip

Findit

A card in its own colours and corners.

Findit

A card in its own colours and corners.

Drawn from the file’s component tokens.

Do's and don'ts

use Black pills with White text for calls to action; White pills on Black sections.
make buttons, chips, tabs and labels pills, and photos, cards and the video 10px rounded.
put cards on the pale grey Background on White sections, and White cards on Background sections.
use Body for paragraphs and leads, Grey for menu links, icons and the small facts on property cards, and Black for titles.
draw lines and borders as 1px Black 10 on light surfaces and White 10 on dark ones.
keep Yellow for rating stars, timeline markers and the chosen radio.
animate hovers with spring-soft (0.4 s, no bounce): button labels roll up and card photos grow to 105%.

add a colour accent or new colours; the calls to action are Black.
use shadows on cards; soft belongs to the Shadow button, the highlight chips and the hero label, and header to the header bar.
change a button's colours on hover (the label rolls instead).
use Danger for anything but a failed form send.
mix fonts: Manrope is the only family.

Get Findit

Findit

Free

Real estate website template

Framer
Next.js
Astro
HTML
Figma
AI prompt

16 pages

This file describes Findit’s style. The template is the whole site: every page, its content and its motion, free to remix in Framer, with code editions for selected plans.

Remix free in Framer Live preview Every edition

---
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.

Use it with your agent

Save it as DESIGN.md at your project’s root.
Ask Claude Code, Cursor, v0 or Lovable to follow it for every page and component it builds.
Or let the agent fetch it: the Framebrick MCP server’s get_design_md tool with { "slug": "findit" }, or the raw file at framebrick.co/templates/findit/design.md.

Connect the MCP server

Be the first to know

One short email when we release a template or a free component. No spam — unsubscribe anytime.

We use your email only for Framebrick updates. Privacy policy

The style

Colours

Typography · Manrope

Corners

Spacing

Parts

Do's and don'ts

Get Findit

Findit

Get new templates and components first