Infopage

Create document-style HTML pages. Utilitarian, readable, no decoration.

Style

Warm, readable, classic. Serif typography with subtle color accents.

Color Palette

Name Hex

cream #f5f3e8

black #222

red #db5439

pink rgba(220, 84, 57, 0.5)

gold #eebe6d

Valid Combinations

Background Text

cream black

red black

pink black

gold black

black cream

black gold

Use any combination, but:

Cards must all use the same combination
Page background must differ from card background

Base Template

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PAGE_TITLE</title> <script src="https://cdn.tailwindcss.com"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap'); :root { --cream: #f5f3e8; --black: #222; --red: #db5439; --pink: rgba(220, 84, 57, 0.5); --gold: #eebe6d; } </style> <script> tailwind.config = { theme: { fontFamily: { serif: ['"Libre Baskerville"', 'Georgia', 'serif'], }, extend: { colors: { cream: 'var(--cream)', black: 'var(--black)', red: 'var(--red)', pink: 'var(--pink)', gold: 'var(--gold)', } } } } </script> </head> <body class="bg-cream text-black font-serif min-h-screen"> <div class="max-w-6xl mx-auto px-8 py-16"> <header class="mb-12"> <h1 class="text-2xl font-bold uppercase tracking-wide">PAGE_TITLE</h1> <p class="text-sm mt-2 italic text-black/70">SUBTITLE</p> </header>

&#x3C;main>
  &#x3C;!-- Content -->
&#x3C;/main>

&#x3C;footer class="mt-16 pt-8 border-t border-black/20 text-sm text-black/60">
  Generated DATE
&#x3C;/footer>

</div> </body> </html>

Patterns

Section with Heading

<section> <h2 class="text-lg font-bold uppercase tracking-wide mb-4">Section Title</h2> <p class="leading-relaxed">Body text goes here.</p> </section>

Numbered List

<ol class="space-y-3 list-decimal list-inside"> <li><span class="font-semibold">Step one.</span> Description.</li> <li><span class="font-semibold">Step two.</span> Description.</li> </ol>

Bullet List

<ul class="space-y-2"> <li class="flex gap-3"> <span>*</span> <span>Item description</span> </li> </ul>

Divider

Key-Value

<dl class="space-y-2"> <div class="flex gap-4"> <dt class="font-semibold min-w-32">Label</dt> <dd>Value</dd> </div> </dl>

Table

<table class="w-full text-sm border-collapse"> <thead> <tr class="border-b-2 border-red"> <th class="text-left py-3 px-4 font-bold">Name</th> <th class="text-left py-3 px-4 font-bold">Value</th> </tr> </thead> <tbody> <tr class="border-b border-black/10"> <td class="py-3 px-4">Item</td> <td class="py-3 px-4 text-black/70">Details</td> </tr> </tbody> </table>

Cards (Preferred for Comparisons)

Cards show key facts at a glance. No verbose descriptions.

<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3"> <div class="bg-pink border-4 border-red p-5"> <div class="flex justify-between items-start mb-3"> <a href="https://example.com" class="font-bold uppercase text-sm tracking-wide hover:underline" target="_blank">App Name</a> <span class="text-xs font-bold bg-gold text-black px-2 py-1">92/100</span> </div> <p class="text-xl font-bold mb-3">$12/mo</p> <div class="flex flex-wrap gap-2 mb-3"> <span class="text-xs border border-black/30 px-2 py-1">Offline</span> <span class="text-xs border border-black/30 px-2 py-1">Local AI</span> </div> <dl class="text-sm space-y-1"> <div class="flex justify-between"> <dt class="text-black/70">Free Tier</dt> <dd class="font-semibold">Yes</dd> </div> <div class="flex justify-between"> <dt class="text-black/70">Trial Length</dt> <dd>2,000 words/week</dd> </div> </dl> </div> </div>

Card content:

Clickable title (links to website, no separate "Visit Website")
Rank/score badge
Price
Tags for key features
Key facts (free tier, trial length, etc.)
No description paragraphs - that's where AI waffle creeps in

Grid columns:

2-3 columns: md:grid-cols-2 lg:grid-cols-3
More columns for simpler cards: md:grid-cols-3 lg:grid-cols-4

Note/Callout

<div class="border-l-4 border-red pl-4 my-6 py-3 pr-4"> <p class="text-sm italic">Note: Important information here.</p> </div>

Tags/Badges

<span class="text-xs font-bold bg-gold text-black px-2 py-1">Featured</span> <span class="text-xs font-bold bg-red text-cream px-2 py-1">New</span> <span class="text-xs border border-black/30 px-2 py-1">Tag</span>

Links

File Naming

Default: index.html in current directory

If index.html exists:

Ask user before overwriting, OR
Create a subdirectory: ./topic-name/index.html

Never: Long descriptive filenames like compare-voice-apps-on-mac.html

Examples:

Good

./index.html ./voice-apps/index.html ~/Desktop/examples/index.html

Bad

./compare-voice-apps-on-mac.html ./my-keyboard-shortcuts-reference.html

Rules

Use only palette colors (cream, black, red, pink, gold)
Cards use same bg color, distinct from page bg
Border-4 for cards, not border-1
No rounded corners
Serif typography (Libre Baskerville)
Generous whitespace
Prefer card grids over lists for comparisons
Cards are minimal - name + one key fact, click to expand
No AI waffle - no "gold standard", "exceptionally accurate", just facts
Transitions only on user action (expand/collapse OK, no auto-animations)

TODO: Future Looks

Monospace/terminal variant
Sans-serif modern variant
Dark mode (white on black)

infopage

Safety Notice

Copy this and send it to your AI assistant to learn

Good

Bad

Source Transparency

Related Skills

infographic

visx

test-review

prototype