Score any website’s design in one click.

# DESIGN.md: `makkov-harness: the right skill for every request`

> Read from the computed styles of `https://makkov-design.github.io/makkov-harness/` on 2026-11-07 with Design Score. This is an approximation of what one viewport renders, not the source design system: check names and values before you build on them.

## Overview

makkov-design.github.io uses a dark interface with light muted violet (#c3b6dd) as the accent, `Switzer` for text and `Clash Grotesk` for headings, a 7-step type scale from 12px to 86px and spacing mostly on a 4px grid.

## Colour roles

| Role | Hex | Name |
|---|---|---|
| Background | `#090a0c` | Black |
| Surface | `#101315` | Near black |
| Text | `#f1f2f3` | Off-white |
| Muted | `#8d9aa5` | Cool light grey |
| Accent | `#c3b6dd` | Light muted violet |
| Border | `#252c32` | Cool near black |

## Typography

| Family | Role | Weights | Stack |
|---|---|---|---|
| `Switzer` | body | 400, 500, 600 | `"Switzer", ui-sans-serif, system-ui, sans-serif` |
| `Clash Grotesk` | display | 500 | `"Clash Grotesk", "Switzer", ui-sans-serif, system-ui, sans-serif` |
| `Geist Mono` | mono | 500 | `"Geist Mono", ui-monospace, monospace` |

### Type scale

| Size | rem | Line height | Weight | Seen on |
|---|---|---|---|---|
| 86px | 5.375 | 1.02 | 500 | `h1` |
| 59px | 3.688 | 1.02 | 500 | `h2` |
| 25px | 1.563 | 1.15 | 500 | `h3` |
| 21px | 1.313 | 1.55 | 400 | `p` |
| 16px | 1 | 1.55 | 400 | `p` |
| 14px | 0.875 | 1.55 | 500 | `a` |
| 12px | 0.75 | 1.2 | 500 | `code` |

## Spacing

Most used values, in px: `4` · `8` · `12` · `16` · `24` · `32` · `40` · `64`.

…

## How to use this with your agent

- Save this file as `DESIGN.md` in your project and say: "Build the settings screen using DESIGN.md: only these colours, this type scale and these spacing steps."
- Treat it as a reference, not a licence: borrow structure and rhythm, keep your own brand.
- The `design-md-library` skill in makkov-harness has ready DESIGN.md files for well-known products to compare with.

---
Extracted with Design Score · makkov-harness

/* CSS variables extracted with Design Score · makkov-harness
   Approximation read from the computed styles of https://makkov-design.github.io/makkov-harness/ */
:root {
  --color-background: #090a0c;
  --color-surface: #101315;
  --color-text: #f1f2f3;
  --color-muted: #8d9aa5;
  --color-accent: #c3b6dd;
  --color-border: #252c32;
  --color-black: #090a0c;
  --color-off-white: #f1f2f3;
  --color-near-black: #101315;
  --color-light-grey: #bfc5ca;
  --color-cool-light-grey: #8d9aa5;
  --color-cool-near-black: #252c32;
  --color-cool-dark-grey: #38444d;
  --color-light-muted-violet: #c3b6dd;
  --color-light-muted-green: #b7dbca;
  --color-warm-off-white: #f3ead9;
  --font-display: "Clash Grotesk", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.3125rem; /* 21px */
  --text-xl: 1.5625rem; /* 25px */
  --text-2xl: 3.6875rem; /* 59px */
  --text-3xl: 5.375rem; /* 86px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 64px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;
}

// Tailwind theme extracted with Design Score · makkov-harness
// Approximation read from the computed styles of https://makkov-design.github.io/makkov-harness/
// Tailwind v3: tailwind.config.js. For v4, copy the values into @theme in your CSS.
module.exports = {
  theme: {
    extend: {
      "colors": {
        "background": "#090a0c",
        "surface": "#101315",
        "text": "#f1f2f3",
        "muted": "#8d9aa5",
        "accent": "#c3b6dd",
        "border": "#252c32",
        "black": "#090a0c",
        "off-white": "#f1f2f3",
        "near-black": "#101315",
        "light-grey": "#bfc5ca",
        "cool-light-grey": "#8d9aa5",
        "cool-near-black": "#252c32",
        "cool-dark-grey": "#38444d",
        "light-muted-violet": "#c3b6dd",
        "light-muted-green": "#b7dbca",
        "warm-off-white": "#f3ead9"
      },
      "fontFamily": {
        "sans": [
          "Switzer",
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "display": [
          "Clash Grotesk",
          "Switzer",
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "mono": [
          "Geist Mono",
          "ui-monospace",
          "monospace"
        ]
      },
      "fontSize": {
        "xs": [
          "0.75rem",
          {
            "lineHeight": "1.2"
          }
        ],
        "sm": [
          "0.875rem",
          {
            "lineHeight": "1.55"
          }
        ],
        "base": [
          "1rem",
          {
            "lineHeight": "1.55"
          }
        ],
        "lg": [
          "1.3125rem",
          {
            "lineHeight": "1.55"
          }
        ],
        "xl": [
          "1.5625rem",
          {
            "lineHeight": "1.15"
          }
        ],
        "2xl": [
          "3.6875rem",
          {
            "lineHeight": "1.02"
          }
        ],
        "3xl": [
          "5.375rem",
          {
            "lineHeight": "1.02"
          }
        ]
      },
      "spacing": {
        "step-1": "4px",
        "step-2": "8px",
        "step-3": "12px",
        "step-4": "16px",
        "step-5": "24px",
        "step-6": "32px",
        "step-7": "40px",
        "step-8": "64px"
      },
      "borderRadius": {
        "full": "9999px",
        "lg": "24px",
        "md": "14px",
        "sm": "10px"
      },
      "boxShadow": {}
    }
  }
};

{
  "$description": "Design tokens extracted with Design Score (makkov-harness) from https://makkov-design.github.io/makkov-harness/ on 2026-11-07. Approximation from computed styles.",
  "color": {
    "background": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.0353,
          0.0392,
          0.0471
        ],
        "alpha": 1,
        "hex": "#090a0c"
      }
    },
    "text": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9451,
          0.949,
          0.9529
        ],
        "alpha": 1,
        "hex": "#f1f2f3"
      }
    },
    "accent": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7647,
          0.7137,
          0.8667
        ],
        "alpha": 1,
        "hex": "#c3b6dd"
      }
    }
  },
  "font": {
    "family": {
      "display": {
        "$type": "fontFamily",
        "$value": [
          "Clash Grotesk",
          "Switzer",
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ]
      },
      "body": {
        "$type": "fontFamily",
        "$value": [
          "Switzer",
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ]
      }
    },
    "size": {
      "base": {
        "$type": "dimension",
        "$value": {
          "value": 1,
          "unit": "rem"
        },
        "$description": "16px, line height 1.55, seen on p"
      },
      "lg": {
        "$type": "dimension",
        "$value": {
          "value": 1.313,
          "unit": "rem"
        },
        "$description": "21px, line height 1.55, seen on p"
      }
    }
  },
  "space": {
    "1": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "2": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "3": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    }
  },
  "radius": {
    "full": {
      "$type": "dimension",
      "$value": {
        "value": 9999,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 24,
        "unit": "px"
      }
    }
  }
}