mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
feat(skills): add taste-skill-derived web prototype and HTML PPT examples (#358)
* feat(skills): add taste-skill-derived web prototype and HTML PPT examples Adds five skills distilling Leonxlnx/taste-skill into the project's SKILL.md + example.html convention so authors can pick a deliverable shape (web prototype / deck) and a design register (editorial / soft / brutalist) without the LLM defaulting to Inter-on-white slop. - web-prototype-taste-editorial: minimalist-skill applied (warm monochrome, Instrument Serif x Inter Tight, hairline bento) - web-prototype-taste-soft: soft-skill applied (silver canvas, ambient mesh, double-bezel cards, button-in-button CTAs, spring motion) - web-prototype-taste-brutalist: brutalist-skill Swiss-print mode (newsprint, Archivo Black, viewport-bleeding numerals, hazard-red, ASCII syntax) - html-ppt-taste-editorial: 10-slide investor memo deck in the editorial register, compatible with the existing html-ppt static-preview pattern - html-ppt-taste-brutalist: 11-slide tactical-telemetry / CRT-terminal incident debrief deck (scanline overlay, hazard-red alerts, audit log) Each SKILL.md cites the upstream taste-skill source file and lists hard rules, banned patterns, required components, and a pre-flight checklist. * fix(i18n): register new taste skills in German content registry Adds the five new taste-derived skills to DE_SKILL_IDS_WITH_EN_FALLBACK so the German display content coverage test sees them. Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code) * fix(skills): close stray </small> in html-ppt-taste-brutalist telemetry cell The paged-engineers tcell's delta span on slide 04 closed with `</small></span>`, leaving the example with invalid HTML that downstream previews/validators can flag. Generated-By: looper 0.4.0 (runner=fixer, agent=claude-code)
This commit is contained in:
Tom Huang
GitHub
parent
e3b5bf7fbc
commit
e90e2f9e1f
11 changed files with 2968 additions and 1 deletions
|
|
@ -288,7 +288,13 @@ const DE_DESIGN_SYSTEM_CATEGORIES: Record<string, string> = {
|
|||
Uncategorized: 'Nicht kategorisiert',
|
||||
};
|
||||
|
||||
const DE_SKILL_IDS_WITH_EN_FALLBACK = [] as const;
|
||||
const DE_SKILL_IDS_WITH_EN_FALLBACK = [
|
||||
'html-ppt-taste-brutalist',
|
||||
'html-ppt-taste-editorial',
|
||||
'web-prototype-taste-brutalist',
|
||||
'web-prototype-taste-editorial',
|
||||
'web-prototype-taste-soft',
|
||||
] as const;
|
||||
|
||||
const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'agentic',
|
||||
|
|
|
|||
70
skills/html-ppt-taste-brutalist/SKILL.md
Normal file
70
skills/html-ppt-taste-brutalist/SKILL.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
---
|
||||
name: html-ppt-taste-brutalist
|
||||
description: 16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Tactical Telemetry mode).
|
||||
---
|
||||
|
||||
# HTML PPT — Tactical Telemetry / CRT Terminal
|
||||
|
||||
A 16:9 deck for project debriefs, security reviews, infra incident write-ups, ops walkthroughs, and any "we are not selling, we are reporting" presentation. Reads like a declassified mission packet, not a pitch deck.
|
||||
|
||||
This skill commits to ONE substrate (dark CRT) — never mix with the light Swiss-print mode in the same artifact.
|
||||
|
||||
## Source
|
||||
|
||||
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/brutalist-skill/SKILL.md` §2.2 (Tactical Telemetry & CRT Terminal). Deck system follows the project's existing `html-ppt` convention (16:9 slides, vertical-stack fallback when opened directly).
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Substrate:** deactivated-CRT charcoal `#0A0A0A` / `#121212`. Never pure black.
|
||||
- **Foreground:** white phosphor `#EAEAEA`. Secondary `#9A9A98`.
|
||||
- **Accent:** ONE color — hazard red `#E61919`. Used on alerts, classifications, the latest data point. Never as a slide background fill.
|
||||
- **Optional:** terminal green `#4AF626` for ONE specific UI element across the entire deck (e.g. a single status indicator). Omit if it doesn't earn its place.
|
||||
- **Type:** monospace dominates. JetBrains Mono / IBM Plex Mono for body and meta. Heavy condensed grotesque (Archivo Black / Inter Black) only for slide titles.
|
||||
- **Title scale:** `clamp(56px, 7vw, 96px)`, uppercase, tracking `-0.04em`, leading `0.9`.
|
||||
- **Geometry:** `border-radius: 0`. Visible 1px hairlines (`#2A2A28` on charcoal). Use `display: grid; gap: 1px` over a hairline-colored background to render perfect cells.
|
||||
- **Scanline overlay:** subtle `repeating-linear-gradient` at `2px / 4px` cycle, opacity ≤ `0.08`, applied as a fixed pointer-events-none layer.
|
||||
- **Phosphor noise:** optional SVG-grain pseudo-element, opacity ≤ `0.06`.
|
||||
- **Slide chrome:** every slide carries top register strip — classification, slide ID, timestamp, coordinates — and a bottom bar with serial number + page.
|
||||
|
||||
## Banned
|
||||
|
||||
- `border-radius` above 0.
|
||||
- Drop shadows, gradients, glassmorphism, glow.
|
||||
- Color other than charcoal, phosphor, hazard red, and at most one terminal-green element.
|
||||
- Sans-serif body fonts. Monospace is the body.
|
||||
- Pitch-deck "delight" — emoji, illustration, stock photography, friendly icons.
|
||||
- Light-mode slides anywhere in the same deck.
|
||||
- Slide transitions other than instant cuts.
|
||||
|
||||
## Required slide archetypes (10–14 total)
|
||||
|
||||
1. **Classification cover** — giant numeral or call-sign on the left, redaction bar above the title, mono meta column on the right.
|
||||
2. **Briefing strip** — eight-cell mono register with mission ID, dates, principals, classification.
|
||||
3. **Numbered objectives** — three to five hairline-separated theses, each with `>>>` marker.
|
||||
4. **Telemetry grid** — `display: grid; gap: 1px` of mono key-value cells; red highlight on the variant that breaks the trend.
|
||||
5. **Threat / risk register** — hairline table with severity column in red.
|
||||
6. **Sequence / timeline** — vertical mono list, 2-px vertical rule on the left, hazard markers on critical events.
|
||||
7. **Diagram / wiring** — pure-CSS box-and-line schematic; rectangles with hairlines, ASCII arrows.
|
||||
8. **Specimen** — single mono character or word at viewport-bleeding scale, used as a visual fulcrum.
|
||||
9. **Alert** — diagonal hazard-stripe block (`repeating-linear-gradient(135deg, ...)`) with the most important sentence in the deck.
|
||||
10. **Audit log** — append-only mono entries with timestamp + actor + event.
|
||||
11. **Closing colophon** — operator, system, build, classification, sign-off line.
|
||||
|
||||
## Motion
|
||||
|
||||
This aesthetic is mechanical and instant.
|
||||
- Cuts between slides — no fades. Optionally a 60ms flicker (`opacity: 0.85 → 1`).
|
||||
- A blinking caret on the cover (`▌`) and a single pulse on the live status dot. Nothing else moves.
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] Substrate is charcoal, foreground is phosphor, only accent is hazard red
|
||||
- [ ] All `border-radius` is 0; all corners are 90°
|
||||
- [ ] Title slide includes classification + serial + timestamp + coordinates
|
||||
- [ ] At least one `display: grid; gap: 1px` telemetry module
|
||||
- [ ] Scanline overlay applied as fixed pointer-events-none element, opacity ≤ 0.08
|
||||
- [ ] At least one diagonal hazard-stripe alert block
|
||||
- [ ] ASCII syntax decoration (`[ ... ]`, `>>>`, `///`) appears at least four times across the deck
|
||||
- [ ] Numeric data uses tabular-nums + monospace
|
||||
- [ ] No emojis, no curves, no gradients, no shadow effects
|
||||
- [ ] Terminal green appears on zero or one element only — never as text body color
|
||||
774
skills/html-ppt-taste-brutalist/example.html
Normal file
774
skills/html-ppt-taste-brutalist/example.html
Normal file
|
|
@ -0,0 +1,774 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>OPN-04 // INCIDENT TELEMETRY · CLASSIFIED INTERNAL</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--crt: #0B0B0B;
|
||||
--crt-2: #131312;
|
||||
--phos: #ECECEA;
|
||||
--phos-soft: #9F9F9C;
|
||||
--phos-mute: #6A6A67;
|
||||
--rule: #2A2A27;
|
||||
--rule-strong: #3A3A36;
|
||||
--hazard: #E61919;
|
||||
--hazard-soft: rgba(230,25,25,0.12);
|
||||
--green: #4AF626;
|
||||
--display: 'Archivo Black', 'Inter', sans-serif;
|
||||
--mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--crt);
|
||||
color: var(--phos);
|
||||
font-family: var(--mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "tnum";
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Fixed CRT scanlines + phosphor noise overlay */
|
||||
body::before {
|
||||
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200;
|
||||
background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,0.18) 2px 3px);
|
||||
mix-blend-mode: multiply;
|
||||
opacity: 0.55;
|
||||
}
|
||||
body::after {
|
||||
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 199;
|
||||
background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
|
||||
}
|
||||
|
||||
/* ==== Deck system ==== */
|
||||
.deck { position: relative; width: 100vw; }
|
||||
.slide {
|
||||
position: relative;
|
||||
width: 100vw; height: 100vh; min-height: 720px;
|
||||
padding: 56px 64px 72px;
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
page-break-after: always;
|
||||
background: var(--crt);
|
||||
}
|
||||
.slide + .slide { border-top: 1px solid var(--rule); }
|
||||
|
||||
/* ==== Slide chrome ==== */
|
||||
.topbar {
|
||||
position: absolute; top: 0; left: 0; right: 0;
|
||||
padding: 10px 24px;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: 22px;
|
||||
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--phos-soft);
|
||||
background: var(--crt-2);
|
||||
}
|
||||
.topbar b { color: var(--phos); font-weight: 500; }
|
||||
.topbar .red { color: var(--hazard); }
|
||||
.topbar .blink { animation: blink 1.4s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0.25; } }
|
||||
|
||||
.botbar {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: 10px 24px;
|
||||
border-top: 1px solid var(--rule);
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
|
||||
color: var(--phos-soft);
|
||||
background: var(--crt-2);
|
||||
}
|
||||
.botbar .red { color: var(--hazard); }
|
||||
.botbar .seg { display: inline-flex; gap: 14px; }
|
||||
.botbar .seg b { color: var(--phos); font-weight: 500; }
|
||||
|
||||
.ascii-frame {
|
||||
display: inline-flex; align-items: center; gap: 10px;
|
||||
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hazard);
|
||||
}
|
||||
.ascii-frame::before { content: '['; }
|
||||
.ascii-frame::after { content: ']'; }
|
||||
|
||||
.redact {
|
||||
display: inline-block;
|
||||
background: var(--hazard); color: var(--crt);
|
||||
padding: 3px 10px;
|
||||
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
|
||||
}
|
||||
.stamp {
|
||||
display: inline-block;
|
||||
border: 1px solid var(--hazard); color: var(--hazard);
|
||||
padding: 4px 10px;
|
||||
font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* ==== Headline ==== */
|
||||
h1.title, h2.title {
|
||||
font-family: var(--display);
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 0.9;
|
||||
margin: 0;
|
||||
color: var(--phos);
|
||||
}
|
||||
h1.title { font-size: clamp(64px, 7.6vw, 112px); max-width: 18ch; }
|
||||
h2.title { font-size: clamp(48px, 5.6vw, 80px); max-width: 18ch; }
|
||||
h2.title .red { color: var(--hazard); }
|
||||
.lede { font-family: var(--mono); font-size: 14px; line-height: 1.65; color: var(--phos-soft); max-width: 78ch; margin: 0; }
|
||||
.label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hazard); }
|
||||
|
||||
/* ==== 01 · COVER ==== */
|
||||
.cover { justify-content: center; }
|
||||
.cover .grid {
|
||||
display: grid; grid-template-columns: 1.2fr 1fr;
|
||||
align-items: center;
|
||||
gap: 64px;
|
||||
}
|
||||
.cover .num {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(220px, 32vw, 460px);
|
||||
line-height: 0.78;
|
||||
letter-spacing: -0.07em;
|
||||
color: var(--phos);
|
||||
position: relative;
|
||||
}
|
||||
.cover .num .caret { color: var(--hazard); animation: blink 1s steps(1) infinite; }
|
||||
.cover .meta-col { display: flex; flex-direction: column; gap: 22px; }
|
||||
.cover .meta-col h1 { margin: 0; }
|
||||
.cover .meta-stamps { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.cover dl {
|
||||
display: grid; grid-template-columns: 16ch 1fr; gap: 8px 16px;
|
||||
margin: 0; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
|
||||
border-top: 1px solid var(--rule); padding-top: 18px;
|
||||
}
|
||||
.cover dl dt { color: var(--hazard); }
|
||||
.cover dl dd { margin: 0; color: var(--phos); }
|
||||
|
||||
/* ==== 02 · BRIEFING STRIP ==== */
|
||||
.briefing { justify-content: flex-start; padding-top: 96px; }
|
||||
.briefing h2 { margin-bottom: 28px; }
|
||||
.briefing .strip {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--rule);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
.briefing .cell { background: var(--crt); padding: 22px 22px 26px; }
|
||||
.briefing .cell .k { color: var(--hazard); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; display: block; }
|
||||
.briefing .cell .v { font-family: var(--display); font-size: 28px; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--phos); }
|
||||
.briefing .cell .v small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--phos-soft); margin-top: 6px; font-weight: 400; }
|
||||
.briefing .lede { margin-top: 28px; }
|
||||
|
||||
/* ==== 03 · OBJECTIVES ==== */
|
||||
.objectives { padding-top: 96px; }
|
||||
.objectives h2 { margin-bottom: 28px; }
|
||||
.objectives .list {
|
||||
border-top: 1px solid var(--rule);
|
||||
margin-top: 28px;
|
||||
}
|
||||
.objectives .item {
|
||||
display: grid;
|
||||
grid-template-columns: 6ch 1fr 14ch;
|
||||
align-items: baseline;
|
||||
gap: 28px;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid var(--rule);
|
||||
}
|
||||
.objectives .item .n {
|
||||
font-family: var(--display); font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--phos);
|
||||
}
|
||||
.objectives .item .arrow { color: var(--hazard); margin-right: 10px; letter-spacing: 0.1em; }
|
||||
.objectives .item h4 {
|
||||
font-family: var(--display); font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase;
|
||||
margin: 0 0 6px; font-weight: 400;
|
||||
}
|
||||
.objectives .item p { font-size: 13px; color: var(--phos-soft); line-height: 1.6; max-width: 72ch; margin: 0; }
|
||||
.objectives .item .tag {
|
||||
text-align: right; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hazard);
|
||||
}
|
||||
|
||||
/* ==== 04 · TELEMETRY GRID ==== */
|
||||
.telemetry { padding-top: 96px; }
|
||||
.telemetry h2 { margin-bottom: 24px; }
|
||||
.telemetry .grid {
|
||||
margin-top: 32px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-auto-rows: 130px;
|
||||
gap: 1px;
|
||||
background: var(--rule);
|
||||
border: 1px solid var(--rule);
|
||||
}
|
||||
.telemetry .tcell { background: var(--crt); padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; }
|
||||
.telemetry .tcell .k { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--phos-mute); }
|
||||
.telemetry .tcell .v { font-family: var(--display); font-size: 38px; line-height: 1; letter-spacing: -0.04em; color: var(--phos); }
|
||||
.telemetry .tcell .v small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--phos-soft); margin-left: 4px; font-weight: 400; }
|
||||
.telemetry .tcell.alert { background: var(--hazard-soft); }
|
||||
.telemetry .tcell.alert .k { color: var(--hazard); }
|
||||
.telemetry .tcell.alert .v { color: var(--hazard); }
|
||||
.telemetry .tcell .delta { font-size: 11px; letter-spacing: 0.06em; color: var(--hazard); margin-top: 4px; }
|
||||
.telemetry .tcell .delta.ok { color: var(--phos-soft); }
|
||||
.telemetry .tcell.live { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; letter-spacing: 0.18em; }
|
||||
.telemetry .live-dot {
|
||||
width: 8px; height: 8px; background: var(--green);
|
||||
box-shadow: 0 0 10px rgba(74,246,38,0.55);
|
||||
animation: pulse 1.6s steps(1) infinite;
|
||||
}
|
||||
@keyframes pulse { 50% { opacity: 0.3; box-shadow: 0 0 0 rgba(74,246,38,0); } }
|
||||
.span-2 { grid-column: span 2; }
|
||||
.span-3 { grid-column: span 3; }
|
||||
.row-2 { grid-row: span 2; }
|
||||
|
||||
/* ==== 05 · RISK REGISTER ==== */
|
||||
.risk { padding-top: 96px; }
|
||||
.risk h2 { margin-bottom: 28px; }
|
||||
.risk .table {
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 4ch 1.6fr 1fr 8ch 8ch 1fr;
|
||||
gap: 1px;
|
||||
background: var(--rule);
|
||||
border: 1px solid var(--rule);
|
||||
font-size: 12.5px; letter-spacing: 0.04em;
|
||||
}
|
||||
.risk .table > div { background: var(--crt); padding: 12px 14px; }
|
||||
.risk .table .h {
|
||||
background: var(--phos); color: var(--crt);
|
||||
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
|
||||
}
|
||||
.risk .table .right { text-align: right; }
|
||||
.risk .table .sev-hi { color: var(--hazard); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.risk .table .sev-md { color: #E0A819; text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.risk .table .sev-lo { color: var(--phos-soft); text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
|
||||
/* ==== 06 · TIMELINE ==== */
|
||||
.timeline { padding-top: 96px; }
|
||||
.timeline h2 { margin-bottom: 24px; }
|
||||
.timeline .seq {
|
||||
margin-top: 28px;
|
||||
border-left: 2px solid var(--phos);
|
||||
padding-left: 28px;
|
||||
display: flex; flex-direction: column; gap: 18px;
|
||||
}
|
||||
.timeline .ev {
|
||||
display: grid; grid-template-columns: 14ch 1fr 12ch; gap: 22px; align-items: baseline;
|
||||
position: relative;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.timeline .ev::before {
|
||||
content: ''; position: absolute; left: -36px; top: 8px; width: 14px; height: 1px; background: var(--phos);
|
||||
}
|
||||
.timeline .ev.crit::before { background: var(--hazard); height: 2px; top: 7px; }
|
||||
.timeline .ev .ts { color: var(--phos-soft); font-size: 12px; letter-spacing: 0.06em; }
|
||||
.timeline .ev .body { font-size: 13.5px; color: var(--phos); line-height: 1.5; max-width: 64ch; }
|
||||
.timeline .ev.crit .body { color: var(--phos); }
|
||||
.timeline .ev .actor { font-size: 11px; text-align: right; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phos-soft); }
|
||||
.timeline .ev.crit .actor { color: var(--hazard); }
|
||||
|
||||
/* ==== 07 · DIAGRAM ==== */
|
||||
.diagram { padding-top: 96px; }
|
||||
.diagram h2 { margin-bottom: 28px; }
|
||||
.diagram .schematic {
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-rows: 100px 64px 100px;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.diagram .box {
|
||||
border: 1px solid var(--phos);
|
||||
padding: 10px 14px;
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
color: var(--phos);
|
||||
font-size: 11.5px; letter-spacing: 0.16em;
|
||||
}
|
||||
.diagram .box b { display: block; font-family: var(--display); font-size: 16px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--phos); margin-bottom: 4px; }
|
||||
.diagram .box.alert { border-color: var(--hazard); color: var(--hazard); }
|
||||
.diagram .box.alert b { color: var(--hazard); }
|
||||
.diagram .arrow {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
color: var(--hazard);
|
||||
font-family: var(--mono); font-size: 18px; letter-spacing: 0.1em;
|
||||
}
|
||||
.diagram .vbar {
|
||||
display: flex; justify-content: center; align-items: stretch;
|
||||
}
|
||||
.diagram .vbar::before { content: ''; width: 1px; background: var(--phos); }
|
||||
|
||||
/* ==== 08 · SPECIMEN ==== */
|
||||
.specimen { justify-content: center; align-items: flex-start; padding-top: 110px; }
|
||||
.specimen .display {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(140px, 22vw, 360px);
|
||||
line-height: 0.82;
|
||||
letter-spacing: -0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--phos);
|
||||
max-width: 100%;
|
||||
}
|
||||
.specimen .display .red { color: var(--hazard); }
|
||||
.specimen .footnote {
|
||||
margin-top: 28px;
|
||||
font-size: 12px; letter-spacing: 0.06em;
|
||||
color: var(--phos-soft); max-width: 64ch;
|
||||
}
|
||||
|
||||
/* ==== 09 · ALERT ==== */
|
||||
.alert-slide { justify-content: center; }
|
||||
.alert-slide .alertbox {
|
||||
margin-top: 12px;
|
||||
padding: 56px 48px;
|
||||
border: 2px solid var(--hazard);
|
||||
background:
|
||||
repeating-linear-gradient(135deg, transparent 0 18px, rgba(230,25,25,0.08) 18px 36px);
|
||||
display: grid; grid-template-columns: 22ch 1fr; gap: 40px;
|
||||
align-items: start;
|
||||
}
|
||||
.alert-slide .alertbox .glyph {
|
||||
font-family: var(--display); font-size: clamp(100px, 14vw, 220px); line-height: 0.86; letter-spacing: -0.06em;
|
||||
color: var(--hazard); text-transform: uppercase;
|
||||
}
|
||||
.alert-slide .alertbox h3 {
|
||||
font-family: var(--display); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.025em;
|
||||
text-transform: uppercase; margin: 0 0 18px; color: var(--phos);
|
||||
}
|
||||
.alert-slide .alertbox p { font-size: 14px; line-height: 1.65; color: var(--phos); margin: 0 0 14px; max-width: 56ch; }
|
||||
.alert-slide .alertbox p strong { background: var(--hazard); color: var(--crt); padding: 1px 6px; font-weight: 500; }
|
||||
|
||||
/* ==== 10 · AUDIT LOG ==== */
|
||||
.audit { padding-top: 96px; }
|
||||
.audit h2 { margin-bottom: 24px; }
|
||||
.audit .log {
|
||||
margin-top: 32px;
|
||||
border: 1px solid var(--rule);
|
||||
background: #050505;
|
||||
padding: 22px 26px;
|
||||
font-size: 12.5px; line-height: 1.7;
|
||||
}
|
||||
.audit .log .row { display: grid; grid-template-columns: 14ch 12ch 1fr 14ch; gap: 16px; padding: 4px 0; border-top: 1px dashed var(--rule); }
|
||||
.audit .log .row:first-child { border-top: none; }
|
||||
.audit .log .ts { color: var(--phos-mute); }
|
||||
.audit .log .actor { color: var(--phos); }
|
||||
.audit .log .ev { color: var(--phos-soft); }
|
||||
.audit .log .ev.crit { color: var(--hazard); }
|
||||
.audit .log .sig { color: var(--phos-mute); text-align: right; letter-spacing: 0.06em; }
|
||||
|
||||
/* ==== 11 · COLOPHON ==== */
|
||||
.colophon-slide { padding-top: 96px; }
|
||||
.colophon-slide h2 { margin-bottom: 24px; }
|
||||
.colophon-slide .grid { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
|
||||
.colophon-slide dl {
|
||||
margin: 0; display: grid; grid-template-columns: 16ch 1fr; gap: 10px 18px;
|
||||
font-size: 12px; letter-spacing: 0.06em;
|
||||
}
|
||||
.colophon-slide dt { color: var(--hazard); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; }
|
||||
.colophon-slide dd { margin: 0; color: var(--phos); }
|
||||
.colophon-slide .signoff {
|
||||
margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule);
|
||||
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--phos-soft);
|
||||
display: flex; justify-content: space-between;
|
||||
}
|
||||
|
||||
/* responsive nicety for narrow screens */
|
||||
@media (max-width: 880px) {
|
||||
.slide { padding: 56px 22px 72px; }
|
||||
.topbar { grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
|
||||
.topbar > *:nth-child(n+4) { display: none; }
|
||||
.cover .grid { grid-template-columns: 1fr; }
|
||||
.cover .num { font-size: 36vw; }
|
||||
.briefing .strip { grid-template-columns: 1fr 1fr; }
|
||||
.telemetry .grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 100px; }
|
||||
.span-2, .span-3, .row-2 { grid-column: span 1; grid-row: auto; }
|
||||
.risk .table { grid-template-columns: 4ch 1fr 1fr; font-size: 11px; }
|
||||
.risk .table > div:nth-child(6n+4),
|
||||
.risk .table > div:nth-child(6n+5),
|
||||
.risk .table > div:nth-child(6n) { display: none; }
|
||||
.diagram .schematic { grid-template-columns: 1fr; grid-template-rows: auto; }
|
||||
.diagram .arrow, .diagram .vbar { display: none; }
|
||||
.alert-slide .alertbox { grid-template-columns: 1fr; padding: 32px 22px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="deck">
|
||||
|
||||
<!-- 01 · COVER -->
|
||||
<section class="slide cover">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · INCIDENT TELEMETRY</div>
|
||||
<div>SLIDE <b>01 / 11</b></div>
|
||||
<div>2026.05.14 · 04:12Z</div>
|
||||
<div>44.8404°N · −0.5805°W</div>
|
||||
<div class="red">⬤ <span class="blink">CLASSIFIED · INTERNAL</span></div>
|
||||
<div>OPERATOR · Q.ALBRECHT</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="num">04<span class="caret">▌</span></div>
|
||||
<div class="meta-col">
|
||||
<div class="meta-stamps">
|
||||
<span class="redact">▮▮▮▮ DECL ▮▮▮▮</span>
|
||||
<span class="stamp">SEV · CRITICAL</span>
|
||||
<span class="stamp">PKT · 04 / 11</span>
|
||||
</div>
|
||||
<h1 class="title">Incident Telemetry — <span style="color: var(--hazard);">Operation Halcyon</span></h1>
|
||||
<p class="lede">Field debrief for the runtime outage on 2026.05.13 — 03:18Z to 06:41Z. Eleven slides. No friendly icons. Read top to bottom.</p>
|
||||
<dl>
|
||||
<dt>Mission</dt><dd>OPN-04 / OPERATION HALCYON</dd>
|
||||
<dt>Operator</dt><dd>Q. Albrecht · Incident Commander</dd>
|
||||
<dt>System</dt><dd>halcyon-runtime · v 2026.05.06</dd>
|
||||
<dt>Cell</dt><dd>EU-WEST-3 · BORDEAUX-A</dd>
|
||||
<dt>Distribution</dt><dd>internal · oncall · founders</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0731</b></span><span>VOL <b>04</b></span><span>ISS <b>2026.05</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>01 / 11</b></span><span class="red">⬤ TRANSMITTING</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 02 · BRIEFING STRIP -->
|
||||
<section class="slide briefing">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · BRIEFING</div>
|
||||
<div>SLIDE <b>02 / 11</b></div>
|
||||
<div>STAGE · 01</div>
|
||||
<div>SECTION · OVERVIEW</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">02 / mission briefing</span>
|
||||
<h2 class="title">Three hours, twenty-three minutes, sixty-four percent of <span class="red">tier-3</span> traffic.</h2>
|
||||
<div class="strip">
|
||||
<div class="cell"><span class="k">window</span><span class="v">3h 23m<small>03:18Z → 06:41Z</small></span></div>
|
||||
<div class="cell"><span class="k">tier hit</span><span class="v" style="color: var(--hazard);">tier-3<small>research-agent</small></span></div>
|
||||
<div class="cell"><span class="k">tasks failed</span><span class="v">14,820<small>17.3% of window</small></span></div>
|
||||
<div class="cell"><span class="k">refunded</span><span class="v">€ 4,840<small>auto · within 24h</small></span></div>
|
||||
<div class="cell"><span class="k">root cause</span><span class="v">DNS cache<small>upstream provider 04</small></span></div>
|
||||
<div class="cell"><span class="k">resolved at</span><span class="v">06:41Z<small>by Q. Albrecht</small></span></div>
|
||||
<div class="cell"><span class="k">postmortem</span><span class="v">CIRC-04<small>filed 2026.05.14</small></span></div>
|
||||
<div class="cell"><span class="k">action items</span><span class="v" style="color: var(--hazard);">07 open<small>03 critical · 04 medium</small></span></div>
|
||||
</div>
|
||||
<p class="lede" style="margin-top: 28px;">A regional DNS provider returned stale records for 3h 23m. Halcyon's resolver pinned to one of three upstream providers; the failover threshold was set too high. Tier-3 (research) clients with aggressive retry policies amplified failure into customer-visible errors. Customers on tier-1 (transactional) saw degradation but no failure.</p>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0732</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>02 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 03 · OBJECTIVES -->
|
||||
<section class="slide objectives">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · OBJECTIVES</div>
|
||||
<div>SLIDE <b>03 / 11</b></div>
|
||||
<div>STAGE · 02</div>
|
||||
<div>SECTION · DEBRIEF</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">03 / debrief objectives</span>
|
||||
<h2 class="title">Five lines we will <span class="red">defend</span> in writing this week.</h2>
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<div class="n">01</div>
|
||||
<div>
|
||||
<h4><span class="arrow">>>></span>Resolver failover threshold drops from 600 ms to 180 ms.</h4>
|
||||
<p>Currently we wait until the upstream provider misses six hundred milliseconds of probes before failing over to provider 02. The new threshold ratifies a single missed probe at 180 ms.</p>
|
||||
</div>
|
||||
<div class="tag">CRIT · 14d</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">02</div>
|
||||
<div>
|
||||
<h4><span class="arrow">>>></span>Three independent DNS providers, weighted equally.</h4>
|
||||
<p>The pin to provider 04 was a vestige from the 2025 cost review. We move to a three-way Anycast resolver, weighted equally, with provider failure quarantined for 30 minutes after a missed probe.</p>
|
||||
</div>
|
||||
<div class="tag">CRIT · 21d</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">03</div>
|
||||
<div>
|
||||
<h4><span class="arrow">>>></span>Tier-3 clients get retry budgets, not retry loops.</h4>
|
||||
<p>Research-agent clients amplified failure 4.6× by retrying inside the failure window. We expose a budget — N retries per 60s — and refuse beyond it with an explicit, customer-readable error.</p>
|
||||
</div>
|
||||
<div class="tag">CRIT · 30d</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">04</div>
|
||||
<div>
|
||||
<h4><span class="arrow">>>></span>Refunds are automated, not gestured.</h4>
|
||||
<p>The 4,840 € refund cycle was hand-cranked by two engineers between 04:30 and 09:00. We codify a refund pipeline keyed to tier × failure-class × duration, with an audit log and a postmortem hook.</p>
|
||||
</div>
|
||||
<div class="tag">MED · 45d</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="n">05</div>
|
||||
<div>
|
||||
<h4><span class="arrow">>>></span>Status page reads like a sentence, not a heatmap.</h4>
|
||||
<p>During the window, the status page showed eight green pills and one yellow chevron. The customer's experience was "everything is on fire." We replace the dashboard with a one-paragraph human summary, updated every 10 minutes.</p>
|
||||
</div>
|
||||
<div class="tag">MED · 30d</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0733</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>03 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04 · TELEMETRY GRID -->
|
||||
<section class="slide telemetry">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · TELEMETRY</div>
|
||||
<div>SLIDE <b>04 / 11</b></div>
|
||||
<div>STAGE · 03</div>
|
||||
<div>SECTION · METRICS</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">04 / telemetry · 24h window</span>
|
||||
<h2 class="title">Numbers from the <span class="red">window</span>.</h2>
|
||||
<div class="grid">
|
||||
<div class="tcell row-2 alert">
|
||||
<span class="k">tier-3 · failure rate</span>
|
||||
<span class="v">17.3<small>%</small></span>
|
||||
<span class="delta">▲ +14.6 pp vs baseline · CRIT</span>
|
||||
</div>
|
||||
<div class="tcell"><span class="k">tier-1 · failure</span><span class="v">0.04<small>%</small></span><span class="delta ok">▲ +0.02 pp · within slo</span></div>
|
||||
<div class="tcell"><span class="k">tier-2 · failure</span><span class="v">0.61<small>%</small></span><span class="delta ok">▲ +0.4 pp · within slo</span></div>
|
||||
<div class="tcell"><span class="k">p99 · resolver</span><span class="v">3,180<small>ms</small></span><span class="delta">▲ x 41 vs baseline</span></div>
|
||||
<div class="tcell"><span class="k">retries · 24h</span><span class="v">68k<small>·×4.6</small></span><span class="delta">▲ amplification</span></div>
|
||||
<div class="tcell"><span class="k">refunds</span><span class="v">€4,840</span><span class="delta ok">manual · 04:30 → 09:00</span></div>
|
||||
<div class="tcell"><span class="k">paged engineers</span><span class="v">04<small>oncall</small></span><span class="delta ok">3 ack < 5min · 1 < 12min</span></div>
|
||||
<div class="tcell"><span class="k">customer tickets</span><span class="v">37</span><span class="delta">▲ x 11 vs baseline</span></div>
|
||||
<div class="tcell live"><span class="live-dot"></span><span style="color: var(--green);">resolver healthy · 7d 14h</span></div>
|
||||
<div class="tcell"><span class="k">tasks dropped</span><span class="v">14,820</span><span class="delta">▲ refunded auto-12h</span></div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0734</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>04 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05 · RISK REGISTER -->
|
||||
<section class="slide risk">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · RISK REGISTER</div>
|
||||
<div>SLIDE <b>05 / 11</b></div>
|
||||
<div>STAGE · 04</div>
|
||||
<div>SECTION · POSTURE</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">05 / open risks · halcyon runtime</span>
|
||||
<h2 class="title">Open risks, scored against the <span class="red">runtime</span>.</h2>
|
||||
<div class="table">
|
||||
<div class="h">№</div><div class="h">risk</div><div class="h">vector</div><div class="h">sev</div><div class="h">prob</div><div class="h">owner / due</div>
|
||||
|
||||
<div>R-01</div><div>Single-provider DNS resolver pin</div><div>infra · routing</div><div class="sev-hi">crit</div><div class="right">0.42</div><div>Q.ALB · 2026.05.28</div>
|
||||
<div>R-02</div><div>Tier-3 retry amplification (no budget)</div><div>client · sdk</div><div class="sev-hi">crit</div><div class="right">0.31</div><div>H.NAI · 2026.06.10</div>
|
||||
<div>R-03</div><div>Refund pipeline manual</div><div>finance · ops</div><div class="sev-md">med</div><div class="right">0.55</div><div>P.NWA · 2026.06.20</div>
|
||||
<div>R-04</div><div>Status page is a heatmap, not a sentence</div><div>comms</div><div class="sev-md">med</div><div class="right">0.61</div><div>L.ARR · 2026.06.20</div>
|
||||
<div>R-05</div><div>Audit log not subpoena-grade</div><div>legal</div><div class="sev-md">med</div><div class="right">0.18</div><div>P.NWA · 2026.07.01</div>
|
||||
<div>R-06</div><div>EU-WEST-3 single-cell deployment</div><div>infra · region</div><div class="sev-lo">lo</div><div class="right">0.06</div><div>Q.ALB · 2026.Q4</div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0735</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>05 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06 · TIMELINE -->
|
||||
<section class="slide timeline">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · SEQUENCE</div>
|
||||
<div>SLIDE <b>06 / 11</b></div>
|
||||
<div>STAGE · 05</div>
|
||||
<div>SECTION · TIMELINE</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">06 / event sequence · 03:18Z → 06:41Z</span>
|
||||
<h2 class="title">Sequence of <span class="red">events</span>.</h2>
|
||||
<div class="seq">
|
||||
<div class="ev"><span class="ts">03:18:04Z</span><div class="body">Upstream provider 04 begins returning stale A records for runtime.halcyon.io.</div><div class="actor">— PROVIDER-04</div></div>
|
||||
<div class="ev"><span class="ts">03:19:11Z</span><div class="body">Resolver retries against pinned provider 04. p99 climbs to 1,840 ms within sixty-seven seconds.</div><div class="actor">— RESOLVER</div></div>
|
||||
<div class="ev crit"><span class="ts">03:21:48Z</span><div class="body">Tier-3 (research-agent) clients begin retry storm. Failure rate breaches the 5% page threshold; oncall pages four engineers.</div><div class="actor">— PAGER · CRIT</div></div>
|
||||
<div class="ev"><span class="ts">03:24:02Z</span><div class="body">Q. Albrecht acks the page from Bordeaux. H. Naitō from Munich at 03:24:18Z. Two more engineers within nine minutes.</div><div class="actor">— Q.ALB · H.NAI</div></div>
|
||||
<div class="ev crit"><span class="ts">03:38:00Z</span><div class="body">First public status update posted: "We are investigating elevated errors on the runtime." Status page does not yet reflect the severity.</div><div class="actor">— STATUS · CRIT</div></div>
|
||||
<div class="ev"><span class="ts">04:01:22Z</span><div class="body">Root cause narrowed to provider 04 DNS. Manual failover to provider 02 begins.</div><div class="actor">— Q.ALB</div></div>
|
||||
<div class="ev"><span class="ts">04:30:00Z</span><div class="body">Refund triage begins. Hand-rolled SQL against the audit log identifies 14,820 dropped tasks across 312 customers.</div><div class="actor">— P.NWA</div></div>
|
||||
<div class="ev crit"><span class="ts">06:41:09Z</span><div class="body">Failover complete. Failure rate returns to baseline. Public status updated. Postmortem CIRC-04 opened.</div><div class="actor">— ALL · CLEAR</div></div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0736</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>06 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07 · DIAGRAM -->
|
||||
<section class="slide diagram">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · WIRING</div>
|
||||
<div>SLIDE <b>07 / 11</b></div>
|
||||
<div>STAGE · 06</div>
|
||||
<div>SECTION · DIAGRAM</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">07 / resolver · before / after</span>
|
||||
<h2 class="title">Resolver — <span class="red">before</span> & after.</h2>
|
||||
<div class="schematic">
|
||||
<div class="box"><b>SDK</b>tier-1 client</div>
|
||||
<div class="arrow">━━▶</div>
|
||||
<div class="box"><b>RESOLVER</b>halcyon · pinned</div>
|
||||
<div class="arrow">━━▶</div>
|
||||
<div class="box alert"><b>PROVIDER 04</b>upstream · STALE</div>
|
||||
|
||||
<div class="vbar"></div>
|
||||
<div></div>
|
||||
<div class="vbar"></div>
|
||||
<div></div>
|
||||
<div class="vbar"></div>
|
||||
|
||||
<div class="box"><b>SDK</b>tier-3 retry storm</div>
|
||||
<div class="arrow">━━▶</div>
|
||||
<div class="box alert"><b>RESOLVER</b>p99 · 3,180 ms</div>
|
||||
<div class="arrow">━━▶</div>
|
||||
<div class="box alert"><b>14,820 TASKS</b>dropped · 17.3%</div>
|
||||
</div>
|
||||
<p class="lede" style="margin-top: 32px;">After: resolver is unpinned and weighted across providers 02 / 04 / 07. Failover threshold drops to 180 ms. Tier-3 retry budget caps amplification at ×1.4. The bottom row of this diagram never gets drawn again.</p>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0737</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>07 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 08 · SPECIMEN -->
|
||||
<section class="slide specimen">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · SPECIMEN</div>
|
||||
<div>SLIDE <b>08 / 11</b></div>
|
||||
<div>STAGE · 07</div>
|
||||
<div>SECTION · TYPOGRAPHY</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">08 / single specimen · cause</span>
|
||||
<div class="display">DNS<span class="red">.</span></div>
|
||||
<p class="footnote">A three-letter root cause for an eleven-slide debrief — set in Archivo Black at clamp(140px, 22vw, 360px), tracking −0.06em, leading 0.82. The hazard period is the only part of this slide that is not phosphor white.</p>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0738</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>08 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 09 · ALERT -->
|
||||
<section class="slide alert-slide">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · ALERT</div>
|
||||
<div>SLIDE <b>09 / 11</b></div>
|
||||
<div>STAGE · 08</div>
|
||||
<div>SECTION · DECISION</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">09 / single decision · ratify</span>
|
||||
<div class="alertbox">
|
||||
<div class="glyph">!!<br>RTFY</div>
|
||||
<div>
|
||||
<h3>Ratify the resolver redesign at <span style="color: var(--hazard);">close of business 2026.05.16</span>.</h3>
|
||||
<p>If we delay the resolver redesign past Friday close, we re-enter the failure window with the same posture we left it in. The new policy is one ticket. The redesign is a fourteen-day commitment from Q.ALB & H.NAI. <strong>This deck is the ratification artefact.</strong></p>
|
||||
<p>Sign-off lines below. Anything not signed by 16.05.2026 17:00Z is escalated to the founders' weekly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0739</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>09 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 · AUDIT LOG -->
|
||||
<section class="slide audit">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · AUDIT</div>
|
||||
<div>SLIDE <b>10 / 11</b></div>
|
||||
<div>STAGE · 09</div>
|
||||
<div>SECTION · LOG</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">10 / audit log · CIRC-04 (excerpt)</span>
|
||||
<h2 class="title">Audit log, <span class="red">verbatim</span>.</h2>
|
||||
<div class="log">
|
||||
<div class="row"><span class="ts">2026.05.13 03:21Z</span><span class="actor">PAGER</span><span class="ev crit">tier-3 failure rate > 5% · 4 engineers paged</span><span class="sig">sha · 9f3a…b218</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 03:24Z</span><span class="actor">Q.ALBRECHT</span><span class="ev">ack page · joined #incident-04</span><span class="sig">sha · 14ab…a022</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 03:38Z</span><span class="actor">Q.ALBRECHT</span><span class="ev crit">status page · "investigating elevated errors"</span><span class="sig">sha · 56cf…d971</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 04:01Z</span><span class="actor">H.NAITO</span><span class="ev">root cause narrowed · provider-04 DNS stale</span><span class="sig">sha · 04bb…f110</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 04:12Z</span><span class="actor">Q.ALBRECHT</span><span class="ev">manual failover provider-04 → provider-02 initiated</span><span class="sig">sha · 17ee…0ad4</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 04:30Z</span><span class="actor">P.NWACHUKWU</span><span class="ev">refund triage opened · 14,820 tasks queued</span><span class="sig">sha · ab21…8312</span></div>
|
||||
<div class="row"><span class="ts">2026.05.13 06:41Z</span><span class="actor">Q.ALBRECHT</span><span class="ev crit">all-clear posted · CIRC-04 opened</span><span class="sig">sha · cc09…b745</span></div>
|
||||
<div class="row"><span class="ts">2026.05.14 09:00Z</span><span class="actor">P.NWACHUKWU</span><span class="ev">refund pipeline complete · €4,840 across 312 customers</span><span class="sig">sha · 1a37…ee08</span></div>
|
||||
<div class="row"><span class="ts">2026.05.14 14:22Z</span><span class="actor">Q.ALBRECHT</span><span class="ev">postmortem CIRC-04 published · 11 action items</span><span class="sig">sha · 4f12…c399</span></div>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0740</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>10 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 11 · COLOPHON -->
|
||||
<section class="slide colophon-slide">
|
||||
<div class="topbar">
|
||||
<div><b>OPN-04</b> · COLOPHON</div>
|
||||
<div>SLIDE <b>11 / 11</b></div>
|
||||
<div>STAGE · 10</div>
|
||||
<div>SECTION · SIGN-OFF</div>
|
||||
<div class="red">CLASSIFIED · INTERNAL</div>
|
||||
<div>Q.ALBRECHT</div>
|
||||
</div>
|
||||
<span class="ascii-frame">11 / colophon & sign-off</span>
|
||||
<h2 class="title">Eleven slides, <span class="red">three names</span>, one decision.</h2>
|
||||
<div class="grid">
|
||||
<dl>
|
||||
<dt>Operator</dt><dd>Q. Albrecht · Incident Commander · Bordeaux, FR</dd>
|
||||
<dt>Witness</dt><dd>H. Naitō · Resolver Owner · Munich, DE</dd>
|
||||
<dt>Counsel</dt><dd>P. Nwachukwu · Customer Refund Pipeline · Lagos, NG</dd>
|
||||
<dt>Distribution</dt><dd>Internal · oncall · founders · CIRC-04</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>System</dt><dd>halcyon-runtime · build 2026.05.06</dd>
|
||||
<dt>Set in</dt><dd>Archivo Black · JetBrains Mono · IBM Plex Mono</dd>
|
||||
<dt>Press</dt><dd>Internal — 11pp · 16:9 · 2026.05.14 14:22Z</dd>
|
||||
<dt>Classification</dt><dd>INTERNAL — do not redistribute outside oncall</dd>
|
||||
<dt>Hash</dt><dd>OPN-04 · sha-256 · 4f12c399ab21d971...</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="signoff">
|
||||
<span>SIGNED Q.ALBRECHT · 2026.05.14 14:22Z</span>
|
||||
<span class="red">END OF TRANSMISSION ///</span>
|
||||
</div>
|
||||
<div class="botbar">
|
||||
<div class="seg"><span>SERIAL <b>OPN-04 / 0741</b></span></div>
|
||||
<div class="seg"><span>PAGE <b>11 / 11</b></span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
skills/html-ppt-taste-editorial/SKILL.md
Normal file
60
skills/html-ppt-taste-editorial/SKILL.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
name: html-ppt-taste-editorial
|
||||
description: 16:9 HTML deck in editorial-minimalist taste. Warm cream slides, serif display + grotesque body, hairline rules, monospace meta, generous macro-whitespace, one accent. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
|
||||
---
|
||||
|
||||
# HTML PPT — Editorial Minimalism
|
||||
|
||||
A 16:9 deck for the briefs that hate neon: investor updates, design reviews, internal manifestos, lecture decks. Reads like a print supplement, not a SaaS landing.
|
||||
|
||||
## Source
|
||||
|
||||
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/minimalist-skill/SKILL.md`. The deck system follows the existing project convention from `skills/html-ppt-pitch-deck/example.html` (each `.slide` is a `100vw × 100vh` section; opened directly, slides stack vertically). See `example.html` in this directory.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Substrate:** warm off-white `#FBFBFA` / `#F7F6F3`. Foreground off-black `#1A1A19`. Never pure white or pure black.
|
||||
- **Type pairing:** display in **serif** (Instrument Serif / Newsreader / Lyon), body in **grotesque** (Inter Tight / Switzer), meta in **mono** (JetBrains Mono).
|
||||
- **Display scale per slide:** title `clamp(56px, 6.5vw, 96px)` italic-capable serif, line-height `1.05`, tracking `-0.025em`.
|
||||
- **Hairline only:** `1px solid #EAEAEA` — borders, dividers, table cells. No drop shadows.
|
||||
- **One accent color** chosen from the muted-pastel pairs (e.g. sage `#346538` on `#EDF3EC`, or red `#9F2F2D` on `#FDEBEC`). Used sparingly — eyebrow dot, chart fill, call-out chip. Never as a slide background.
|
||||
- **Slide padding:** generous (`72px 96px` minimum). Title at most 14ch wide.
|
||||
- **Eyebrow:** every slide opens with a mono uppercase eyebrow `letter-spacing: 0.18em` and a section number `01 / 09`.
|
||||
- **Page numbers:** mono, bottom-right corner.
|
||||
|
||||
## Banned
|
||||
|
||||
- Inter (use Inter *Tight* if you must, but prefer Switzer / SF Pro). No Roboto, Open Sans.
|
||||
- Heavy drop shadows. Glow. Gradient text.
|
||||
- 3-equal-card feature rows. Use uneven hairline-divided columns instead.
|
||||
- Emojis in text or as bullet markers — use `—` or no marker.
|
||||
- Full-bleed photography on every slide. Use one or two image slides; reserve them.
|
||||
- AI-cliché copy ("Elevate", "Unleash", "Seamless", "Next-Gen").
|
||||
- Slide transitions noisier than fade-in.
|
||||
|
||||
## Required slide archetypes (10–12 total recommended)
|
||||
|
||||
1. **Cover** — serif title, italic mid-sentence accent, mono meta footer.
|
||||
2. **Eyebrow + thesis** — single sentence of body lede on the left; mono numbered TOC on the right.
|
||||
3. **Numbered manifesto** — three or four hairline-separated theses.
|
||||
4. **Bento data slide** — uneven 6-col grid with hairline gaps; one stat in serif, supporting in mono.
|
||||
5. **Quote / pull-out** — single sentence at large serif, attribution mono, hairline above and below.
|
||||
6. **Comparison** — two columns separated by a vertical hairline; "Doesn't / Does" or "Before / After".
|
||||
7. **Table or index** — `display: grid; gap: 1px` on hairline color.
|
||||
8. **Chart or breakdown** — flat horizontal bar chart with mono labels, accent fill only on the latest bar.
|
||||
9. **Team / colophon** — mono key-value list, no avatars.
|
||||
10. **Closing** — serif final line italic; CTA as ghost button; signature in mono.
|
||||
|
||||
## Motion
|
||||
|
||||
- Static-preview fallback: keep every slide visible (already wired by the deck base). When run as a real deck, fade-in at `400ms cubic-bezier(0.16, 1, 0.3, 1)` is plenty.
|
||||
- No translate, no blur, no auto-advance.
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] Substrate is warm off-white; foreground is off-black; never pure black/white
|
||||
- [ ] Serif used on titles, grotesque on body, mono on meta — three families, three jobs
|
||||
- [ ] One accent color, used at most three times in the whole deck
|
||||
- [ ] Every slide has eyebrow + section number + page number
|
||||
- [ ] At least one hairline-grid table or comparison module
|
||||
- [ ] No drop shadows, no gradients, no emojis, no banned fonts
|
||||
490
skills/html-ppt-taste-editorial/example.html
Normal file
490
skills/html-ppt-taste-editorial/example.html
Normal file
|
|
@ -0,0 +1,490 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Quartz · 2026 Series A Memo</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--paper: #FBFBFA;
|
||||
--paper-2: #F4F3F0;
|
||||
--ink: #1A1A19;
|
||||
--ink-soft: #555452;
|
||||
--muted: #828079;
|
||||
--hairline: #E5E3DE;
|
||||
--hairline-soft: #EFEDE8;
|
||||
--accent: #346538;
|
||||
--accent-bg: #EDF3EC;
|
||||
--accent-2: #9F2F2D;
|
||||
--accent-2-bg: #FDEBEC;
|
||||
--display: 'Instrument Serif', 'Newsreader', Georgia, serif;
|
||||
--sans: 'Inter Tight', 'Switzer', 'SF Pro Display', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
|
||||
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Deck system (matches html-ppt convention) */
|
||||
.deck { position: relative; width: 100vw; }
|
||||
.slide {
|
||||
position: relative;
|
||||
width: 100vw; height: 100vh; min-height: 720px;
|
||||
padding: 72px 96px;
|
||||
display: flex; flex-direction: column;
|
||||
overflow: hidden;
|
||||
page-break-after: always;
|
||||
}
|
||||
.slide + .slide { border-top: 1px solid var(--hairline); }
|
||||
|
||||
/* Slide chrome */
|
||||
.meta-row {
|
||||
position: absolute; top: 32px; left: 96px; right: 96px;
|
||||
display: flex; justify-content: space-between; align-items: baseline;
|
||||
font-family: var(--mono); font-size: 11px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
.meta-row .left { display: inline-flex; align-items: center; gap: 10px; }
|
||||
.meta-row .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
|
||||
.meta-row .num { color: var(--ink); }
|
||||
.pagenum {
|
||||
position: absolute; bottom: 32px; right: 96px;
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
.footrule {
|
||||
position: absolute; bottom: 28px; left: 96px; right: 96px;
|
||||
border: 0; border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.signature {
|
||||
position: absolute; bottom: 32px; left: 96px;
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
||||
}
|
||||
|
||||
/* Display headings */
|
||||
h1.cover {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(72px, 9vw, 132px);
|
||||
font-weight: 400;
|
||||
line-height: 0.98;
|
||||
letter-spacing: -0.028em;
|
||||
margin: 0;
|
||||
max-width: 16ch;
|
||||
}
|
||||
h1.cover em { font-style: italic; color: var(--ink-soft); }
|
||||
h2.title {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(54px, 6.5vw, 92px);
|
||||
font-weight: 400;
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 0;
|
||||
max-width: 14ch;
|
||||
}
|
||||
h2.title em { font-style: italic; color: var(--ink-soft); }
|
||||
h3.sub {
|
||||
font-family: var(--display); font-style: italic; font-weight: 400;
|
||||
font-size: 32px; line-height: 1.15; letter-spacing: -0.02em;
|
||||
color: var(--ink-soft); margin: 12px 0 0;
|
||||
}
|
||||
.lede {
|
||||
font-size: 21px; line-height: 1.5; color: var(--ink-soft);
|
||||
max-width: 56ch; margin: 0;
|
||||
}
|
||||
|
||||
/* Cover slide */
|
||||
.cover-slide { justify-content: center; }
|
||||
.cover-slide .lede { margin-top: 28px; max-width: 50ch; }
|
||||
.cover-slide .stamp {
|
||||
display: inline-block;
|
||||
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
|
||||
color: var(--accent); background: var(--accent-bg);
|
||||
padding: 4px 10px; border-radius: 999px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* TOC slide */
|
||||
.toc-slide { justify-content: center; }
|
||||
.toc-slide .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; padding-top: 48px; }
|
||||
.toc {
|
||||
list-style: none; padding: 0; margin: 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.toc li {
|
||||
display: grid; grid-template-columns: 4ch 1fr 4ch;
|
||||
align-items: baseline; gap: 18px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
font-size: 17px;
|
||||
}
|
||||
.toc li .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
|
||||
.toc li .pg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-align: right; }
|
||||
.toc li .t { font-family: var(--display); font-size: 22px; letter-spacing: -0.012em; line-height: 1.2; }
|
||||
.toc li .t em { font-style: italic; color: var(--ink-soft); }
|
||||
|
||||
/* Manifesto slide */
|
||||
.manifesto .body {
|
||||
margin-top: 48px;
|
||||
display: grid; grid-template-columns: 1fr;
|
||||
}
|
||||
.manifesto .item {
|
||||
display: grid; grid-template-columns: 6ch 1fr 14ch;
|
||||
gap: 32px;
|
||||
padding: 22px 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
align-items: baseline;
|
||||
}
|
||||
.manifesto .item:last-child { border-bottom: 1px solid var(--hairline); }
|
||||
.manifesto .item .n {
|
||||
font-family: var(--display); font-size: 44px; line-height: 0.95; letter-spacing: -0.03em;
|
||||
}
|
||||
.manifesto .item h4 {
|
||||
font-family: var(--display); font-size: 26px; letter-spacing: -0.015em; line-height: 1.2;
|
||||
margin: 0 0 6px; font-weight: 400; max-width: 32ch;
|
||||
}
|
||||
.manifesto .item p { margin: 0; font-size: 14.5px; color: var(--ink-soft); max-width: 56ch; }
|
||||
.manifesto .item .tag {
|
||||
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
|
||||
color: var(--muted); text-align: right;
|
||||
}
|
||||
|
||||
/* Bento data slide */
|
||||
.bento-slide .grid {
|
||||
margin-top: 56px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-auto-rows: minmax(180px, auto);
|
||||
gap: 0;
|
||||
border: 1px solid var(--hairline);
|
||||
background: var(--hairline);
|
||||
}
|
||||
.bento-slide .cell { background: var(--paper); padding: 28px 32px; }
|
||||
.cell-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
|
||||
.cell .stat { font-family: var(--display); font-size: 64px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; }
|
||||
.cell .stat small { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 6px; }
|
||||
.cell h4 { font-family: var(--display); font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 400; margin: 0 0 8px; }
|
||||
.cell p { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: 32ch; line-height: 1.55; }
|
||||
.span-3 { grid-column: span 3; }
|
||||
.span-2 { grid-column: span 2; }
|
||||
.span-4 { grid-column: span 4; }
|
||||
.row-2 { grid-row: span 2; }
|
||||
|
||||
.delta { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--accent-bg); color: var(--accent); margin-top: 14px; }
|
||||
.delta.down { background: var(--accent-2-bg); color: var(--accent-2); }
|
||||
|
||||
/* Quote slide */
|
||||
.quote-slide { justify-content: center; text-align: left; }
|
||||
.quote-slide blockquote {
|
||||
margin: 0; padding: 38px 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
border-bottom: 1px solid var(--hairline);
|
||||
font-family: var(--display); font-size: clamp(40px, 4.4vw, 64px); font-weight: 400;
|
||||
letter-spacing: -0.02em; line-height: 1.12; color: var(--ink);
|
||||
max-width: 26ch;
|
||||
}
|
||||
.quote-slide blockquote em { color: var(--ink-soft); font-style: italic; }
|
||||
.quote-slide cite {
|
||||
display: block; margin-top: 22px;
|
||||
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Comparison slide */
|
||||
.compare-slide .columns {
|
||||
margin-top: 56px;
|
||||
display: grid; grid-template-columns: 1fr 1fr;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.compare-slide .col { padding: 28px 0; }
|
||||
.compare-slide .col + .col { border-left: 1px solid var(--hairline); padding-left: 32px; }
|
||||
.compare-slide .col h5 {
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
|
||||
color: var(--muted); margin: 0 0 22px;
|
||||
}
|
||||
.compare-slide .col.against h5 { color: var(--accent-2); }
|
||||
.compare-slide .col.for h5 { color: var(--accent); }
|
||||
.compare-slide .col p {
|
||||
font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em;
|
||||
margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
|
||||
max-width: 28ch;
|
||||
}
|
||||
.compare-slide .col p:last-child { border-bottom: none; }
|
||||
.compare-slide .col.against p { color: var(--ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
|
||||
|
||||
/* Table slide */
|
||||
.table-slide .data {
|
||||
margin-top: 56px;
|
||||
display: grid;
|
||||
grid-template-columns: 4ch 1.4fr 1fr 1fr 1fr 0.9fr;
|
||||
gap: 1px;
|
||||
background: var(--hairline);
|
||||
font-size: 14px;
|
||||
}
|
||||
.table-slide .data > div { background: var(--paper); padding: 14px 18px; }
|
||||
.table-slide .data .head {
|
||||
background: var(--ink); color: var(--paper);
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
}
|
||||
.table-slide .data .right { text-align: right; }
|
||||
.table-slide .data .num { font-family: var(--mono); }
|
||||
.table-slide .data .pos { color: var(--accent); }
|
||||
.table-slide .data .neg { color: var(--accent-2); }
|
||||
|
||||
/* Chart slide */
|
||||
.chart-slide .chart {
|
||||
margin-top: 56px;
|
||||
display: grid;
|
||||
grid-template-columns: 12ch 1fr 8ch;
|
||||
gap: 18px 24px;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.chart-slide .chart .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
|
||||
.chart-slide .chart .bar {
|
||||
height: 20px; background: var(--paper-2); position: relative;
|
||||
border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
|
||||
}
|
||||
.chart-slide .chart .bar::after {
|
||||
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
|
||||
width: var(--w, 0%); background: var(--ink-soft);
|
||||
}
|
||||
.chart-slide .chart .bar.accent::after { background: var(--accent); }
|
||||
.chart-slide .chart .v { font-family: var(--mono); font-size: 13px; text-align: right; letter-spacing: 0.02em; }
|
||||
|
||||
/* Colophon */
|
||||
.colophon-slide .grid { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
|
||||
.colophon-slide dl {
|
||||
margin: 0; display: grid; grid-template-columns: 14ch 1fr; gap: 12px 18px;
|
||||
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.colophon-slide dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
|
||||
.colophon-slide dd { margin: 0; color: var(--ink); }
|
||||
.colophon-slide dd em { color: var(--ink-soft); font-style: normal; }
|
||||
.colophon-slide dl + dl { border-top: 1px solid var(--hairline); padding-top: 22px; }
|
||||
|
||||
/* Closing */
|
||||
.closing-slide { justify-content: center; text-align: left; }
|
||||
.closing-slide h2 {
|
||||
font-family: var(--display); font-style: italic; font-weight: 400;
|
||||
font-size: clamp(64px, 8vw, 120px); line-height: 1;
|
||||
letter-spacing: -0.025em; margin: 0; max-width: 18ch;
|
||||
}
|
||||
.closing-slide h2 b { font-weight: 400; font-style: normal; color: var(--ink); }
|
||||
.closing-slide .row { display: flex; gap: 14px; margin-top: 38px; align-items: center; }
|
||||
.ghost-cta {
|
||||
font-family: var(--sans); font-weight: 500; font-size: 14px;
|
||||
padding: 12px 22px; border: 1px solid var(--hairline);
|
||||
border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
|
||||
transition: background 200ms var(--ease);
|
||||
}
|
||||
.ghost-cta.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
|
||||
.ghost-cta:hover { background: var(--paper-2); }
|
||||
.ghost-cta.solid:hover { background: #2A2A28; }
|
||||
|
||||
/* Print / preview */
|
||||
@media print {
|
||||
.slide { height: auto; min-height: 100vh; page-break-after: always; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="deck">
|
||||
|
||||
<!-- 01 · Cover -->
|
||||
<section class="slide cover-slide" data-title="Cover">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">QUARTZ · MEMO 04 · 2026</span></span><span>SERIES A · CONFIDENTIAL</span></div>
|
||||
<span class="stamp">— filed 14 may 2026</span>
|
||||
<h1 class="cover">A quiet workspace, <em>handed</em> to the people who write the manuals.</h1>
|
||||
<h3 class="sub">Series A memo — for an audience of three.</h3>
|
||||
<p class="lede" style="margin-top: 28px;">We are raising six and a half million euros to spend the next eighteen months making documentation feel like writing again. This deck is the short version. The longer version lives in the manual.</p>
|
||||
<span class="signature">Q. Albrecht · CEO · q@quartz.press</span>
|
||||
<span class="pagenum">01 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 02 · Thesis & TOC -->
|
||||
<section class="slide toc-slide" data-title="Thesis & TOC">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">02 · thesis & agenda</span></span><span>q. albrecht</span></div>
|
||||
<div class="columns">
|
||||
<div>
|
||||
<h2 class="title">The world has enough <em>note-taking</em> apps. It has too few <em>writing</em> ones.</h2>
|
||||
<p class="lede" style="margin-top: 28px;">Quartz is a workspace for technical writers — the people who keep the manuals, the changelogs, the runbooks, the policy docs. They write the longest documents in any company and use the worst tools to do it.</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul class="toc">
|
||||
<li><span class="n">01</span><span class="t">Cover</span><span class="pg">p. 01</span></li>
|
||||
<li><span class="n">02</span><span class="t">Thesis & agenda</span><span class="pg">p. 02</span></li>
|
||||
<li><span class="n">03</span><span class="t">Six theses on a <em>quieter</em> doc tool</span><span class="pg">p. 03</span></li>
|
||||
<li><span class="n">04</span><span class="t">Where we are, in numbers</span><span class="pg">p. 04</span></li>
|
||||
<li><span class="n">05</span><span class="t">A line we believe in</span><span class="pg">p. 05</span></li>
|
||||
<li><span class="n">06</span><span class="t">What it isn't / what it is</span><span class="pg">p. 06</span></li>
|
||||
<li><span class="n">07</span><span class="t">Customers, in a row</span><span class="pg">p. 07</span></li>
|
||||
<li><span class="n">08</span><span class="t">ARR — the long way</span><span class="pg">p. 08</span></li>
|
||||
<li><span class="n">09</span><span class="t">Colophon</span><span class="pg">p. 09</span></li>
|
||||
<li><span class="n">10</span><span class="t">The ask</span><span class="pg">p. 10</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">02 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 03 · Manifesto -->
|
||||
<section class="slide manifesto" data-title="Six theses">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">03 · manifest</span></span><span>section · product</span></div>
|
||||
<h2 class="title">Six theses on a <em>quieter</em> doc tool.</h2>
|
||||
<div class="body">
|
||||
<div class="item"><div class="n">01</div><div><h4>The page is the unit, not the block.</h4><p>If the editor reads like a database, the doc reads like one. Quartz writes Markdown to disk and treats the page as a single object — not 142 nested toggles.</p></div><div class="tag">— editor</div></div>
|
||||
<div class="item"><div class="n">02</div><div><h4>Review belongs inline. Not in Slack.</h4><p>Comments anchor to a line, resolve to an audit log, never spawn a thread that nobody can find two weeks later.</p></div><div class="tag">— review</div></div>
|
||||
<div class="item"><div class="n">03</div><div><h4>History is a feature, not a tab.</h4><p>Every save is a commit. Diff two revisions in three keystrokes. Roll back without writing a support ticket.</p></div><div class="tag">— history</div></div>
|
||||
<div class="item"><div class="n">04</div><div><h4>Publishing is not a separate product.</h4><p>The same page is a draft, a review, and a published doc — by changing one field, not by exporting to a third-party site builder.</p></div><div class="tag">— publish</div></div>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">03 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 04 · Bento data slide -->
|
||||
<section class="slide bento-slide" data-title="Where we are">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">04 · in numbers</span></span><span>section · traction</span></div>
|
||||
<h2 class="title">Where we are, in <em>numbers</em>.</h2>
|
||||
<div class="grid">
|
||||
<div class="cell span-3 row-2">
|
||||
<span class="cell-meta">paying teams · live</span>
|
||||
<div class="stat">147<small>teams</small></div>
|
||||
<span class="delta">▲ +38 this quarter · +35%</span>
|
||||
<p style="margin-top: 18px;">Including engineering and policy teams at four publicly-listed European companies. Median seat count is twelve; the long tail is solo writers paying out of pocket.</p>
|
||||
</div>
|
||||
<div class="cell span-3"><span class="cell-meta">arr · annual run rate</span><div class="stat">€842k<small>ARR</small></div><span class="delta">▲ +29% qoq</span></div>
|
||||
<div class="cell span-2"><span class="cell-meta">net retention</span><div class="stat">131<small>%</small></div></div>
|
||||
<div class="cell span-2"><span class="cell-meta">gross margin</span><div class="stat">88<small>%</small></div></div>
|
||||
<div class="cell span-2"><span class="cell-meta">churn · monthly logo</span><div class="stat">0.7<small>%</small></div><span class="delta down">▼ from 1.4% in Jan</span></div>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">04 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 05 · Quote -->
|
||||
<section class="slide quote-slide" data-title="Quote">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">05 · pull quote</span></span><span>customer · pilot 04</span></div>
|
||||
<blockquote>
|
||||
We replaced four tools with Quartz. Confluence for the docs, Notion for the drafts, Google Docs for the review, and Slack for the panic <em>that the doc nobody had read was wrong.</em>
|
||||
</blockquote>
|
||||
<cite>— Hester Naitō, principal engineer · Pilot 04 · Munich</cite>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">05 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 06 · Comparison -->
|
||||
<section class="slide compare-slide" data-title="What it isn't">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">06 · positioning</span></span><span>section · product</span></div>
|
||||
<h2 class="title">What it <em>isn't</em>. What it <em>is</em>.</h2>
|
||||
<div class="columns">
|
||||
<div class="col against">
|
||||
<h5>— Quartz isn't</h5>
|
||||
<p>A wiki you have to maintain a sidebar for.</p>
|
||||
<p>A knowledge graph nobody asked for.</p>
|
||||
<p>An AI that suggests the third callout on the page.</p>
|
||||
<p>A static-site generator with a CMS bolted on.</p>
|
||||
</div>
|
||||
<div class="col for">
|
||||
<h5>— Quartz is</h5>
|
||||
<p>A page. A title. A column measure that the writer can trust.</p>
|
||||
<p>A history of every save and a diff between any two of them.</p>
|
||||
<p>A line of comments anchored to the line they critique, archived when resolved.</p>
|
||||
<p>Markdown out, Markdown in. Always.</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">06 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 07 · Table -->
|
||||
<section class="slide table-slide" data-title="Customers">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">07 · customer index</span></span><span>section · gtm</span></div>
|
||||
<h2 class="title">Customers, in <em>a row</em>.</h2>
|
||||
<div class="data">
|
||||
<div class="head">№</div><div class="head">team</div><div class="head">country</div><div class="head">seats</div><div class="head right">arr</div><div class="head right">since</div>
|
||||
|
||||
<div>01</div><div>Albrecht Press</div><div>FR</div><div>4</div><div class="right num">€ 4,720</div><div class="right num">22.04</div>
|
||||
<div>02</div><div>Naitō Robotics — Eng. docs</div><div>JP / DE</div><div>18</div><div class="right num pos">€ 41,280</div><div class="right num">23.10</div>
|
||||
<div>03</div><div>Andrejević Atelier</div><div>HR</div><div>3</div><div class="right num">€ 3,180</div><div class="right num">24.01</div>
|
||||
<div>04</div><div>Nwachukwu Ltd. — Policy</div><div>NG / UK</div><div>11</div><div class="right num">€ 18,640</div><div class="right num">24.06</div>
|
||||
<div>05</div><div>Arroyave & Bros</div><div>CO</div><div>7</div><div class="right num pos">€ 9,840</div><div class="right num">25.02</div>
|
||||
<div>06</div><div>Quentin Veterinary, S.A.</div><div>FR</div><div>2</div><div class="right num neg">€ 1,920</div><div class="right num">25.04</div>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">07 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 08 · Chart -->
|
||||
<section class="slide chart-slide" data-title="ARR">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">08 · arr · the long way</span></span><span>section · finance</span></div>
|
||||
<h2 class="title">ARR — <em>the long way</em>.</h2>
|
||||
<div class="chart">
|
||||
<span class="label">Q1 / 2024</span><div class="bar" style="--w: 9%;"></div><span class="v">€ 78k</span>
|
||||
<span class="label">Q2 / 2024</span><div class="bar" style="--w: 14%;"></div><span class="v">€ 121k</span>
|
||||
<span class="label">Q3 / 2024</span><div class="bar" style="--w: 22%;"></div><span class="v">€ 187k</span>
|
||||
<span class="label">Q4 / 2024</span><div class="bar" style="--w: 32%;"></div><span class="v">€ 274k</span>
|
||||
<span class="label">Q1 / 2025</span><div class="bar" style="--w: 44%;"></div><span class="v">€ 372k</span>
|
||||
<span class="label">Q2 / 2025</span><div class="bar" style="--w: 58%;"></div><span class="v">€ 491k</span>
|
||||
<span class="label">Q3 / 2025</span><div class="bar" style="--w: 71%;"></div><span class="v">€ 603k</span>
|
||||
<span class="label">Q4 / 2025</span><div class="bar" style="--w: 83%;"></div><span class="v">€ 706k</span>
|
||||
<span class="label">Q1 / 2026</span><div class="bar accent" style="--w: 99%;"></div><span class="v">€ 842k</span>
|
||||
</div>
|
||||
<p class="lede" style="margin-top: 56px; max-width: 60ch; font-size: 15px;">
|
||||
No paid acquisition since Q3 2024. Growth comes from word-of-mouth between docs teams; ARR adds an Albrecht Press every five working days.
|
||||
</p>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">08 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 09 · Colophon -->
|
||||
<section class="slide colophon-slide" data-title="Colophon">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">09 · colophon</span></span><span>section · team</span></div>
|
||||
<h2 class="title">A small press. A long manual.</h2>
|
||||
<div class="grid">
|
||||
<dl>
|
||||
<dt>founder</dt><dd>Quentin Albrecht <em>· prev. lead writer, IETF working group on documentation tooling</em></dd>
|
||||
<dt>co-founder</dt><dd>Hester Naitō <em>· prev. principal engineer, Naitō Robotics</em></dd>
|
||||
<dt>head of design</dt><dd>Margerit Andrejević <em>· prev. typographer, Atelier Nord-Ouest</em></dd>
|
||||
<dt>policy / legal</dt><dd>Pemberton Nwachukwu <em>· prev. counsel, IBM Africa</em></dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>set in</dt><dd>Instrument Serif · Inter Tight · JetBrains Mono</dd>
|
||||
<dt>press</dt><dd>Atelier Nord-Ouest · Bordeaux</dd>
|
||||
<dt>edition</dt><dd>04 · v 2026.05 · 2,400 numbered</dd>
|
||||
<dt>contact</dt><dd>q@quartz.press · +33 (0)5 56 21 47 88</dd>
|
||||
<dt>auditor</dt><dd>BDO France — Q1 2026 review complete</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">09 / 10</span>
|
||||
</section>
|
||||
|
||||
<!-- 10 · Closing -->
|
||||
<section class="slide closing-slide" data-title="The ask">
|
||||
<div class="meta-row"><span class="left"><span class="dot"></span><span class="num">10 · the ask</span></span><span>series a · 2026</span></div>
|
||||
<h2><b>Six and a half million euros</b>, <em>to spend the next eighteen months making documentation feel like writing again.</em></h2>
|
||||
<p class="lede" style="margin-top: 32px; max-width: 64ch;">€2.4M to ship the publishing pipeline. €1.8M to grow a sales team of four. €1.4M to extend runway to thirty months. €0.9M to ratify our SOC 2 and translate the manual.</p>
|
||||
<div class="row">
|
||||
<button class="ghost-cta solid">Open the manual</button>
|
||||
<button class="ghost-cta">q@quartz.press</button>
|
||||
<span style="font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-left: auto;">— end · 2026.05.14</span>
|
||||
</div>
|
||||
<hr class="footrule">
|
||||
<span class="pagenum">10 / 10</span>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
61
skills/web-prototype-taste-brutalist/SKILL.md
Normal file
61
skills/web-prototype-taste-brutalist/SKILL.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
name: web-prototype-taste-brutalist
|
||||
description: Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill `brutalist-skill` (Swiss Industrial Print mode).
|
||||
---
|
||||
|
||||
# Web Prototype — Industrial Brutalist (Swiss Print)
|
||||
|
||||
For briefs that ask for "editorial", "newspaper", "agency portfolio", "Swiss design", "manifesto site", or anywhere the goal is to project rigor and physicality rather than friendliness. This skill commits to ONE substrate (light Swiss print) — never mix with the dark CRT mode in the same artifact.
|
||||
|
||||
## Source
|
||||
|
||||
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/brutalist-skill/SKILL.md` §2.1 (Swiss Industrial Print). For decks that lean into the dark CRT mode, see `skills/html-ppt-taste-brutalist/`.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Substrate:** unbleached newsprint `#F4F4F0` or `#EAE8E3`. Foreground `#050505` carbon ink.
|
||||
- **Accent:** ONE color — aviation/hazard red `#E61919`. Used on dividing rules, strikes, alerts. Never as a fill on large surfaces.
|
||||
- **Display type:** heavy neo-grotesque (Archivo Black / Inter ExtraBold/Black / Neue Haas Grotesk Black). Fluid scale `clamp(4rem, 10vw, 15rem)`. Tracking `-0.04em`. Leading `0.88`. Uppercase only.
|
||||
- **Micro type:** monospace (JetBrains Mono / IBM Plex Mono). Fixed `10–13px`. Tracking `0.1em`. Uppercase. Used for navigation, metadata, captions, coordinates.
|
||||
- **Geometry:** `border-radius: 0` everywhere. 90° corners only.
|
||||
- **Grid:** visible CSS grid with `gap: 1px` over an ink-colored background to render mathematically perfect 1px dividers.
|
||||
- **Negative space:** asymmetric — hero has a viewport-bleeding numeral or letterform; data clusters are tightly packed.
|
||||
- **ASCII syntax:** decorate sections with `[ LABEL ]`, `>>>`, `///`, registration `®` / trademark `™` as structural ornament.
|
||||
|
||||
## Banned
|
||||
|
||||
- `border-radius` above 0.
|
||||
- Drop shadows, gradients, glassmorphism, glows.
|
||||
- Centred body text. Justify or hard-left only.
|
||||
- Color other than ink, paper, and the hazard red.
|
||||
- Sans-serif body fonts other than Inter/Archivo/Plex/Mono. No "premium" grotesques here — this aesthetic predates them.
|
||||
- Curved or "soft" iconography.
|
||||
- AI cliché copy. Use clipped, declarative print-magazine voice.
|
||||
|
||||
## Required components
|
||||
|
||||
- **Top register strip:** monospace meta band — issue, date, coordinates — running edge to edge with hairline rules above and below.
|
||||
- **Hero:** giant numeral or single word at viewport-bleeding scale on the left; right column packs three or four monospace metadata blocks.
|
||||
- **Manifest section:** numbered theses (`01.` / `02.`) with hairline `<hr>` between each, hard-left aligned.
|
||||
- **Data table or index** rendered with `display: grid; gap: 1px` on an ink background.
|
||||
- **Specimen block:** typography demo — show the family/weight/case at three scales.
|
||||
- **Closing colophon:** monospace block stating press, paper stock, edition, set type.
|
||||
|
||||
## Motion
|
||||
|
||||
This aesthetic is mechanical, not animated. Use motion only as a precision mechanism:
|
||||
- `IntersectionObserver` reveal: instant `opacity 0 → 1`, no translate/blur.
|
||||
- Optional ticker/marquee for the top register strip at constant speed.
|
||||
- `:active` on links: invert ink/paper instantly. No transitions over `120ms`.
|
||||
- Never animate page-level layout properties.
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] Substrate is newsprint, foreground is carbon ink, only accent is hazard red
|
||||
- [ ] All `border-radius` is `0`
|
||||
- [ ] Display uses heavy grotesque at viewport-bleeding scale (≥ `8vw`)
|
||||
- [ ] Micro UI uppercase monospace at fixed `10–13px`, `letter-spacing: 0.1em`
|
||||
- [ ] At least one `display: grid; gap: 1px` ink-background module
|
||||
- [ ] ASCII syntax decoration appears at least three times (`[ ... ]`, `>>>`, `///`)
|
||||
- [ ] Numeric data uses tabular-nums + monospace — no proportional figures
|
||||
- [ ] No emojis, no curves, no gradients, no shadow effects
|
||||
449
skills/web-prototype-taste-brutalist/example.html
Normal file
449
skills/web-prototype-taste-brutalist/example.html
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>FIELD UNIT 04 // INSTRUMENT FOR THE LEGIBLE WEB</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--paper: #F4F4F0;
|
||||
--paper-2: #EAE8E3;
|
||||
--ink: #060606;
|
||||
--ink-soft: #1A1A18;
|
||||
--hazard: #E61919;
|
||||
--rule: #060606;
|
||||
--display: 'Archivo Black', 'Neue Haas Grotesk', 'Inter', sans-serif;
|
||||
--sans: 'Archivo', 'Inter', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--paper);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 15px;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "tnum", "ss01";
|
||||
}
|
||||
a { color: inherit; text-decoration: none; }
|
||||
a:hover { background: var(--ink); color: var(--paper); }
|
||||
|
||||
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
|
||||
.mono-md { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; }
|
||||
.red { color: var(--hazard); }
|
||||
.ink { color: var(--ink); }
|
||||
|
||||
hr.rule { border: 0; border-top: 1px solid var(--ink); margin: 0; }
|
||||
hr.thick { border: 0; border-top: 4px solid var(--ink); margin: 0; }
|
||||
hr.hazard { border: 0; border-top: 1px solid var(--hazard); margin: 0; }
|
||||
|
||||
/* ========= TOP REGISTER STRIP ========= */
|
||||
.strip {
|
||||
border-top: 1px solid var(--ink);
|
||||
border-bottom: 1px solid var(--ink);
|
||||
padding: 8px 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
gap: 22px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 11px;
|
||||
}
|
||||
.strip > div { display: flex; gap: 8px; align-items: baseline; white-space: nowrap; overflow: hidden; }
|
||||
.strip b { color: var(--ink); }
|
||||
.strip span { color: var(--ink-soft); }
|
||||
|
||||
/* ========= NAV ========= */
|
||||
.nav {
|
||||
padding: 14px 22px;
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
border-bottom: 4px solid var(--ink);
|
||||
}
|
||||
.brand {
|
||||
font-family: var(--display); font-size: 22px; letter-spacing: -0.04em; line-height: 1; text-transform: uppercase;
|
||||
}
|
||||
.brand sup { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; font-weight: 400; vertical-align: top; margin-left: 4px; color: var(--hazard); }
|
||||
.nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
|
||||
.nav ul a {
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
padding: 4px 7px; border: 1px solid var(--ink);
|
||||
}
|
||||
.nav .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
|
||||
|
||||
/* ========= HERO ========= */
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
.hero .num {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(220px, 36vw, 540px);
|
||||
line-height: 0.78;
|
||||
letter-spacing: -0.07em;
|
||||
padding: 24px 0 0 22px;
|
||||
color: var(--ink);
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.hero .num::after {
|
||||
content: '®';
|
||||
font-size: 0.18em; letter-spacing: 0; vertical-align: top;
|
||||
color: var(--hazard); margin-left: 6px;
|
||||
}
|
||||
.hero .meta-col {
|
||||
border-left: 1px solid var(--ink);
|
||||
padding: 22px;
|
||||
display: flex; flex-direction: column; gap: 22px;
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.hero .meta-col h2 {
|
||||
font-family: var(--display); font-size: clamp(38px, 4.5vw, 64px); line-height: 0.9; letter-spacing: -0.03em;
|
||||
text-transform: uppercase; margin: 0;
|
||||
}
|
||||
.hero .meta-col p { font-family: var(--sans); font-size: 14px; line-height: 1.55; margin: 0; max-width: 38ch; text-align: justify; }
|
||||
.meta-row { display: grid; grid-template-columns: 8ch 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.meta-row b { color: var(--hazard); font-weight: 500; }
|
||||
|
||||
.ascii-frame {
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 6px 0; color: var(--ink);
|
||||
}
|
||||
.ascii-frame::before { content: '['; color: var(--hazard); }
|
||||
.ascii-frame::after { content: ']'; color: var(--hazard); }
|
||||
|
||||
/* ========= ABSTRACT / LEAD ========= */
|
||||
.abstract {
|
||||
padding: 56px 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 8ch 1fr 30ch;
|
||||
gap: 32px;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
.abstract .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hazard); padding-top: 6px; }
|
||||
.abstract .body {
|
||||
font-family: var(--sans); font-size: 22px; line-height: 1.4; letter-spacing: -0.012em;
|
||||
max-width: 50ch;
|
||||
}
|
||||
.abstract .body span.drop {
|
||||
font-family: var(--display); font-size: 64px; line-height: 0.85; float: left;
|
||||
margin: 4px 10px -4px 0; letter-spacing: -0.04em; text-transform: uppercase;
|
||||
}
|
||||
.abstract .credits { font-family: var(--mono); font-size: 10.5px; line-height: 1.7; text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.abstract .credits hr { margin: 8px 0; border: 0; border-top: 1px solid var(--ink); }
|
||||
.abstract .credits b { color: var(--hazard); font-weight: 500; }
|
||||
|
||||
/* ========= MANIFEST (numbered theses) ========= */
|
||||
.manifest { padding: 56px 22px; border-bottom: 4px solid var(--ink); }
|
||||
.manifest h2 {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(56px, 8vw, 120px);
|
||||
line-height: 0.86;
|
||||
letter-spacing: -0.05em;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 28px;
|
||||
max-width: 16ch;
|
||||
}
|
||||
.manifest h2 em { font-style: normal; color: var(--hazard); }
|
||||
.thesis-list { display: grid; grid-template-columns: 1fr; }
|
||||
.thesis {
|
||||
display: grid;
|
||||
grid-template-columns: 6ch 1fr 14ch;
|
||||
gap: 32px;
|
||||
padding: 22px 0;
|
||||
border-top: 1px solid var(--ink);
|
||||
align-items: baseline;
|
||||
}
|
||||
.thesis:last-child { border-bottom: 1px solid var(--ink); }
|
||||
.thesis .num {
|
||||
font-family: var(--display); font-size: 44px; line-height: 0.9; letter-spacing: -0.04em;
|
||||
}
|
||||
.thesis .num small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; vertical-align: top; }
|
||||
.thesis h3 {
|
||||
font-family: var(--display); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.05;
|
||||
letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 8px; max-width: 28ch;
|
||||
}
|
||||
.thesis p { margin: 0; font-size: 14px; line-height: 1.55; max-width: 56ch; color: var(--ink-soft); }
|
||||
.thesis .tag {
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
text-align: right; color: var(--hazard);
|
||||
}
|
||||
|
||||
/* ========= INDEX (1px grid) ========= */
|
||||
.index-section { border-bottom: 1px solid var(--ink); }
|
||||
.index-head {
|
||||
padding: 22px;
|
||||
display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
.index-head h2 { font-family: var(--display); font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; text-transform: uppercase; line-height: 1; margin: 0; }
|
||||
.index-head .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 4ch 1.3fr 1fr 1fr 0.8fr 0.8fr;
|
||||
gap: 1px;
|
||||
background: var(--ink);
|
||||
font-family: var(--mono);
|
||||
font-size: 11.5px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.index-grid > div { background: var(--paper); padding: 12px 14px; }
|
||||
.index-grid .header { background: var(--ink); color: var(--paper); font-weight: 500; }
|
||||
.index-grid .right { text-align: right; }
|
||||
.index-grid .red { color: var(--hazard); }
|
||||
|
||||
/* ========= SPECIMEN ========= */
|
||||
.specimen { border-bottom: 4px solid var(--ink); padding: 56px 22px; }
|
||||
.specimen-head { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
|
||||
.specimen-head h2 { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; line-height: 1; }
|
||||
.specimen-head .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
|
||||
.spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 12ch 1fr 12ch;
|
||||
align-items: baseline;
|
||||
gap: 22px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--ink);
|
||||
}
|
||||
.spec-row .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hazard); }
|
||||
.spec-row .glyph { font-family: var(--display); letter-spacing: -0.04em; line-height: 0.95; text-transform: uppercase; }
|
||||
.spec-row .glyph.s1 { font-size: clamp(36px, 5vw, 64px); }
|
||||
.spec-row .glyph.s2 { font-size: clamp(60px, 9vw, 120px); }
|
||||
.spec-row .glyph.s3 { font-size: clamp(120px, 16vw, 220px); }
|
||||
.spec-row .stats { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: right; line-height: 1.6; }
|
||||
|
||||
/* ========= ALERT BLOCK ========= */
|
||||
.alert {
|
||||
border-bottom: 1px solid var(--ink);
|
||||
padding: 22px;
|
||||
display: grid;
|
||||
grid-template-columns: 18ch 1fr;
|
||||
gap: 28px;
|
||||
background:
|
||||
repeating-linear-gradient(135deg, transparent 0 14px, rgba(230,25,25,0.06) 14px 28px);
|
||||
}
|
||||
.alert .label { font-family: var(--display); font-size: 28px; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--hazard); border: 2px solid var(--hazard); padding: 10px 12px; align-self: start; }
|
||||
.alert .body { font-family: var(--sans); font-size: 15.5px; line-height: 1.5; max-width: 64ch; }
|
||||
.alert .body strong { background: var(--ink); color: var(--paper); padding: 0 4px; font-weight: 500; }
|
||||
|
||||
/* ========= COLOPHON ========= */
|
||||
.colophon {
|
||||
padding: 32px 22px 36px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.85;
|
||||
border-top: 1px solid var(--ink);
|
||||
}
|
||||
.colophon dl { display: grid; grid-template-columns: 16ch 1fr; gap: 6px 16px; margin: 0; }
|
||||
.colophon dt { color: var(--hazard); }
|
||||
.colophon dd { margin: 0; }
|
||||
.colophon .credit { font-family: var(--display); font-size: 38px; letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; color: var(--ink); }
|
||||
.colophon .credit small { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; margin-top: 8px; color: var(--ink-soft); }
|
||||
|
||||
/* ========= RESPONSIVE ========= */
|
||||
@media (max-width: 880px) {
|
||||
.strip { grid-template-columns: 1fr 1fr; gap: 8px 22px; }
|
||||
.strip > div:nth-child(n+5) { display: none; }
|
||||
.nav ul { display: none; }
|
||||
.hero { grid-template-columns: 1fr; }
|
||||
.hero .num { font-size: 36vw; }
|
||||
.hero .meta-col { border-left: none; border-top: 1px solid var(--ink); }
|
||||
.abstract { grid-template-columns: 1fr; }
|
||||
.thesis { grid-template-columns: 6ch 1fr; }
|
||||
.thesis .tag { display: none; }
|
||||
.index-grid { grid-template-columns: 4ch 1fr 1fr; font-size: 10px; }
|
||||
.index-grid > div:nth-child(6n+4),
|
||||
.index-grid > div:nth-child(6n+5),
|
||||
.index-grid > div:nth-child(6n) { display: none; }
|
||||
.alert { grid-template-columns: 1fr; }
|
||||
.colophon { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="strip">
|
||||
<div><b>VOL.</b><span>04 / FIELD UNIT</span></div>
|
||||
<div><b>ISS.</b><span>2026 · MAY · QRTLY</span></div>
|
||||
<div><b>LAT.</b><span>44.8404° N</span></div>
|
||||
<div><b>LON.</b><span>−0.5805° W</span></div>
|
||||
<div><b>STATUS</b><span class="red">⬤ TRANSMITTING</span></div>
|
||||
</div>
|
||||
|
||||
<header class="nav" data-od-id="topnav">
|
||||
<span class="brand">FIELD/UNIT/04<sup>® EST 2026</sup></span>
|
||||
<ul>
|
||||
<li><a href="#abstract">[ ABSTRACT ]</a></li>
|
||||
<li><a href="#manifest">[ MANIFEST ]</a></li>
|
||||
<li><a href="#index">[ INDEX ]</a></li>
|
||||
<li><a href="#specimen">[ SPECIMEN ]</a></li>
|
||||
</ul>
|
||||
<span class="meta">FILE NO. <span class="red">04 / 0731</span></span>
|
||||
</header>
|
||||
|
||||
<section class="hero" data-od-id="hero">
|
||||
<div class="num">04</div>
|
||||
<div class="meta-col">
|
||||
<span class="ascii-frame">PRINTED MATTER · FOR THE WEB</span>
|
||||
<h2>Instrument for the legible web<span class="red">.</span></h2>
|
||||
<p>Field Unit 04 is a quarterly instrument: thirty-two pages of writing, type, infrastructure photography, and notes from the workshops of practitioners who would rather measure twice than ship a parallax. Issued in print & on this surface — set in Archivo Black & JetBrains Mono.</p>
|
||||
<div>
|
||||
<div class="meta-row"><b>EDITOR</b><span>Q. ALBRECHT</span></div>
|
||||
<div class="meta-row"><b>PRESS</b><span>ATELIER NORD-OUEST</span></div>
|
||||
<div class="meta-row"><b>STOCK</b><span>FEDRIGONI ARENA · 120GSM</span></div>
|
||||
<div class="meta-row"><b>BIND</b><span>SECTION-SEWN · OPEN SPINE</span></div>
|
||||
<div class="meta-row"><b>EDITION</b><span>2,400 / NUMBERED</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="abstract" id="abstract" data-od-id="abstract">
|
||||
<div class="label">[ ABSTRACT ]<br>///</div>
|
||||
<div class="body">
|
||||
<span class="drop">T</span>he web has stopped reading like a document and started reading like a billboard. This issue is a small protest — practical, technical, and stubbornly print-shaped — collecting fourteen pieces by writers, typographers, and engineers who still believe a page can hold a line of thought without an animation tax.
|
||||
</div>
|
||||
<div class="credits">
|
||||
<hr>
|
||||
<b>CONTRIBUTORS</b><br>
|
||||
Q. ALBRECHT (FR)<br>
|
||||
H. NAITŌ (JP)<br>
|
||||
M. ANDREJEVIĆ (HR)<br>
|
||||
P. NWACHUKWU (NG)<br>
|
||||
L. ARROYAVE (CO)<br>
|
||||
<hr>
|
||||
<b>FILED UNDER</b><br>
|
||||
Typography · Print<br>
|
||||
Web · Editorial<br>
|
||||
Infrastructure
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="manifest" id="manifest" data-od-id="manifest">
|
||||
<h2>Six theses on a <em>quieter</em> web<span class="red">.</span></h2>
|
||||
<div class="thesis-list">
|
||||
<div class="thesis">
|
||||
<div class="num">01<small>/06</small></div>
|
||||
<div>
|
||||
<h3>The page is not a stage. It is a desk.</h3>
|
||||
<p>A reader sits at it. They do not need a curtain. They need a margin, a column measure they trust, and the dignity of being trusted with a paragraph longer than nine words.</p>
|
||||
</div>
|
||||
<div class="tag">>>> TYPOGRAPHY</div>
|
||||
</div>
|
||||
<div class="thesis">
|
||||
<div class="num">02<small>/06</small></div>
|
||||
<div>
|
||||
<h3>White space is not waste. It is the wage of attention.</h3>
|
||||
<p>Compress everything into a viewport and the reader pays in tab-switches. Build the page like a book and they pay in time, which is what you wanted.</p>
|
||||
</div>
|
||||
<div class="tag">>>> RHYTHM</div>
|
||||
</div>
|
||||
<div class="thesis">
|
||||
<div class="num">03<small>/06</small></div>
|
||||
<div>
|
||||
<h3>If the type is not the strongest signal on the page, the page is wrong.</h3>
|
||||
<p>Image, motion, gradient, glow — all answer to the line. If the line cannot survive a 320-pixel screen at noon, neither can the rest of the project.</p>
|
||||
</div>
|
||||
<div class="tag">>>> HIERARCHY</div>
|
||||
</div>
|
||||
<div class="thesis">
|
||||
<div class="num">04<small>/06</small></div>
|
||||
<div>
|
||||
<h3>A grid is a contract, not a costume.</h3>
|
||||
<p>You either keep the contract — or you break it once, deliberately, with the loudest line on the page. Drift through it and the reader stops believing in the structure.</p>
|
||||
</div>
|
||||
<div class="tag">>>> STRUCTURE</div>
|
||||
</div>
|
||||
<div class="thesis">
|
||||
<div class="num">05<small>/06</small></div>
|
||||
<div>
|
||||
<h3>Motion is a citation, not a chorus.</h3>
|
||||
<p>If a thing must move, it must move because the body of the work calls it forth. Otherwise it is the equivalent of underlining every word — a defence against being read.</p>
|
||||
</div>
|
||||
<div class="tag">>>> MOTION</div>
|
||||
</div>
|
||||
<div class="thesis">
|
||||
<div class="num">06<small>/06</small></div>
|
||||
<div>
|
||||
<h3>The button is the only ornament you are allowed.</h3>
|
||||
<p>Make it weigh something. Make it the thing the reader reaches for. Then leave the rest of the page alone.</p>
|
||||
</div>
|
||||
<div class="tag">>>> COMPONENTS</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="index-section" id="index" data-od-id="index">
|
||||
<div class="index-head">
|
||||
<h2>Index of issue 04 <span class="red">///</span></h2>
|
||||
<span class="meta">14 ENTRIES · PP. 8 — 96</span>
|
||||
</div>
|
||||
<div class="index-grid">
|
||||
<div class="header">№</div><div class="header">TITLE</div><div class="header">AUTHOR</div><div class="header">DEPT.</div><div class="header right">PP.</div><div class="header right">TIME</div>
|
||||
|
||||
<div>01</div><div>SET IN COLD METAL</div><div>H. Naitō</div><div class="red">TYPE</div><div class="right">8 — 14</div><div class="right">12 MIN</div>
|
||||
<div>02</div><div>A YEAR WITHOUT A FRAMEWORK</div><div>Q. Albrecht</div><div>WEB</div><div class="right">15 — 23</div><div class="right">18 MIN</div>
|
||||
<div>03</div><div>NOTES FROM A LETTERPRESS</div><div>M. Andrejević</div><div class="red">TYPE</div><div class="right">24 — 31</div><div class="right">14 MIN</div>
|
||||
<div>04</div><div>THE LATENCY DIET</div><div>P. Nwachukwu</div><div>INFRA</div><div class="right">32 — 40</div><div class="right">22 MIN</div>
|
||||
<div>05</div><div>EVERY PAGE IS A LETTER</div><div>L. Arroyave</div><div class="red">EDIT</div><div class="right">41 — 47</div><div class="right">11 MIN</div>
|
||||
<div>06</div><div>FILE FORMATS AS POLITICS</div><div>Q. Albrecht</div><div>INFRA</div><div class="right">48 — 56</div><div class="right">19 MIN</div>
|
||||
<div>07</div><div>THE COLUMN MEASURE</div><div>H. Naitō</div><div class="red">TYPE</div><div class="right">57 — 60</div><div class="right">7 MIN</div>
|
||||
<div>08</div><div>WORKING IN PUBLIC, QUIETLY</div><div>L. Arroyave</div><div class="red">EDIT</div><div class="right">61 — 68</div><div class="right">15 MIN</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="specimen" id="specimen" data-od-id="specimen">
|
||||
<div class="specimen-head">
|
||||
<h2>Specimen ///</h2>
|
||||
<span class="meta">ARCHIVO BLACK · 1 STYLE · 1 WEIGHT</span>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<span class="label">36 / 64</span>
|
||||
<div class="glyph s1">A QUIET PAGE IS A LOUD ARGUMENT.</div>
|
||||
<div class="stats">tracking −0.04em<br>leading 0.95<br>case upper</div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<span class="label">60 / 120</span>
|
||||
<div class="glyph s2">PRINT THE WEB.</div>
|
||||
<div class="stats">tracking −0.05em<br>leading 0.88<br>case upper</div>
|
||||
</div>
|
||||
<div class="spec-row">
|
||||
<span class="label">120 / 220</span>
|
||||
<div class="glyph s3">04®</div>
|
||||
<div class="stats">tracking −0.06em<br>leading 0.78<br>register glyph</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="alert" data-od-id="alert">
|
||||
<div class="label">!! BUY<br>ISSUE 04</div>
|
||||
<div class="body">
|
||||
Issue 04 ships from the bindery on <strong>14 JUNE 2026</strong>. Pre-order at <strong>€18 / shipped</strong>, or subscribe to the four-issue ring at <strong>€60 / year</strong>. Pre-orders include the loose folio insert printed risograph, a 600-mm fold-out specimen poster, and the digital edition of every back-issue rendered to the same column measure. <span class="red">>>> PRE-ORDER · SHIP 14.JUN</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="colophon" data-od-id="colophon">
|
||||
<dl>
|
||||
<dt>SET IN</dt><dd>Archivo Black · JetBrains Mono · Archivo</dd>
|
||||
<dt>PRESS</dt><dd>Atelier Nord-Ouest · Bordeaux</dd>
|
||||
<dt>PAPER</dt><dd>Fedrigoni Arena Smooth Extra White 120gsm</dd>
|
||||
<dt>BINDING</dt><dd>Section-sewn · open spine · 32pp</dd>
|
||||
<dt>EDITION</dt><dd>2,400 numbered · 14 lettered AP</dd>
|
||||
<dt>RIGHTS</dt><dd>CC BY-NC-ND 4.0 · except contributor work</dd>
|
||||
</dl>
|
||||
<div>
|
||||
<div class="credit">FIELD UNIT 04<small>® / SET 2026 · BORDEAUX · FR / © FIELD UNIT EDITIONS</small></div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
60
skills/web-prototype-taste-editorial/SKILL.md
Normal file
60
skills/web-prototype-taste-editorial/SKILL.md
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
---
|
||||
name: web-prototype-taste-editorial
|
||||
description: Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill `minimalist-skill`.
|
||||
---
|
||||
|
||||
# Web Prototype — Editorial Minimalism
|
||||
|
||||
A single-page web prototype shaped like a Notion/Linear marketing site or premium documentation surface. Use when the brief asks for "clean", "editorial", "premium SaaS", "documentation", or "knowledge product".
|
||||
|
||||
## Source
|
||||
|
||||
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/minimalist-skill/SKILL.md` and the spatial-rhythm rules in `skills/taste-skill/SKILL.md`. See `example.html` in this directory for a fully-realized template.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Canvas:** warm off-white (`#FBFBFA` or `#F7F6F3`), never pure white.
|
||||
- **Foreground:** off-black `#111111`, secondary text `#787774`. Never `#000000`.
|
||||
- **Borders:** `1px solid #EAEAEA` only. No drop shadows above `0 1px 2px rgba(0,0,0,0.04)`.
|
||||
- **Type pairing:** display in editorial serif (Instrument Serif / Newsreader / Lyon), body in grotesque (Geist / Switzer / SF Pro), monospace for meta/keystrokes (Geist Mono / JetBrains Mono).
|
||||
- **Display tracking:** `letter-spacing: -0.025em`, `line-height: 1.05`.
|
||||
- **Pastel chips only:** muted backgrounds (`#FDEBEC`, `#E1F3FE`, `#EDF3EC`, `#FBF3DB`) for tags/badges. Never as section backgrounds.
|
||||
- **Containers:** `border-radius: 8–12px` max. No pill containers, no `rounded-full` on cards.
|
||||
- **Section padding:** `py-24` minimum, `py-32` for hero.
|
||||
|
||||
## Banned
|
||||
|
||||
- Inter, Roboto, Open Sans (use Geist / Switzer / SF Pro).
|
||||
- Generic Lucide thin-stroke icons (use Phosphor Bold or Radix).
|
||||
- Gradients, neon, glassmorphism beyond a subtle navbar blur.
|
||||
- Drop shadows above `shadow-sm`. No glows.
|
||||
- Generic placeholder names (John Doe / Acme / Lorem). Use specific contextual content.
|
||||
- AI copy clichés: "Elevate", "Seamless", "Unleash", "Next-Gen".
|
||||
- Pure black `#000000`.
|
||||
- Centered hero H1 over a dark image.
|
||||
|
||||
## Required components
|
||||
|
||||
- Sticky pill navbar (translucent off-white, `backdrop-blur-md`, hairline border).
|
||||
- Asymmetric hero: serif display left-aligned, eyebrow tag above, lede paragraph at `max-w-[52ch]`.
|
||||
- Bento feature grid with **uneven row heights** and visible `1px` dividers — never 3 equal cards.
|
||||
- A "what it isn't" or contrast block separated by `border-t` only, no card.
|
||||
- Pricing or signup band with one accent CTA.
|
||||
- Footer: monospace metadata, single hairline above.
|
||||
|
||||
## Motion (subtle only)
|
||||
|
||||
- Scroll entry: `translateY(12px) → 0` + `opacity 0 → 1` over `600ms cubic-bezier(0.16, 1, 0.3, 1)`. `IntersectionObserver` only.
|
||||
- Hover lift on cards: `box-shadow` from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`.
|
||||
- Stagger lists by `--index * 80ms`.
|
||||
- Animate only `transform` and `opacity`.
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] Serif display + grotesque body pairing present
|
||||
- [ ] Canvas is warm off-white, foreground is off-black
|
||||
- [ ] All cards/dividers use `1px solid #EAEAEA`
|
||||
- [ ] At least one asymmetric layout (split, eyebrow tag, uneven bento)
|
||||
- [ ] Pastel chips used only for tags, never as block backgrounds
|
||||
- [ ] Section padding ≥ `py-24`
|
||||
- [ ] No emojis, no banned fonts, no AI clichés
|
||||
392
skills/web-prototype-taste-editorial/example.html
Normal file
392
skills/web-prototype-taste-editorial/example.html
Normal file
|
|
@ -0,0 +1,392 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Quartz — quiet workspace for technical writers</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--canvas: #FBFBFA;
|
||||
--surface: #FFFFFF;
|
||||
--ink: #1A1A19;
|
||||
--muted: #787774;
|
||||
--hairline: #EAEAEA;
|
||||
--pale-red-bg: #FDEBEC; --pale-red-fg: #9F2F2D;
|
||||
--pale-blue-bg: #E1F3FE; --pale-blue-fg: #1F6C9F;
|
||||
--pale-green-bg: #EDF3EC; --pale-green-fg: #346538;
|
||||
--pale-yellow-bg: #FBF3DB; --pale-yellow-fg: #956400;
|
||||
--display: 'Instrument Serif', 'Newsreader', 'Lyon Text', Georgia, serif;
|
||||
--sans: 'Inter Tight', 'Switzer', 'SF Pro Display', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
|
||||
|
||||
/* ============ NAV (floating pill) ============ */
|
||||
.nav {
|
||||
position: sticky; top: 16px; z-index: 50;
|
||||
margin: 16px auto 0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
max-width: 920px;
|
||||
padding: 10px 14px 10px 20px;
|
||||
background: rgba(251,251,250,0.78);
|
||||
backdrop-filter: saturate(140%) blur(16px);
|
||||
-webkit-backdrop-filter: saturate(140%) blur(16px);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 999px;
|
||||
}
|
||||
.nav .brand { font-family: var(--display); font-size: 22px; letter-spacing: -0.01em; }
|
||||
.nav .brand em { font-style: italic; color: var(--muted); }
|
||||
.nav ul { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
|
||||
.nav ul a { color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; }
|
||||
.nav ul a:hover { color: var(--muted); }
|
||||
.nav .cta {
|
||||
font: 500 13px/1 var(--sans);
|
||||
padding: 9px 14px; border-radius: 999px;
|
||||
background: var(--ink); color: var(--canvas);
|
||||
border: 1px solid var(--ink);
|
||||
transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
|
||||
}
|
||||
.nav .cta:active { transform: scale(0.98); }
|
||||
|
||||
/* ============ HERO (asymmetric, eyebrow + serif display) ============ */
|
||||
.hero { padding: 96px 0 80px; }
|
||||
.eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--muted);
|
||||
padding: 5px 11px; border: 1px solid var(--hairline);
|
||||
border-radius: 999px; background: var(--surface);
|
||||
}
|
||||
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--pale-green-fg); }
|
||||
.hero h1 {
|
||||
font-family: var(--display);
|
||||
font-size: clamp(48px, 7vw, 96px);
|
||||
line-height: 1.02;
|
||||
letter-spacing: -0.025em;
|
||||
margin: 22px 0 0;
|
||||
max-width: 16ch;
|
||||
font-weight: 400;
|
||||
}
|
||||
.hero h1 em { font-style: italic; color: var(--muted); }
|
||||
.hero .lede {
|
||||
font-size: 18.5px; color: var(--muted);
|
||||
max-width: 52ch; margin: 24px 0 36px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.hero .actions { display: flex; gap: 12px; align-items: center; }
|
||||
.btn {
|
||||
font: 500 14px/1 var(--sans);
|
||||
padding: 13px 22px; border-radius: 8px;
|
||||
cursor: pointer; transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease;
|
||||
}
|
||||
.btn-primary { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
|
||||
.btn-primary:hover { background: #2A2A28; }
|
||||
.btn-primary:active { transform: scale(0.98); }
|
||||
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
|
||||
.btn-link { background: transparent; border: none; color: var(--ink); padding: 13px 0; font: 500 14px/1 var(--sans); cursor: pointer; }
|
||||
.btn-link::after { content: ' →'; color: var(--muted); }
|
||||
|
||||
.keystroke {
|
||||
font-family: var(--mono); font-size: 11.5px;
|
||||
padding: 3px 7px; border: 1px solid var(--hairline);
|
||||
border-radius: 4px; background: var(--surface);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ============ BENTO (uneven grid, hairline only) ============ */
|
||||
.bento {
|
||||
padding: 72px 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.bento-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-auto-rows: minmax(180px, auto);
|
||||
gap: 0;
|
||||
border: 1px solid var(--hairline);
|
||||
background: var(--hairline);
|
||||
}
|
||||
.bento-grid > .cell {
|
||||
background: var(--surface);
|
||||
padding: 28px 30px;
|
||||
}
|
||||
.cell--hero { grid-column: span 4; grid-row: span 2; padding: 36px 40px; }
|
||||
.cell--tall { grid-column: span 2; grid-row: span 2; }
|
||||
.cell--wide { grid-column: span 4; }
|
||||
.cell--small { grid-column: span 2; }
|
||||
.cell h3 { font-family: var(--display); font-size: 26px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 8px; line-height: 1.15; }
|
||||
.cell h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.005em; }
|
||||
.cell p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; max-width: 38ch; }
|
||||
.cell .num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 22px; }
|
||||
|
||||
.chip {
|
||||
display: inline-block; font-family: var(--mono); font-size: 10.5px;
|
||||
letter-spacing: 0.08em; text-transform: uppercase;
|
||||
padding: 3px 8px; border-radius: 999px; margin-right: 6px;
|
||||
}
|
||||
.chip--green { background: var(--pale-green-bg); color: var(--pale-green-fg); }
|
||||
.chip--blue { background: var(--pale-blue-bg); color: var(--pale-blue-fg); }
|
||||
.chip--red { background: var(--pale-red-bg); color: var(--pale-red-fg); }
|
||||
.chip--yellow { background: var(--pale-yellow-bg); color: var(--pale-yellow-fg); }
|
||||
|
||||
.doclines {
|
||||
font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.85;
|
||||
border-top: 1px dashed var(--hairline); padding-top: 14px; margin-top: 20px;
|
||||
}
|
||||
.doclines b { color: var(--ink); font-weight: 500; }
|
||||
|
||||
/* ============ CONTRAST BLOCK (no card, hairline only) ============ */
|
||||
.contrast {
|
||||
padding: 88px 0;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.contrast .columns {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
|
||||
}
|
||||
.contrast h2 {
|
||||
font-family: var(--display); font-size: clamp(34px, 4.4vw, 56px);
|
||||
line-height: 1.05; letter-spacing: -0.025em; margin: 0;
|
||||
max-width: 14ch; font-weight: 400;
|
||||
}
|
||||
.contrast .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--hairline); margin-top: 24px; }
|
||||
.contrast .pair > div { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
|
||||
.contrast .pair > div + div { border-left: 1px solid var(--hairline); padding-left: 22px; }
|
||||
.contrast .pair > div:nth-child(odd) { padding-right: 22px; }
|
||||
.contrast .pair .label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 8px; }
|
||||
.contrast .pair p { margin: 0; font-size: 14.5px; line-height: 1.55; }
|
||||
.contrast .pair .strike { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
|
||||
|
||||
/* ============ PRICING band (no card overuse) ============ */
|
||||
.pricing { padding: 88px 0; border-top: 1px solid var(--hairline); }
|
||||
.pricing-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 36px; }
|
||||
.pricing-head h2 { font-family: var(--display); font-size: clamp(32px, 4vw, 48px); margin: 0; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; max-width: 18ch; }
|
||||
.pricing-head p { color: var(--muted); margin: 0; max-width: 38ch; font-size: 14.5px; }
|
||||
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hairline); }
|
||||
.tier { padding: 32px 28px; }
|
||||
.tier + .tier { border-left: 1px solid var(--hairline); }
|
||||
.tier h3 { font-family: var(--display); font-size: 24px; font-weight: 400; margin: 0 0 4px; letter-spacing: -0.01em; }
|
||||
.tier .sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
|
||||
.tier .price { font-family: var(--display); font-size: 44px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 18px; font-weight: 400; }
|
||||
.tier .price small { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-left: 6px; }
|
||||
.tier ul { list-style: none; padding: 0; margin: 0 0 24px; }
|
||||
.tier ul li { font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--hairline); color: var(--ink); }
|
||||
.tier ul li:first-child { border-top: none; }
|
||||
.tier ul li::before { content: '— '; color: var(--muted); }
|
||||
.tier .btn { width: 100%; }
|
||||
.tier--highlight { background: var(--canvas); position: relative; }
|
||||
.tier--highlight::after {
|
||||
content: 'recommended';
|
||||
position: absolute; top: 16px; right: 16px;
|
||||
font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
|
||||
color: var(--pale-green-fg); background: var(--pale-green-bg);
|
||||
padding: 3px 8px; border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ============ FOOTER ============ */
|
||||
footer {
|
||||
border-top: 1px solid var(--hairline);
|
||||
padding: 32px 0;
|
||||
font-family: var(--mono); font-size: 11.5px; color: var(--muted);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
|
||||
footer a { color: var(--muted); text-decoration: none; }
|
||||
footer a:hover { color: var(--ink); }
|
||||
|
||||
/* ============ RESPONSIVE ============ */
|
||||
@media (max-width: 880px) {
|
||||
.nav ul { display: none; }
|
||||
.bento-grid { grid-template-columns: 1fr; }
|
||||
.cell--hero, .cell--tall, .cell--wide, .cell--small { grid-column: span 1; grid-row: auto; }
|
||||
.contrast .columns, .pricing-head, .tiers { grid-template-columns: 1fr; display: block; }
|
||||
.tier + .tier { border-left: none; border-top: 1px solid var(--hairline); }
|
||||
.pricing-head p { margin-top: 12px; }
|
||||
}
|
||||
|
||||
/* ============ MOTION (entry, subtle) ============ */
|
||||
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
|
||||
.reveal.is-in { opacity: 1; transform: none; }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal { opacity: 1; transform: none; transition: none; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="nav" data-od-id="topnav">
|
||||
<span class="brand">Quartz<em> · workspace</em></span>
|
||||
<ul>
|
||||
<li><a href="#bento">Surfaces</a></li>
|
||||
<li><a href="#contrast">What it isn't</a></li>
|
||||
<li><a href="#pricing">Plans</a></li>
|
||||
<li><a href="#changelog">Changelog</a></li>
|
||||
</ul>
|
||||
<button class="cta">Open workspace</button>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="wrap hero reveal" data-od-id="hero">
|
||||
<span class="eyebrow"><span class="dot"></span>Now in private beta · build 0.4.7</span>
|
||||
<h1>A quiet place to write the <em>docs nobody read</em>, and have them read.</h1>
|
||||
<p class="lede">Quartz is a workspace for technical writers who'd rather ship a clean changelog than win a Notion-template contest. Outline, draft, review, publish — without leaving the keyboard.</p>
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary">Request access</button>
|
||||
<button class="btn-link">Read the manual</button>
|
||||
<span class="keystroke">⌘ K</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap bento reveal" id="bento" data-od-id="bento">
|
||||
<div class="bento-grid">
|
||||
<div class="cell cell--hero">
|
||||
<span class="num">01 / outline</span>
|
||||
<span class="chip chip--green">Editor</span>
|
||||
<h3>An outline that doubles as a typewriter.</h3>
|
||||
<p>Drag headings to restructure. Toggle a heading to focus mode and the rest of the page dims to a hairline. No floating toolbars, no popover bingo — just the line you're typing.</p>
|
||||
<div class="doclines">
|
||||
<b>↳</b> ⌘ ⇧ O toggle outline<br>
|
||||
<b>↳</b> ⌘ J focus mode<br>
|
||||
<b>↳</b> ⌘ ⏎ publish draft
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell cell--tall" data-od-id="bento-review">
|
||||
<span class="num">02 / review</span>
|
||||
<span class="chip chip--blue">Review</span>
|
||||
<h4 style="margin-top: 14px;">Inline review, no Slack thread</h4>
|
||||
<p>Reviewers leave threaded comments anchored to a single line. Resolve to archive — never lose context to a "what was this about" two weeks later.</p>
|
||||
</div>
|
||||
<div class="cell cell--small" data-od-id="bento-export">
|
||||
<span class="num">03 / export</span>
|
||||
<h4>Markdown out, always</h4>
|
||||
<p>Export round-trips: a doc opened in Quartz writes the same .md it read.</p>
|
||||
</div>
|
||||
<div class="cell cell--small" data-od-id="bento-history">
|
||||
<span class="num">04 / history</span>
|
||||
<span class="chip chip--yellow">Audit</span>
|
||||
<h4 style="margin-top: 8px;">Git-grade history</h4>
|
||||
<p>Every save is a commit. Diff two revisions in three keystrokes.</p>
|
||||
</div>
|
||||
<div class="cell cell--wide" data-od-id="bento-stack">
|
||||
<span class="num">05 / stack</span>
|
||||
<span class="chip chip--red">Integrations</span>
|
||||
<h4 style="margin-top: 14px;">Plays nicely with Linear, GitHub, and your CMS</h4>
|
||||
<p>Quartz reads Linear ticket IDs in your prose and surfaces the parent issue in the side rail. Push a published doc to a GitHub repo or a static site — no plugin marketplace required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap contrast reveal" id="contrast" data-od-id="contrast">
|
||||
<div class="columns">
|
||||
<h2>Quartz isn't trying to be a wiki. Or a CMS. Or a second brain.</h2>
|
||||
<div>
|
||||
<div class="pair">
|
||||
<div>
|
||||
<div class="label">Doesn't</div>
|
||||
<p class="strike">Auto-generate three-column landing pages from your outline.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Does</div>
|
||||
<p>Publish what you wrote, in the structure you wrote it in.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Doesn't</div>
|
||||
<p class="strike">Suggest emojis, AI summaries, "callout" blocks.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Does</div>
|
||||
<p>Honour the page break. Set the typography. Get out of the way.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Doesn't</div>
|
||||
<p class="strike">Sync to a database, then pretend the database doesn't exist.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">Does</div>
|
||||
<p>Write Markdown to disk. Read Markdown from disk. Done.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap pricing reveal" id="pricing" data-od-id="pricing">
|
||||
<div class="pricing-head">
|
||||
<h2>One plan for the writer. One for the team. The rest is sales calls.</h2>
|
||||
<p>Free for fourteen days. We don't ask for a card and we don't email you afterwards unless you write back first.</p>
|
||||
</div>
|
||||
<div class="tiers">
|
||||
<div class="tier">
|
||||
<h3>Solo</h3>
|
||||
<p class="sub">For one writer with strong opinions.</p>
|
||||
<div class="price">$9<small>/ month</small></div>
|
||||
<ul>
|
||||
<li>Unlimited documents</li>
|
||||
<li>Local-first, encrypted sync</li>
|
||||
<li>Markdown export & import</li>
|
||||
<li>Three custom themes</li>
|
||||
</ul>
|
||||
<button class="btn btn-ghost">Start solo</button>
|
||||
</div>
|
||||
<div class="tier tier--highlight">
|
||||
<h3>Studio</h3>
|
||||
<p class="sub">For docs teams up to twelve.</p>
|
||||
<div class="price">$22<small>/ seat / month</small></div>
|
||||
<ul>
|
||||
<li>Everything in Solo</li>
|
||||
<li>Inline review & approvals</li>
|
||||
<li>GitHub & Linear sync</li>
|
||||
<li>Audit log with diff history</li>
|
||||
<li>Static-site publish target</li>
|
||||
</ul>
|
||||
<button class="btn btn-primary">Start studio</button>
|
||||
</div>
|
||||
<div class="tier">
|
||||
<h3>Press</h3>
|
||||
<p class="sub">For publishers and large orgs.</p>
|
||||
<div class="price">Talk<small>/ to us</small></div>
|
||||
<ul>
|
||||
<li>SSO (SAML, OIDC)</li>
|
||||
<li>Self-hosted deployment</li>
|
||||
<li>Custom export pipelines</li>
|
||||
<li>Named support engineer</li>
|
||||
</ul>
|
||||
<button class="btn btn-ghost">Open a thread</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap row">
|
||||
<span>Quartz · Bordeaux, FR · v0.4.7 · 2026</span>
|
||||
<span>
|
||||
<a href="#">Manual</a> · <a href="#">Changelog</a> · <a href="#">Status</a> · <a href="#">Privacy</a>
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Intersection-observer reveal — never window scroll listeners.
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
for (const e of entries) {
|
||||
if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
|
||||
}
|
||||
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
|
||||
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
63
skills/web-prototype-taste-soft/SKILL.md
Normal file
63
skills/web-prototype-taste-soft/SKILL.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
---
|
||||
name: web-prototype-taste-soft
|
||||
description: Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill `soft-skill` + sections 4–8 of `taste-skill`.
|
||||
---
|
||||
|
||||
# Web Prototype — Soft Premium
|
||||
|
||||
For briefs that ask for "Apple-like", "Linear-tier", "premium consumer", "calm SaaS", or "$150k agency" finish. The aesthetic is soft, weighty, and obsessive about nested architecture.
|
||||
|
||||
## Source
|
||||
|
||||
Distilled from [Leonxlnx/taste-skill](https://github.com/Leonxlnx/taste-skill) — `skills/soft-skill/SKILL.md` ("Vanguard UI Architect") with the haptic micro-aesthetics, double-bezel architecture, and motion choreography rules. See `example.html` in this directory for a fully-realized template.
|
||||
|
||||
## Hard rules
|
||||
|
||||
- **Canvas:** silver-grey or warm cream (`#F2F2F0` or `#FDFBF7`). Not pure white.
|
||||
- **Type pairing:** display in Geist / Plus Jakarta Sans / Cabinet Grotesk at heavy weight, body in the same family, monospace meta in Geist Mono.
|
||||
- **Display:** `clamp(48px, 7vw, 96px)`, `letter-spacing: -0.035em`, `line-height: 0.96`. Heavy weight (700+).
|
||||
- **Squircle radii:** `border-radius: 28px–40px` (`rounded-[2rem]` to `rounded-[2.5rem]`) on major surfaces.
|
||||
- **Double-bezel mandatory:** every important card is a wrapper (`p-1.5`, hairline border, soft outer shadow) containing an inner core with its own background and a *concentric smaller radius* (e.g., outer `2rem`, inner `calc(2rem - 0.375rem)`).
|
||||
- **CTA = button-in-button:** primary CTAs are full pills (`rounded-full px-6 py-3`); the trailing arrow lives inside its own circular wrapper flush-right.
|
||||
- **Ambient depth:** one slow-drifting radial mesh blob behind hero, `opacity ≤ 0.18`, `pointer-events: none`, fixed.
|
||||
- **Eyebrow tag** above each section header: pill, uppercase mono, `letter-spacing: 0.2em`, `text-[10px]`.
|
||||
|
||||
## Banned
|
||||
|
||||
- Inter, Roboto, Helvetica, Open Sans.
|
||||
- Generic 1px solid gray borders (use `border-black/5` / `ring-1 ring-black/5`).
|
||||
- `shadow-md`, `shadow-lg`, hard drop shadows. Only diffuse, wide-spread, low-opacity (`0 20px 40px -15px rgba(0,0,0,0.05)`).
|
||||
- Edge-to-edge sticky navbars glued to the top. Use a floating glass pill (`mt-6 mx-auto w-max rounded-full`).
|
||||
- Linear or `ease-in-out` transitions. Use `cubic-bezier(0.32, 0.72, 0, 1)` or spring physics.
|
||||
- `h-screen` (use `min-h-[100dvh]`).
|
||||
- Animating `width` / `height` / `top` / `left`. Only `transform` and `opacity`.
|
||||
- Pure black `#000`. Use Zinc-950 / Off-Black.
|
||||
|
||||
## Required components
|
||||
|
||||
- Floating-pill navbar with backdrop-blur-2xl.
|
||||
- Asymmetric hero: massive heavy display, eyebrow tag, body lede `max-w-[52ch]`, two CTAs (primary pill with button-in-button arrow + ghost).
|
||||
- Bento grid using the **double-bezel** pattern; at least one wide card and one tall card.
|
||||
- Feature row with **z-axis cascade** or split image module.
|
||||
- Marquee strip of customer logos, slow infinite translation (`-100% / 20s`), pause on hover.
|
||||
- Closing band on a soft inverted surface (deep zinc / espresso).
|
||||
- Footer: monospace meta, hairline above.
|
||||
|
||||
## Motion
|
||||
|
||||
- All transitions: `transition: transform 700ms cubic-bezier(0.32,0.72,0,1)` minimum.
|
||||
- Hover on CTAs: outer pill scales `0.98` on `:active`, inner trailing-icon circle translates `(+1px, -1px)` and `scale(1.05)`.
|
||||
- Scroll entry: `translateY(16px) blur(8px) opacity(0)` → `translateY(0) blur(0) opacity(1)`. `IntersectionObserver` only.
|
||||
- Marquee: `transform: translateX(-50%)` over `30s linear` infinite, applied to a duplicated track.
|
||||
- Hero mesh blob: 24s+ keyframe drift, opacity-only or transform-only.
|
||||
|
||||
## Pre-flight
|
||||
|
||||
- [ ] Floating pill nav with `backdrop-blur` + hairline ring
|
||||
- [ ] At least one card uses the double-bezel (outer shell + inner core, concentric radii)
|
||||
- [ ] Primary CTA uses button-in-button trailing icon
|
||||
- [ ] Section padding ≥ `py-24`
|
||||
- [ ] No banned fonts; display weight ≥ 700
|
||||
- [ ] Hero uses `min-h-[100dvh]`, never `100vh`
|
||||
- [ ] All transitions use custom cubic-bezier or spring; no `linear` / `ease-in-out`
|
||||
- [ ] Mobile: layout collapses to single column under 768px, all rotations + overlaps removed
|
||||
542
skills/web-prototype-taste-soft/example.html
Normal file
542
skills/web-prototype-taste-soft/example.html
Normal file
|
|
@ -0,0 +1,542 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Halcyon — calmer infrastructure for AI agents</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--canvas: #F2F2F0;
|
||||
--canvas-2: #E8E8E5;
|
||||
--ink: #0A0A0A;
|
||||
--ink-2: #18181B; /* zinc-900 */
|
||||
--muted: #57575A;
|
||||
--hairline: rgba(10,10,10,0.08);
|
||||
--hairline-strong: rgba(10,10,10,0.12);
|
||||
--innerlight: rgba(255,255,255,0.65);
|
||||
--accent: #1F4D3F; /* deep sage */
|
||||
--accent-glow: #5A8C7A;
|
||||
--sans: 'Plus Jakarta Sans', 'Geist', 'Cabinet Grotesk', system-ui, sans-serif;
|
||||
--mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace;
|
||||
--ease: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
--ease-spring: cubic-bezier(0.16, 1.16, 0.3, 1);
|
||||
--shell-radius: 2.25rem;
|
||||
--core-radius: calc(2.25rem - 0.4rem);
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; }
|
||||
body {
|
||||
background: var(--canvas);
|
||||
color: var(--ink);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.005em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
|
||||
|
||||
/* ============ AMBIENT MESH (fixed, pointer-events-none) ============ */
|
||||
.mesh {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.mesh::before, .mesh::after {
|
||||
content: ''; position: absolute; border-radius: 50%; filter: blur(90px);
|
||||
opacity: 0.18; will-change: transform;
|
||||
}
|
||||
.mesh::before {
|
||||
width: 720px; height: 720px;
|
||||
background: radial-gradient(circle at 30% 30%, var(--accent-glow), transparent 60%);
|
||||
top: -180px; left: -160px;
|
||||
animation: drift1 28s var(--ease) infinite alternate;
|
||||
}
|
||||
.mesh::after {
|
||||
width: 560px; height: 560px;
|
||||
background: radial-gradient(circle at 60% 60%, #C9B79A, transparent 60%);
|
||||
top: 120px; right: -140px;
|
||||
animation: drift2 36s var(--ease) infinite alternate;
|
||||
}
|
||||
@keyframes drift1 { from { transform: translate3d(0,0,0); } to { transform: translate3d(80px, 60px, 0); } }
|
||||
@keyframes drift2 { from { transform: translate3d(0,0,0); } to { transform: translate3d(-60px, 40px, 0); } }
|
||||
@media (prefers-reduced-motion: reduce) { .mesh::before, .mesh::after { animation: none; } }
|
||||
|
||||
main, header, footer { position: relative; z-index: 1; }
|
||||
|
||||
/* ============ FLOATING PILL NAV ============ */
|
||||
.nav-shell {
|
||||
position: sticky; top: 24px; z-index: 50;
|
||||
margin: 24px auto 0;
|
||||
padding: 6px;
|
||||
width: max-content; max-width: calc(100% - 56px);
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.42);
|
||||
backdrop-filter: saturate(160%) blur(22px);
|
||||
-webkit-backdrop-filter: saturate(160%) blur(22px);
|
||||
box-shadow:
|
||||
0 1px 0 rgba(255,255,255,0.45) inset,
|
||||
0 0 0 1px rgba(10,10,10,0.05),
|
||||
0 12px 36px -18px rgba(10,10,10,0.18);
|
||||
}
|
||||
.nav {
|
||||
display: flex; align-items: center; gap: 18px;
|
||||
padding: 6px 8px 6px 18px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.55);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
.nav .brand { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; }
|
||||
.nav .brand-mark {
|
||||
width: 22px; height: 22px; border-radius: 8px;
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 1px 2px rgba(10,10,10,0.18);
|
||||
}
|
||||
.nav ul { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
|
||||
.nav ul a {
|
||||
display: inline-block; padding: 9px 14px; border-radius: 999px;
|
||||
color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 500;
|
||||
transition: background 300ms var(--ease);
|
||||
}
|
||||
.nav ul a:hover { background: rgba(10,10,10,0.05); }
|
||||
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 7px 7px 7px 16px;
|
||||
border-radius: 999px;
|
||||
background: var(--ink); color: var(--canvas);
|
||||
font: 600 13px/1 var(--sans); cursor: pointer; border: none;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
|
||||
transition: transform 300ms var(--ease);
|
||||
}
|
||||
.pill .icon-wrap {
|
||||
width: 26px; height: 26px; border-radius: 999px;
|
||||
background: rgba(255,255,255,0.14);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
transition: transform 360ms var(--ease-spring), background 300ms var(--ease);
|
||||
}
|
||||
.pill:hover .icon-wrap { transform: translate(2px, -1px) scale(1.06); background: rgba(255,255,255,0.22); }
|
||||
.pill:active { transform: scale(0.98); }
|
||||
.pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; }
|
||||
|
||||
/* ============ HERO ============ */
|
||||
.hero {
|
||||
min-height: 100dvh;
|
||||
padding: 96px 0 120px;
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
gap: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
.eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 6px 12px; border-radius: 999px;
|
||||
background: rgba(255,255,255,0.6);
|
||||
box-shadow: inset 0 0 0 1px var(--hairline);
|
||||
font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 4px rgba(31,77,63,0.18); }
|
||||
.hero h1 {
|
||||
font-size: clamp(48px, 7vw, 92px);
|
||||
font-weight: 700;
|
||||
line-height: 0.96;
|
||||
letter-spacing: -0.038em;
|
||||
margin: 22px 0 28px;
|
||||
max-width: 14ch;
|
||||
}
|
||||
.hero h1 .soft { color: var(--muted); font-weight: 500; }
|
||||
.hero p.lede {
|
||||
color: var(--muted);
|
||||
font-size: 18px;
|
||||
max-width: 52ch;
|
||||
margin: 0 0 34px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.hero .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
.ghost {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 11px 18px; border-radius: 999px;
|
||||
background: rgba(255,255,255,0.5);
|
||||
box-shadow: inset 0 0 0 1px var(--hairline-strong);
|
||||
font: 500 13.5px/1 var(--sans); color: var(--ink); cursor: pointer; border: none;
|
||||
transition: background 300ms var(--ease), transform 300ms var(--ease);
|
||||
}
|
||||
.ghost:hover { background: rgba(255,255,255,0.85); }
|
||||
.ghost:active { transform: scale(0.98); }
|
||||
|
||||
/* ============ HERO PREVIEW (DOUBLE-BEZEL CARD) ============ */
|
||||
.hero-preview {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-radius: var(--shell-radius);
|
||||
background: rgba(255,255,255,0.45);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--innerlight),
|
||||
0 0 0 1px var(--hairline),
|
||||
0 30px 60px -28px rgba(10,10,10,0.22),
|
||||
0 12px 24px -16px rgba(10,10,10,0.10);
|
||||
}
|
||||
.hero-preview .core {
|
||||
position: relative;
|
||||
border-radius: var(--core-radius);
|
||||
background: linear-gradient(180deg, #FAFAF7 0%, #EFEFEB 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px var(--hairline);
|
||||
padding: 22px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.preview-bar {
|
||||
display: flex; gap: 6px; margin-bottom: 18px;
|
||||
}
|
||||
.preview-bar span { width: 10px; height: 10px; border-radius: 999px; background: rgba(10,10,10,0.10); }
|
||||
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.pv-cell {
|
||||
border-radius: 16px;
|
||||
background: rgba(255,255,255,0.8);
|
||||
box-shadow: inset 0 0 0 1px var(--hairline), inset 0 1px 0 rgba(255,255,255,0.8);
|
||||
padding: 14px;
|
||||
}
|
||||
.pv-cell.span2 { grid-column: span 2; }
|
||||
.pv-cell h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.pv-cell p { margin: 0; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
|
||||
.pv-cell .meta { font-family: var(--mono); font-size: 9.5px; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
|
||||
.pv-cell .num { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-top: 4px; }
|
||||
.pv-cell .num small { font-size: 12px; color: var(--muted); margin-left: 4px; font-weight: 500; }
|
||||
.ring {
|
||||
width: 38px; height: 38px; border-radius: 999px;
|
||||
background: conic-gradient(var(--accent) 0 67%, rgba(10,10,10,0.08) 67% 100%);
|
||||
mask: radial-gradient(circle 14px, transparent 12px, black 13px);
|
||||
-webkit-mask: radial-gradient(circle 14px, transparent 12px, black 13px);
|
||||
margin-top: 6px;
|
||||
}
|
||||
.pv-cell .row { display: flex; align-items: center; gap: 10px; }
|
||||
.pulse {
|
||||
width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
|
||||
box-shadow: 0 0 0 0 rgba(31,77,63,0.4);
|
||||
animation: pulse 2.4s var(--ease) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(31,77,63,0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(31,77,63,0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(31,77,63,0); }
|
||||
}
|
||||
|
||||
/* ============ SECTION DEFAULTS ============ */
|
||||
section.block { padding: 112px 0; position: relative; }
|
||||
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 56px; }
|
||||
.section-head h2 {
|
||||
font-size: clamp(38px, 5vw, 64px);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1;
|
||||
margin: 16px 0 0;
|
||||
max-width: 14ch;
|
||||
}
|
||||
.section-head p { color: var(--muted); font-size: 16.5px; max-width: 46ch; margin: 0; line-height: 1.55; }
|
||||
|
||||
/* ============ BENTO (double-bezel cards) ============ */
|
||||
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
||||
.b-card {
|
||||
padding: 8px;
|
||||
border-radius: var(--shell-radius);
|
||||
background: rgba(255,255,255,0.5);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--innerlight),
|
||||
0 0 0 1px var(--hairline),
|
||||
0 24px 48px -28px rgba(10,10,10,0.18);
|
||||
transition: transform 600ms var(--ease), box-shadow 600ms var(--ease);
|
||||
}
|
||||
.b-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 var(--innerlight),
|
||||
0 0 0 1px var(--hairline),
|
||||
0 30px 70px -22px rgba(10,10,10,0.22);
|
||||
}
|
||||
.b-card .core {
|
||||
border-radius: var(--core-radius);
|
||||
background: #FCFCFA;
|
||||
box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px var(--hairline);
|
||||
padding: 32px;
|
||||
height: 100%;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.b-card.dark .core {
|
||||
background: linear-gradient(180deg, #1A1A1A 0%, #0F0F0F 100%);
|
||||
color: #ECECEA;
|
||||
}
|
||||
.b-card.dark .core .meta { color: rgba(255,255,255,0.55); }
|
||||
.b-card.dark .core p { color: rgba(255,255,255,0.6); }
|
||||
.b-card .meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
|
||||
.b-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 10px; }
|
||||
.b-card.dark h3 { color: #FFFFFF; }
|
||||
.b-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; max-width: 36ch; }
|
||||
|
||||
.span-3 { grid-column: span 3; }
|
||||
.span-2 { grid-column: span 2; }
|
||||
.span-4 { grid-column: span 4; }
|
||||
.span-6 { grid-column: span 6; }
|
||||
.row-2 { grid-row: span 2; }
|
||||
|
||||
.stat { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
|
||||
.stat .big { font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
|
||||
.stat .unit { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
|
||||
|
||||
.codeblock {
|
||||
margin-top: auto; padding: 18px;
|
||||
border-radius: 18px;
|
||||
background: #0E0E0E; color: #ECECEA;
|
||||
font-family: var(--mono); font-size: 12px; line-height: 1.65;
|
||||
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
.codeblock .k { color: #5A8C7A; }
|
||||
.codeblock .s { color: #C9B79A; }
|
||||
.codeblock .c { color: rgba(236,236,234,0.4); }
|
||||
|
||||
/* ============ MARQUEE ============ */
|
||||
.marquee {
|
||||
padding: 56px 0;
|
||||
overflow: hidden;
|
||||
mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
|
||||
}
|
||||
.marquee-track {
|
||||
display: flex; gap: 64px; width: max-content;
|
||||
animation: track 32s linear infinite;
|
||||
will-change: transform;
|
||||
}
|
||||
.marquee:hover .marquee-track { animation-play-state: paused; }
|
||||
@keyframes track { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||||
.marquee-item {
|
||||
font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
|
||||
opacity: 0.55;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.marquee-item em { font-style: normal; color: var(--muted); margin: 0 12px; }
|
||||
|
||||
/* ============ CLOSING (inverted soft surface) ============ */
|
||||
.closing {
|
||||
padding: 112px 0;
|
||||
margin: 56px 28px 28px;
|
||||
border-radius: 40px;
|
||||
background: linear-gradient(180deg, #131313 0%, #050505 100%);
|
||||
color: #F2F2F0;
|
||||
position: relative; overflow: hidden;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255,255,255,0.08),
|
||||
0 30px 80px -40px rgba(10,10,10,0.6);
|
||||
}
|
||||
.closing::before {
|
||||
content: ''; position: absolute; inset: 0;
|
||||
background: radial-gradient(700px 360px at 30% 0%, rgba(90,140,122,0.32), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.closing-inner { position: relative; max-width: 1040px; padding: 0 32px; margin: 0 auto; text-align: center; }
|
||||
.closing h2 { font-size: clamp(40px, 5.5vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; margin: 0 0 18px; max-width: 18ch; margin-inline: auto; }
|
||||
.closing p { color: rgba(242,242,240,0.65); font-size: 17px; margin: 0 auto 32px; max-width: 48ch; line-height: 1.55; }
|
||||
.closing .pill { background: var(--canvas); color: var(--ink); }
|
||||
.closing .pill .icon-wrap { background: rgba(10,10,10,0.08); }
|
||||
|
||||
/* ============ FOOTER ============ */
|
||||
footer {
|
||||
padding: 36px 28px 28px;
|
||||
font-family: var(--mono); font-size: 11px; color: var(--muted);
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1240px; margin: 0 auto; padding: 0 28px; }
|
||||
footer a { color: var(--muted); text-decoration: none; }
|
||||
footer a:hover { color: var(--ink); }
|
||||
|
||||
/* ============ RESPONSIVE COLLAPSE ============ */
|
||||
@media (max-width: 980px) {
|
||||
.hero { grid-template-columns: 1fr; padding-top: 64px; padding-bottom: 80px; }
|
||||
.nav ul { display: none; }
|
||||
.section-head { grid-template-columns: 1fr; gap: 18px; }
|
||||
.bento { grid-template-columns: 1fr; }
|
||||
.span-3, .span-2, .span-4, .span-6 { grid-column: span 1; }
|
||||
.row-2 { grid-row: auto; }
|
||||
.closing { margin: 28px 16px; padding: 80px 0; }
|
||||
}
|
||||
|
||||
/* ============ MOTION ENTRY ============ */
|
||||
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease); }
|
||||
.reveal.is-in { opacity: 1; transform: none; filter: none; }
|
||||
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="mesh" aria-hidden="true"></div>
|
||||
|
||||
<div class="nav-shell" data-od-id="topnav">
|
||||
<header class="nav">
|
||||
<span class="brand"><span class="brand-mark"></span>Halcyon</span>
|
||||
<ul>
|
||||
<li><a href="#bento">Platform</a></li>
|
||||
<li><a href="#metrics">Metrics</a></li>
|
||||
<li><a href="#docs">Docs</a></li>
|
||||
<li><a href="#changelog">Changelog</a></li>
|
||||
</ul>
|
||||
<button class="pill">
|
||||
<span>Get started</span>
|
||||
<span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
|
||||
</button>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<section class="wrap hero reveal" data-od-id="hero">
|
||||
<div class="hero-copy">
|
||||
<span class="eyebrow"><span class="dot"></span>Series A · 2026 · Bordeaux</span>
|
||||
<h1>Calmer infrastructure for the agents <span class="soft">already running your business.</span></h1>
|
||||
<p class="lede">Halcyon is a runtime for long-running AI agents that need stable identity, predictable cost, and an audit trail you can hand to legal. We replace the YAML scaffolding teams keep rebuilding from scratch.</p>
|
||||
<div class="actions">
|
||||
<button class="pill">
|
||||
<span>Open the console</span>
|
||||
<span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
|
||||
</button>
|
||||
<button class="ghost">
|
||||
Read the runtime spec
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="hero-preview" data-od-id="hero-preview">
|
||||
<div class="core">
|
||||
<div class="preview-bar"><span></span><span></span><span></span></div>
|
||||
<div class="preview-grid">
|
||||
<div class="pv-cell span2">
|
||||
<div class="meta">runtime · live</div>
|
||||
<div class="row" style="justify-content: space-between;">
|
||||
<div>
|
||||
<h4 style="font-size: 14px;">research-agent / tier-3</h4>
|
||||
<div class="row" style="margin-top: 4px;"><span class="pulse"></span><p style="margin:0; font-size: 11px;">healthy · 7d 14h uptime</p></div>
|
||||
</div>
|
||||
<div class="ring" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pv-cell">
|
||||
<div class="meta">spend / 24h</div>
|
||||
<div class="num">$47.18<small>USD</small></div>
|
||||
</div>
|
||||
<div class="pv-cell">
|
||||
<div class="meta">tasks / 24h</div>
|
||||
<div class="num">1,284<small>ok</small></div>
|
||||
</div>
|
||||
<div class="pv-cell span2">
|
||||
<div class="meta">audit · last entry</div>
|
||||
<p style="font-size: 11.5px; line-height: 1.6;">
|
||||
<code style="font-family: var(--mono); color: var(--accent);">04:12:09</code> · ticket <code style="font-family: var(--mono);">PRD-4731</code> dispatched to <b>research-agent/tier-3</b> by <b>quentin.albrecht</b>. Resolved in 41.7s.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="block reveal" id="bento">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow"><span class="dot"></span>02 · platform</span>
|
||||
<p>Five primitives. No agent framework lock-in. Bring your own model, your own tools, your own sandbox — keep the runtime, the policies, and the bill in one place.</p>
|
||||
</div>
|
||||
<div class="section-head" style="margin-bottom: 56px;">
|
||||
<h2>The runtime is the boring part. We're <em style="font-weight:500; color: var(--muted); font-style: normal;">obsessed</em> with the boring part.</h2>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="bento">
|
||||
<div class="b-card span-3 row-2">
|
||||
<div class="core">
|
||||
<div class="meta">01 · identity</div>
|
||||
<h3>Stable identities, not session tokens.</h3>
|
||||
<p>Every agent gets a long-lived identity with revocable credentials, scoped policies, and a portable memory layer that survives model swaps. Rotate keys without re-onboarding the agent.</p>
|
||||
<div class="codeblock">
|
||||
<span class="c">// stable across model swaps</span><br>
|
||||
<span class="k">agent</span>.identity = {<br>
|
||||
id: <span class="s">"agent_q7_research"</span>,<br>
|
||||
policy: <span class="s">"tier-3:read-only"</span>,<br>
|
||||
memory: halcyon.memory(<span class="s">"q7"</span>),<br>
|
||||
};
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-card span-3">
|
||||
<div class="core">
|
||||
<div class="meta">02 · spend</div>
|
||||
<h3>One bill. One cap. One alarm.</h3>
|
||||
<p>Set budgets per agent, per workspace, per provider. Halcyon throttles before the bill becomes a Slack post-mortem.</p>
|
||||
<div class="stat"><span class="big">$0.018</span><span class="unit">avg / task</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-card span-3 dark">
|
||||
<div class="core">
|
||||
<div class="meta">03 · audit</div>
|
||||
<h3>An audit log shaped like an audit log.</h3>
|
||||
<p>Append-only. Cryptographically chained. Streams to your SIEM. Every tool call, every prompt, every model swap, every refund — in one place legal can actually subpoena.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-card span-2">
|
||||
<div class="core">
|
||||
<div class="meta">04 · sandbox</div>
|
||||
<h3>Real sandboxes.</h3>
|
||||
<p>Firecracker microVMs per task. Boots in 110ms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-card span-2">
|
||||
<div class="core">
|
||||
<div class="meta">05 · routing</div>
|
||||
<h3>Model-agnostic routing.</h3>
|
||||
<p>Cheapest model that passes your eval. Updated nightly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-card span-2">
|
||||
<div class="core">
|
||||
<div class="meta">06 · ergonomics</div>
|
||||
<h3>Three SDKs. Two CLIs.</h3>
|
||||
<p>Python, TypeScript, Go. <code style="font-family: var(--mono); color: var(--accent);">halcyon</code> & <code style="font-family: var(--mono); color: var(--accent);">hl</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="marquee reveal">
|
||||
<div class="marquee-track">
|
||||
<span class="marquee-item">Anthropic<em>·</em>Stripe<em>·</em>Linear<em>·</em>Vercel<em>·</em>Cursor<em>·</em>Brex<em>·</em>Ramp<em>·</em>Replicate<em>·</em>Hex<em>·</em>Notion<em>·</em></span>
|
||||
<span class="marquee-item" aria-hidden="true">Anthropic<em>·</em>Stripe<em>·</em>Linear<em>·</em>Vercel<em>·</em>Cursor<em>·</em>Brex<em>·</em>Ramp<em>·</em>Replicate<em>·</em>Hex<em>·</em>Notion<em>·</em></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="closing reveal" data-od-id="closing">
|
||||
<div class="closing-inner">
|
||||
<h2>Less duct tape between the model and the bill.</h2>
|
||||
<p>14-day evaluation, then choose pay-as-you-go or annual. We'll send a real engineer for setup. No SDR funnel.</p>
|
||||
<button class="pill">
|
||||
<span>Talk to an engineer</span>
|
||||
<span class="icon-wrap"><svg viewBox="0 0 12 12" stroke-width="1.6"><path d="M2.5 6h7M6 2.5L9.5 6 6 9.5"/></svg></span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="row">
|
||||
<span>Halcyon Runtime · SOC 2 · ISO 27001 · v2026.05</span>
|
||||
<span><a href="#">Docs</a> · <a href="#">Changelog</a> · <a href="#">Status</a> · <a href="#">Privacy</a> · <a href="#">Contact</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const io = new IntersectionObserver((entries) => {
|
||||
for (const e of entries) {
|
||||
if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
|
||||
}
|
||||
}, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
|
||||
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue