Design Lounge
Install

Type

The Lounge

Design Lounge

Interfaces worth sitting with

Every piece runs live, is one readable file, and ships with a brief your coding agent can rebuild it from.

Tokens

The pairing as CSS

/* The Lounge · type pairing · Designed using Design Lounge (https://www.designlounge.live) */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Instrument+Sans:wght@400..700&display=swap");

:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
body {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.55;
}
/* No mono in this pairing. Code uses the system mono; amounts stay in the text face with even-width digits. */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
}
.num {
  font-family: var(--font-text);
  font-variant-numeric: tabular-nums;
}