Got Quill?

A warm-paper design system extracted from a playful, illustrative product teaser. Dotted grid, Swiss-grotesque type, a precise data table, editorial tabs, and a recreated paper-sticker card family — all in a muted, pixel-sampled palette.

Colour

A warm paper surface family (white page → cream raised), ink and grey text, and a single accent blue lifted from the source's mono annotations. Hairline borders are a consistent #E0E0E0.

Page#FFFFFF

Surface#FFFCF7

Elevated#FCF8EF

Ink#171717

Strong#333333

Secondary#494949

Muted#AAAAAA

Accent#1964B0

Sticker palette

Fourteen muted pastels, pixel-sampled directly from the source artwork. Each has a paired darker "ink" for legible text on the sticker.

Teal#20967F

Yellow#FECD54

Butter#D3C37E

Blue#0049AC

Ocean#267CA8

Pink#EBBED0

Terracotta#C27E5D

Lavender#BAB4DA

Sage#8AA3B7

Brick#912E1E

Forest#3D5849

Cream#E9E0AD

Typography

Display & UI use Gerstner Programm (Swiss grotesque) with Inter as the practical fallback the source itself ships. Body is Inter; small annotations use IBM Plex Mono. The signature is a tight -0.03em tracking on UI text (measured −0.39px at 13px).

Display · 32 / 500Got Quill?

Heading · 24 / 600Fundraising progress

Body · 16 / 400Track every order, booking, and application.

UI label · 13 / 500Job Title · Compensation · Status

Mono · 12 / 700CREATE A ROOM

Elevation

Soft, low-contrast paper shadows. Stickers use a layered --shadow-paper that reads like a sheet lifting off the page.

shadow-sm

shadow-md

shadow-lg

shadow-paper

Motion

A 150ms ease-in-out baseline (the source's --default-transition-duration), a spring for sticker lift, and the signature letter-scramble on the headline. Hover the headline above to replay it. All motion respects prefers-reduced-motion.

SCRAMBLE ME

Dotted grid

The signature backdrop. The source draws ~135 SVG lines; recreated here as a single CSS radial-gradient dot pattern — zero extra DOM and crisp on mobile.

On the grid

<div class="quill-grid">…</div>

Buttons

The ghost button is measured exactly from the source's "View" control (#FFFCF7 bg, 10px radius, #E0E0E0 border). Ink and pill variants extend the same geometry.

<button class="quill-btn quill-btn--ghost">View</button>
<button class="quill-btn quill-btn--ink">Create a room</button>
<button class="quill-btn quill-btn--pill">Got mail?</button>

Tabs

Editorial text tabs, measured from the source's Table / Insight switch: no pill, no background — just a colour shift (active #333, inactive #AAA) with a slash separator.

TABLE VIEW

Stickers

The heart of the kit — a recreated paper-sticker family in the sampled palette: tags, sticky notes (folded corner), price tags (punched hole), and circular seals. Hover to lift them off the page.

20% OFF Limited Order A20Shipped Order 366 30%
OFF Claim your offer

<span class="quill-sticker quill-sticker--teal quill-sticker--tag">20% OFF</span>

<span class="quill-sticker quill-sticker--yellow quill-sticker--note quill-sticker--tilt-l">
  <span class="quill-sticker__title">Order A20</span>
  <span class="quill-sticker__meta">Shipped</span>
</span>

<span class="quill-sticker quill-sticker--sage quill-sticker--seal">30%<br>OFF</span>

Ticket

A boarding-pass card with a perforated stub — recreated from the source's blue SFO→JFK sticker.

SFO JFK

APR 1618:45

BOARDING

<div class="quill-sticker quill-sticker--blue quill-sticker--ticket">
  <div class="quill-ticket__body">
    <div class="quill-ticket__route">SFO → JFK</div>
    <div class="quill-ticket__meta"><span>APR 16</span><span>18:45</span></div>
  </div>
  <div class="quill-ticket__stub">BOARDING</div>
</div>

Toast

A paper notification card — the calmest member of the sticker family, on a clean surface with a hairline border.

Application confirmed Design Engineer · just now

Badge

Small status pills in the paper palette.

Draft In review Shipped

Card

A plain paper container for everything that isn't a sticker.

Fundraising progress

A calm, warm-paper surface with a hairline border and a soft shadow. Pairs with the dotted grid behind it.

Code block

IBM Plex Mono on the elevated paper surface.

npm install quill-ui
import "quill-ui/tokens.css";
import "quill-ui/components.css";

Table

Measured pixel-for-pixel from the source: warm-paper headers (#FCF8EF), square cells, #E0E0E0 hairlines, Gerstner 13px with −0.39px tracking, tabular figures in the compensation column.

Job Title	Compensation	Company	Status
Design Engineer	$184,000	Northwind	Interview
Product Designer	$162,500	Harbour Co	Applied
Frontend Lead	$208,000	Meadowlark	Offer

Row list

The notification / activity list — a counted pill, a label, and muted meta, on hairline dividers.

1Notification2m ago

1Booking1h ago

1PackageYesterday

1Apartment application3d ago