# Pamidordesign design system

> Pamidordesign design system measured from pamidordesign.co: funnelDisplay font, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/pamidordesign.co/

Pamidordesign’s website (pamidordesign.co) uses the funnelDisplay font on a #EFEEEB background. Measured by Sitepeel on November 7, 2026.

## What font does Pamidordesign use?

Pamidordesign uses funnelDisplay (weights 400 and 500) and Archivo (weight 500) on pamidordesign.co. Page titles are 100px at weight 500 (91px on phones) and body text is 16px. Measured on November 7, 2026.

- funnelDisplay (weights 400, 500)
- Archivo (weights 500)

## Pamidordesign colors: palette and hex codes

Pamidordesign’s main colors are #EFEEEB (mist) for the background and #0A0A0A (near black) for text. Measured on November 7, 2026.

- #EFEEEB: mist
- #0A0A0A: near black
- #FFFFFF: white
- #B8B5B0: warm gray

## What is Pamidordesign built with?

Pamidordesign’s website (pamidordesign.co) is built with Next.js, React, Tailwind CSS and Vercel. Measured on November 7, 2026.

- JavaScript framework: Next.js 16.4.2, React 19.3.0-canary-278794d7-2
- Analytics: Vercel Web Analytics
- Hosting & CDN: Vercel
- UI & CSS: Tailwind CSS 3.x

## Questions and answers

### What font does Pamidordesign use?

Pamidordesign’s website uses funnelDisplay (weights 400 and 500) and Archivo (weight 500). Page titles are 100px at weight 500 (91px on phones) and body text is 16px. Measured on November 7, 2026.

### What are the Pamidordesign colors and hex codes?

On pamidordesign.co: #EFEEEB (mist) for the background and #0A0A0A (near black) for text. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the Pamidordesign design system?

The design system on this page is pamidordesign.co’s, as measured on November 7, 2026: funnelDisplay type and square corners, written down as a DESIGN.md. It is not Pamidordesign’s own documentation.

### What is Pamidordesign built with?

Pamidordesign’s website (pamidordesign.co) is built with Next.js, React, Tailwind CSS and Vercel. The full tech stack Sitepeel found: Next.js, React, Vercel Web Analytics, Vercel and Tailwind CSS. Measured on November 7, 2026.

### What is the Pamidordesign DESIGN.md?

A plain-text file with Pamidordesign’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 Pamidordesign’s official design system?

No. Sitepeel measured it from pamidordesign.co’s public page on November 7, 2026. It is an independent analysis, not made or approved by Pamidordesign.

### Can I use Pamidordesign’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 Pamidordesign’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/pamidordesign.co/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 Pamidordesign.

## The DESIGN.md file

```markdown
---
version: alpha
name: Pamidordesign
description: "Light monochrome interface measured from pamidordesign.co: funnelDisplay type with Archivo, tonal surfaces and square corners."
colors:
  background: "#EFEEEB"
  surface: "#EFEEEB"
  on-surface: "#0A0A0A"
  on-background: "#0A0A0A"
  surface-container-low: "#FFFFFF"
  outline: "#FFFFFF40"
  outline-variant: "#B8B5B0"
  primary: "#0A0A0A"
  on-primary: "#FFFFFF"
typography:
  display-hero:
    fontFamily: funnelDisplay
    fontSize: 104px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  headline-display:
    fontFamily: funnelDisplay
    fontSize: 100px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: -0.03em
  headline-lg:
    fontFamily: funnelDisplay
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.015em
  headline-md:
    fontFamily: funnelDisplay
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.015em
  body-md:
    fontFamily: funnelDisplay
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: funnelDisplay
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
  body-sm:
    fontFamily: funnelDisplay
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.06em
  label-md:
    fontFamily: funnelDisplay
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.01em
  label-sm:
    fontFamily: Archivo
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.06em
  headline-display-mobile:
    fontFamily: funnelDisplay
    fontSize: 91px
    fontWeight: 500
    lineHeight: 0.88
    letterSpacing: -0.03em
  display-hero-mobile:
    fontFamily: funnelDisplay
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: funnelDisplay
    fontSize: 26px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.015em
rounded:
  none: 0px
spacing:
  xs: 2px
  sm: 8px
  md: 9px
  lg: 24px
  xl: 40px
  gutter: 12px
  section: 128px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.none}"
    padding: 9px 15px
  input-field:
    backgroundColor: "{colors.surface-container-low}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 0px
  link:
    textColor: "{colors.on-primary}"
---

# Pamidordesign Design System

## Overview

Pamidordesign describes itself as: “Dor Sharaby is a brand and product designer in Tel Aviv and the founder of Pamidor Studio - digital products and brand identities that open clean, think clear and scale well.” The interface is light, built on **Mist (#EFEEEB)** with **Near Black (#0A0A0A)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **funnelDisplay** and **Archivo**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from soft drop shadows. Corners are square.

Measured from [pamidordesign.co](https://pamidordesign.co/) on November 7, 2026 at 1440×900 and 390×844 from 207 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **Mist (#EFEEEB):** Page background, seen 5 times. Token `background`.
- **Near Black (#0A0A0A):** Primary text and headings, seen 86 times. Token `on-surface`, CSS `--wave-lit`.
- **White (#FFFFFF):** Raised areas one step from the page, seen 2 times. Token `surface-container-low`, CSS `--tw-ring-offset-color`.
- **White 25% (#FFFFFF40):** Borders and dividers, seen 5 times. Token `outline`.
- **Warm Gray (#B8B5B0):** Secondary dividers, seen 5 times. Token `outline-variant`.
- **Near Black (#0A0A0A):** Primary actions (the main text color; the palette is monochrome), seen 100 times. Token `primary`, CSS `--wave-lit`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.

## Typography

**funnelDisplay** and **Archivo** share the interface. Fallback stack: `funnelDisplay, funnelDisplay Fallback, Helvetica Neue, Arial`.

- **display-hero:** funnelDisplay 104px at weight 500, line height 1, tracking -0.02em (32px on mobile). Oversized hero statements.
- **headline-display:** funnelDisplay 100px at weight 500, line height 0.88, tracking -0.03em (91px on mobile). Page title (h1).
- **headline-lg:** funnelDisplay 60px at weight 500, line height 1.05, tracking -0.015em (26px on mobile). Section headings (h2).
- **headline-md:** funnelDisplay 40px at weight 500, line height 1.2, tracking -0.015em. Sub-section headings.
- **body-md:** funnelDisplay 16px at weight 400, line height 1.5. Body text.
- **body-lg:** funnelDisplay 18px at weight 400, line height 1.5, tracking -0.01em. Lead paragraphs.
- **body-sm:** funnelDisplay 12px at weight 400, line height 1.4, tracking 0.06em. Secondary and small text.
- **label-md:** funnelDisplay 16px at weight 500, line height 1.5, tracking -0.01em. Buttons, navigation and labels.
- **label-sm:** Archivo 12px at weight 500, line height 1.4, tracking 0.06em. Small labels and badges.

## Layout

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

- **Scale:** xs 2px, sm 8px, md 9px, lg 24px, xl 40px.
- **Sections:** 128px vertical padding between major sections.
- **Gaps:** 12px is the most common gap in flex and grid layouts.
- **Breakpoints:** 359px, 368px, 639px, 640px, 768px, 1024px, 1280px, 1440px, 1536px, 1729px.

## Elevation & Depth

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

- `rgba(10, 10, 10, 0.28) 0px 18px 40px -12px`

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

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

- **button-ghost (“Art Shop”):** transparent fill, #0A0A0A text, 15.9984px/500, padding 9px 15px, border 1px solid #0A0A0A40.
- **input-field:** #FFFFFF fill, #0A0A0A text, 16px/400, padding 0px.
- **link:** transparent fill, #FFFFFF text, padding 0px.

## Do's and Don'ts

- Do use #EFEEEB for the page and lift surfaces in small steps: #FFFFFF.
- Do let contrast carry emphasis; primary actions use #0A0A0A on #EFEEEB.
- Do set headlines in funnelDisplay with tight tracking (-0.03em).
- Do reuse the measured spacing steps (8px, 9px, 24px).
- Don't introduce new font families beyond funnelDisplay and Archivo.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.5s.

## Motion

Interface transitions are quick: 0.3s, 0.2s, 0.5s, 0.15s. Longer ambient animations run 0.7s, 0.95s, 5s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `cubic-bezier(0.22, 1, 0.36, 1)`, `cubic-bezier(0.16, 1, 0.3, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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

```