| name | html-knowledge-poster-style |
| description | Bilingual Knowledge Poster genre (single-surface visual card, themeable yellow/blue). Use when: 知识卡片, 海报, 公众号配图, 推文封面, knowledge poster, social card, 一图读懂, bilingual poster. Trigger: 知识卡片 / 海报 / 公众号配图 / 推文封面 / knowledge poster / social card / 一图读懂 / 双语海报. Inherits typography-system. Single-surface; NOT a multi-section report. |
name: html-knowledge-poster-style
description: "Use when generating a vertical SOCIAL / WeChat KNOWLEDGE POSTER (公众号知识卡片/海报): one bilingual headline with a highlighted keyword, a hero stat or code card, numbered takeaways, brand footer. Trigger: 知识卡片 / 海报 / 公众号配图 / 推文封面 / knowledge poster / social card. Themeable (yellow/blue/…). NOT for multi-page reports (use economist/mckinsey) or guides (document). Routed by html-style-router."
combo-tags: [html-rendering, wechat-content]
HTML Genre — Knowledge Poster (双语知识海报)
Typography base (inherited): composes ON TOP of the shared
typography-system foundation — inline
tokens/typography.css FIRST, then layer this skill for color + accent +
brand font-family ONLY. Never re-declare scale/rhythm/measure/frame/CJK.
Reference template: examples/genre/knowledge-poster.html
(built by scripts/build-genre-templates.py, all 3 gates green).
Pixel-sampled from two reference posters (yellow "Open Knowledge Format" + blue
"8× engineers"). One vertical poster system, color-themeable via data-theme.
Source DNA: the source reference set (pixel-sampled from real designs).
When to use
A single shareable card (WeChat 公众号 配图, 推文封面, 知识卡片) that delivers ONE
idea: a punchy bilingual headline + ONE hero (a giant stat OR a code/frontmatter
card) + 3 numbered takeaways. Portrait, sent alone over IM — so self-contained.
Layout frame + tokens (inject FIRST)
:root{ --kp-page-max:600px; --kp-page-gutter-total:clamp(28px,7vw,72px);
--kp-paper:#F3EBD5; --kp-ink:#151410; }
[data-theme="yellow"]{ --kp-accent:#FBD521; --kp-mark:#FE6127; --kp-panel:#151410; }
[data-theme="blue"] { --kp-accent:#0330A7; --kp-mark:#FB8858; --kp-panel:#0330A7; }
.kp-poster{ box-sizing:border-box; background:var(--kp-paper); color:var(--kp-ink);
width:min(var(--kp-page-max),calc(100% - var(--kp-page-gutter-total)));
margin:48px auto; padding:clamp(32px,6vw,48px); }
Structure: .kp-top (mono kicker + brand tag) → .kp-rule (accent bar) →
.kp-headline (sans, .mark = highlighter swatch on the keyword, .en = serif
sub) → hero (.kp-stat giant tabular number OR .kp-code 2-col card OR
.kp-panel core-question) → .kp-lede (accent left-border) → .kp-list
(grid-placed 01/02/03 + bold title + muted sub) → .kp-foot (mono).
Gotchas
- Theme via
data-theme on the article, never fork the CSS. Yellow and blue
are the SAME template; a new color = one more [data-theme] block (accent +
mark + panel). The cream ground is shared (the theme is the ACCENT, not the
whole ground — the source posters both sit on cream).
- Footer color must pass AA on the cream ground. The standard
#9B9B9D
footer ink is for WHITE grounds — it renders ~2.1:1 on #F3EBD5/#E7DFC9 and
the render gate (render-contrast-below-aa) ERRORs. Use a darker tone
(#5A574C, ~5.5:1). The AA LAW outranks the cosmetic footer default.
- Spacing snaps to the 8pt ramp [4,8,12,16,24,32,48,64,96,128]. 30/40/52/14px
ERROR/WARN; em-based inner padding is fine. Use a real
border for the code-card
divider, never gap:1px.
- The highlighter
.mark is large-text only. White on --kp-mark coral
(~3.4:1) passes the 3:1 LARGE-text floor but FAILS the 4.5:1 body floor — keep
.mark inside the headline, never on body copy.
- Hero is exactly ONE of stat / code-card / core-question. Stacking two
competes for the eye; the poster delivers ONE idea.
Verify
python3 scripts/build-genre-templates.py
python3 skills/typography-system/scripts/validate_typography.py --render examples/genre/knowledge-poster.html
python3 scripts/html-inline-assets.py check examples/genre/knowledge-poster.html
python3 scripts/audit-genre-typography.py
Your Name | your@email.com
