/*!
* jawnpaper — a hand-drawn CSS design system
* https://jamditis.com/jawnpaper/
*
* Drop-in vibe: marker on cream paper, ink borders, wobbly edges.
*
* Quick start:
*
*
*
*
* Component classes are prefixed `np-` and work without the .notebook opt-in.
* Tokens are exposed on :root as --np-*.
*/
/* === fonts =============================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&family=Patrick+Hand+SC&display=swap');
/* === design tokens ======================================================= */
:root {
/* ink + paper */
--np-ink: #1a1a1a;
--np-ink-soft: #444;
--np-ink-faint: #888;
--np-paper: #fdfaf2;
--np-paper-deep: #f6efd8;
--np-paper-deeper: #ede4c5;
/* marker palette */
--np-yellow: #ffe87a; /* aka highlighter */
--np-red: #e85a4f;
--np-blue: #5b9bd5;
--np-green: #6ec275;
--np-purple: #a780e8;
--np-orange: #ff924f;
--np-pink: #f48fb1;
--np-teal: #4ec9b0;
/* fonts */
--np-font-display: 'Caveat', cursive;
--np-font-body: 'Patrick Hand', 'Comic Sans MS', cursive;
--np-font-stamp: 'Patrick Hand SC', 'Patrick Hand', cursive;
--np-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
/* spacing scale */
--np-space-xs: 0.25rem;
--np-space-sm: 0.5rem;
--np-space-md: 1rem;
--np-space-lg: 1.5rem;
--np-space-xl: 2.5rem;
--np-space-2xl: 4rem;
/* borders */
--np-border-thin: 2px;
--np-border: 2.5px;
--np-border-thick: 3px;
/* the wobble filter — referenced from filter declarations */
--np-wobble: url(#np-wobble);
--np-wobble-soft: url(#np-wobble-soft);
}
/* === safety: predictable sizing for all jawnpaper components ============= */
/* :where() keeps specificity at 0 so users can still override per element. */
:where(.np-card, .np-codebox, .np-codebox pre, .np-note, .np-button,
.np-tag, .np-table, .np-bubble, .np-quote,
.np-input, .np-textarea, .np-textarea-wrap, .np-select,
.np-toolbar, .np-container, .np-grid, .np-stack, .np-wobble-border) {
box-sizing: border-box;
}
/* === optional base styles (opt in via class="notebook") ================== */
.notebook {
font-family: var(--np-font-body);
font-size: clamp(16px, 2.4vw, 19px);
line-height: 1.6;
color: var(--np-ink);
background: var(--np-paper);
background-image:
radial-gradient(circle at 18% 12%, rgba(0,0,0,0.018) 0 1px, transparent 1px),
radial-gradient(circle at 72% 38%, rgba(0,0,0,0.02) 0 1px, transparent 1px),
radial-gradient(circle at 45% 78%, rgba(0,0,0,0.018) 0 1px, transparent 1px);
background-size: 220px 220px, 180px 180px, 260px 260px;
}
.notebook *,
.notebook *::before,
.notebook *::after { box-sizing: border-box; }
.notebook h1, .notebook h2, .notebook h3,
.notebook h4, .notebook h5, .notebook h6 {
font-family: var(--np-font-display);
font-weight: 700;
margin: 0;
letter-spacing: 0.005em;
line-height: 1.1;
}
.notebook h1 { font-size: clamp(2.5rem, 9vw, 4rem); line-height: 1.05; margin-bottom: 0.25rem; }
.notebook h2 {
font-size: clamp(1.85rem, 6vw, 2.5rem);
margin: clamp(2.5rem, 8vw, 4rem) 0 1rem;
padding-bottom: 0.15rem;
position: relative;
}
.notebook h2::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 4px;
background: var(--np-ink);
filter: var(--np-wobble);
}
.notebook h3 { font-size: clamp(1.3rem, 4.5vw, 1.6rem); margin: 0 0 0.35rem; }
.notebook h4 { font-size: clamp(1.1rem, 3.5vw, 1.3rem); margin: 0 0 0.35rem; }
.notebook p { margin: 0.5rem 0 1rem; }
.notebook a { color: inherit; text-underline-offset: 0.18em; }
@media (prefers-reduced-motion: reduce) {
.notebook { scroll-behavior: auto; }
}
/* === inline code: highlighter swatch ===================================== */
.notebook code,
.np-code {
font-family: var(--np-font-body);
background: var(--np-yellow);
padding: 0 0.25em;
font-size: 1em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* code inside a pre uses real monospace, no highlighter */
.notebook pre code,
.np-codebox pre code {
font-family: var(--np-font-mono);
background: none;
padding: 0;
font-size: clamp(0.78rem, 2.2vw, 0.88rem);
}
/* === lede (oversized intro paragraph) ==================================== */
.np-lede {
font-size: clamp(1.1rem, 3.5vw, 1.35rem);
font-family: var(--np-font-body);
color: var(--np-ink);
max-width: 38ch;
line-height: 1.5;
}
/* === code block: wobbly border on a wrapper ============================== */
.np-codebox {
position: relative;
margin: 0.65rem 0 0;
z-index: 0;
}
.np-codebox::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thin) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-codebox pre {
background: var(--np-paper-deep);
padding: 0.85rem 1rem;
margin: 0;
overflow-x: auto;
line-height: 1.55;
}
/* === card: ink-bordered paper square ===================================== */
.np-card {
position: relative;
background: var(--np-paper);
padding: 1.25rem 1.25rem 1.5rem;
z-index: 0;
}
.np-card::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
@media (max-width: 720px) {
.np-card { padding: 1rem 1rem 1.15rem; }
}
/* === note callout: highlight-color background ============================ */
.np-note {
position: relative;
background: var(--np-yellow);
padding: 1rem 1.25rem;
margin: 1rem 0;
z-index: 0;
}
.np-note::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thick) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-note > :first-child { margin-top: 0; }
.np-note > :last-child { margin-bottom: 0; }
.np-note--red { background: color-mix(in srgb, var(--np-red) 25%, var(--np-paper)); }
.np-note--blue { background: color-mix(in srgb, var(--np-blue) 25%, var(--np-paper)); }
.np-note--green { background: color-mix(in srgb, var(--np-green) 25%, var(--np-paper)); }
.np-note--purple { background: color-mix(in srgb, var(--np-purple) 25%, var(--np-paper)); }
.np-note--pink { background: color-mix(in srgb, var(--np-pink) 25%, var(--np-paper)); }
.np-note--paper { background: var(--np-paper-deep); }
/* === button / pill link ================================================== */
.np-button {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
min-height: 44px;
background: var(--np-paper);
color: var(--np-ink);
text-decoration: none;
font-family: inherit;
font-size: clamp(1rem, 2.6vw, 1.1rem);
border: none;
cursor: pointer;
z-index: 0;
}
.np-button::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thin) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-button:hover { background: var(--np-yellow); }
.np-button:focus-visible {
outline: 3px solid var(--np-red);
outline-offset: 3px;
background: var(--np-yellow);
}
.np-button:active { transform: translate(1px, 1px); }
.np-button:disabled,
.np-button[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.np-button--primary { background: var(--np-yellow); }
.np-button--primary:hover { background: color-mix(in srgb, var(--np-yellow) 80%, var(--np-orange)); }
.np-button--danger { background: var(--np-red); color: var(--np-paper); }
.np-button--danger:hover { background: color-mix(in srgb, var(--np-red) 80%, black); }
/* button group / toolbar */
.np-toolbar {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
margin: 1rem 0;
}
/* === tag / badge ========================================================= */
.np-tag {
display: inline-block;
padding: 0.1rem 0.55rem 0.2rem;
background: var(--np-paper-deep);
color: var(--np-ink);
font-family: var(--np-font-stamp);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: uppercase;
position: relative;
z-index: 0;
margin: 0 0.15rem;
}
.np-tag::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thin) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-tag--red { background: color-mix(in srgb, var(--np-red) 35%, var(--np-paper)); }
.np-tag--blue { background: color-mix(in srgb, var(--np-blue) 35%, var(--np-paper)); }
.np-tag--green { background: color-mix(in srgb, var(--np-green) 35%, var(--np-paper)); }
.np-tag--purple { background: color-mix(in srgb, var(--np-purple) 35%, var(--np-paper)); }
/* === stamp: rotated red label ============================================ */
.np-stamp {
display: inline-block;
padding: 0.2rem 0.55rem 0.25rem;
border: var(--np-border) solid var(--np-red);
color: var(--np-red);
font-family: var(--np-font-display);
font-weight: 700;
font-size: 1.2rem;
letter-spacing: 0.04em;
text-transform: uppercase;
transform: rotate(-4deg);
filter: var(--np-wobble);
line-height: 1;
vertical-align: middle;
margin-right: 0.3rem;
background: rgba(255,255,255,0.4);
}
.np-stamp--blue { color: var(--np-blue); border-color: var(--np-blue); }
.np-stamp--green { color: var(--np-green); border-color: var(--np-green); }
.np-stamp--ink { color: var(--np-ink); border-color: var(--np-ink); }
/* === circled annotation: red wobbly oval around a phrase ================= */
.np-circled {
position: relative;
display: inline-block;
padding: 0 0.15em;
white-space: nowrap;
}
.np-circled::after {
content: "";
position: absolute;
inset: -0.18em -0.3em;
border: var(--np-border) solid var(--np-red);
border-radius: 50%;
filter: var(--np-wobble);
pointer-events: none;
transform: rotate(-1.5deg);
}
.np-circled--blue::after { border-color: var(--np-blue); }
.np-circled--green::after { border-color: var(--np-green); }
.np-circled--purple::after { border-color: var(--np-purple); }
.np-circled--ink::after { border-color: var(--np-ink); }
/* === underline annotation: handdrawn squiggle under a phrase ============= */
.np-underline {
background-image: linear-gradient(transparent 75%, var(--np-yellow) 75%);
background-size: 100% 100%;
padding: 0 0.05em;
}
.np-underline--red { background-image: linear-gradient(transparent 75%, color-mix(in srgb, var(--np-red) 50%, transparent) 75%); }
.np-underline--blue { background-image: linear-gradient(transparent 75%, color-mix(in srgb, var(--np-blue) 50%, transparent) 75%); }
.np-underline--green { background-image: linear-gradient(transparent 75%, color-mix(in srgb, var(--np-green) 50%, transparent) 75%); }
/* === divider: squiggle SVG (pair with svg .np-divider markup below) ====== */
.np-divider {
display: block;
width: 100%;
max-width: 320px;
margin: 2rem auto 0.5rem;
height: 22px;
color: var(--np-ink-soft);
filter: var(--np-wobble);
}
/* === table: notebook-style ================================================ */
.np-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0 1.5rem;
font-size: clamp(0.95rem, 2.6vw, 1.05rem);
background: var(--np-paper);
position: relative;
z-index: 0;
}
.np-table::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-table th,
.np-table td {
text-align: left;
padding: 0.55rem 0.85rem;
border-bottom: 1.5px solid var(--np-ink);
vertical-align: top;
overflow-wrap: anywhere;
}
.np-table tr:last-child td { border-bottom: none; }
.np-table th {
background: var(--np-paper-deeper);
font-family: var(--np-font-display);
font-size: clamp(1.2rem, 3.4vw, 1.4rem);
font-weight: 700;
}
@media (max-width: 720px) {
.np-table th, .np-table td { padding: 0.5rem 0.6rem; }
}
/* === blockquote: handwritten quote ======================================= */
.np-quote {
position: relative;
font-family: var(--np-font-display);
font-size: clamp(1.4rem, 4vw, 1.85rem);
line-height: 1.3;
color: var(--np-ink);
margin: 1.5rem 0;
padding: 0.5rem 1rem 0.5rem 2rem;
border-left: var(--np-border-thick) solid var(--np-red);
filter: var(--np-wobble);
}
.np-quote::before {
content: "\201C";
position: absolute;
top: -0.5rem;
left: 0.25rem;
font-size: 3rem;
color: var(--np-red);
line-height: 1;
}
.np-quote cite {
display: block;
font-family: var(--np-font-body);
font-size: 1rem;
color: var(--np-ink-soft);
font-style: normal;
margin-top: 0.35rem;
}
.np-quote cite::before { content: "— "; }
/* === form controls ======================================================= */
/* text input / textarea — wobbly underline for input, wobbly box for textarea */
.np-input,
.np-textarea,
.np-select {
box-sizing: border-box;
font-family: var(--np-font-body);
font-size: 1.05rem;
padding: 0.5rem 0.65rem;
background: var(--np-paper);
color: var(--np-ink);
border: none;
outline: none;
position: relative;
z-index: 0;
display: block;
width: 100%;
margin: 0.25rem 0;
}
.np-input,
.np-select {
border-bottom: var(--np-border-thin) solid var(--np-ink);
padding-bottom: 0.4rem;
background: transparent;
}
.np-input:focus,
.np-textarea:focus,
.np-select:focus {
background: var(--np-yellow);
outline: none;
}
.np-textarea {
font-family: var(--np-font-mono);
font-size: 0.95rem;
min-height: 6rem;
resize: vertical;
}
.np-textarea-wrap {
position: relative;
z-index: 0;
}
.np-textarea-wrap::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thin) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-label {
display: block;
font-family: var(--np-font-display);
font-size: 1.2rem;
font-weight: 700;
margin: 0.75rem 0 0;
color: var(--np-ink);
}
/* checkbox: hand-drawn check */
.np-check {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
margin: 0.35rem 0;
}
.np-check input[type="checkbox"],
.np-check input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 22px;
height: 22px;
background: var(--np-paper);
position: relative;
cursor: pointer;
margin: 0;
flex-shrink: 0;
}
.np-check input[type="checkbox"]::before,
.np-check input[type="radio"]::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border-thin) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
}
.np-check input[type="radio"],
.np-check input[type="radio"]::before { border-radius: 50%; }
.np-check input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 4px; top: 6px;
width: 14px; height: 9px;
border-left: 3px solid var(--np-red);
border-bottom: 3px solid var(--np-red);
transform: rotate(-50deg);
filter: var(--np-wobble);
}
.np-check input[type="radio"]:checked::after {
content: "";
position: absolute;
inset: 4px;
background: var(--np-red);
border-radius: 50%;
filter: var(--np-wobble);
}
.np-check:hover input { background: color-mix(in srgb, var(--np-yellow) 50%, var(--np-paper)); }
.np-check input:focus-visible {
outline: 3px solid var(--np-red);
outline-offset: 3px;
}
/* range slider with wobbly track */
.np-range {
appearance: none;
-webkit-appearance: none;
width: 100%;
height: 8px;
background: transparent;
margin: 0.75rem 0;
cursor: pointer;
}
.np-range::-webkit-slider-runnable-track {
height: 6px;
background: var(--np-ink);
filter: var(--np-wobble);
}
.np-range::-moz-range-track {
height: 6px;
background: var(--np-ink);
filter: var(--np-wobble);
}
.np-range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 22px; height: 22px;
background: var(--np-red);
border: 2px solid var(--np-ink);
margin-top: -8px;
cursor: pointer;
filter: var(--np-wobble);
}
.np-range::-moz-range-thumb {
width: 22px; height: 22px;
background: var(--np-red);
border: 2px solid var(--np-ink);
cursor: pointer;
filter: var(--np-wobble);
}
.np-range:focus-visible { outline: none; }
.np-range:focus-visible::-webkit-slider-thumb {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--np-red) 40%, transparent);
}
.np-range:focus-visible::-moz-range-thumb {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--np-red) 40%, transparent);
}
/* === speech bubble ======================================================= */
.np-bubble {
position: relative;
background: var(--np-paper);
padding: 1rem 1.25rem 1.5rem;
z-index: 0;
max-width: 32ch;
margin: 1rem 0;
}
.np-bubble::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
clip-path: polygon(
0 0, 100% 0,
100% calc(100% - 16px),
40% calc(100% - 16px),
28% 100%,
26% calc(100% - 16px),
0 calc(100% - 16px)
);
}
.np-bubble::after {
content: "";
position: absolute;
inset: 0;
background: inherit;
z-index: -1;
clip-path: polygon(
0 0, 100% 0,
100% calc(100% - 16px),
40% calc(100% - 16px),
28% 100%,
26% calc(100% - 16px),
0 calc(100% - 16px)
);
}
/* === pinned-note tilts (utility) ========================================= */
.np-tilt-left { transform: rotate(-0.5deg); }
.np-tilt-right { transform: rotate(0.5deg); }
.np-tilt-2 { transform: rotate(-1.2deg); }
.np-tilt-3 { transform: rotate(1.2deg); }
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
.np-tilt-left, .np-tilt-right, .np-tilt-2, .np-tilt-3 { transform: none; }
}
/* auto-tilt for grid children: rotate every Nth card a little */
.np-tilt-children > :nth-child(3n) { transform: rotate(-0.45deg); }
.np-tilt-children > :nth-child(3n+1) { transform: rotate(0.3deg); }
.np-tilt-children > :nth-child(3n+2) { transform: rotate(-0.15deg); }
@media (max-width: 720px), (prefers-reduced-motion: reduce) {
.np-tilt-children > * { transform: none; }
}
/* === wobble border utility (apply to anything) =========================== */
.np-wobble-border {
position: relative;
z-index: 0;
}
.np-wobble-border::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
/* === layout helpers ====================================================== */
.np-container {
max-width: 960px;
margin: 0 auto;
padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.85rem, 3vw, 1rem) clamp(3.5rem, 8vw, 6rem);
}
.np-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
gap: 1.5rem;
}
@media (max-width: 720px) { .np-grid { gap: 1.15rem; } }
.np-stack > * + * { margin-top: 1rem; }
.np-stack--lg > * + * { margin-top: 2rem; }
.np-stack--sm > * + * { margin-top: 0.5rem; }
/* === color utilities ===================================================== */
.np-bg-yellow { background: var(--np-yellow); }
.np-bg-paper { background: var(--np-paper); }
.np-bg-deep { background: var(--np-paper-deep); }
.np-bg-red { background: var(--np-red); color: var(--np-paper); }
.np-bg-blue { background: var(--np-blue); color: var(--np-paper); }
.np-bg-green { background: var(--np-green); color: var(--np-ink); }
.np-bg-purple { background: var(--np-purple); color: var(--np-paper); }
.np-bg-orange { background: var(--np-orange); color: var(--np-ink); }
.np-bg-pink { background: var(--np-pink); color: var(--np-ink); }
.np-bg-teal { background: var(--np-teal); color: var(--np-ink); }
.np-text-red { color: var(--np-red); }
.np-text-blue { color: var(--np-blue); }
.np-text-green { color: var(--np-green); }
.np-text-purple { color: var(--np-purple); }
.np-text-soft { color: var(--np-ink-soft); }
.np-text-faint { color: var(--np-ink-faint); }
/* ========================================================================
EXTENDED COMPONENTS — tabs, accordion, modal, breadcrumbs, pagination,
alert, kbd, progress, timeline, torn-divider, badge, checklist
======================================================================== */
/* === tabs: paper folder tabs ============================================ */
.np-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
position: relative;
margin: 1rem 0 0;
padding: 0 0 0 0.25rem;
}
.np-tabs::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: var(--np-ink);
filter: var(--np-wobble);
z-index: 1;
}
.np-tab {
position: relative;
padding: 0.5rem 1rem;
background: var(--np-paper-deep);
color: var(--np-ink);
font-family: var(--np-font-display);
font-size: 1.15rem;
cursor: pointer;
border: none;
margin-bottom: -2px;
z-index: 0;
}
.np-tab::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-tab[aria-selected="true"],
.np-tab--active {
background: var(--np-paper);
font-weight: 700;
z-index: 2;
}
.np-tab[aria-selected="true"]::after,
.np-tab--active::after {
content: "";
position: absolute;
left: 2px; right: 2px; bottom: -3px;
height: 6px;
background: var(--np-paper);
z-index: 3;
}
.np-tab-panel { padding: 1rem 0.25rem 0; }
.np-tab-panel[hidden] { display: none; }
/* === accordion: native styled as folded paper ================== */
.np-accordion { margin: 1rem 0; }
.np-accordion-item {
position: relative;
background: var(--np-paper);
margin: 0 0 0.75rem;
z-index: 0;
}
.np-accordion-item::before {
content: "";
position: absolute;
inset: 0;
border: var(--np-border) solid var(--np-ink);
filter: var(--np-wobble);
pointer-events: none;
z-index: -1;
}
.np-accordion-item > summary {
list-style: none;
cursor: pointer;
padding: 0.85rem 1.15rem;
font-family: var(--np-font-display);
font-size: 1.3rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.np-accordion-item > summary::-webkit-details-marker { display: none; }
.np-accordion-item > summary::after {
content: "+";
font-size: 1.6rem;
line-height: 1;
color: var(--np-red);
transition: transform 0.2s ease;
filter: var(--np-wobble);
}
.np-accordion-item[open] > summary::after { transform: rotate(45deg); }
.np-accordion-item > :not(summary) {
padding: 0 1.15rem 1rem;
}
/* === modal: native