← ProcessesMED·Kit · Mehmet Ergul Design Kit
Design systemLive — this site runs on it

MED·Kit

The Mehmet Ergul Design Kit — the design language of this site, written down. A monochrome, near-black editorial foundation with one warm rust accent — formalized into tokens, two tones, a disciplined set of domain signals, and theme-aware components. The page you are reading is rendered with it.

00mo 16d 04hlive

Principles

Dual tone

Every surface declares ink (near-black) or paper (warm off-white). Components read semantic tokens only, so the same component renders correctly in either tone with no props.

Domain signals

Monochrome stays the foundation. A small accent set gives each content stream a signature: editorial rust, content amber, craft steel, live green for status. Never new hues.

One curve

A single ease-out-expo drives everything: entrances fade up, borders brighten on hover, media zooms a hair. Reduced motion collapses it all.

One system, two tones

data-theme="ink | paper"

data-theme="ink"

Quiet, cinematic

Annotation Builder

The same card, reading semantic tokens only.

ChipAccent badge

data-theme="paper"

Warm, editorial

Annotation Builder

The same card, reading semantic tokens only.

ChipAccent badge

Explore

House rules, short version

MED·Kit lives on GitHub as tokens, foundation cards, and theme-aware React components, plus two UI kits — a full recreation of this portfolio and a multi-domain studio hub that proves the system extends past it. This site consumes the token set directly: the scales, themes, and signals documented here are the same custom properties every page is painted with.

  • Near-black canvas, monochrome greys, one rust accent.
  • Inter everywhere; display light, labels wide-tracked.
  • Hairline borders, pill controls, soft deep shadows.
  • Never introduce new hues. No emoji. Quiet meta.