# Pp Frama — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://pp-frama.com/
Captured: 2026-11-02
CSS measured: 2026-11-02T06:33:06.018Z at 1440×1000 — https://pp-frama.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: claude-sonnet-5

## Design direction

The website is a bold, brutalist-inspired typography showcase for the 'PP Frama' font. It utilizes a striking color palette of vibrant orange, deep blue, and lush green alongside stark black and white. The layout heavily features geometric grids, structural dividing lines, and massive display typography juxtaposed with dense, utilitarian technical specification tables. Content is presented in a full-bleed, edge-to-edge format with sharp corners, reinforcing the font's geometric and architectural inspirations.

## Classification

- Industry: creative
- Site type: Landing
- Business model: Software, Portfolio
- Styles: typographic, brutalist, bold, editorial, geometric, utilitarian, high-contrast-color-blocking
- Platform: Framer
- Technology: Not identified

## Typography

- Display: PP Frama Variable Thin — weight 100; size 160px; line-height 160px; tracking normal; Regular (100% role confidence, computed values)
- Heading: PP Frama Black — weight 900; size 80px; line-height 88px; tracking normal; Regular (95% role confidence, computed values)
- Body: PP Frama Variable Thin — weight 100; size 16px; line-height 16px; tracking normal; Regular (95% role confidence, computed values)

## Functional palette

- Text — text #000000: color-1: computed rgb(0, 0, 0); AI role: Black (#000000) is the dominant color for text, SVG icons, and structural borders ensuring maximum contrast. (100% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-2: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used as the foundational background color for the overall document body. (95% role confidence, computed values)
- Primary Action — primary action #FF6E00: color-6: computed rgb(255, 110, 0); AI role: Vibrant Orange (#FF6E00) used for the primary 'GET THE FONT' buttons and major attention-grabbing background sections. (95% role confidence, computed values)
- Accent — accent #5278D9: color-4: computed rgb(82, 120, 217); AI role: Strong Blue (#5278D9) used as a major structural background block in the specimen sections. (90% role confidence, computed values)
- Surface — surface #0E7E1B: color-12: computed rgb(14, 126, 27); AI role: Deep Green (#0E7E1B) utilized as a full-bleed background for the 'Frama follow function' section. (85% role confidence, computed values)
- Muted Text — muted text #A3A3A3: color-14: computed rgb(163, 163, 163); AI role: Light Gray (#A3A3A3) used for secondary descriptive text, such as author credits and subtitles. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "160px",
    "lineHeight": "160px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 25,
    "contexts": [
      {
        "tag": "h2",
        "text": "ă",
        "top": 16079,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "ắ",
        "top": 16266,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "ặ",
        "top": 16266,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "h1",
        "text": "Celebrating Geometry",
        "top": 765,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Beneath Its Apparent Simplicity Lies a Careful Play of Proportion",
        "top": 1090,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Display",
        "top": 10252,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "PP Frama Text Regular",
    "fontStack": "\"PP Frama Text Regular\", \"PP Frama Text Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "h2",
        "text": "Text",
        "top": 10072,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "5 weights",
        "top": 10072,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Light",
        "top": 10102,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "p",
        "text": "Circles, lines, and counterforms meet in a quiet system of balance, a subtle homage to geometry’s en",
        "top": 880,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Designed in Display and Text cuts, Frama moves fluidly across scales and weights, with stylistic alt",
        "top": 1204,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Built for clarity.",
        "top": 1459,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "65.6px",
    "lineHeight": "65.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "h2",
        "text": "Simplicity, versatily & clarity",
        "top": 1355,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Technical",
        "top": 7983,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Sheet",
        "top": 8049,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "geometric",
        "top": 10351,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "❶",
        "top": 17624,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "STRENGTH",
        "top": 17624,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "PP Frama Text Regular",
    "fontStack": "\"PP Frama Text Regular\", \"PP Frama Text Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "③⓪⓪",
        "top": 4571,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "⑨⓪⓪",
        "top": 4683,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "①⓪⓪",
        "top": 4795,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "h2",
        "text": "Light",
        "top": 4571,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Black",
        "top": 4683,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Thin",
        "top": 4795,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "signal",
        "top": 4539,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "System",
        "top": 4651,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "module",
        "top": 4763,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "capitalize",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "GET THE FONT",
        "top": 40,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Both Available in Variable Weights + Italic",
        "top": 9982,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "GRAB THE FONT NOW",
        "top": 26807,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "180px",
    "lineHeight": "180px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "e",
        "top": 16078,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "á",
        "top": 16079,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "Strength",
        "top": 10010,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "98%",
        "top": 10010,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "24px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "danger",
        "top": 10577,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "extremely versatile",
        "top": 10609,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "9.6px",
    "lineHeight": "11.5px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "h4",
        "text": "PP FRAMA",
        "top": 752,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "PP FRAMA",
        "top": 1076,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "110px",
    "lineHeight": "121px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "100 %",
        "top": 10189,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "-2.4px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Pattern",
        "top": 4875,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "80px",
    "lineHeight": "80px",
    "letterSpacing": "-4.8px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "circuit",
        "top": 4987,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "PP Frama",
        "top": 9859,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "56px",
    "lineHeight": "61.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "All in one",
        "top": 9875,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "42px",
    "lineHeight": "42px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "FUNCTIONs OF Frama",
        "top": 17455,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "3.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "↓ Try Frama for Yourself ↓",
        "top": 13253,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "32px",
    "lineHeight": "32px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h3",
        "text": "❸",
        "top": 18177,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "PP Frama Text Regular",
    "fontStack": "\"PP Frama Text Regular\", \"PP Frama Text Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "22.4px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "The last font you will ever need",
        "top": 9952,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "19.2px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Supports many languages",
        "top": 16539,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "PP Frama Text SemiBold",
    "fontStack": "\"PP Frama Text SemiBold\", \"PP Frama Text SemiBold Placeholder\", sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "semibold",
        "top": 4907,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "PP Frama Text Regular",
    "fontStack": "\"PP Frama Text Regular\", \"PP Frama Text Regular Placeholder\", sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "-0.6px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Regular",
        "top": 5019,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "14.4px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "PP FRAMA TEXT",
        "top": 5155,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "14.4px",
    "letterSpacing": "-0.3px",
    "traits": "uppercase",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "PP FRAMA Display",
        "top": 5155,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5229,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5280,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-30",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "20px",
    "lineHeight": "22px",
    "letterSpacing": "0.4px",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "By Samuel Salminen, Francesca Bolognini & Mat Desjardins",
        "top": 1355,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "THE NEW GEOMETRIC SANS-SERIF FROM PANGRAMPANGRAM.",
        "top": 4423,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Built with precision and balance, this typeface functions as a clear channel for communication. Its ",
        "top": 7992,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-31",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "17.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Thin",
        "top": 5229,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "ExtraLight",
        "top": 5280,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Light",
        "top": 5332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-32",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "capitalize",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "The triangle serves as a powerful symbol of strength and stability. Its geometric structure is utili",
        "top": 17672,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Additionally, the triangle often conveys direction or movement, making it effective in signage and g",
        "top": 17672,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "The circle is a universal shape that embodies unity and wholeness, representing completeness and ete",
        "top": 17941,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-33",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "32px",
    "lineHeight": "35.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5229,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5280,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "abcdefghijklmnopqrstuvwxyz",
        "top": 5332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-34",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "17.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Light",
        "top": 5229,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Regular",
        "top": 5280,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Medium",
        "top": 5332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-35",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "11.2px",
    "lineHeight": "11.2px",
    "letterSpacing": "normal",
    "traits": "capitalize",
    "count": 2,
    "contexts": [
      {
        "tag": "p",
        "text": "Copyright © 2018 – 2025. All rights reserved.",
        "top": 27047,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Pangram Pangram® Foundry",
        "top": 27045,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-36",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Built around balance and form, each piece finds the line between structure and softness. The shapes ",
        "top": 11350,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-37",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "16px",
    "lineHeight": "16px",
    "letterSpacing": "0.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "ENGINEERED FOR COMMUNICATION",
        "top": 21837,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-38",
    "family": "PP Frama Text Variable Light",
    "fontStack": "\"PP Frama Text Variable Light\", \"PP Frama Text Variable Light Placeholder\", sans-serif",
    "weight": "300",
    "size": "12px",
    "lineHeight": "12px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 12,
    "contexts": [
      {
        "tag": "span",
        "text": "Black",
        "top": 13339,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Weight: 900",
        "top": 13339,
        "property": "font"
      },
      {
        "tag": "button",
        "text": "Reset",
        "top": 13335,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-39",
    "family": "PP Frama Variable Thin",
    "fontStack": "\"PP Frama Variable Thin\", sans-serif",
    "weight": "100",
    "size": "64px",
    "lineHeight": "64px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "INFORMATION",
        "top": 21685,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "CONDUIT",
        "top": 21749,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-40",
    "family": "PP Frama Black",
    "fontStack": "\"PP Frama Black\", sans-serif",
    "weight": "900",
    "size": "80px",
    "lineHeight": "88px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Use this font tester. Roller bearings employ either cylindrical or tapered rollers that distribute l",
        "top": 13365,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 123,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 30,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 30,
        "property": "svg-fill"
      },
      {
        "tag": "p",
        "text": "GET THE FONT",
        "top": 40,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 13,
    "contexts": [
      {
        "tag": "body",
        "text": ":root body { background: var(--token-0e7cc99b-62c6-4a26-8036-8d7e9afb0b7c, rgb(255, 255, 255)); } :r",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "html body { background: rgb(255, 255, 255); }GET THE FONTPP FRAMACelebrating GeometryCircles, lines,",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "p",
        "text": "THE NEW GEOMETRIC SANS-SERIF FROM PANGRAMPANGRAM.",
        "top": 4423,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#EEEEEE",
    "alpha": 1,
    "cssValue": "rgb(238, 238, 238)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Letters built to do the heavy liftingThese letterforms are shaped with intention, balancing structur",
        "top": 14507,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#5278D9",
    "alpha": 1,
    "cssValue": "rgb(82, 120, 217)",
    "count": 55,
    "contexts": [
      {
        "tag": "span",
        "text": "Technical",
        "top": 7983,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Manufactured by Pangram Pangram",
        "top": 8123,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "u",
        "top": 8121,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#212121",
    "alpha": 1,
    "cssValue": "rgb(33, 33, 33)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "PP FramaSupports many languagesAfrikaans, Basque, Breton, Catalan, Croatian, Czech, Danish, Dutch, E",
        "top": 15907,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#FF6E00",
    "alpha": 1,
    "cssValue": "rgb(255, 110, 0)",
    "count": 9,
    "contexts": [
      {
        "tag": "a",
        "text": "",
        "top": 24,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "PP FRAMACelebrating GeometryCircles, lines, and counterforms meet in a quiet system of balance, a su",
        "top": 736,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "INFORMATION",
        "top": 21685,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#C3C6C6",
    "alpha": 1,
    "cssValue": "rgb(195, 198, 198)",
    "count": 14,
    "contexts": [
      {
        "tag": "h2",
        "text": "PP FRAMA TEXT",
        "top": 5155,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "TechnicalSheetManufactured by Pangram PangramBuilt with precision and balance, this typeface functio",
        "top": 7952,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#151515",
    "alpha": 1,
    "cssValue": "rgb(21, 21, 21)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -2000,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#E8EECB",
    "alpha": 1,
    "cssValue": "rgb(232, 238, 203)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Built around balance and form, each piece finds the line between structure and softness. The shapes ",
        "top": 10689,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#71655F",
    "alpha": 1,
    "cssValue": "rgb(113, 101, 95)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Built around balance and form, each piece finds the line between structure and softness. The shapes ",
        "top": 10689,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#EDEDE1",
    "alpha": 1,
    "cssValue": "rgb(237, 237, 225)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Letters built to do the heavy liftingThese letterforms are shaped with intention, balancing structur",
        "top": 14507,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#0E7E1B",
    "alpha": 1,
    "cssValue": "rgb(14, 126, 27)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Frama follow functionGRAB THE FONT NOWCopyright © 2018 – 2025. All rights reserved.Pangram Pangram® ",
        "top": 25844,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#FF4C00",
    "alpha": 1,
    "cssValue": "rgb(255, 76, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 24844,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#A3A3A3",
    "alpha": 1,
    "cssValue": "rgb(163, 163, 163)",
    "count": 46,
    "contexts": [
      {
        "tag": "h2",
        "text": "Simplicity, versatily & clarity",
        "top": 1355,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "By Samuel Salminen, Francesca Bolognini & Mat Desjardins",
        "top": 1355,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#3688B3",
    "alpha": 1,
    "cssValue": "rgb(54, 136, 179)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 25444,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#D7D9D1",
    "alpha": 1,
    "cssValue": "rgb(215, 217, 209)",
    "count": 25,
    "contexts": [
      {
        "tag": "h2",
        "text": "Supports many languages",
        "top": 16539,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#FFD5A1",
    "alpha": 1,
    "cssValue": "rgb(255, 213, 161)",
    "count": 6,
    "contexts": [
      {
        "tag": "p",
        "text": "Frama",
        "top": 26287,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": 26320,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#5697C3",
    "alpha": 1,
    "cssValue": "rgb(86, 151, 195)",
    "count": 15,
    "contexts": [
      {
        "tag": "h2",
        "text": "FUNCTIONs OF Frama",
        "top": 17455,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "❶",
        "top": 17624,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "The triangle serves as a powerful symbol of strength and stability. Its geometric structure is utili",
        "top": 17672,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#282828",
    "alpha": 1,
    "cssValue": "rgb(40, 40, 40)",
    "count": 3,
    "contexts": [
      {
        "tag": "h2",
        "text": "Letters built to do the heavy lifting",
        "top": 14966,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "These letterforms are shaped with intention, balancing structural clarity and visual efficiency. Eve",
        "top": 15245,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#3988B4",
    "alpha": 1,
    "cssValue": "rgb(57, 136, 180)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Copyright © 2018 – 2025. All rights reserved.Pangram Pangram® Foundry",
        "top": 27035,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#FFC492",
    "alpha": 1,
    "cssValue": "rgb(255, 196, 146)",
    "count": 1,
    "contexts": [
      {
        "tag": "p",
        "text": "Built around balance and form, each piece finds the line between structure and softness. The shapes ",
        "top": 11350,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#D9D9D9",
    "alpha": 1,
    "cssValue": "rgb(217, 217, 217)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": -52,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Macro layout relies on massive, full-viewport sections with edge-to-edge content blocks. Micro layout uses tight, tabular alignment for technical data.
- Corner style: Sharp, 0px square corners are universally applied across containers, buttons, and visual dividers.
- Radius: 0px
- Borders: Extensive use of solid 1px black borders to delineate grid columns, table rows, and button boundaries.
- Buttons: Solid, highly saturated background colors (like orange) contrasted with black text and encased in a 1px solid black border.
- Content width: Full-bleed edge-to-edge layout, discarding traditional max-width containers in favor of viewport-spanning grid structures.
- Density: Highly varied; the design contrasts extreme low-density areas featuring singular massive words with high-density utilitarian tables detailing font specifications.
- Evidence: DOM/CSS data confirms sharp corners (absence of border-radius), exact vibrant hex values (#FF6E00, #5278D9), and structural grids formed by explicit borders.

## Sections

Gallery section count: 3. Each entry corresponds to one gallery capture.

1. **Navbar — Pp Frama Navbar** (Home)
   A thin strip holds the logo on the left and one orange button on the right, so the action stays visible without crowding the photo.
   Capture: 1440×112px; page bounds 0–112px of 20756px; source section ID: `1a7cf451-e8ea-493e-8480-4f4b9212ca16`; image: https://media.designdetails.io/library/c8526b51ec699eed4b771f79d0ba475cb6cc3c06e0cbc635a356017844e8571b/1a7cf451-e8ea-493e-8480-4f4b9212ca16.webp
   SECTION.md v3.2: `1a7cf451-e8ea-493e-8480-4f4b9212ca16` (deterministic evidence; editorial review pending)
2. **Hero — Full-bleed architecture photo with type overlay** (Home)
   A large photo of a geometric house carries the oversized typeface name, and small orange blocks add captions that echo the theme of geometry.
   Capture: 1440×1059px; page bounds 112–1171px of 20756px; source section ID: `52550359-e739-4b9c-9fe5-a6f7199b3757`; image: https://media.designdetails.io/library/d9900775c89c25c843cf8361c7e30ad2a7223798ced55ddb9fc7e51d7d66fc26/section-manual-52550359-e739-4b9c-9fe5-a6f7199b3757-1793602808093.webp
   SECTION.md v3.2: `52550359-e739-4b9c-9fe5-a6f7199b3757` (deterministic evidence; editorial review pending)
3. **Other — Dark panel with rendered pipe object** (Home)
   A black frame isolates a single chrome form under the wordmark, so the eye stays on the shape and the high contrast shows off the type.
   Capture: 960×600px; page bounds 1600–18656px of 20756px; source section ID: `66d705bd-936b-49fc-afa4-91e8cea8ca89`; image: https://media.designdetails.io/library/34ff6eba6ba83df7685d4492c7a24110ac8f945b22154421dcc44c53774d7148/66d705bd-936b-49fc-afa4-91e8cea8ca89.webp
   SECTION.md v3.2: `66d705bd-936b-49fc-afa4-91e8cea8ca89` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/1ceddd194b2ec927adf1042130900ef3f96fba559995ae3b4785e1c1038329d9/desktop_full-48dbb42d-2026-11-02T06-33-06-044Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/39f7802af18428afb7976a9f81bbf70b11a731143e6e0a62a935eb1b03a42512/mobile_full-48dbb42d-2026-11-02T06-34-05-870Z.jpg
- Open Graph image: https://media.designdetails.io/library/4ce740dbb1ccfaf5d6dc91a9c33ba4209a2c973ae2c6654284ac0ba5357ca7f4/og_image-48dbb42d-2026-11-02T06-33-14-805Z.webp
- Full-page video: https://media.designdetails.io/library/c410ecd2e7a4d3000338ef577b83ef51bd81946a7907e8a2c4ce795f3bd59d0f/motion-1793601895775.mp4
- Video poster: https://media.designdetails.io/library/513b180f8bcaebbe2a308c8d41f54260c063fbd4e85930e71603f9f6c7de1cfa/motion-poster-1793601895775.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero
- Primary Button
- Product UI
- Pricing Table
- Media Bar
- Footer
- Typography Specimen Grid
- Horizontal Scroll Gallery

## Quality rubric

Overall: 54.7/100 (Competent)
Evidence coverage: 100%
Judge tier: Competent
Verdict: PP Frama's site is a well-executed, purpose-built type specimen page: the typographic scale system (from 9.6px labels to 180px display letters), the weight-indexed Technical Sheet, and the live font tester all genuinely serve the job of showing off a variable geometric sans. The full-bleed, sharp-cornered, color-blocked structure gives the page a consistent brutalist-editorial identity across many sections rather than a single hero moment. However, the overall shape of the site — hero, specimen reveal, spec table, interactive tester, horizontal scroll gallery, closing CTA — closely follows an established type-foundry template rather than introducing a structural idea unique to this release, and the observed motion is limited to two scroll-linked horizontal moves with no further interaction evidence. The color palette is bold but conventional (saturated primaries plus neutrals), and supporting imagery feels more like an evocative collage than a tightly authored system tied back to the font's claims. The result is a competent, content-faithful specimen site that executes its idiom cleanly without yet demonstrating the systemic motion sophistication or structural novelty needed for a higher tier.

- Typography (15%): 72 — As a type-foundry specimen site, typography is the content, and it is deployed with real intention: scale ranges from 9.6px micro-labels to 180px display letterforms, weight is used systematically (Thin through Black, 9 display weights / 5 text weights documented in the spec table), and tracking is adjusted deliberately on large display words (e.g., -4.8px on 'circuit'). The interactive tester and alphabet rows demonstrate the full character set and weight axis clearly.
- Color (10%): 60 — The palette is bold and consistently applied as full-bleed section backgrounds (orange #FF6E00, blue #5278D9, green #0E7E1B) with black/white for contrast and a few muted neutrals (gray #A3A3A3, olive #E8EECB) for secondary text. This creates clear section identity, but the hue choices are a fairly standard 'loud primary + neutral' foundry palette without unusual pairings or a more considered tonal system.
- Layout (20%): 62 — The page shows a coherent macro-rhythm across many sections — hero, specimen intro, technical-sheet table, interactive tester, mood/photo interludes, a shape-symbolism grid, and footer — all using full-bleed edge-to-edge blocks, sharp 0px corners, and consistent 1px black dividing borders. This is a legitimate multi-section system, though the overall structure (hero > type specimen > spec sheet > tester > use-case gallery > footer) closely follows the familiar type-foundry site template seen across this and sister sites.
- Motion (20%): 42 — Observed motion is limited to two scroll-linked horizontal movements: a large display word ('Display'/'Text') sliding horizontally as the user scrolls vertically, and a horizontal gallery of illustrated boxes scrolling right-to-left. No additional interaction motion (hover states, button transitions, cursor effects) is evidenced, and the recording shows mostly static vertical scrolling otherwise.
- Originality (25%): 42 — The site closely follows a now-standard type-foundry website formula — hero with oversized wordmark over photography, specimen grid, 'Technical Sheet' spec table, an interactive font tester, a horizontal scroll specimen gallery, and a closing CTA band — a pattern common across contemporary foundry sites (notably sharing structural DNA with other Pangram Pangram releases). Some surface flourishes (bearing/mechanical illustrations, the geometric shape-symbolism essay, color-coded sections) add flavor, but no hard-to-substitute structural idea emerges that couldn't be found on comparable foundry sites.
- Content (10%): 66 — Content (weight charts, language support list, specimen alphabets, descriptive copy about geometry) is well matched to the font-showcase purpose, and the interactive tester lets users directly experience the typeface, which is a meaningful functional integration of content and product.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A huge round outlined wordmark sits over a surreal cantilevered house photo, echoing the typeface's circular letterforms before any text is read. Down the page, orange swatches, hardware diagrams and a metal pipe photo keep breaking up long black panels, pacing the scroll and making an abstract geometric font feel like a tangible engineered product.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.