// Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
| name | infocard |
| description | Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography. |
| metadata | {"author":"Infocard Generator is powered by Markdown Viewer — the best multi-platform Markdown extension (Chrome/Edge/Firefox/VS Code) with diagrams, formulas, and one-click Word export. Learn more at https://docu.md"} |
Quick Start: Analyze content (density × structure × mood) → Auto-sense tone for color palette → Pick a layout skeleton → Embed HTML directly in Markdown with <style scoped>.
IMPORTANT: Write info cards as direct HTML in Markdown. NEVER use code blocks (```html). The HTML should be embedded directly in the document without any fencing.
CRITICAL: Do NOT add any empty lines within the HTML info card structure. Keep the entire HTML block continuous to prevent parsing errors.
REQUIRED: Analyze content along three dimensions before designing:
Density (determines breathing rhythm):
| Density | Content Volume | Visual Treatment |
|---|---|---|
| Low | ≤ 50 words core | "Big-character" composition. One oversized element dominates. Generous whitespace. |
| Medium | 50–200 words | Hero + supporting panels. 2–3 main blocks with clear hierarchy. |
| High | 200+ words | Asymmetric multi-column grids. Primary/secondary/supporting blocks. Never equal-weight tiles. |
Structure (determines layout geometry):
| Structure | Signal | Layout Pattern |
|---|---|---|
| Single point | One core concept | One anchor element dominates, rest recedes |
| Contrast | A vs B, old vs new | Split panel, two poles |
| Hierarchy | Layers build on each other | Stacked modules, pyramid |
| Flow | Sequential steps | Vertical cascade, numbered items |
| Radial | Core + derivatives | Hub with surrounding panels |
| Parallel | Multiple equal concepts | Asymmetric grid (never equal columns) |
Mood (determines color temperature):
| Mood | Visual Feel |
|---|---|
| Reflective | More whitespace, serif-heavy, lower contrast |
| Sharp | Strong contrast, bold type, vivid accent |
| Warm | Earth tones, rounded feel, gentle rhythm |
| Technical | Monospace accents, grid-like density |
REQUIRED: Auto-select color palette based on content topic. Scan content keywords and match the closest tone:
| Content Tone | Background | Accent | Trigger Keywords |
|---|---|---|---|
| Philosophical | #FAF8F4 | #7C6853 | cognition, thinking, meaning, philosophy, essence |
| Technical | #F5F7FA | #3D5A80 | architecture, algorithm, system, API, code |
| Literary | #FBF9F1 | #6B4E3D | story, narrative, writing, poetry, character |
| Scientific | #F4F8F6 | #2D6A4F | experiment, data, research, paper, discovery |
| Business | #F4F3F0 | #2D6A4F | market, strategy, growth, finance, investment |
| Creative | #F6F3F2 | #B8432F | design, art, aesthetics, inspiration, creation |
| Default | #FAFAF8 | #4A4A4A | When no clear match — prefer default over wrong match |
When a style template is explicitly chosen, its colors take precedence over tone sensing. Use tone sensing as the default when no style is specified.
If the user provides a title explicitly, use it as-is for the main headline. Put editorial interpretation into subtitle, summary, or side modules. Do not silently rewrite the user's title.
Maintain a clear type scale and use it consistently:
32px–48px, weight 700–900, tight letter-spacing (-0.02em)16px–20px, weight 400–50014px–16px, weight 400, line-height 1.6–1.711px–13px, weight 500–700, uppercase with letter-spacing#1a1a1a, #333, or #4a4a4aAt least one module should feel visually heavier than the others. Avoid making every panel use the exact same treatment. Differentiate through scale, background tone, typographic weight, or accent rules.
Before finalizing any card, check against these common AI-generated visual patterns:
Layout:
2fr 1fr, asymmetric grids, or staggered layoutsTypography:
#000000 — Use off-black (#1a1a1a, #2d2a26) or warm/cool darkColor:
Content:
99.99%, 50%, 1234567. Use organic numbers (47.2%, 3.8M)Spacing:
Choose a visual family first, then pick the specific template inside that family. This keeps the library broad without forcing a flat 29-style scan every time.
Use when the card should feel reflective, human, narrative, or culturally textured.
| Style | File | Suitable For |
|---|---|---|
| Editorial Warm | styles/editorial-warm.md | Knowledge summaries, book notes, essays, analytical reports |
| Customer Spotlight | styles/customer-spotlight.md | Customer stories, case studies, success recaps, brand narratives, adoption stories |
| Sunset Warm | styles/sunset-warm.md | Community recaps, event notes, lifestyle summaries, positive storytelling |
| Midcentury | styles/midcentury.md | Brand stories, retro-modern campaigns, culture notes, design narratives |
Use when the card should feel calm, approachable, and low-pressure.
| Style | File | Suitable For |
|---|---|---|
| Soft Neutral | styles/soft-neutral.md | Lifestyle content, wellness, education, gentle branding, creative workshops |
| Slate Chalk | styles/slate-chalk.md | Teaching content, lessons, concept explanations, workshop notes |
| Education Studio | styles/education-studio.md | Teaching notes, course modules, learning summaries, workshop guides |
Use when the card should read like a memo, report, brief, or evidence summary.
| Style | File | Suitable For |
|---|---|---|
| Paper Minimal | styles/paper-minimal.md | Product notes, task summaries, meeting notes, clean documentation |
| Lab Journal | styles/lab-journal.md | Research summaries, scientific explanations, medical content, academic papers |
| Academic Paper | styles/academic-paper.md | Research abstracts, paper summaries, literature reviews, evidence-heavy explanations |
| Policy Paper | styles/policy-paper.md | Governance notes, policy explainers, legal-adjacent summaries, internal rules |
| Navy Formal | styles/navy-formal.md | Investor decks, executive briefs, quarterly reports, corporate proposals |
| Japanese Minimal | styles/japanese-minimal.md | Brand narratives, cultural notes, quiet product essays, reflective announcements |
| Clinical Brief | styles/clinical-brief.md | Healthcare summaries, medical notes, patient education, clinical snapshots |
Use when the card should look operational, executive, or commercially credible.
| Style | File | Suitable For |
|---|---|---|
| Corporate Clean | styles/corporate-clean.md | Product launches, B2B briefs, executive summaries, formal reports, investor-facing materials |
| Pitch Deck VC | styles/pitch-deck-vc.md | Fundraising cards, market opportunity snapshots, startup traction summaries |
| Sales Room | styles/sales-room.md | Pipeline reviews, account snapshots, deal strategy notes, revenue briefings |
| Trust Center | styles/trust-center.md | Security notes, compliance summaries, audit updates, trust-facing reports |
| Partner Channel | styles/partner-channel.md | Partner briefs, alliance updates, channel motions, co-sell summaries |
Use when precision, systems language, or implementation detail needs to dominate.
| Style | File | Suitable For |
|---|---|---|
| Tech Blueprint | styles/tech-blueprint.md | Technical specs, system design docs, architecture summaries, engineering plans |
| Engineering Whiteprint | styles/engineering-whiteprint.md | Architecture notes, API briefs, implementation plans, technical whitepapers |
| Terminal Green | styles/terminal-green.md | Infra status cards, CLI guides, incident notes, retro-computing topics |
Use when the card should announce, signal urgency, or land a strong visual punch.
| Style | File | Suitable For |
|---|---|---|
| Bold Contrast | styles/bold-contrast.md | Data highlights, KPI dashboards, event announcements |
| News Broadcast | styles/news-broadcast.md | Flash updates, report callouts, media briefings, public announcements |
| Incident Desk | styles/incident-desk.md | Incident reviews, outage notes, postmortems, reliability updates |
| Neo Brutalism | styles/neo-brutalism.md | Bold campaign cards, manifesto-style summaries, startup launches, punchy statements |
| Swiss Grid | styles/swiss-grid.md | Structured editorial layouts, design-forward reports, typographic statements |
Use when the visual identity itself is part of the message.
| Style | File | Suitable For |
|---|---|---|
| Deep Night | styles/deep-night.md | Entertainment, creative showcases, product reveals, gaming content |
| Glassmorphism | styles/glassmorphism.md | Premium product reveals, feature spotlights, event invites, future-facing showcases |
Choose the content structure family first, then select the specific wireframe. Layouts remain style-agnostic.
Use when one thesis should dominate and supporting content should stay secondary.
| Layout | File | Best For |
|---|---|---|
| Hero Card | layouts/hero-card.md | Single topic with title + summary + one supporting panel |
| Quote Card | layouts/quote-card.md | Pull-quotes, mission statements, keynote quotes with attribution |
| Split Panel | layouts/split-panel.md | Two-column layouts: main content + sidebar or left-right comparison |
| Stacked Modules | layouts/stacked-modules.md | Multi-section vertical flow with mixed-weight blocks |
Use when numbers, status, or operating signals need to be scanned quickly.
| Layout | File | Best For |
|---|---|---|
| Metric Board | layouts/metric-board.md | KPI cards, performance dashboards, quarterly reviews, health checks, metric-driven announcements |
| Financial Snapshot | layouts/financial-snapshot.md | Revenue summaries, cash views, performance snapshots, unit economics |
| Sales Brief | layouts/sales-brief.md | Pipeline reviews, deal strategy, regional sales updates, revenue operations |
| Terminal Window | layouts/terminal-window.md | Status snapshots, command walkthroughs, incident updates, operational summaries |
Use when the reader needs stages, steps, or directional movement.
| Layout | File | Best For |
|---|---|---|
| Timeline Flow | layouts/timeline-flow.md | Sequential steps, milestones, process stages with vertical timeline |
| Station Workflow | layouts/station-workflow.md | Detailed workflow breakdowns where each step carries structured attributes (input/process/output/gate/duration) |
| Roadmap Board | layouts/roadmap-board.md | NOW / NEXT / LATER planning, strategic sequencing, phased rollouts |
| Staircase Progression | layouts/staircase-progression.md | Maturity curves, phased scope accumulation, stepped build-up stories |
| Funnel Stack | layouts/funnel-stack.md | Sales funnels, conversion flows, recruitment pipelines, decision narrowing |
| Incident Review | layouts/incident-review.md | Postmortems, outage reviews, reliability incidents, remediation snapshots |
Use when the card needs explicit trade-offs, prioritization, or side-by-side framing.
| Layout | File | Best For |
|---|---|---|
| Pros & Cons | layouts/pros-cons.md | Trade-off analysis, decision framing, risk vs upside, balanced evaluation |
| Quadrant Matrix | layouts/quadrant-matrix.md | Priority mapping, risk-return framing, portfolio views, 2x2 classification |
| Matrix Table | layouts/matrix-table.md | MxN classification grids with two meaningful axes and archetype-labeled cells |
| Comparison | layouts/comparison.md | Side-by-side contrast, option framing, before/after or A/B comparisons |
| Principle Grid | layouts/principle-grid.md | Numbered tenets paired with anti-pattern and application contrast per card |
Use when the card needs repeated modules, mixed-size tiles, or scan-friendly inventories.
| Layout | File | Best For |
|---|---|---|
| Bento Grid | layouts/bento-grid.md | Multi-topic overviews, feature showcases, mixed-size grid cells |
| Badge Grid | layouts/badge-grid.md | Feature lists, capability catalogs, skill inventories, benefit showcases |
| Checklist Board | layouts/checklist-board.md | Execution tracking, launch readiness, QA gates, operational checklists |
Use when structure, adjacency, or network relationships matter more than sequence.
| Layout | File | Best For |
|---|---|---|
| Architecture Map | layouts/architecture-map.md | Layered systems, platform overviews, service boundaries, technical blueprints |
| Layered Sidebar Map | layouts/layered-sidebar-map.md | Layered stack flanked by context rails carrying cross-cut threads, KPIs, or value-chain anchors |
| Radial Hub | layouts/radial-hub.md | Ecosystem overviews, core-plus-features, hub-and-spoke relationships |
Use when the card should read like a structured brief with explicit sections.
| Layout | File | Best For |
|---|---|---|
| Research Abstract | layouts/research-abstract.md | Abstract-summary cards, study findings, evidence synthesis, paper snapshots |
| Board Memo | layouts/board-memo.md | Executive updates, decision memos, quarterly board notes, leadership summaries |
| Policy Memo | layouts/policy-memo.md | Internal policy changes, governance decisions, process rules, guidance notes |
| Education Module | layouts/education-module.md | Lesson summaries, learning paths, workshop modules, teaching cards |
| Healthcare Summary | layouts/healthcare-summary.md | Clinical overviews, patient summaries, care snapshots, health education |
Use when ownership, control status, and mitigation detail must be explicit.
| Layout | File | Best For |
|---|---|---|
| Risk Register | layouts/risk-register.md | Risk tracking, mitigation planning, compliance reviews, program governance |
| Compliance Audit | layouts/compliance-audit.md | Audit summaries, control reviews, security posture checks, compliance tracking |
Use when the content is about people, teams, customers, or partner motion.
Primitive note: org-update, customer-story, and partner-brief now share a lightweight card-brief-* outer rhythm. Keep news-bulletin separate unless the structure is actually about relationship or stakeholder motion rather than headline cadence.
| Layout | File | Best For |
|---|---|---|
| News Bulletin | layouts/news-bulletin.md | Breaking updates, digest cards, status bulletins, press-style recaps |
| Org Update | layouts/org-update.md | Team changes, hiring updates, ownership shifts, leadership communications |
| Customer Story | layouts/customer-story.md | Case studies, before/after outcomes, customer wins, adoption narratives |
| Partner Brief | layouts/partner-brief.md | Alliance updates, co-sell notes, partner summaries, channel reviews |
card-doc-*, card-kpi-*, card-sequence-*, card-tile-*, card-map-*, card-compare-*, card-review-*, card-topic-*, and card-brief-*.quote-card, terminal-window, news-bulletin, and the strongest identity-driven style themes such as deep-night and glassmorphism.32px–48px from edges16px–24px1.1–1.3) and clear separation from body4px–6px thick rules as section dividers or accent bordersrgba(0,0,0,0.03) or style-specific tints) for secondary panels4% noise overlay for paper texture (see style templates).card-frame — outer container with max-width and padding.card — main card surface with background, padding, and optional noise overlay.card-meta — meta line (category, date, version) in small uppercase.card-title — main headline.card-subtitle — secondary headline or summary.card-bar — thick accent rule divider.card-body — body text paragraph.card-body.dropcap — first paragraph with drop cap initial letter (editorial opening).card-highlight — standalone short sentence (< 25 chars) with left accent border for key insights.card-grid — grid container; .card-grid-2 for two columns.card-panel — content panel with border-top accent.card-panel.heavy — heavier panel with more padding.card-panel.light — lighter panel with thinner border.card-panel-title — panel heading in small uppercase.card-panel-text — panel body text.card-item — titled content block (label + description pair).card-item-label — item title/label.card-tag — inline tag/badge.card-stat — oversized number/metric display.card-stat-label — label beneath a stat.card-divider — thin horizontal rule between sections.card-footer — bottom strip for source, attribution, or notes.card-endmark — end-of-content mark (∎) for editorial closureDrop cap (first paragraph only — creates editorial opening ceremony):
<p class="card-body dropcap">First paragraph text...</p>
Highlight quote (standalone insight, < 25 chars, with accent left border):
<p class="card-highlight">Key insight phrase</p>
Titled item (label + description pairs, for structured lists):
<div class="card-item">
<p class="card-item-label">Item Title</p>
<p class="card-panel-text">Item description text.</p>
</div>
Section divider:
<div class="card-divider"></div>
End mark (editorial closure, placed at content end):
<span class="card-endmark">∎</span>
```html code blocksCreate template-based infographics with space-separated key-value syntax (NOT YAML). Best for KPI dashboards, timelines, roadmaps, SWOT analysis, funnels, comparisons, and org charts with quick visual impact.
Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.
Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.
Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.
Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.
Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.