diff --git a/apps/web/src/i18n/content.ts b/apps/web/src/i18n/content.ts index dc6f84456..b08af81b1 100644 --- a/apps/web/src/i18n/content.ts +++ b/apps/web/src/i18n/content.ts @@ -288,7 +288,13 @@ const DE_DESIGN_SYSTEM_CATEGORIES: Record = { 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', diff --git a/skills/html-ppt-taste-brutalist/SKILL.md b/skills/html-ppt-taste-brutalist/SKILL.md new file mode 100644 index 000000000..f06522bff --- /dev/null +++ b/skills/html-ppt-taste-brutalist/SKILL.md @@ -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 diff --git a/skills/html-ppt-taste-brutalist/example.html b/skills/html-ppt-taste-brutalist/example.html new file mode 100644 index 000000000..00e78855b --- /dev/null +++ b/skills/html-ppt-taste-brutalist/example.html @@ -0,0 +1,774 @@ + + + + + +OPN-04 // INCIDENT TELEMETRY · CLASSIFIED INTERNAL + + + + + + +
+ + +
+
+
OPN-04 · INCIDENT TELEMETRY
+
SLIDE 01 / 11
+
2026.05.14 · 04:12Z
+
44.8404°N · −0.5805°W
+
⬤ CLASSIFIED · INTERNAL
+
OPERATOR · Q.ALBRECHT
+
+
+
04▌
+
+
+ ▮▮▮▮ DECL ▮▮▮▮ + SEV · CRITICAL + PKT · 04 / 11 +
+

Incident Telemetry — Operation Halcyon

+

Field debrief for the runtime outage on 2026.05.13 — 03:18Z to 06:41Z. Eleven slides. No friendly icons. Read top to bottom.

+
+
Mission
OPN-04 / OPERATION HALCYON
+
Operator
Q. Albrecht · Incident Commander
+
System
halcyon-runtime · v 2026.05.06
+
Cell
EU-WEST-3 · BORDEAUX-A
+
Distribution
internal · oncall · founders
+
+
+
+
+
SERIAL OPN-04 / 0731VOL 04ISS 2026.05
+
PAGE 01 / 11⬤ TRANSMITTING
+
+
+ + +
+
+
OPN-04 · BRIEFING
+
SLIDE 02 / 11
+
STAGE · 01
+
SECTION · OVERVIEW
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 02 / mission briefing +

Three hours, twenty-three minutes, sixty-four percent of tier-3 traffic.

+
+
window3h 23m03:18Z → 06:41Z
+
tier hittier-3research-agent
+
tasks failed14,82017.3% of window
+
refunded€ 4,840auto · within 24h
+
root causeDNS cacheupstream provider 04
+
resolved at06:41Zby Q. Albrecht
+
postmortemCIRC-04filed 2026.05.14
+
action items07 open03 critical · 04 medium
+
+

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.

+
+
SERIAL OPN-04 / 0732
+
PAGE 02 / 11
+
+
+ + +
+
+
OPN-04 · OBJECTIVES
+
SLIDE 03 / 11
+
STAGE · 02
+
SECTION · DEBRIEF
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 03 / debrief objectives +

Five lines we will defend in writing this week.

+
+
+
01
+
+

>>>Resolver failover threshold drops from 600 ms to 180 ms.

+

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.

+
+
CRIT · 14d
+
+
+
02
+
+

>>>Three independent DNS providers, weighted equally.

+

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.

+
+
CRIT · 21d
+
+
+
03
+
+

>>>Tier-3 clients get retry budgets, not retry loops.

+

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.

+
+
CRIT · 30d
+
+
+
04
+
+

>>>Refunds are automated, not gestured.

+

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.

+
+
MED · 45d
+
+
+
05
+
+

>>>Status page reads like a sentence, not a heatmap.

+

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.

+
+
MED · 30d
+
+
+
+
SERIAL OPN-04 / 0733
+
PAGE 03 / 11
+
+
+ + +
+
+
OPN-04 · TELEMETRY
+
SLIDE 04 / 11
+
STAGE · 03
+
SECTION · METRICS
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 04 / telemetry · 24h window +

Numbers from the window.

+
+
+ tier-3 · failure rate + 17.3% + ▲ +14.6 pp vs baseline · CRIT +
+
tier-1 · failure0.04%▲ +0.02 pp · within slo
+
tier-2 · failure0.61%▲ +0.4 pp · within slo
+
p99 · resolver3,180ms▲ x 41 vs baseline
+
retries · 24h68k·×4.6▲ amplification
+
refunds€4,840manual · 04:30 → 09:00
+
paged engineers04oncall3 ack < 5min · 1 < 12min
+
customer tickets37▲ x 11 vs baseline
+
resolver healthy · 7d 14h
+
tasks dropped14,820▲ refunded auto-12h
+
+
+
SERIAL OPN-04 / 0734
+
PAGE 04 / 11
+
+
+ + +
+
+
OPN-04 · RISK REGISTER
+
SLIDE 05 / 11
+
STAGE · 04
+
SECTION · POSTURE
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 05 / open risks · halcyon runtime +

Open risks, scored against the runtime.

+
+
№
risk
vector
sev
prob
owner / due
+ +
R-01
Single-provider DNS resolver pin
infra · routing
crit
0.42
Q.ALB · 2026.05.28
+
R-02
Tier-3 retry amplification (no budget)
client · sdk
crit
0.31
H.NAI · 2026.06.10
+
R-03
Refund pipeline manual
finance · ops
med
0.55
P.NWA · 2026.06.20
+
R-04
Status page is a heatmap, not a sentence
comms
med
0.61
L.ARR · 2026.06.20
+
R-05
Audit log not subpoena-grade
legal
med
0.18
P.NWA · 2026.07.01
+
R-06
EU-WEST-3 single-cell deployment
infra · region
lo
0.06
Q.ALB · 2026.Q4
+
+
+
SERIAL OPN-04 / 0735
+
PAGE 05 / 11
+
+
+ + +
+
+
OPN-04 · SEQUENCE
+
SLIDE 06 / 11
+
STAGE · 05
+
SECTION · TIMELINE
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 06 / event sequence · 03:18Z → 06:41Z +

Sequence of events.

+
+
03:18:04Z
Upstream provider 04 begins returning stale A records for runtime.halcyon.io.
— PROVIDER-04
+
03:19:11Z
Resolver retries against pinned provider 04. p99 climbs to 1,840 ms within sixty-seven seconds.
— RESOLVER
+
03:21:48Z
Tier-3 (research-agent) clients begin retry storm. Failure rate breaches the 5% page threshold; oncall pages four engineers.
— PAGER · CRIT
+
03:24:02Z
Q. Albrecht acks the page from Bordeaux. H. Naitō from Munich at 03:24:18Z. Two more engineers within nine minutes.
— Q.ALB · H.NAI
+
03:38:00Z
First public status update posted: "We are investigating elevated errors on the runtime." Status page does not yet reflect the severity.
— STATUS · CRIT
+
04:01:22Z
Root cause narrowed to provider 04 DNS. Manual failover to provider 02 begins.
— Q.ALB
+
04:30:00Z
Refund triage begins. Hand-rolled SQL against the audit log identifies 14,820 dropped tasks across 312 customers.
— P.NWA
+
06:41:09Z
Failover complete. Failure rate returns to baseline. Public status updated. Postmortem CIRC-04 opened.
— ALL · CLEAR
+
+
+
SERIAL OPN-04 / 0736
+
PAGE 06 / 11
+
+
+ + +
+
+
OPN-04 · WIRING
+
SLIDE 07 / 11
+
STAGE · 06
+
SECTION · DIAGRAM
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 07 / resolver · before / after +

Resolver — before & after.

+
+
SDKtier-1 client
+
━━▶
+
RESOLVERhalcyon · pinned
+
━━▶
+
PROVIDER 04upstream · STALE
+ +
+
+
+
+
+ +
SDKtier-3 retry storm
+
━━▶
+
RESOLVERp99 · 3,180 ms
+
━━▶
+
14,820 TASKSdropped · 17.3%
+
+

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.

+
+
SERIAL OPN-04 / 0737
+
PAGE 07 / 11
+
+
+ + +
+
+
OPN-04 · SPECIMEN
+
SLIDE 08 / 11
+
STAGE · 07
+
SECTION · TYPOGRAPHY
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 08 / single specimen · cause +
DNS.
+

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.

+
+
SERIAL OPN-04 / 0738
+
PAGE 08 / 11
+
+
+ + +
+
+
OPN-04 · ALERT
+
SLIDE 09 / 11
+
STAGE · 08
+
SECTION · DECISION
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 09 / single decision · ratify +
+
!!
RTFY
+
+

Ratify the resolver redesign at close of business 2026.05.16.

+

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. This deck is the ratification artefact.

+

Sign-off lines below. Anything not signed by 16.05.2026 17:00Z is escalated to the founders' weekly.

+
+
+
+
SERIAL OPN-04 / 0739
+
PAGE 09 / 11
+
+
+ + +
+
+
OPN-04 · AUDIT
+
SLIDE 10 / 11
+
STAGE · 09
+
SECTION · LOG
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 10 / audit log · CIRC-04 (excerpt) +

Audit log, verbatim.

+
+
2026.05.13 03:21ZPAGERtier-3 failure rate > 5% · 4 engineers pagedsha · 9f3a…b218
+
2026.05.13 03:24ZQ.ALBRECHTack page · joined #incident-04sha · 14ab…a022
+
2026.05.13 03:38ZQ.ALBRECHTstatus page · "investigating elevated errors"sha · 56cf…d971
+
2026.05.13 04:01ZH.NAITOroot cause narrowed · provider-04 DNS stalesha · 04bb…f110
+
2026.05.13 04:12ZQ.ALBRECHTmanual failover provider-04 → provider-02 initiatedsha · 17ee…0ad4
+
2026.05.13 04:30ZP.NWACHUKWUrefund triage opened · 14,820 tasks queuedsha · ab21…8312
+
2026.05.13 06:41ZQ.ALBRECHTall-clear posted · CIRC-04 openedsha · cc09…b745
+
2026.05.14 09:00ZP.NWACHUKWUrefund pipeline complete · €4,840 across 312 customerssha · 1a37…ee08
+
2026.05.14 14:22ZQ.ALBRECHTpostmortem CIRC-04 published · 11 action itemssha · 4f12…c399
+
+
+
SERIAL OPN-04 / 0740
+
PAGE 10 / 11
+
+
+ + +
+
+
OPN-04 · COLOPHON
+
SLIDE 11 / 11
+
STAGE · 10
+
SECTION · SIGN-OFF
+
CLASSIFIED · INTERNAL
+
Q.ALBRECHT
+
+ 11 / colophon & sign-off +

Eleven slides, three names, one decision.

+
+
+
Operator
Q. Albrecht · Incident Commander · Bordeaux, FR
+
Witness
H. Naitō · Resolver Owner · Munich, DE
+
Counsel
P. Nwachukwu · Customer Refund Pipeline · Lagos, NG
+
Distribution
Internal · oncall · founders · CIRC-04
+
+
+
System
halcyon-runtime · build 2026.05.06
+
Set in
Archivo Black · JetBrains Mono · IBM Plex Mono
+
Press
Internal — 11pp · 16:9 · 2026.05.14 14:22Z
+
Classification
INTERNAL — do not redistribute outside oncall
+
Hash
OPN-04 · sha-256 · 4f12c399ab21d971...
+
+
+
+ SIGNED Q.ALBRECHT · 2026.05.14 14:22Z + END OF TRANSMISSION /// +
+
+
SERIAL OPN-04 / 0741
+
PAGE 11 / 11
+
+
+ +
+ + diff --git a/skills/html-ppt-taste-editorial/SKILL.md b/skills/html-ppt-taste-editorial/SKILL.md new file mode 100644 index 000000000..3892dc982 --- /dev/null +++ b/skills/html-ppt-taste-editorial/SKILL.md @@ -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 diff --git a/skills/html-ppt-taste-editorial/example.html b/skills/html-ppt-taste-editorial/example.html new file mode 100644 index 000000000..6162905ac --- /dev/null +++ b/skills/html-ppt-taste-editorial/example.html @@ -0,0 +1,490 @@ + + + + + +Quartz · 2026 Series A Memo + + + + + + +
+ + +
+
QUARTZ · MEMO 04 · 2026SERIES A · CONFIDENTIAL
+ — filed 14 may 2026 +

A quiet workspace, handed to the people who write the manuals.

+

Series A memo — for an audience of three.

+

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.

+ Q. Albrecht · CEO · q@quartz.press + 01 / 10 +
+ + +
+
02 · thesis & agendaq. albrecht
+
+
+

The world has enough note-taking apps. It has too few writing ones.

+

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.

+
+
+
    +
  • 01Coverp. 01
    • +
  • 02Thesis & agendap. 02
    • +
  • 03Six theses on a quieter doc toolp. 03
    • +
  • 04Where we are, in numbersp. 04
    • +
  • 05A line we believe inp. 05
    • +
  • 06What it isn't / what it isp. 06
    • +
  • 07Customers, in a rowp. 07
    • +
  • 08ARR — the long wayp. 08
    • +
  • 09Colophonp. 09
    • +
  • 10The askp. 10
    • +
+
+
+
+ 02 / 10 +
+ + +
+
03 · manifestsection · product
+

Six theses on a quieter doc tool.

+
+
01

The page is the unit, not the block.

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.

— editor
+
02

Review belongs inline. Not in Slack.

Comments anchor to a line, resolve to an audit log, never spawn a thread that nobody can find two weeks later.

— review
+
03

History is a feature, not a tab.

Every save is a commit. Diff two revisions in three keystrokes. Roll back without writing a support ticket.

— history
+
04

Publishing is not a separate product.

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.

— publish
+
+
+ 03 / 10 +
+ + +
+
04 · in numberssection · traction
+

Where we are, in numbers.

+
+
+ paying teams · live +
147teams
+ ▲ +38 this quarter · +35% +

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.

+
+
arr · annual run rate
€842kARR
▲ +29% qoq
+
net retention
131%
+
gross margin
88%
+
churn · monthly logo
0.7%
▼ from 1.4% in Jan
+
+
+ 04 / 10 +
+ + +
+
05 · pull quotecustomer · pilot 04
+
+ We replaced four tools with Quartz. Confluence for the docs, Notion for the drafts, Google Docs for the review, and Slack for the panic that the doc nobody had read was wrong. +
+ — Hester Naitō, principal engineer · Pilot 04 · Munich +
+ 05 / 10 +
+ + +
+
06 · positioningsection · product
+

What it isn't. What it is.

+
+
+
— Quartz isn't
+

A wiki you have to maintain a sidebar for.

+

A knowledge graph nobody asked for.

+

An AI that suggests the third callout on the page.

+

A static-site generator with a CMS bolted on.

+
+
+
— Quartz is
+

A page. A title. A column measure that the writer can trust.

+

A history of every save and a diff between any two of them.

+

A line of comments anchored to the line they critique, archived when resolved.

+

Markdown out, Markdown in. Always.

+
+
+
+ 06 / 10 +
+ + +
+
07 · customer indexsection · gtm
+

Customers, in a row.

+
+
№
team
country
seats
arr
since
+ +
01
Albrecht Press
FR
4
€ 4,720
22.04
+
02
Naitō Robotics — Eng. docs
JP / DE
18
€ 41,280
23.10
+
03
Andrejević Atelier
HR
3
€ 3,180
24.01
+
04
Nwachukwu Ltd. — Policy
NG / UK
11
€ 18,640
24.06
+
05
Arroyave & Bros
CO
7
€ 9,840
25.02
+
06
Quentin Veterinary, S.A.
FR
2
€ 1,920
25.04
+
+
+ 07 / 10 +
+ + +
+
08 · arr · the long waysection · finance
+

ARR — the long way.

+
+ Q1 / 2024
€ 78k + Q2 / 2024
€ 121k + Q3 / 2024
€ 187k + Q4 / 2024
€ 274k + Q1 / 2025
€ 372k + Q2 / 2025
€ 491k + Q3 / 2025
€ 603k + Q4 / 2025
€ 706k + Q1 / 2026
€ 842k +
+

+ No paid acquisition since Q3 2024. Growth comes from word-of-mouth between docs teams; ARR adds an Albrecht Press every five working days. +

+
+ 08 / 10 +
+ + +
+
09 · colophonsection · team
+

A small press. A long manual.

+
+
+
founder
Quentin Albrecht · prev. lead writer, IETF working group on documentation tooling
+
co-founder
Hester Naitō · prev. principal engineer, Naitō Robotics
+
head of design
Margerit Andrejević · prev. typographer, Atelier Nord-Ouest
+
policy / legal
Pemberton Nwachukwu · prev. counsel, IBM Africa
+
+
+
set in
Instrument Serif · Inter Tight · JetBrains Mono
+
press
Atelier Nord-Ouest · Bordeaux
+
edition
04 · v 2026.05 · 2,400 numbered
+
contact
q@quartz.press · +33 (0)5 56 21 47 88
+
auditor
BDO France — Q1 2026 review complete
+
+
+
+ 09 / 10 +
+ + +
+
10 · the askseries a · 2026
+

Six and a half million euros, to spend the next eighteen months making documentation feel like writing again.

+

€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.

+
+ + + — end · 2026.05.14 +
+
+ 10 / 10 +
+ +
+ + diff --git a/skills/web-prototype-taste-brutalist/SKILL.md b/skills/web-prototype-taste-brutalist/SKILL.md new file mode 100644 index 000000000..38eb0567a --- /dev/null +++ b/skills/web-prototype-taste-brutalist/SKILL.md @@ -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 `
` 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 diff --git a/skills/web-prototype-taste-brutalist/example.html b/skills/web-prototype-taste-brutalist/example.html new file mode 100644 index 000000000..f125830b2 --- /dev/null +++ b/skills/web-prototype-taste-brutalist/example.html @@ -0,0 +1,449 @@ + + + + + + FIELD UNIT 04 // INSTRUMENT FOR THE LEGIBLE WEB + + + + + + +
+
VOL.04 / FIELD UNIT
+
ISS.2026 · MAY · QRTLY
+
LAT.44.8404° N
+
LON.−0.5805° W
+
STATUS⬤ TRANSMITTING
+
+ +
+ FIELD/UNIT/04® EST 2026 + + FILE NO. 04 / 0731 +
+ +
+
04
+
+ PRINTED MATTER · FOR THE WEB +

Instrument for the legible web.

+

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.

+
+
EDITORQ. ALBRECHT
+
PRESSATELIER NORD-OUEST
+
STOCKFEDRIGONI ARENA · 120GSM
+
BINDSECTION-SEWN · OPEN SPINE
+
EDITION2,400 / NUMBERED
+
+
+
+ +
+
[ ABSTRACT ]
///
+
+ The 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. +
+
+
+ CONTRIBUTORS
+ Q. ALBRECHT (FR)
+ H. NAITŌ (JP)
+ M. ANDREJEVIĆ (HR)
+ P. NWACHUKWU (NG)
+ L. ARROYAVE (CO)
+
+ FILED UNDER
+ Typography · Print
+ Web · Editorial
+ Infrastructure +
+
+ +
+

Six theses on a quieter web.

+
+
+
01/06
+
+

The page is not a stage. It is a desk.

+

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.

+
+
>>> TYPOGRAPHY
+
+
+
02/06
+
+

White space is not waste. It is the wage of attention.

+

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.

+
+
>>> RHYTHM
+
+
+
03/06
+
+

If the type is not the strongest signal on the page, the page is wrong.

+

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.

+
+
>>> HIERARCHY
+
+
+
04/06
+
+

A grid is a contract, not a costume.

+

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.

+
+
>>> STRUCTURE
+
+
+
05/06
+
+

Motion is a citation, not a chorus.

+

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.

+
+
>>> MOTION
+
+
+
06/06
+
+

The button is the only ornament you are allowed.

+

Make it weigh something. Make it the thing the reader reaches for. Then leave the rest of the page alone.

+
+
>>> COMPONENTS
+
+
+
+ +
+
+

Index of issue 04 ///

+ 14 ENTRIES · PP. 8 — 96 +
+
+
№
TITLE
AUTHOR
DEPT.
PP.
TIME
+ +
01
SET IN COLD METAL
H. Naitō
TYPE
8 — 14
12 MIN
+
02
A YEAR WITHOUT A FRAMEWORK
Q. Albrecht
WEB
15 — 23
18 MIN
+
03
NOTES FROM A LETTERPRESS
M. Andrejević
TYPE
24 — 31
14 MIN
+
04
THE LATENCY DIET
P. Nwachukwu
INFRA
32 — 40
22 MIN
+
05
EVERY PAGE IS A LETTER
L. Arroyave
EDIT
41 — 47
11 MIN
+
06
FILE FORMATS AS POLITICS
Q. Albrecht
INFRA
48 — 56
19 MIN
+
07
THE COLUMN MEASURE
H. Naitō
TYPE
57 — 60
7 MIN
+
08
WORKING IN PUBLIC, QUIETLY
L. Arroyave
EDIT
61 — 68
15 MIN
+
+
+ +
+
+

Specimen ///

+ ARCHIVO BLACK · 1 STYLE · 1 WEIGHT +
+
+ 36 / 64 +
A QUIET PAGE IS A LOUD ARGUMENT.
+
tracking −0.04em
leading 0.95
case upper
+
+
+ 60 / 120 +
PRINT THE WEB.
+
tracking −0.05em
leading 0.88
case upper
+
+
+ 120 / 220 +
04®
+
tracking −0.06em
leading 0.78
register glyph
+
+
+ +
+
!! BUY
ISSUE 04
+
+ Issue 04 ships from the bindery on 14 JUNE 2026. Pre-order at €18 / shipped, or subscribe to the four-issue ring at €60 / year. 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. >>> PRE-ORDER · SHIP 14.JUN +
+
+ + + + diff --git a/skills/web-prototype-taste-editorial/SKILL.md b/skills/web-prototype-taste-editorial/SKILL.md new file mode 100644 index 000000000..d69ff36bb --- /dev/null +++ b/skills/web-prototype-taste-editorial/SKILL.md @@ -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 diff --git a/skills/web-prototype-taste-editorial/example.html b/skills/web-prototype-taste-editorial/example.html new file mode 100644 index 000000000..59cd8f6db --- /dev/null +++ b/skills/web-prototype-taste-editorial/example.html @@ -0,0 +1,392 @@ + + + + + + Quartz — quiet workspace for technical writers + + + + + + + +
+ Quartz · workspace + + +
+ +
+
+ Now in private beta · build 0.4.7 +

A quiet place to write the docs nobody read, and have them read.

+

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.

+
+ + + ⌘ K +
+
+ +
+
+
+ 01 / outline + Editor +

An outline that doubles as a typewriter.

+

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.

+
+ ↳ ⌘ ⇧ O toggle outline
+ ↳ ⌘ J focus mode
+ ↳ ⌘ ⏎ publish draft +
+
+
+ 02 / review + Review +

Inline review, no Slack thread

+

Reviewers leave threaded comments anchored to a single line. Resolve to archive — never lose context to a "what was this about" two weeks later.

+
+
+ 03 / export +

Markdown out, always

+

Export round-trips: a doc opened in Quartz writes the same .md it read.

+
+
+ 04 / history + Audit +

Git-grade history

+

Every save is a commit. Diff two revisions in three keystrokes.

+
+
+ 05 / stack + Integrations +

Plays nicely with Linear, GitHub, and your CMS

+

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.

+
+
+
+ +
+
+

Quartz isn't trying to be a wiki. Or a CMS. Or a second brain.

+
+
+
+
Doesn't
+

Auto-generate three-column landing pages from your outline.

+
+
+
Does
+

Publish what you wrote, in the structure you wrote it in.

+
+
+
Doesn't
+

Suggest emojis, AI summaries, "callout" blocks.

+
+
+
Does
+

Honour the page break. Set the typography. Get out of the way.

+
+
+
Doesn't
+

Sync to a database, then pretend the database doesn't exist.

+
+
+
Does
+

Write Markdown to disk. Read Markdown from disk. Done.

+
+
+
+
+
+ +
+
+

One plan for the writer. One for the team. The rest is sales calls.

+

Free for fourteen days. We don't ask for a card and we don't email you afterwards unless you write back first.

+
+
+
+

Solo

+

For one writer with strong opinions.

+
$9/ month
+
    +
  • Unlimited documents
    • +
  • Local-first, encrypted sync
    • +
  • Markdown export & import
    • +
  • Three custom themes
    • +
+ +
+
+

Studio

+

For docs teams up to twelve.

+
$22/ seat / month
+
    +
  • Everything in Solo
    • +
  • Inline review & approvals
    • +
  • GitHub & Linear sync
    • +
  • Audit log with diff history
    • +
  • Static-site publish target
    • +
+ +
+
+

Press

+

For publishers and large orgs.

+
Talk/ to us
+
    +
  • SSO (SAML, OIDC)
    • +
  • Self-hosted deployment
    • +
  • Custom export pipelines
    • +
  • Named support engineer
    • +
+ +
+
+
+
+ + + + + + diff --git a/skills/web-prototype-taste-soft/SKILL.md b/skills/web-prototype-taste-soft/SKILL.md new file mode 100644 index 000000000..23e06dc69 --- /dev/null +++ b/skills/web-prototype-taste-soft/SKILL.md @@ -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 diff --git a/skills/web-prototype-taste-soft/example.html b/skills/web-prototype-taste-soft/example.html new file mode 100644 index 000000000..acff2e16c --- /dev/null +++ b/skills/web-prototype-taste-soft/example.html @@ -0,0 +1,542 @@ + + + + + + Halcyon — calmer infrastructure for AI agents + + + + + + + + +
+
+ Halcyon + + +
+
+ +
+
+
+ Series A · 2026 · Bordeaux +

Calmer infrastructure for the agents already running your business.

+

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.

+
+ + +
+
+ + +
+ +
+
+
+ 02 · platform +

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.

+
+
+

The runtime is the boring part. We're obsessed with the boring part.

+ +
+ +
+
+
+
01 · identity
+

Stable identities, not session tokens.

+

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.

+
+ // stable across model swaps
+ agent.identity = {
+   id: "agent_q7_research",
+   policy: "tier-3:read-only",
+   memory: halcyon.memory("q7"),
+ }; +
+
+
+
+
+
02 · spend
+

One bill. One cap. One alarm.

+

Set budgets per agent, per workspace, per provider. Halcyon throttles before the bill becomes a Slack post-mortem.

+
$0.018avg / task
+
+
+
+
+
03 · audit
+

An audit log shaped like an audit log.

+

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.

+
+
+
+
+
04 · sandbox
+

Real sandboxes.

+

Firecracker microVMs per task. Boots in 110ms.

+
+
+
+
+
05 · routing
+

Model-agnostic routing.

+

Cheapest model that passes your eval. Updated nightly.

+
+
+
+
+
06 · ergonomics
+

Three SDKs. Two CLIs.

+

Python, TypeScript, Go. halcyon & hl.

+
+
+
+
+
+ +
+
+ Anthropic·Stripe·Linear·Vercel·Cursor·Brex·Ramp·Replicate·Hex·Notion· + +
+
+ +
+
+

Less duct tape between the model and the bill.

+

14-day evaluation, then choose pay-as-you-go or annual. We'll send a real engineer for setup. No SDR funnel.

+ +
+
+
+ + + + + +