# My Framer Site design system

> My Framer Site design system measured from wireframee.framer.website: Caveat font, 12 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/wireframee.framer.website/

My Framer Site’s website (wireframee.framer.website) uses the Caveat font on a #F7F7F7 background. Measured by Sitepeel on November 5, 2026.

## What font does My Framer Site use?

My Framer Site uses Caveat (weights 400 and 600) and Permanent Marker (weight 400), with Geist Mono for code on wireframee.framer.website. Page titles are 343px at weight 400 (111.5px on phones) and body text is 20px. Measured on November 5, 2026.

- Caveat (weights 400, 600)
- Permanent Marker (weights 400)
- Patrick Hand (weights 400)
- sans-serif (weights 400)

## My Framer Site colors: palette and hex codes

My Framer Site’s main colors are #F7F7F7 (snow) for the background and #000000 (near black) for text, with #0443B5 (dark blue) and #BD0000 (dark red) as other accents. Measured on November 5, 2026.

- #F7F7F7: snow
- #000000: near black
- #111111: charcoal
- #FFFFFF: white
- #EFEFEF: mist
- #0443B5: dark blue
- #BD0000: dark red

## What is My Framer Site built with?

My Framer Site’s website (wireframee.framer.website) is built with Framer, React, GSAP, Lenis and Motion. Measured on November 5, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Animation & 3D: GSAP 3.14.2, Lenis 1.3.25, Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does My Framer Site use?

My Framer Site’s website uses Caveat (weights 400 and 600) and Permanent Marker (weight 400), with Geist Mono for code. Page titles are 343px at weight 400 (111.5px on phones) and body text is 20px. Measured on November 5, 2026.

### What are the My Framer Site colors and hex codes?

On wireframee.framer.website: #F7F7F7 (snow) for the background and #000000 (near black) for text, with #0443B5 (dark blue) and #BD0000 (dark red) as other accents. The color palette above lists all 12 colors with their hex codes and where each one is used.

### What is the My Framer Site design system?

The design system on this page is wireframee.framer.website’s, as measured on November 5, 2026: Caveat type and pill-shaped corners, written down as a DESIGN.md. It is not My Framer Site’s own documentation.

### What is My Framer Site built with?

My Framer Site’s website (wireframee.framer.website) is built with Framer, React, GSAP, Lenis and Motion. The full tech stack Sitepeel found: Framer, React, GSAP, Lenis, Motion and Google Fonts. Measured on November 5, 2026.

### What is the My Framer Site DESIGN.md?

A plain-text file with My Framer Site’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this My Framer Site’s official design system?

No. Sitepeel measured it from wireframee.framer.website’s public page on November 5, 2026. It is an independent analysis, not made or approved by My Framer Site.

### Can I use My Framer Site’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy My Framer Site’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/wireframee.framer.website/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with My Framer Site.

## The DESIGN.md file

```markdown
---
version: alpha
name: My Framer Site
description: "Light monochrome interface measured from wireframee.framer.website: Caveat type with Permanent Marker, tonal surfaces and pill-shaped controls."
colors:
  background: "#F7F7F7"
  surface: "#F7F7F7"
  on-surface: "#000000"
  on-background: "#000000"
  on-surface-variant: "#111111"
  surface-container-low: "#FFFFFF"
  surface-container: "#EFEFEF"
  overlay: "#00000085"
  outline: "#00000026"
  primary: "#000000"
  on-primary: "#FFFFFF"
  secondary: "#0443B5"
  tertiary: "#BD0000"
  warning: "#FFE500"
typography:
  headline-display:
    fontFamily: Caveat
    fontSize: 343px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Permanent Marker
    fontSize: 80px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Caveat
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
  headline-sm:
    fontFamily: Patrick Hand
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
  title-lg:
    fontFamily: Caveat
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.1
  body-md:
    fontFamily: Caveat
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.1
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-md:
    fontFamily: sans-serif
    fontSize: 13px
    fontWeight: 400
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1
  headline-display-mobile:
    fontFamily: Caveat
    fontSize: 111.5px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Permanent Marker
    fontSize: 40px
    fontWeight: 400
    lineHeight: 0.85
    letterSpacing: -0.02em
rounded:
  sm: 2px
  md: 10px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 24px
  xl: 40px
  gutter: 10px
  section: 150px
  margin: 24px
components:
  button-outline:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 0px
    height: 40px
  button-outline-hover:
    backgroundColor: "{colors.primary}"
  button-ghost:
    textColor: "#CCCCCC"
    typography: "{typography.label-md}"
    padding: 0px
  input-field:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.headline-md}"
    rounded: 0px
    padding: 0px
---

# My Framer Site Design System

## Overview

My Framer Site describes itself as: “Made with Framer” The interface is light, built on **Snow (#F7F7F7)** with **Near Black (#000000)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Caveat** and **Permanent Marker**, with **Geist Mono** for code. Headlines run large with tight negative tracking; body text is 20px. Depth comes from soft drop shadows. Controls are pill-shaped.

Measured from [wireframee.framer.website](https://wireframee.framer.website/) on November 5, 2026 at 1440×900 and 390×844 from 133 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 12 roles, plus gradient stops #5FAA5F, #3C8A3C.

- **Snow (#F7F7F7):** Page background, seen 2 times. Token `background`.
- **Near Black (#000000):** Primary text and headings, seen 7 times. Token `on-surface`.
- **Charcoal (#111111):** Secondary text, seen 13 times. Token `on-surface-variant`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 1 time. Token `surface-container-low`.
- **Mist (#EFEFEF):** Cards and panels, seen 2 times. Token `surface-container`.
- **Near Black 52% (#00000085):** Translucent fill for cards and controls, seen 2 times. Token `overlay`.
- **Near Black 15% (#00000026):** Borders and dividers, seen 1 time. Token `outline`.
- **Near Black (#000000):** Primary actions (the main text color; the palette is monochrome), seen 11 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Blue (#0443B5):** Accent on large areas. Token `secondary`.
- **Dark Red (#BD0000):** Accent on large areas. Token `tertiary`.
- **Vivid Yellow (#FFE500):** Warnings and highlights, seen 1 time. Token `warning`.

## Typography

**Caveat**, **Permanent Marker**, **Patrick Hand**, **sans-serif** and **Geist Mono** (monospace) share the interface. Fallback stack: `Caveat, Caveat Placeholder, sans-serif`.

- **headline-display:** Caveat 343px at weight 400, line height 0.85, tracking -0.02em (111.5px on mobile). Page title (h1).
- **headline-lg:** Permanent Marker 80px at weight 400, line height 0.85, tracking -0.02em (40px on mobile). Section headings (h2).
- **headline-md:** Caveat 32px at weight 600, line height 1.2. Sub-section headings.
- **headline-sm:** Patrick Hand 28px at weight 400, line height 1.1. Card and feature titles.
- **title-lg:** Caveat 24px at weight 600, line height 1.1. Small titles.
- **body-md:** Caveat 20px at weight 600, line height 1.1. Body text.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **label-md:** sans-serif 13px at weight 400. Buttons, navigation and labels.
- **code:** Geist Mono 13px at weight 400, line height 1. Code and technical values.

## Layout

Spacing does not follow a strict grid: 50% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 4px, sm 8px, md 10px, lg 24px, xl 40px.
- **Sections:** 150px vertical padding between major sections.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Page margin:** 24px on each side of full-width sections.
- **Breakpoints:** 767px, 809px, 809.98px, 810px, 1199px, 1199.98px.

## Elevation & Depth

Raised elements use soft drop shadows. The most used recipes:

- `rgba(0, 0, 0, 0.5) 0px 3px 8px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px 0px inset`
- `rgba(0, 0, 0, 0.35) 0px 3px 6px 0px, rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset`
- `rgba(0, 0, 0, 0.07) 0px 0.602187px 2.77006px -1.25px, rgba(0, 0, 0, 0.06) 0px 2.28853px 10.5273px -2.5px, rgba(0, 0, 0, 0.03) 0px 10px 46px -3.75px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 16 elements.
- **sm (2px):** 8 elements.
- **md (10px):** 7 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-outline (“F R E E R E M I X”):** #FFFFFF fill, #FFFFFF text, 13px/400, 10px radius, padding 0px, shadow `rgba(0, 0, 0, 0.07) 0px 0.602187px 2.77006px -1.25px, rgba(0, 0, 0, 0.06) 0px 2.28853px 10.5273px -2.5px, rgba(0, 0, 0, 0.03) 0px 10px 46px -3.75px`.
- **button-outline-hover:** background #000000, text #FFFFFF on hover.
- **button-ghost (“◀”):** transparent fill, #CCCCCC text, 13px/400, 50% radius, padding 0px.
- **input-field (“Your name”):** transparent fill, #111111 text, 32px/600, padding 0px.

## Do's and Don'ts

- Do use #F7F7F7 for the page and lift surfaces in small steps: #FFFFFF, #EFEFEF.
- Do keep text in 2 levels: #000000, #111111.
- Do let contrast carry emphasis; primary actions use #000000 on #F7F7F7.
- Do set headlines in Caveat with tight tracking (-0.02em).
- Do reuse the measured spacing steps (8px, 10px, 24px).
- Do make buttons and chips fully rounded (9999px); most other elements use 2px corners.
- Don't introduce new font families beyond Caveat, Permanent Marker, Patrick Hand, sans-serif and Geist Mono.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.25s, 0.001s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/wireframee.framer.website/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```