Poimandres design system

---
version: alpha
name: Poimandres
description: "Light monochrome interface measured from pmnd.rs: Inter type, flat surfaces and 6px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#555555"
  on-background: "#555555"
  overlay: "#0000001A"
  primary: "#555555"
  on-primary: "#FFFFFF"
  secondary: "#E8756A"
typography:
  body-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.38
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  md: 6px
spacing:
  xs: 2px
  sm: 6px
  md: 12px
  lg: 24px
components:
  button-ghost:
    textColor: "{colors.on-surface}"
    typography: "{typography.label-lg}"
    padding: 0px
---

# Poimandres Design System

## Overview

Poimandres describes itself as: “Open source developer collective” The interface is light, built on **White (#FFFFFF)** with **Slate (#555555)** text and almost no color: actions are carried by contrast, not hue.

Type is set in **Inter**. Headlines run large; body text is 12px. Depth comes from soft drop shadows. Corners are mostly 6px.

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

## Colors

The palette has 6 roles.

- **White (#FFFFFF):** Page background, seen 93 times. Token `background`, CSS `--docsearch-footer-background`.
- **Slate (#555555):** Primary text and headings, seen 4 times. Token `on-surface`.
- **Near Black 10% (#0000001A):** Translucent fill for cards and controls, seen 1 time. Token `overlay`.
- **Slate (#555555):** Primary actions (the main text color; the palette is monochrome), seen 9 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Red (#E8756A):** Accent, seen 1 time. Token `secondary`.

## Typography

**Inter** carries the whole interface. Fallback stack: `Inter, Inter Fallback, ui-sans-serif, system-ui`.

- **body-md:** Inter 12px at weight 400, line height 1.5. Body text.
- **label-lg:** Inter 16px at weight 400, line height 1.5. Large buttons and tabs.
- **label-md:** Inter 15px at weight 600, line height 1.38. Buttons, navigation and labels.
- **label-sm:** Inter 12px at weight 500, line height 1.5. Small labels and badges.

## Layout

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

- **Scale:** xs 2px, sm 6px, md 12px, lg 24px.
- **Breakpoints:** 768px.

## Elevation & Depth

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

- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 1px 6px 0px`

## Shapes

Most elements use 6px corners. Measured radii, most used first:

- **md (6px):** 364 elements.

## Components

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

- **button-ghost (“HIDE”):** transparent fill, #555555 text, 16px/400, 3.35544e+07px radius, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do let contrast carry emphasis; primary actions use #555555 on #FFFFFF.
- Do reuse the measured spacing steps (6px, 12px, 24px).
- Do use 6px corners on most elements.
- Don't introduce new font families beyond Inter.
- Don't add saturated accent colors; the measured palette is almost entirely neutral.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s, 0.15s. Longer ambient animations run 1.078s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`, `linear(0 0%, 0.0078 0.769231%, 0.034 1.53846%, 0.0738 2.30769%, 0.116 3.07692%, 0.16 3.84615%, 0.203 4.61538%, 0.244 5.38462%, 0.284 6.15385%, 0.322 6.92308%, 0.357 7.69231%, 0.391 8.46154%, 0.422 9.23077%, 0.453 10%, 0.483 10.7692%, 0.51 11.5385%, 0.536 12.3077%, 0.561 13.0769%, 0.583 13.8462%, 0.606 14.6154%, 0.627 15.3846%, 0.646 16.1538%, 0.665 16.9231%, 0.683 17.6923%, 0.7 18.4615%, 0.716 19.2308%, 0.731 20%, 0.745 20.7692%, 0.759 21.5385%, 0.771 22.3077%, 0.784 23.0769%, 0.795 23.8462%, 0.806 24.6154%, 0.816 25.3846%, 0.826 26.1538%, 0.835 26.9231%, 0.844 27.6923%, 0.852 28.4615%, 0.859 29.2308%, 0.867 30%, 0.874 30.7692%, 0.881 31.5385%, 0.887 32.3077%, 0.893 33.0769%, 0.899 33.8462%, 0.904 34.6154%, 0.909 35.3846%, 0.914 36.1538%, 0.919 36.9231%, 0.923 37.6923%, 0.927 38.4615%, 0.931 39.2308%, 0.935 40%, 0.938 40.7692%, 0.941 41.5385%, 0.944 42.3077%, 0.947 43.0769%, 0.95 43.8462%, 0.953 44.6154%, 0.955 45.3846%, 0.958 46.1538%, 0.96 46.9231%, 0.962 47.6923%, 0.964 48.4615%, 0.966 49.2308%, 0.968 50%, 0.969 50.7692%, 0.971 51.5385%, 0.973 52.3077%, 0.974 53.0769%, 0.975 53.8462%, 0.977 54.6154%, 0.978 55.3846%, 0.979 56.1538%, 0.98 56.9231%, 0.981 57.6923%, 0.982 58.4615%, 0.983 59.2308%, 0.984 60%, 0.985 60.7692%, 0.986 61.5385%, 0.987 62.3077%, 0.987 63.0769%, 0.988 63.8462%, 0.989 64.6154%, 0.989 65.3846%, 0.99 66.1538%, 0.99 66.9231%, 0.991 67.6923%, 0.991 68.4615%, 0.992 69.2308%, 0.992 70%, 0.993 70.7692%, 0.993 71.5385%, 0.993 72.3077%, 0.994 73.0769%, 0.994 73.8462%, 0.994 74.6154%, 0.995 75.3846%, 0.995 76.1538%, 0.995 76.9231%, 0.995 77.6923%, 0.996 78.4615%, 0.996 79.2308%, 0.996 80%, 0.996 80.7692%, 0.997 81.5385%, 0.997 82.3077%, 0.997 83.0769%, 0.997 83.8462%, 0.997 84.6154%, 0.997 85.3846%, 0.998 86.1538%, 0.998 86.9231%, 0.998 87.6923%, 0.998 88.4615%, 0.998 89.2308%, 0.998 90%, 0.998 90.7692%, 0.998 91.5385%, 0.998 92.3077%, 0.998 93.0769%, 0.999 93.8462%, 0.999 94.6154%, 0.999 95.3846%, 0.999 96.1538%, 0.999 96.9231%, 0.999 97.6923%, 0.999 98.4615%, 0.999 99.2308%, 1 100%)`, `linear`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

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