/* ============================================================
PLAINSPOKEN — Andrew's house document style
Warm, bold, readable. Layout & type inspired by Basecamp & HEY.
COLOR: the DEFAULT scheme is COOL SLATE (indigo + coral on cool
gray paper). Two alternates ship as theme classes you can add to
(or ):
class="theme-evergreen" -> the original deep-emerald-on-warm-paper look
class="theme-eucalyptus" -> teal + terracotta on cool sage paper
Every component reads CSS variables, so switching the class is all
it takes — no other markup changes.
TWO LAWS:
1. READABILITY ABOVE EVERYTHING.
2. NEVER put a gradient or color-shift on text. Solid fills only.
Drop-in usage (HTML):
then wrap prose in ...
To use an alternate: ...
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root {
/* ---- COLOR — COOL SLATE (default). Solid values only, never a gradient on text ---- */
--paper: #F1F3F7; /* primary background (cool gray paper) */
--subtle: #E6E9F0; /* banded / alternate section background */
--surface: #FFFFFF; /* cards, raised panels */
--ink: #1A2230; /* primary text — ~14:1 on paper */
--slate: #586073; /* secondary text — ~6:1 on paper */
--line: #DCE0EA; /* hairline rules & borders */
--accent: #2A4ECC; /* PRIMARY accent: links, buttons, UI (indigo) */
--accent-dark: #1E3CA3; /* hover / active */
--on-accent: #FFFFFF; /* text on accent fills (buttons) */
--display-accent:#D9542E; /* LARGE display accent ONLY (coral, >=24px bold) */
--highlight: #DBE4FB; /* marker background — ink text on top (pale blue) */
--sink: #141A28; /* deep section / footer background */
--on-sink: #EEF1F8; /* text on the deep background */
--on-sink-link: #9DB4FF; /* links on the deep background (periwinkle) */
/* ---- TYPE ---- */
--display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
/* ---- MEASURE & RHYTHM ---- */
--measure: 42rem; /* ~672px — the readable prose column */
--wide: 64rem; /* ~1024px — full-width content */
--radius: 12px;
--radius-sm: 8px;
--space: 1.5rem; /* base vertical rhythm unit */
}
/* ---- ALTERNATE SCHEMES — add the class to (or ) ---- */
/* EVERGREEN — the original: deep emerald + clay on warm paper */
.theme-evergreen {
--paper: #FAF8F2;
--subtle: #EFEDE2;
--surface: #FFFFFF;
--ink: #1B2420;
--slate: #545B53;
--line: #E2DDCD;
--accent: #0C6B4A; /* emerald */
--accent-dark: #08512F;
--on-accent: #FFFFFF;
--display-accent:#C2542F; /* clay */
--highlight: #F2E2A0; /* butter */
--sink: #15241D;
--on-sink: #F4F2E9;
--on-sink-link: #7FD3AE;
}
/* EUCALYPTUS — teal + terracotta on cool sage paper */
.theme-eucalyptus {
--paper: #E8EFE9;
--subtle: #DDE7DE;
--surface: #FBFDFB;
--ink: #16241D;
--slate: #4F5C54;
--line: #CCD9CE;
--accent: #0E6E63; /* deep teal */
--accent-dark: #0A5249;
--on-accent: #FFFFFF;
--display-accent:#C2542F; /* terracotta */
--highlight: #CFE6D5; /* pale sage */
--sink: #102019;
--on-sink: #EAF2EC;
--on-sink-link: #7FD3AE;
}
/* 1rem = 18px. Body never drops below this — readability law. */
html { font-size: 112.5%; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--body);
font-size: 1rem; /* 18px */
line-height: 1.65;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Readable prose column ---- */
.prose { max-width: var(--measure); margin-inline: auto; padding: 0 1.25rem; }
.wide { max-width: var(--wide); margin-inline: auto; padding: 0 1.25rem; }
/* ---- Headings: bold geometric display, tight tracking ---- */
h1, h2, h3, h4 {
font-family: var(--display);
color: var(--ink);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 0.5em;
text-wrap: balance;
}
h1 { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); margin-top: 0.2em; }
h2 { font-weight: 800; font-size: clamp(1.7rem, 3.4vw, 2.1rem); margin-top: 1.8em; }
h3 { font-weight: 700; font-size: 1.4rem; letter-spacing: -0.01em; margin-top: 1.6em; }
h4 { font-weight: 700; font-size: 1.1rem; letter-spacing: 0; margin-top: 1.4em; }
/* Solid-color emphasis word in a headline (NOT a gradient) */
h1 .accent, h2 .accent { color: var(--accent); }
.display-accent { color: var(--display-accent); }
p { margin: 0 0 1.1em; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink); }
/* ---- Links: visible, underlined for affordance ---- */
a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-dark); }
strong, b { font-weight: 700; color: var(--ink); }
/* ---- Signature device: the marker highlight ---- */
mark, .mark {
background: var(--highlight);
color: var(--ink);
padding: 0.05em 0.18em;
border-radius: 2px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* ---- Eyebrow label (use only when it encodes a real section) ---- */
.eyebrow {
font-family: var(--display);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--display-accent);
margin: 0 0 0.6rem;
}
/* ---- Buttons ---- */
.btn {
display: inline-block;
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
line-height: 1;
padding: 0.85rem 1.4rem;
border-radius: var(--radius-sm);
border: 2px solid var(--accent);
background: var(--accent);
color: var(--on-accent);
text-decoration: none;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* ---- Callout / aside ---- */
.callout {
background: var(--surface);
border: 1px solid var(--line);
border-left: 4px solid var(--accent);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin: 1.6em 0;
}
.callout--accent2 { border-left-color: var(--display-accent); }
.callout p:last-child { margin-bottom: 0; }
/* ---- Plainspoken letter (the 37signals signature) ---- */
.letter {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 4vw, 2.5rem);
margin: 1.8em 0;
}
.letter p { margin-bottom: 0.9em; }
.letter .sign { font-family: var(--display); font-weight: 700; color: var(--ink); margin-top: 1.2em; }
.letter .sign span { display: block; font-family: var(--body); font-weight: 400; color: var(--slate); font-size: 0.95rem; }
/* ---- Blockquote / testimonial ---- */
blockquote {
margin: 1.6em 0;
padding-left: 1.2rem;
border-left: 3px solid var(--display-accent);
font-size: 1.2rem;
line-height: 1.5;
color: var(--ink);
}
blockquote cite { display: block; margin-top: 0.6rem; font-size: 0.95rem; font-style: normal; color: var(--slate); }
/* ---- Lists ---- */
ul, ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
li { margin-bottom: 0.5em; }
ul.clean { list-style: none; padding-left: 0; }
ul.clean li { padding-left: 1.6rem; position: relative; }
ul.clean li::before {
content: "\2192"; position: absolute; left: 0; top: 0;
color: var(--accent); font-weight: 700;
}
/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--display); font-weight: 700; color: var(--ink); }
tbody tr:hover { background: var(--subtle); }
/* ---- Dividers & sections ---- */
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5em 0; }
.band { background: var(--subtle); }
.band--sink { background: var(--sink); color: var(--on-sink); }
.band--sink h1, .band--sink h2, .band--sink h3 { color: var(--on-sink); }
.band--sink a { color: var(--on-sink-link); }
.section { padding: clamp(2.5rem, 7vw, 5rem) 0; }
/* ---- Color swatch helper (for the guide itself) ---- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; margin: 1.5em 0; }
.swatch { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.swatch .chip { height: 64px; }
.swatch .meta { padding: 0.6rem 0.7rem; font-size: 0.82rem; }
.swatch .meta b { display: block; font-family: var(--display); }
.swatch .meta code { color: var(--slate); }
/* ---- Accessibility floor ---- */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* ---- Print: keep it readable on paper ---- */
@media print {
body { background: #fff; color: #000; }
.band, .band--sink { background: #fff !important; color: #000 !important; }
a { color: #000; text-decoration: underline; }
}