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>
<main>
<!-- Content -->
</main>
<footer class="mt-16 pt-8 border-t border-black/20 text-sm text-black/60">
Generated DATE
</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
<hr class="my-8 border-black">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
<a href="#" class="text-red hover:underline">Link text →</a>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.htmlRules
- 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)