DESIGN.md · measured October 22, 2026

Framer design system

Light interface measured from liquid-glass-flip-card.framer.website: sans-serif type, deep blue accents, flat surfaces and pill-shaped controls.

Background: #FFFFFF
Primary: #002858
Type: sans-serif
Corners: 32px

Download DESIGN.md

From liquid-glass-flip-card.framer.website ↗ · 16 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Framer

Framer colors

7 roles measured on the page, grouped by where each color is used.

Surfaces

White#FFFFFFbackgroundPage background

White 12%#FFFFFF1FoverlayTranslucent fill for cards and controls · 2×

White 20%#FFFFFF33overlay-strongStronger translucent fill · 1×

Text

Near Black#000000on-surfacePrimary text and headings

White#FFFFFFon-primaryText and icons on primary

Accents

Deep Blue#002858primaryBrand color in logos and imagery

Vivid Indigo#0000EEsecondaryAccent · 1×

Framer fonts

One family carries the whole interface.

Aasans-serifWeights 400sans-serif

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog12px · 400

Contrast

Text on #FFFFFF

AaAAA21.0:1

Spacing

No strict grid · 83% are multiples of 4px

md10px

lg28px

gutter10px

Breakpoints: 809.98px 810px 1199.98px

Shapes

Corner radii, most used first.

md32px · 12×

full9999px · 8×

Depth

Inset

Shadow

Motion

Interface transitions

0.25s

ease

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #FFFFFF for the page.
Use #002858 as the brand accent: header, logo and key highlights.
Reuse the measured spacing steps (10px, 28px).
Make buttons and chips fully rounded (9999px); most other elements use 32px corners.
Use heavy drop shadows; keep depth to hairline rings.
Introduce new font families beyond sans-serif.
Use #002858 for large backgrounds or body text.
Make interface transitions slower than 0.25s.

DESIGN.md98 lines

---
version: alpha
name: Framer
description: "Light interface measured from liquid-glass-flip-card.framer.website: sans-serif type, deep blue accents, flat surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#000000"
  on-background: "#000000"
  overlay: "#FFFFFF1F"
  overlay-strong: "#FFFFFF33"
  primary: "#002858"
  on-primary: "#FFFFFF"
  secondary: "#0000EE"
typography:
  label-md:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
rounded:
  md: 32px
  full: 9999px
spacing:
  md: 10px
  lg: 28px
  gutter: 10px
---

# Framer Design System

## Overview

The interface is light, built on **White (#FFFFFF)** with **Near Black (#000000)** text, and **Deep Blue (#002858)** as the main accent.

Type is set in **sans-serif**. Headlines run large; body text is compact. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [liquid-glass-flip-card.framer.website](https://liquid-glass-flip-card.framer.website/) on October 22, 2026 at 1440×900 and 390×844 from 16 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **White (#FFFFFF):** Page background. Token `background`.
- **Near Black (#000000):** Primary text and headings. Token `on-surface`.
- **White 12% (#FFFFFF1F):** Translucent fill for cards and controls, seen 2 times. Token `overlay`.
- **White 20% (#FFFFFF33):** Stronger translucent fill, seen 1 time. Token `overlay-strong`.
- **Deep Blue (#002858):** Brand color in logos and imagery. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Vivid Indigo (#0000EE):** Accent, seen 1 time. Token `secondary`.

## Typography

**sans-serif** carries the whole interface. Fallback stack: `sans-serif`. Other loaded fonts: Inter.

- **label-md:** sans-serif 12px at weight 400. Buttons, navigation and labels.

## Layout

Spacing is mostly on a 4px grid (83% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** md 10px, lg 28px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Breakpoints:** 809.98px, 810px, 1199.98px.

## Elevation & Depth

Depth comes mostly from hairline rings and inset highlights:

- `rgba(255, 255, 255, 0.45) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset`

A few raised panels add a soft drop shadow: `rgba(255, 255, 255, 0.45) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.08) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 6px 16px -8px`.

## Shapes

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

- **md (32px):** 12 elements.
- **full (9999px):** 8 elements.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do use #002858 as the brand accent: header, logo and key highlights.
- Do reuse the measured spacing steps (10px, 28px).
- Do make buttons and chips fully rounded (9999px); most other elements use 32px corners.
- Don't use heavy drop shadows; keep depth to hairline rings.
- Don't introduce new font families beyond sans-serif.
- Don't use #002858 for large backgrounds or body text.
- Don't make interface transitions slower than 0.25s.

## Motion

Interface transitions are quick: 0.25s.

- **Easing:** `ease`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/liquid-glass-flip-card.framer.website/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Framer DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, sans-serif type, spacing, corners and buttons instead of its own defaults.

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 Framer’s official design system?

No. Sitepeel measured it from liquid-glass-flip-card.framer.website’s public page on October 22, 2026. It is an independent analysis, not made or approved by Framer.

Can I use Framer’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 Framer’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.